大屏发布

src/main.js

@@ -26,8 +26,8 @@ import Pagination from "@/components/Pagination";
 import RightToolbar from "@/components/RightToolbar"
 
 // 将自动注册所有组件为全局组件
-import dataV from '@jiaminghi/data-view'
+// import dataV from '@jiaminghi/data-view'
-Vue.use(dataV)
+// Vue.use(dataV)
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

src/views/chart/components/leftTop.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="content-box">
-    <div><span>电池总数</span><span>748</span></div>
-    <div><span>电池白名单数</span><span>334</span></div>
-  </div>
-</template>
-<script>
-export default {};
-</script>
-<style lang="scss" scoped>
-.content-box {
-  // padding: 10px;
-  padding: 10px 30px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  height: calc(100% - 20px);
-  div{
-    // border: 1px solid #f00;
-    // box-shadow: 0px 0px 10px 2px rgb(60,172,238) inset;
-    background-image: url("../../../assets/image/ltbg.png");
-    background-size: 100% 100%;
-    padding: 10px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    >span:nth-child(2){
-      font-weight:700;
-      font-size: 24px;
-      color: #ff4c4c;
-    }
-  }
-  >div:nth-child(2) span:nth-child(2){
-    color: #35ffff;
-  }
-}
-</style>

src/views/chart/custom_map_config.json

@@ -0,0 +1,341 @@
+[
+  {
+    "featureType": "land",
+    "elementType": "all",
+    "stylers": {
+      "visibility": "on",
+      "color": "#0b215c"
+    }
+  },
+  {
+    "featureType": "water",
+    "elementType": "all",
+    "stylers": {
+      "visibility": "on",
+      "color": "#c4d7f500"
+    }
+  },
+  {
+    "featureType": "green",
+    "elementType": "all",
+    "stylers": {
+      "color": "#dcf2d5ff",
+      "lightness": -1
+    }
+  },
+  {
+    "featureType": "education",
+    "elementType": "all",
+    "stylers": {
+      "color": "#d5a6bdff",
+      "lightness": -1
+    }
+  },
+  {
+    "featureType": "land",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#071848"
+    }
+  },
+  {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "scenicspotsway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "universityway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "vacationway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "railway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subway",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "highwaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "highwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "nationalwaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "provincialwaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "provincialwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subwaylabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subwaylabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "village",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "arterial",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "arterial",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "arterial",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "tertiaryway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "tertiaryway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "tertiaryway",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "fourlevelway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "fourlevelway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "fourlevelway",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#19f1ecff"
+    }
+  },
+  {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#ffffff00"
+    }
+  },
+  {
+    "featureType": "districtlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+},
+{
+  "featureType": "town",
+  "elementType": "labels",
+  "stylers": {
+      "visibility": "off"
+  }
+}, {
+  "featureType": "town",
+  "elementType": "labels.icon",
+  "stylers": {
+      "visibility": "off"
+  }
+}
+]

src/views/chart/index.vue

@@ -7,51 +7,72 @@
         <!-- <div class="des">锐能在线设备：{{ devCount }}</div> -->
         <div ref="bmap" id="main" style="width: 100%;height:65%;"></div>
         <div class="my_cenbottom">
-          <div>产品总数：<span style="color:#4ee7e6">10</span></div>
+          <div>
-          <div>产品总数：<span style="color:#ff4c4c">10</span></div>
+            产品总数：<span style="color:#4ee7e6">{{ productNum }}</span>
-          <div>产品总数：<span style="color:#d96dd6">10</span></div>
+          </div>
+          <div>
+            项目总数：<span style="color:#ff4c4c">{{ projectNum }}</span>
+          </div>
+          <div>
+            客户总数：<span style="color:#d96dd6">{{ userNum }}</span>
+          </div>
         </div>
         <div class="my_cenbottom">
-          <div>产品总数：<span style="color:#41dd83">10</span></div>
+          <div>
-          <div>产品总数：<span style="color:#edcc1a">10</span></div>
+            固件总数：<span style="color:#41dd83">{{ updateFileNum }}</span>
-          <div>产品总数：<span style="color:#ff4c4c">10</span></div>
+          </div>
+          <div>
+            派单总数：<span style="color:#edcc1a">{{ orderNum }}</span>
+          </div>
+          <div>
+            告警总数：<span style="color:#ff4c4c">{{ warnNum }}</span>
+          </div>
         </div>
       </div>
       <div class="left column">
         <boxBoardBody class="flex">
           <boxBoardTit slot="tit" tit="总览"></boxBoardTit>
