perf: 优化数据分析页面

device-manager-ui/admin/src/views/analysis/Analysis.vue

@@ -64,36 +64,52 @@
       <div class="center">
         <div class="center-top">
           <div class="center-top-item">
-            <img src="@/assets/images/icon1.png" alt="">
+            <img src="@/assets/images/icon1.png" alt="" />
             <div>
-              <h2 style="color: #69f3ff;text-shadow: 0 0 10px #69f3ff5b,0 0 20px #69f3ff5b,0 0 30px #69f3ff5b,0 0 40px #69f3ff5b;">{{centerTop.deviceTotalCount || 0}}</h2>
+              <h2
+                style="color: #69f3ff;text-shadow: 0 0 10px #69f3ff5b,0 0 20px #69f3ff5b,0 0 30px #69f3ff5b,0 0 40px #69f3ff5b;"
+              >
+                {{ centerTop.deviceTotalCount || 0 }}
+              </h2>
               <p>在线设备总数</p>
             </div>
           </div>
           <div class="center-top-item">
-            <img src="@/assets/images/icon2.png" alt="">
+            <img src="@/assets/images/icon2.png" alt="" />
             <div>
-              <h2 style="color: #ffba69;text-shadow: 0 0 10px #ffb9693d,0 0 20px #ffb9693d,0 0 30px #ffb9693d,0 0 40px #ffb9693d;">{{centerTop.deviceOfflineCount || 0}}</h2>
+              <h2
+                style="color: #ffba69;text-shadow: 0 0 10px #ffb9693d,0 0 20px #ffb9693d,0 0 30px #ffb9693d,0 0 40px #ffb9693d;"
+              >
+                {{ centerTop.deviceOfflineCount || 0 }}
+              </h2>
               <p>离线设备总数</p>
             </div>
           </div>
           <div class="center-top-item">
-            <img src="@/assets/images/icon3.png" alt="">
+            <img src="@/assets/images/icon3.png" alt="" />
             <div>
-              <h2 style="color: #ff69b3;text-shadow: 0 0 10px #ff69b452,0 0 20px #ff69b452,0 0 30px #ff69b452,0 0 40px #ff69b452;">{{centerTop.deviceStopCount || 0}}</h2>
+              <h2
+                style="color: #ff69b3;text-shadow: 0 0 10px #ff69b452,0 0 20px #ff69b452,0 0 30px #ff69b452,0 0 40px #ff69b452;"
+              >
+                {{ centerTop.deviceStopCount || 0 }}
+              </h2>
               <p>停用设备总数</p>
             </div>
           </div>
           <div class="center-top-item">
-            <img src="@/assets/images/icon4.png" alt="">
+            <img src="@/assets/images/icon4.png" alt="" />
             <div>
-              <h2 style="color: #25f06c;text-shadow: 0 0 10px #25f06c3a,0 0 20px #25f06c3a,0 0 30px #25f06c3a,0 0 40px #25f06c3a;">{{centerTop.pushTotalCount || 0}}</h2>
+              <h2
+                style="color: #25f06c;text-shadow: 0 0 10px #25f06c3a,0 0 20px #25f06c3a,0 0 30px #25f06c3a,0 0 40px #25f06c3a;"
+              >
+                {{ centerTop.pushTotalCount || 0 }}
+              </h2>
               <p>今日消息推送总数</p>
             </div>
           </div>
         </div>
         <div class="center-three">
-          <three :floorArr="floorArr" lv="1" :checkItem="checkDeviceItem"/>
+          <three :floorArr="floorArr" lv="1" :checkItem="checkDeviceItem" />
         </div>
       </div>
       <div class="right">
