diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 24aeda9..1002733 100644
--- a/build/webpack.base.conf.js
+++ b/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"
]
diff --git a/package.json b/package.json
index cc9c16a..5ac0e56 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/assets/img/img-kuang-l.png b/src/assets/img/img-kuang-l.png
index e43148e..6d123d2 100644
Binary files a/src/assets/img/img-kuang-l.png and b/src/assets/img/img-kuang-l.png differ
diff --git a/src/assets/img/img-kuang-m.png b/src/assets/img/img-kuang-m.png
index 6808678..4c5fcd8 100644
Binary files a/src/assets/img/img-kuang-m.png and b/src/assets/img/img-kuang-m.png differ
diff --git a/src/assets/img/img-kuang-s.png b/src/assets/img/img-kuang-s.png
index c7b8d2d..59fe727 100644
Binary files a/src/assets/img/img-kuang-s.png and b/src/assets/img/img-kuang-s.png differ
diff --git a/src/assets/img/img-title.png b/src/assets/img/img-title.png
index 0da2592..fbf0dd7 100644
Binary files a/src/assets/img/img-title.png and b/src/assets/img/img-title.png differ
diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index a945d05..5ff5090 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -1,3 +1,5 @@
+@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
diff --git a/src/components/index/digitalLargeScreen/components/echartsBar1.vue b/src/components/index/digitalLargeScreen/components/echartsBar1.vue
new file mode 100644
index 0000000..d8e0b50
--- /dev/null
+++ b/src/components/index/digitalLargeScreen/components/echartsBar1.vue
@@ -0,0 +1,198 @@
+<!--
+ 曲线图
+-->
+<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
diff --git a/src/components/index/digitalLargeScreen/components/echartsLine.vue b/src/components/index/digitalLargeScreen/components/echartsLine.vue
new file mode 100644
index 0000000..14a12c5
--- /dev/null
+++ b/src/components/index/digitalLargeScreen/components/echartsLine.vue
@@ -0,0 +1,211 @@
+<!--
+ 曲线图
+-->
+<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
diff --git a/src/components/index/digitalLargeScreen/components/echartspie.vue b/src/components/index/digitalLargeScreen/components/echartspie.vue
new file mode 100644
index 0000000..242c4ee
--- /dev/null
+++ b/src/components/index/digitalLargeScreen/components/echartspie.vue
@@ -0,0 +1,103 @@
+<!--
+ 曲线图
+-->
+<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
diff --git a/src/components/index/digitalLargeScreen/components/line.vue b/src/components/index/digitalLargeScreen/components/line.vue
new file mode 100644
index 0000000..fcced19
--- /dev/null
+++ b/src/components/index/digitalLargeScreen/components/line.vue
@@ -0,0 +1,67 @@
+<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
diff --git a/src/components/index/digitalLargeScreen/components/lineBox.vue b/src/components/index/digitalLargeScreen/components/lineBox.vue
new file mode 100644
index 0000000..26bf914
--- /dev/null
+++ b/src/components/index/digitalLargeScreen/components/lineBox.vue
@@ -0,0 +1,68 @@
+<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
diff --git a/src/components/index/digitalLargeScreen/digitalLargeScreen.less b/src/components/index/digitalLargeScreen/digitalLargeScreen.less
index c48fb3b..e37575f 100644
--- a/src/components/index/digitalLargeScreen/digitalLargeScreen.less
+++ b/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;
diff --git a/src/components/index/digitalLargeScreen/digitalLargeScreen.ts b/src/components/index/digitalLargeScreen/digitalLargeScreen.ts
index 0fed2eb..5042526 100644
--- a/src/components/index/digitalLargeScreen/digitalLargeScreen.ts
+++ b/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('请输入新的值哇哈哈哈');
diff --git a/src/components/index/digitalLargeScreen/digitalLargeScreen.vue b/src/components/index/digitalLargeScreen/digitalLargeScreen.vue
index 466dfb0..38c4441 100644
--- a/src/components/index/digitalLargeScreen/digitalLargeScreen.vue
+++ b/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>
diff --git a/src/utils.ts b/src/utils.ts
index a37318f..ad82e2c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -34,6 +34,11 @@ const utils={
return true;
}
},
+ $getPx(value){
+ let res= value;
+ res = res*window.innerWidth/1920;
+ return res;
+ },
/**
* [时间戳处理]
* @Author 白富友