-          <leftTop></leftTop>
+          <div class="content-box">
+            <div>
+              <span>电池总数</span><span>{{ deviceNum }}</span>
+            </div>
+            <div>
+              <span>电池白名单数</span><span>{{ whiteNum }}</span>
+            </div>
+          </div>
         </boxBoardBody>
         <div style="height:20px"></div>
         <boxBoardBody class="flex">
-          <boxBoardTit slot="tit" tit="工单总览"></boxBoardTit>
+          <boxBoardTit slot="tit" tit="派单总览"></boxBoardTit>
           <div class="my_context">
             <div class="my_item">
               <el-progress
                 type="circle"
-                :percentage="33"
+                :percentage="num1"
                 :stroke-width="13"
                 color="#13cf5e"
                 stroke-linecap="square"
               ></el-progress>
-              <span>代派单：150</span>
+              <span>处理中：{{ handleNum }}</span>
             </div>
             <div class="my_item">
               <el-progress
                 type="circle"
-                :percentage="22"
+                :percentage="num2"
                 :stroke-width="13"
+                stroke-linecap="square"
               ></el-progress>
-              <span>处理中：100</span>
+              <span>审批中：{{ approveNum }}</span>
             </div>
             <div class="my_item">
               <el-progress
                 type="circle"
-                :percentage="44"
+                :percentage="num3"
                 :stroke-width="13"
                 color="#ff9494"
+                stroke-linecap="square"
               ></el-progress>
-              <span>已关闭：200</span>
+              <span>已完成：{{ finishNum }}</span>
             </div>
           </div>
         </boxBoardBody>
@@ -95,14 +116,15 @@ import resize from '../dashboard/mixins/resize';
 
 import boxBoardTit from './boxBoardTit';
 import boxBoardBody from './boxBoardBody';
-import leftTop from './components/leftTop';
 
 import { parseTime } from '@/utils/ruoyi';
 
+import myStyleJson from './custom_map_config.json';
+
 export default {
   name: 'Chart',
   mixins: [resize],
-  components: { boxBoardTit, boxBoardBody, leftTop },
+  components: { boxBoardTit, boxBoardBody },
   data() {
     return {
       bottomChart: null,
@@ -123,21 +145,53 @@ export default {
         '2': '待回单',
         '3': '已回单'
       },
-      myStyleJson: [
+      myStyleJson,
-        {
+      rnNum: 0,
-          featureType: 'land',
+      ttNum: 0,
-          elementType: 'geometry',
+      deviceNum: 0,
-          stylers: {
+      whiteNum: 0,
-            color: '#f5f6f7ff'
+      handleNum: 0,
-          }
+      finishNum: 0,
-        }
+      approveNum: 0,
-      ]
+      projectNum: 0,
+      productNum: 0,
+      userNum: 0,
+      updateFileNum: 0,
+      orderNum: 0,
+      warnNum: 0
     };
   },
 
   computed: {
     time() {
       return parseTime(this.date, '{h} : {i} : {s}');
+    },
+    num1() {
+      return (
+        (
+          (this.handleNum /
+            (this.handleNum + this.approveNum + this.finishNum)) *
+          100
+        ).toFixed(2) - 0 || 0
+      );
+    },
+    num2() {
+      return (
+        (
+          (this.approveNum /
+            (this.handleNum + this.approveNum + this.finishNum)) *
+          100
+        ).toFixed(2) - 0 || 0
+      );
+    },
+    num3() {
+      return (
+        (
+          (this.finishNum /
+            (this.handleNum + this.approveNum + this.finishNum)) *
+          100
+        ).toFixed(2) - 0 || 0
+      );
     }
   },
   mounted() {
@@ -149,7 +203,30 @@ export default {
       timer = null;
     });
 
-    this.getData().then(({ code, msg, list, work, activity, devCount }) => {
+    this.getData().then(
+      ({
+        code,
+        msg,
+        list,
+        work,
+        activity,
+        devCount,
+        deviceNum,
+        whiteNum,
+        handleNum,
+        finishNum,
+        approveNum,
+        deviceMonthNum,
+        rnNum,
+        ttNum,
+        projectNum,
+        productNum,
+        userNum,
+        updateFileNum,
+        orderNum,
+        warnNum,
+        warnMonthNum
+      }) => {
         if (200 == code) {
           let spotList = [];
           list.map(v => {
@@ -161,20 +238,39 @@ export default {
             });
           });
 
-        this.spotList = spotList;
+          // this.spotList = spotList;
+          this.spotList = [];
           this.devCount = devCount;
 
+          this.deviceNum = deviceNum;
+          this.whiteNum = whiteNum;
+
+          this.handleNum = handleNum;
+          this.finishNum = finishNum;
+          this.approveNum = approveNum;
+
+          this.rnNum = rnNum;
+          this.ttNum = ttNum;
+
+          (this.projectNum = projectNum),
+            (this.productNum = productNum),
+            (this.userNum = userNum),
+            (this.updateFileNum = updateFileNum),
+            (this.orderNum = orderNum),
+            (this.warnNum = warnNum);
+
           this.$nextTick(() => {
             this.initBmpChart();
             // this.initTicketAllChart(work);
             // this.initAlarmAllChart(activity);
             this.initCenterChart(activity);
-          this.initBottomChart();
+            this.initBottomChart(deviceMonthNum);
             this.initTopChart();
-          this.initAlarmTrendChart();
+            this.initAlarmTrendChart(warnMonthNum);
           });
         }
-    });
+      }
+    );
 
     // this.getTicketData().then(({ code, msg, day, month }) => {
     //   if (200 == code) {
