Skip to content

F
Front_end_project-template
Commit 66a9db49 by 白狗汪汪汪
Options

line等组件

parent 3c8c0af7
Showing with 881 additions and 14 deletions
build/webpack.base.conf.js
......@@ -13,7 +13,7 @@ function resolve (dir) {
module.exports = {
entry: {
app: './src/main.ts',
app: ["babel-polyfill", "./src/main.ts"],
vendor: [
"lodash"
]
......
package.json
......@@ -16,14 +16,15 @@
"vue": "eslint --ext .vue src"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9",
"lodash": "^4.17.4",
"vue": "^2.5.2",
"axios": "^0.18.0",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^6.0.0",
"vue-router": "^3.0.1",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9",
"vuex": "^3.0.1",
"vuex-class": "^0.3.0"
},
......
src/assets/img/img-kuang-l.png
src/assets/img/img-kuang-l.png

953 Bytes | W: | H:

src/assets/img/img-kuang-l.png

807 Bytes | W: | H:

src/assets/img/img-kuang-l.png
src/assets/img/img-kuang-l.png
src/assets/img/img-kuang-l.png
src/assets/img/img-kuang-l.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/img-kuang-m.png
src/assets/img/img-kuang-m.png

691 Bytes | W: | H:

src/assets/img/img-kuang-m.png

642 Bytes | W: | H:

src/assets/img/img-kuang-m.png
src/assets/img/img-kuang-m.png
src/assets/img/img-kuang-m.png
src/assets/img/img-kuang-m.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/img-kuang-s.png
src/assets/img/img-kuang-s.png

688 Bytes | W: | H:

src/assets/img/img-kuang-s.png

600 Bytes | W: | H:

src/assets/img/img-kuang-s.png
src/assets/img/img-kuang-s.png
src/assets/img/img-kuang-s.png
src/assets/img/img-kuang-s.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/img-title.png
src/assets/img/img-title.png

384 KB | W: | H:

src/assets/img/img-title.png

384 KB | W: | H:

src/assets/img/img-title.png
src/assets/img/img-title.png
src/assets/img/img-title.png
src/assets/img/img-title.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/less/common.less
@colorGreen:rgba(11, 255, 255, 1);
@colorGray:rgba(198, 226, 245, 1);
// 公共less函数等
// 获取宽度百分比
......@@ -33,5 +35,28 @@
// padding-left
.pTop(@pTop){
@myvar: ((@pTop/1080)*100);
padding-top: ~"@{myvar}vw";
padding-top: ~"@{myvar}vh";
}
// padding-left
.mTop(@mTop){
@myvar: ((@mTop/1080)*100);
margin-top: ~"@{myvar}vh";
}
// padding-left
.mLeft(@mLeft){
@myvar: ((@mLeft/1920)*100);
margin-left: ~"@{myvar}vw";
}
// padding-left
.mRight(@mRight){
@myvar: ((@mRight/1920)*100);
margin-right: ~"@{myvar}vw";
}
.autoTop(@autoTop){
@myvar: ((@autoTop/1080)*100);
top: ~"@{myvar}vh";
}
.autoRight(@autoRight){
@myvar: ((@autoRight/1920)*100);
right: ~"@{myvar}vw";
}
\ No newline at end of file
src/components/index/digitalLargeScreen/components/echartsBar1.vue 0 → 100644
<!--
曲线图
-->
<template>
<div class="eBoxs">
<div class="echart-main" id="velicheEcharts2" v-show="this.datas.length>0">图表</div>
<div class="noData" v-show="this.datas.length<=0">
没有数据
</div>
</div>
</template>
<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/legend');
export default {
props: ['datasX','datas',],
data() {
return {
myEchart: {},
// datasX:['2018-5','2018-6','2018-7','2018-8','2018-9','2018-10','2018-11'],
// datas:[11,8,6,9,12,10,5],
}
},
methods:{
resize(){
this.myEchart.resize();
},
getChartData(){
let unit ='';
let minInterval =1;
let name = '';
let grid = {
left: "4.7%",
right: "4.7%",
bottom: "8.57%",
top:"11.428%",
containLabel: true
};
let legend ={show:false};
let series = [];
// 颜色转成 rgb 然后搞成rgba
let objs ={
name:name,
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: 'rgba(62, 40, 211, 1)'},
{offset: 1, color: 'rgba(1, 130, 223, 1)'}
]
)
},
emphasis: {
show:false,
}
},
label: {
normal: {
show: true,
color:'rgba(1, 130, 223, 1)',
fontSize:$utils.$getPx(12),
position: 'right'
}
},
barWidth:'45%',
data: this.datas[0],
};
let objs2= { // For shadow
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderColor:'rgba(29, 63, 122, 1)',
borderWidth:$utils.$getPx(1),
}
},
barGap:'-100%',
barWidth:'45%',
data: this.datas[1],
animation: false
};
series.push(objs);
series.push(objs2);
let echartOption = {
title:{
text:'',
x:'center',
y:'6%',
textStyle: {// 主标题文字样式
fontSize: $utils.$getPx(18),
fontWeight:'bold',
color: '#000'
},
},
color: ['rgba(250, 181, 25, 1)'],
legend:legend,
tooltip: {
show:false
},
grid: grid,
yAxis: {
type: 'category',
data: this.datasX,
boundaryGap:true, //两边留白
axisLine:{
show:true,
lineStyle:{
color:"#073E6D"
}
},
inverse:true,
//刻度
axisTick:{
show:false
},
axisLabel:{
color:"#A0AEC9",
fontSize:$utils.$getPx(12),
},
axisPointer:{
shadowStyle:{
color:'rgba(0,0,0,0)' //区域背景色
}
},
},
xAxis:
{
type: 'value',
//纵坐标线显示/隐藏
axisLine:{
show:false,
lineStyle:{
color:'#073E6D'
}
},
splitLine:{
show:false
},
axisLabel:{
show:false,
color:"#A0AEC9",
fontSize:$utils.$getPx(10),
},
minInterval:minInterval,
//刻度线显示/隐藏
axisTick:{
show:false
},
},
series: series,
};
let echart = document.getElementById('velicheEcharts2');
this.myEchart = echarts.init(echart);
this.myEchart.setOption(echartOption);
}
},
mounted() {
this.getChartData();
},
watch: {
echartOption:function(newQuestion, oldQuestion) {
this.myEchart.setOption(newQuestion, true)
this.myEchart.resize();
}
}
}
</script>
<style lang="less" scoped>
.eBoxs{
width: 100%;
height: 100%;
.echart-main{
width: 100%;
height: 100%;
}
.noData{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
\ No newline at end of file
src/components/index/digitalLargeScreen/components/echartsLine.vue 0 → 100644
<!--
曲线图
-->
<template>
<div class="eBoxs">
<div class="echart-main" id="velicheEcharts1" v-show="this.datas.length>0">图表</div>
<div class="noData" v-show="this.datas.length<=0">
没有数据
</div>
</div>
</template>
<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/legend');
export default {
props: ['datasX','datas',],
data() {
return {
myEchart: {},
// datasX:['2018-5','2018-6','2018-7','2018-8','2018-9','2018-10','2018-11'],
// datas:[11,8,6,9,12,10,5],
}
},
methods:{
resize(){
this.myEchart.resize();
},
getChartData(){
let unit ='';
let minInterval =1;
let name = [''];
let grid = {
left: "4.235%",
right: "4.23%",
bottom: "6.33%",
top:"8.42%",
containLabel: true
};
let legend ={show:false};
let series = [];
this.datas.map((v,i)=>{
// 颜色转成 rgb 然后搞成rgba
let objs ={
name:name[i],
type: 'line',
smooth:true,
showSymbol:true,
itemStyle: {
normal: {
show:false
}
},
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color:'rgba(250, 181, 25, 0.3)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(250, 181, 25, 0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
data: v,
};
series.push(objs);
});
let echartOption = {
title:{
text:'',
x:'center',
y:'6%',
textStyle: {// 主标题文字样式
fontSize: $utils.$getPx(18),
fontWeight:'bold',
color: '#000'
},
},
color: ['rgba(250, 181, 25, 1)'],
legend:legend,
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
// formatter: ,
padding:[10,12,10,10],
backgroundColor :"rgba(0,0,0,.5)",
textStyle:{
fontSize:10,
},
},
grid: grid,
xAxis: {
type: 'category',
data: this.datasX,
boundaryGap:false, //两边留白
axisTick: {
alignWithLabel: true
},
axisLine:{
show:true,
lineStyle:{
color:"#073E6D"
}
},
//刻度
axisTick:{
show:false
},
axisLabel:{
color:"#A0AEC9",
fontSize:$utils.$getPx(10),
formatter:function(value, index){
var res = value;
var attrs = value.split('至');
if(attrs.length>1){
res = attrs[0]+'\n'+'至'+attrs[1];
}
return res;
}
},
axisPointer:{
shadowStyle:{
color:'rgba(0,0,0,0)' //区域背景色
}
},
splitArea:{
show:true,
areaStyle:{
color:['rgba(255,255,255,0.03)','rgba(255,255,255,0)']
}
}
},
yAxis:
{
type: 'value',
//纵坐标线显示/隐藏
axisLine:{
show:true,
lineStyle:{
color:'#073E6D'
}
},
axisLabel:{
color:"#A0AEC9",
fontSize:$utils.$getPx(10),
},
minInterval:minInterval,
//刻度线显示/隐藏
axisTick:{
show:false
},
//区分线
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0.15)',
type:'dashed'
}
}
},
series: series,
};
let echart = document.getElementById('velicheEcharts1');
this.myEchart = echarts.init(echart);
this.myEchart.setOption(echartOption);
}
},
mounted() {
this.getChartData();
},
watch: {
echartOption:function(newQuestion, oldQuestion) {
this.myEchart.setOption(newQuestion, true)
this.myEchart.resize();
}
}
}
</script>
<style lang="less" scoped>
.eBoxs{
width: 100%;
height: 100%;
.echart-main{
width: 100%;
height: 100%;
}
.noData{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
\ No newline at end of file
src/components/index/digitalLargeScreen/components/echartspie.vue 0 → 100644
<!--
曲线图
-->
<template>
<div class="eBoxs">
<div class="echart-main" id="velicheEcharts3" v-show="this.datas.length>0">图表</div>
<div class="noData" v-show="this.datas.length<=0">
没有数据
</div>
</div>
</template>
<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/legend');
export default {
props: ['datas'],
data() {
return {
myEchart: {},
// datasX:['2018-5','2018-6','2018-7','2018-8','2018-9','2018-10','2018-11'],
// datas:[11,8,6,9,12,10,5],
}
},
methods:{
resize(){
this.myEchart.resize();
},
getChartData(){
let unit ='';
let minInterval =1;
let name = '';
let legend ={show:false};
let echartOption = {
color: ['rgba(53, 168, 255, 1)','rgba(140, 112, 248, 1)','rgba(250, 144, 34, 1)','rgba(247, 100, 100, 1)','rgba(7, 212, 255, 1)'],
legend:legend,
tooltip: {
show:false
},
series: {
name:name,
type: 'pie',
center: ['37.21%', '56.13%'],
radius:['21','71%'],
label:{
show:false
},
labelLine:{
show:false
},
hoverOffset: $utils.$getPx(12),
selectedOffset:$utils.$getPx(12),
roseType: 'radius',
itemStyle:{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: $utils.$getPx(12)
},
data: this.datas,
},
};
let echart = document.getElementById('velicheEcharts3');
this.myEchart = echarts.init(echart);
this.myEchart.setOption(echartOption);
}
},
mounted() {
this.getChartData();
},
watch: {
echartOption:function(newQuestion, oldQuestion) {
this.myEchart.setOption(newQuestion, true)
this.myEchart.resize();
}
}
}
</script>
<style lang="less" scoped>
.eBoxs{
width: 100%;
height: 100%;
.echart-main{
width: 100%;
height: 100%;
}
.noData{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
\ No newline at end of file
src/components/index/digitalLargeScreen/components/line.vue 0 → 100644
<template>
<div class="boxs">
<div class="line">
<div class="lineH"></div>
<span>
<div class="lineL"></div>
</span>
<div class="lineH"></div>
</div>
<div class="boxCon">
<slot>
</slot>
</div>
<div class="line">
<div class="lineH"></div>
<span>
<div class="lineL"></div>
</span>
<div class="lineH"></div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
})
export default class Lines extends Vue {
mounted () {
}
}
</script>
<style scoped lang="less">
@import url("../../../../assets/less/common.less");
.boxs{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.line{
.autoHei(3);
display: flex;
align-items: center;
.lineH{
height:100%;
.autoWid(8);
background: RGBA(3, 214, 234, 1);
}
span{
flex:1;
.lineL{
width: 100%;
.autoHei(1);
min-height: 1px;
background: RGBA(3, 214, 234, 1);
}
}
}
.boxCon{
flex: 1;
background:linear-gradient(180deg,rgba(94,163,255,0.1) 0%,rgba(0,53,120,0.1) 100%);
}
}
</style>
\ No newline at end of file
src/components/index/digitalLargeScreen/components/lineBox.vue 0 → 100644
<template>
<div class="lineBoxs">
<Lines>
<ul>
<li v-for="(v,i) in lists">
<p v-text="v.val"></p>
<span v-text="v.tit"></span>
</li>
</ul>
</Lines>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Lines from "./line.vue";
@Component({
props:[
'lists'
],
components:{
Lines
}
})
export default class LineBox extends Vue {
mounted () {
}
}
</script>
<style scoped lang="less">
@import url("../../../../assets/less/common.less");
.lineBoxs{
.autoHei(64);
width: 100%;
ul{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
.pLeft(10);
.pRight(10);
li{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
p{
.autoFont(18);
.autoLineH(24);
color: @colorGreen;
}
span{
display: block;
.autoHei(18);
.mTop(6);
.autoLineH(14);
.autoFont(10);
color: @colorGray;
}
}
}
}
</style>
\ No newline at end of file
src/components/index/digitalLargeScreen/digitalLargeScreen.less
......@@ -3,6 +3,44 @@
width: 100%;
.autoHei(294);
}
.Hei324{
.autoHei(324);
}
.Hei321{
.autoHei(321);
}
.kuangM{
border: 8px solid transparent; //这儿切的16 是实际像素
border-image:url(../../../assets/img/img-kuang-m.png) 16 stretch;
-moz-border-image:url(../../../assets/img/img-kuang-m.png) 16 stretch; /* 老的 Firefox */
-webkit-border-image:url(../../../assets/img/img-kuang-m.png) 16 stretch; /* Safari 和 Chrome */
-o-border-image:url(../../../assets/img/img-kuang-m.png) 16 stretch; /* Opera */
}
.kuangTit{
.autoHei(38);
.autoWid(404);
margin:0 auto;
.mTop(22);
display: flex;
align-items: center;
background: rgba(0, 81, 119, 0.2);
span{
flex: 1;
.autoFont(12);
.pLeft(16);
color: @colorGray;
.val{
.autoFont(16);
color: @colorGreen;
.pLeft(12);
}
&.util{
text-align: right;
.pRight(12);
}
}
}
.bigScreen{
width: 100%;
......@@ -28,7 +66,74 @@
.pLeft(30);
.pTop(25);
height: 100%;
background: #ccc;
.echartBoxs{
width: 100%;
.autoHei(237);
}
.IllegalTit{
.autoWid(388);
.autoHei(64);
.mLeft(20);
.mTop(16);
}
.IllegalEchartBoxs{
width: 100%
.autoHei(175);
}
// 事故分析
.analysisLeft{
.autoWid(158);
height: 100%;
float: left;
.pTop(65);
.pLeft(10);
.analysisLineBox2{
.mTop(13);
overflow: hidden;
}
}
.analysisRight{
height: 100%;
.autoWid(266);
float: right;
position: relative;
.hoverBoxs{
position: absolute;
.autoRight(10);
.autoTop(10);
.autoWid(92);
.autoHei(58);
.kuangM();
background: rgba(0,81,119,0.2);
text-align: center;
p{
.autoFont(12);
color:@colorGray;
.autoLineH(16);
.mTop(4);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span{
display: inline-block;
.autoFont(16);
color:@colorGreen;
.autoLineH(21);
.mTop(3);
}
}
.asEchartBoxs{
.autoHei(212);
width: 100%;
}
.analysisTit{
.autoFont(12);
color:rgba(198,226,245,1);
.autoLineH(16);
.pLeft(36);
}
}
}
.center{
flex: 1;
......
src/components/index/digitalLargeScreen/digitalLargeScreen.ts
......@@ -11,11 +11,30 @@ import { State,
const test = namespace('test');
//
import Lines from './components/line.vue';
// 业务数量那儿的盒子
import Box from './components/box.vue';
// 业务数量那儿的折线图
import EchartLine from "./components/echartsLine.vue";
// 交通违法那儿的盒子
import LineBox from './components/LineBox.vue';
// 业务数量那儿的柱状图
import EchartsBar1 from "./components/echartsBar1.vue";
// 交通事故那儿的饼图
import Echartspie from "./components/echartspie.vue";
@Component({
components:{
Box
Lines,
Box,
EchartLine,
LineBox,
EchartsBar1,
Echartspie
}
})
export default class Test extends Vue {
......@@ -23,6 +42,41 @@ export default class Test extends Vue {
@test.Action('changeInfos') changeInfos;
user_Info:string='';
line1DatasX=['01.06至01.12','01.13至01.19','01.20至01.26','01.27至02.02','02.03至02.09','02.10至02.16','本周'];
line1Datas=[[3100,2800,2600,3900,2200,3000,2500]];
// 交通违法信息列表
IllegalLists:any[] = [
{id:'number',tit:'违法数量',val:'5347'},
{id:'total',tit:'扣分总数',val:'1349'},
{id:'prices',tit:'罚没收入',val:'849'},
];
bar1DatasX:string[]=['闯红灯','超速','酒驾','追尾','其他'];
bar1Datas=[[121121,91121,87643,67954,62457],[180000,180000,180000,180000,180000]];
// 事故分析
analysisLists1:any[] = [
{id:'totals',tit:'交通事故总量',val:'3,325'},
];
analysisLists2:any[] = [
{id:'easy',tit:'简易事故',val:'1,349'},
{id:'normal',tit:'一般事故',val:'849'},
];
//
pieData:any[]=[
{value:121121, name:'闯红灯'},
{value:91121, name:'超速'},
{value:87643, name:'酒驾'},
{value:67954, name:'追尾'},
{value:62457, name:'其他'}
];
analysisHover={
value:'20%',
name:'违法变更车道'
};
changeInfo() {
if(this.user_Info===''){
this.$message('请输入新的值哇哈哈哈');
......
src/components/index/digitalLargeScreen/digitalLargeScreen.vue
......@@ -10,25 +10,49 @@
</header>
<div class="content">
<div class="left">
<div class="titBoxs">
<div class="titBoxs Hei324">
<Box tit="机动车业务分析">
<div class="kuangM kuangTit">
<span>业务数量<span class="val">435,349</span></span>
<span class="util">单位（个）</span>
</div>
<div class="echartBoxs">
<EchartLine :datasX="line1DatasX" :datas="line1Datas"></EchartLine>
</div>
</Box>
</div>
<div class="titBoxs">
<Box tit="交通违法分析">
<div class="IllegalTit">
<LineBox :lists="IllegalLists"></LineBox>
</div>
<div class="IllegalEchartBoxs">
<EchartsBar1 :datasX="bar1DatasX" :datas="bar1Datas"></EchartsBar1>
</div>
</Box>
</div>
<div class="titBoxs">
<div class="titBoxs Hei321">
<Box tit="交通事故分析">
<div class="analysisLeft">
<LineBox :lists="analysisLists1"></LineBox>
<LineBox class="analysisLineBox2" :lists="analysisLists2"></LineBox>
</div>
<div class="analysisRight">
<div class="hoverBoxs">
<p v-text="analysisHover.name"></p>
<span v-text="analysisHover.value"></span>
</div>
<div class="asEchartBoxs">
<Echartspie :datas="pieData"></Echartspie>
</div>
<div class="analysisTit">事故原因/事故量 TOP5</div>
</div>
</Box>
</div>
</div>
<div class="center"></div>
<div class="right">
<div class="titBoxs">
<div class="titBoxs Hei324">
<Box tit="驾驶员业务分析">
</Box>
......@@ -38,7 +62,7 @@
</Box>
</div>
<div class="titBoxs">
<div class="titBoxs Hei321">
<Box tit="规费收入TOP5">
</Box>
......
src/utils.ts
......@@ -34,6 +34,11 @@ const utils={
return true;
}
},
$getPx(value){
let res= value;
res = res*window.innerWidth/1920;
return res;
},
/**
* [时间戳处理]
* @Author 白富友
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment