From eebbc840b49f3c14ced71dbb49e7e9fe6110315d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 07 Apr 2021 17:37:22 +0800
Subject: [PATCH] 监控台模块下3个模式得相关修改

---
 src/views/supervisoryConsole/data.vue |  108 ++++++++++++++++++++++++++++++++----------------------
 1 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/views/supervisoryConsole/data.vue b/src/views/supervisoryConsole/data.vue
index 6223266..7ce756d 100644
--- a/src/views/supervisoryConsole/data.vue
+++ b/src/views/supervisoryConsole/data.vue
@@ -22,49 +22,41 @@
             <div class="info-active-top">
               <div class="active-list">
                 <div>
-                  <span
-                    ng-click="menuToDetail(0)"
-                    class="dashboard_alarm ng-binding"
-                    >预警</span
-                  >
+                  <span class="dashboard_alarm ng-binding">预警</span>
                 </div>
-                <div><span class="ng-binding">3</span></div>
-                <div class="ng-binding">占比&nbsp;1.8%</div>
+                <div>
+                  <span class="ng-binding">{{ yj }}</span>
+                </div>
+                <div class="ng-binding">占比&nbsp;{{ yjper }}</div>
               </div>
               <div class="active-list">
                 <div>
-                  <span
-                    ng-click="menuToDetail(4)"
-                    class="dashboard_malfunction ng-binding"
-                    >故障</span
-                  >
+                  <span class="dashboard_malfunction ng-binding">故障</span>
                 </div>
-                <div><span class="ng-binding">25</span></div>
-                <div class="ng-binding">占比&nbsp;15%</div>
+                <div>
+                  <span class="ng-binding">{{ gz }}</span>
+                </div>
+                <div class="ng-binding">占比&nbsp;{{ gzper }}</div>
               </div>
             </div>
             <div class="info-active-bottom">
               <div class="active-list">
                 <div>
-                  <span
-                    ng-click="menuToDetail(1)"
-                    class="dashboard_normal ng-binding"
-                    >正常</span
-                  >
+                  <span class="dashboard_normal ng-binding">正常</span>
                 </div>
-                <div><span class="ng-binding">125</span></div>
-                <div class="ng-binding">占比&nbsp;75%</div>
+                <div>
+                  <span class="ng-binding">{{ zx }}</span>
+                </div>
+                <div class="ng-binding">占比&nbsp;{{ zxper }}</div>
               </div>
               <div class="active-list">
                 <div>
-                  <span
-                    ng-click="menuToDetail(3)"
-                    class="dashboard_inactive ng-binding"
-                    >掉线</span
-                  >
+                  <span class="dashboard_inactive ng-binding">掉线</span>
                 </div>
-                <div><span class="ng-binding">15</span></div>
-                <div class="ng-binding">占比&nbsp;10%</div>
+                <div>
+                  <span class="ng-binding">{{ dx }}</span>
+                </div>
+                <div class="ng-binding">占比&nbsp;{{ dxper }}</div>
               </div>
             </div>
           </div>
@@ -155,12 +147,21 @@
   getList,
   getEquipmentList,
   getDayWarnList,
+  getEquipment,
 } from "@/api/supervisory/data";
 
 export default {
   data() {
     return {
       tableData: [],
+      dx: null,
+      zx: null,
+      gz: null,
+      yj: null,
+      dxper: null,
+      zxper: null,
+      gzper: null,
+      yjper: null,
     };
   },
   created() {
@@ -188,34 +189,56 @@
     getDayWarnList().then((res) => {
       that.drawPillar(res.data.data);
     });
+
+    getEquipment().then((res) => {
+      console.log(res.data.data, 123);
+
+      var total = 0;
+
+      total += res.data.data.zx;
+      total += res.data.data.dx;
+      total += res.data.data.gz;
+
+      console.log(total, 45);
+
+      that.dx = res.data.data.dx;
+      that.zx = res.data.data.zx;
+      that.gz = res.data.data.gz;
+      that.yj = res.data.data.yj;
+      that.dxper = ((res.data.data.dx / total) * 100).toFixed(2) + "%";
+      that.zxper = ((res.data.data.zx / total) * 100).toFixed(2) + "%";
+      that.gzper = ((res.data.data.gz / total) * 100).toFixed(2) + "%";
+      that.yjper = ((res.data.data.yj / total) * 100).toFixed(2) + "%";
+
+      that.drawPie();
+    });
   },
-  mounted() {
-    this.drawPie();
-  },
+  mounted() {},
   methods: {
     drawPie() {
+      var that = this;
       var myChart = this.$echarts.init(
         document.getElementById("base_information_pie_echarts")
       );
 
       var m2R2Data = [
         {
-          value: 125,
+          value: that.zx,
           legendname: "正常",
           name: "正常",
           itemStyle: { color: "#29c194" },
         },
         {
-          value: 25,
+          value: that.gz,
           legendname: "故障",
           name: "故障",
           itemStyle: { color: "#b6b6b6" },
         },
         {
-          value: 15,
+          value: that.dx,
           legendname: "掉线",
           name: "掉线",
-          itemStyle: { color: "#6d5eac" },
+          itemStyle: { color: "#F48F57" },
         },
       ];
 
@@ -248,8 +271,6 @@
           trigger: "item",
           formatter: function (parms) {
             var str =
-              parms.seriesName +
-              "</br>" +
               parms.marker +
               "" +
               parms.data.legendname +
@@ -265,7 +286,6 @@
         },
         series: [
           {
-            name: "标题",
             type: "pie",
             center: ["50%", "50%"],
             radius: ["66%", "86%"],
@@ -383,7 +403,7 @@
 
       data.dataList.forEach((item) => {
         if (item.name == "一键求助") {
-          yData = item.alarmData
+          yData = item.alarmData;
         }
       });
 
@@ -511,7 +531,7 @@
             background-color: #29c093;
           }
           &:nth-child(3)::before {
-            background-color: #6d5eac;
+            background-color: #F48F57;
           }
           &:nth-child(4)::before {
             background-color: #dfdfdf;
@@ -572,20 +592,20 @@
             color: #29c194;
           }
           .active-list:nth-child(2) > div:nth-child(1) span {
-            border: 1px solid #6d5eac;
-            color: #6d5eac;
+            border: 1px solid #F48F57;
+            color: #F48F57;
           }
           .active-list:nth-child(1) > div:nth-child(1) span:hover {
             background: rgba(41, 192, 147, 0.15);
           }
           .active-list:nth-child(2) > div:nth-child(1) span:hover {
-            background: #e9e7f3;
+            background: #f3ab8448;
           }
           .active-list:nth-child(1) > div:nth-child(2) span {
             color: #29c194;
           }
           .active-list:nth-child(2) > div:nth-child(2) span {
-            color: #6d5eac;
+            color: #F48F57;
           }
         }
         .info-active-top,

--
Gitblit v1.9.3