@@ -204,19 +220,20 @@ export default {
   components: {
     HeaderSite,
     TitleItem,
-    three
+    three,
   },
   data() {
     return {
-      floorArr:[],
+      floorArr: [],
       siteId: session.getSession("siteid"),
       warningInfo: {
         data: [],
         rowNum: 5,
         waitTime: 2000,
+        unit: "次",
       },
       realTimeInfo: {
-        header: ["设备名称", "告警次数", "告警时间", "告警类型",'设备编码'],
+        header: ["设备名称", "告警次数", "告警时间", "告警类型", "设备编码"],
         headerHeight: 30,
         headerBGC: "#3B5A9E",
         oddRowBGC: "",
@@ -237,38 +254,37 @@ export default {
       deviceFirmCollect: {}, // 设备厂家排名
       alarmLevelCollect: {}, // 今日告警等级分布
       deviceAlarmMapInfoList: [], // 实施告警消息
-      Statlist:[],//设备列表
-      checkDeviceItem:{},//选中设备
-      centerTop:{}
+      Statlist: [], //设备列表
+      checkDeviceItem: {}, //选中设备
+      centerTop: {},
     };
   },
   created() {
-    this.getStatlist()
+    this.getStatlist();
     this.getDevAlarm();
     this.getData();
-    setTimeout(()=>{
-      this.floorArr = floorArr
-    },500)
-    this.centerDeviceType()
+    setTimeout(() => {
+      this.floorArr = floorArr;
+    }, 500);
+    this.centerDeviceType();
   },
   methods: {
     // 中间设备状态
-    centerDeviceType(){
-      this.$post("/device/stat/list", { siteId: this.siteId,selected:0 }).then(res=>{
-        
-        const {code,data} = res
-        console.log(data,"@@@@@")
-        if(code == 1 && data.data.length>0){
-          this.centerTop = data.data[0]
+    centerDeviceType() {
+      this.$post("/device/stat/list", {
+        siteId: this.siteId,
+        selected: 0,
+      }).then((res) => {
+        const { code, data } = res;
+        if (code == 1 && data.data.length > 0) {
+          this.centerTop = data.data[0];
         }
-      })
+      });
     },
     // 点击设备
-    tabelRow(arr){
-      
-      const {rowIndex} = arr
-      this.checkDeviceItem = this.Statlist[rowIndex]
-      console.log(this.checkDeviceItem,"111")
+    tabelRow(arr) {
+      const { rowIndex } = arr;
+      this.checkDeviceItem = this.Statlist[rowIndex];
     },
     // 获取今日告警设备统计
     getDevAlarm() {
@@ -285,7 +301,7 @@ export default {
             alarmTypeCollect,
             deviceFirmCollect,
             alarmLevelCollect,
-            deviceAlarmMapInfoList,
+            // deviceAlarmMapInfoList,
           } = res.data;
           this.deviceTotalCount = deviceTotalCount;
           this.siteSize = siteSize;
@@ -297,24 +313,31 @@ export default {
           this.deviceFirmCollect = deviceFirmCollect;
           this.siteDeviceAlarmCollect = siteDeviceAlarmCollect;
           this.alarmLevelCollect = alarmLevelCollect;
-          this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
+          // this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
           // if (deviceAlarmMapInfoList.length) {
           //   let arr = deviceAlarmMapInfoList.map((v) => {
           //     return [
-          //       v.deviceName,
+          //       v.deviceName || "--",
           //       v.count,
           //       v.alarmTime,
           //       this.filterDevAlarmType(v.alarmType),
           //     ];
           //   });
-            
+
           //   this.realTimeInfo = { ...this.realTimeInfo, data: arr };
           // }
           let { 直连设备, 子设备, 网关设备 } = deviceConnTypeCollect;
           let { 在线, 离线, 缺纸 } = alarmTypeCollect;
-          let firmName = Object.keys(deviceFirmCollect).map((key) => key);
-          let firmValues = Object.keys(deviceFirmCollect).map((key) =>
-            Number(deviceFirmCollect[key])
+          let arr = Object.entries(deviceFirmCollect).sort((a, b) => {
+            return parseFloat(b[1]) - parseFloat(a[1]);
+          });
+          let newDeviceFirmCollect = {};
+          arr.forEach((v) => {
+            newDeviceFirmCollect[v[0]] = v[1];
+          });
+          let firmName = Object.keys(newDeviceFirmCollect).map((key) => key);
+          let firmValues = Object.keys(newDeviceFirmCollect).map((key) =>
+            Number(newDeviceFirmCollect[key])
           );
           if (Object.keys(siteDeviceAlarmCollect).length) {
             let arr = Object.keys(siteDeviceAlarmCollect).map((key) => {
@@ -337,28 +360,29 @@ export default {
       );
     },
     // 查询单个异常设备
-    getStatlist(){
-      this.$post("/device/alarm/info/statlist", { siteId: this.siteId }).then(res=>{
-        const {code,data} = res
-        if(code == 1){
-          this.Statlist = data || []
-          if (data.length) {
-            let arr = data.map((v) => {
-              return [
-                v.device.deviceName,
-                v.todayAlarmDeviceCount,
-                this.$moment(v.alarmTime).format('YYYY-MM-DD HH:mm'),
-                v.alarmTypeStr,
-                v.device.deviceCode
-              ];
-            });
-            
-            this.realTimeInfo = { ...this.realTimeInfo, data: arr };
+    getStatlist() {
+      this.$post("/device/alarm/info/statlist", { siteId: this.siteId }).then(
+        (res) => {
+          const { code, data } = res;
+          if (code == 1) {
+            this.Statlist = data || [];
+            if (data.length) {
+              let arr = data.map((v) => {
+                return [
+                  v.device.deviceName || "--",
+                  v.todayAlarmInfoCount,
+                  this.$moment(v.alarmTime).format("YYYY-MM-DD HH:mm"),
+                  this.filterDevAlarmType(v.alarmTypeStr),
+                  v.device.deviceCode,
+                ];
+              });
+              this.realTimeInfo = { ...this.realTimeInfo, data: arr };
+            }
           }
         }
-      })
+      );
     },
-    // 获取设备类型分布图标
+    // 获取设备类型分布
     getDevTypeDisEchart(direct, subset, network) {
       let chartDom = document.getElementById("devTypeDis");
       this.devType = this.$echarts.init(chartDom);
@@ -712,17 +736,18 @@ export default {
     // 过滤设备告警类型
     filterDevAlarmType(type) {
       if (type == "离线") {
-        return `<span style='color:#FF4A4A'>${type}</span>`;
+        return `<span style='color:#FF964A'>${type}</span>`;
       } else if (type == "在线") {
         return `<span style='color:#5ceeff'>${type}</span>`;
       } else if (type == "停用") {
-        return `<span style='color:#FF964A'>${type}</span>`;
+        return `<span style='color:#FF4A4A'>${type}</span>`;
       }
     },
     // 定时获取数据
     getData() {
       this.timer = setInterval(() => {
         this.getDevAlarm();
+        this.getStatlist();
       }, 1000 * 60);
     },
   },
@@ -839,27 +864,27 @@ export default {
   .center {
     width: 780px;
     position: relative;
-    .center-top{
+    .center-top {
       display: flex;
       align-items: center;
-      justify-content:space-around;
+      justify-content: space-around;
     }
-    .center-three{
+    .center-three {
       height: 780px;
       width: 780px;
     }
-    .center-top-item{
+    .center-top-item {
       display: flex;
       align-items: center;
-      img{
+      img {
         display: block;
         width: 55px;
         margin-right: 5px;
       }
-      h2{
+      h2 {
         font-size: 20px;
       }
-      p{
+      p {
         font-size: 12px;
       }
     }
@@ -946,4 +971,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file