@@ -193,12 +289,12 @@ export default {
         method: 'get'
       });
     },
-    getTicketData() {
+    // getTicketData() {
-      return request({
+    //   return request({
-        url: '/system/warning/warningList',
+    //     url: '/system/warning/warningList',
-        method: 'get'
+    //     method: 'get'
-      });
+    //   });
-    },
+    // },
     initTicketAllChart(ticketAll) {
       if (!this.ticketAllChart) {
         this.ticketAllChart = echarts.init(this.$refs.ticketAll);
@@ -254,25 +350,20 @@ export default {
       };
       this.ticketAllChart.setOption(option);
     },
-    initAlarmTrendChart() {
+    initAlarmTrendChart(monthNum) {
       this.alarmTrendChart = echarts.init(this.$refs.alarmTrend);
+      let months = [];
+      let nums = [];
+      monthNum.map(item => {
+        // item.month += '月';
+        months.push(item.month);
+        nums.push(item.num);
+      });
       let option = {
         xAxis: {
+          name: '数量',
           type: 'category',
-          data: [
+          data: months,
-            '01月',
-            '02月',
-            '03月',
-            '04月',
-            '05月',
-            '06月',
-            '07月',
-            '08月',
-            '09月',
-            '10月',
-            '11月',
-            '12月'
-          ],
           axisLine: {
             //这是x轴文字颜色
             lineStyle: {
@@ -281,6 +372,7 @@ export default {
           }
         },
         yAxis: {
+          name: '月份',
           type: 'value',
           axisLine: {
             //这是x轴文字颜色
@@ -291,20 +383,7 @@ export default {
         },
         series: [
           {
-            data: [
+            data: nums,
-              820,
-              932,
-              901,
-              934,
-              1290,
-              1330,
-              1320,
-              820,
-              932,
-              901,
-              934,
-              1290
-            ],
             // 线的颜色
             lineStyle: {
               color: '#06ccf9'
@@ -471,7 +550,7 @@ export default {
         }
       }
       console.log(snapAlarmAll);
-      debugger
+      debugger;
       let level4 = '四级告警 ' + snapAlarmAll[3];
       let level3 = '三级告警 ' + snapAlarmAll[2];
       let level2 = '二级告警 ' + snapAlarmAll[1];
@@ -566,25 +645,20 @@ export default {
         series: series
       });
     },
-    initBottomChart() {
+    initBottomChart(monthNum) {
       this.bottomChart = echarts.init(this.$refs.bottomLeftChart);
+      let months = [];
+      let nums = [];
+      monthNum.map(item => {
+        // item.month += '月';
+        months.push(item.month);
+        nums.push(item.num);
+      });
       let option = {
         xAxis: {
+          name: '数量',
           type: 'category',
-          data: [
+          data: months,
-            '01月',
-            '02月',
-            '03月',
-            '04月',
-            '05月',
-            '06月',
-            '07月',
-            '08月',
-            '09月',
-            '10月',
-            '11月',
-            '12月'
-          ],
           axisLine: {
             //这是x轴文字颜色
             lineStyle: {
@@ -593,6 +667,7 @@ export default {
           }
         },
         yAxis: {
+          name: '月份',
           type: 'value',
           axisLine: {
             //这是y轴文字颜色
@@ -615,7 +690,7 @@ export default {
           {
             type: 'bar',
             barWidth: 20,
-            data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 900, 800], //数据
+            data: nums, //数据
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -648,7 +723,7 @@ export default {
       let option = {
         tooltip: {
           trigger: 'item',
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
         legend: {
           orient: 'vertical',
@@ -657,14 +732,23 @@ export default {
             color: '#fff'
           }
         },
-         series : [{
+        series: [
+          {
             name: '设备详情',
             type: 'pie',
             radius: ['40%', '70%'],
             center: ['50%', '50%'],
-                data:[
+            data: [
-              { value: 580, name: '锐能设备',itemStyle: { color: '#0a7ef6' } },
+              {
-              { value: 484, name: '铁塔设备',itemStyle: { color: '#77c8ff' } },
+                value: this.rnNum,
+                name: '锐能设备',
+                itemStyle: { color: '#0a7ef6' }
+              },
+              {
+                value: this.ttNum,
+                name: '铁塔设备',
+                itemStyle: { color: '#77c8ff' }
+              }
             ],
             itemStyle: {
               emphasis: {
@@ -672,12 +756,12 @@ export default {
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               },
-                    normal:{ 
+              normal: {
-                        label:{ 
+                label: {
-                            show: true, 
+                  show: true
                   // formatter: '{b} : {c} ({d}%)'
                 },
-                        labelLine :{show:true} 
+                labelLine: { show: true }
               }
             }
           }
@@ -804,6 +888,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+  user-select: none;
   background-image: url('../../assets/image/chartbg.png');
   background-size: cover;
 }
@@ -815,12 +900,11 @@ export default {
   text-align: center;
   vertical-align: middle;
   overflow: hidden;
-  pointer-events: none;
+  // pointer-events: none;
 }
 .center,
 .left,
 .right {
-  border: 1px solid #f00;
   position: absolute;
   top: 0;
   width: 28vw;
@@ -853,6 +937,32 @@ export default {
   right: 0;
   padding: 70px 35px 15px 2px;
 }
+.content-box {
+  // padding: 10px;
+  padding: 10px 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  height: calc(100% - 20px);
+  div {
+    // border: 1px solid #f00;
+    // box-shadow: 0px 0px 10px 2px rgb(60,172,238) inset;
+    background-image: url('../../assets/image/ltbg.png');
+    background-size: 100% 100%;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    > span:nth-child(2) {
+      font-weight: 700;
+      font-size: 24px;
+      color: #ff4c4c;
+    }
+  }
+  > div:nth-child(2) span:nth-child(2) {
+    color: #35ffff;
+  }
+}
 .my_context {
   width: 100%;
   height: 100%;
@@ -875,11 +985,11 @@ export default {
   height: 100%;
   padding-top: 15px;
 }
-.my_cenbottom{
+.my_cenbottom {
   display: flex;
   justify-content: space-evenly;
   margin-top: 23px;
-  div{
+  div {
     width: 210px;
     height: 50px;
     display: flex;
@@ -887,7 +997,7 @@ export default {
     align-items: center;
     background-image: url('../../assets/image/xiaokuang.png');
     background-size: cover;
-    span{
+    span {
       font-size: 20px;
     }
   }

src/views/workOrderManage/orderHistory/detail.vue

@@ -152,8 +152,8 @@ export default {
             <span>派单编号：{this.tableHeader.id}</span>
             <span>派单时间：{this.tableHeader.createTime}</span>
             <span>处理人：{this.tableHeader.nick_name}</span>
-            <span>提交时间：{this.tableHeader.finishTime}</span>
+            <span>提交时间：{this.tableHeader.updateTime}</span>
-            <span>通过时间：{this.tableHeader.updateTime}</span>
+            <span>通过时间：{this.tableHeader.finishTime}</span>
           </div>
           <div>派单备注：{this.tableHeader.note}</div>
           <div>驳回备注：{this.tableHeader.rejectNote}</div>