From 70f46563e678f3009112eb9806baac76817ea66b Mon Sep 17 00:00:00 2001
From: ZK <1057786341@qq.com>
Date: Wed, 27 Jul 2022 14:29:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewMainPageComponents/RightBottom.vue     | 11 +--
 .../NewMainPageComponents/RightMiddle.vue     | 67 ++++++++++---------
 src/views/NewMainPageComponents/RightTop.vue  |  4 +-
 3 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/src/views/NewMainPageComponents/RightBottom.vue b/src/views/NewMainPageComponents/RightBottom.vue
index 6fea7e5..a339ad5 100644
--- a/src/views/NewMainPageComponents/RightBottom.vue
+++ b/src/views/NewMainPageComponents/RightBottom.vue
@@ -34,19 +34,19 @@
       <div style="height: 30px" />
       <div style="height: 10px" />
       <div style="height: 20px;font-size: 14px;color:#976c27;text-align: center">
-        离线天数超阈值
+        不活跃度超阈值
       </div>
       <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 70%;">
         <div class="table-wrapper">
           <el-table
             id="playList"
-            :data="tableData"
+            :data="policeInactivity"
             style="width: 100%;color: rgb(160, 165, 178);;margin-left: 8px"
             :show-header="true"
           >
             <el-table-column prop="index" label="序号" min-width="20px" />
-            <el-table-column prop="address" label="区域" min-width="20px" />
-            <el-table-column prop="number" label="编号" min-width="20px" />
+            <el-table-column prop="areaId" label="区域" min-width="20px" />
+            <el-table-column prop="deviceId" label="编号" min-width="20px" />
             <p v-if="loading">
               加载中...
             </p>
@@ -110,6 +110,9 @@ export default {
   computed: {
     policeThreshold() {
       return this.$store.state.dataPageData.policeThreshold
+    },
+    policeInactivity() {
+      return this.$store.state.dataPageData.policeInactivity
     }
   }
 }
diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index 8fbfee5..640edc0 100644
--- a/src/views/NewMainPageComponents/RightMiddle.vue
+++ b/src/views/NewMainPageComponents/RightMiddle.vue
@@ -5,10 +5,10 @@
       数据环比
       <div style="position: absolute;width: 150px;height: 20px;border: 1px solid #ffffff;right: 10px;bottom: -28px;font-size: 0">
         <div class="btn" style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
-          当日
+          以日
         </div>
         <div class="btn" style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
-          当周
+          以周
         </div>
         <div class="btn" style="display: inline-block;height: 19px;width: 49px;font-size: 8px;text-align: center;line-height: 19px">
           指定
@@ -41,16 +41,16 @@
           class="right-center-btn"
           style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:58px;width: 95px;height: 30px"
         >
-          离线率
+          不活跃度
         </div>
         <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 50px;width: 130px;height: 32px">
           <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center;">
             <span style="font-size: 8px">本周期</span><br>
-            <span style="font-size: 10px">56%</span>
+            <span style="font-size: 10px">{{ currentCycleInactivity }}</span>
           </div>
           <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center;border: 1px solid #083770">
             <span style="font-size: 8px">上周期</span><br>
-            <span style="font-size: 10px">56%</span>
+            <span style="font-size: 10px">{{ lastCycleInactivity }}</span>
           </div>
         </div>
       </div>
@@ -65,12 +65,17 @@ export default {
   data() {
     return {
       currentCycle: 0,
-      lastCycle: 0
+      lastCycle: 0,
+      currentCycleInactivity: 0,
+      lastCycleInactivity: 0
     }
   },
   computed: {
     policeRing() {
       return this.$store.state.dataPageData.policeRing
+    },
+    inactivityRing() {
+      return this.$store.state.dataPageData.inactivityRing
     }
   },
   watch: {
@@ -80,14 +85,26 @@ export default {
         if (this.myChart) {
           if (newVal) {
             this.initCharts1(this.policeRing)
-            this.initCharts2()
           } else {
             this.initCharts1(this.policeRing)
-            this.initCharts2()
           }
         } else {
           this.initCharts1(this.policeRing)
-          this.initCharts2()
+        }
+      },
+      deep: true
+    },
+    inactivityRing: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (this.myChart) {
+          if (newVal) {
+            this.initCharts2(this.inactivityRing)
+          } else {
+            this.initCharts2(this.inactivityRing)
+          }
+        } else {
+          this.initCharts2(this.inactivityRing)
         }
       },
       deep: true
@@ -95,7 +112,7 @@ export default {
   },
   mounted() {
     this.initCharts1(this.policeRing)
-    this.initCharts2()
+    this.initCharts2(this.inactivityRing)
   },
   methods: {
     initCharts1(policeRing) {
@@ -171,7 +188,7 @@ export default {
               fontSize: 18,
               fontWeight: 'bolder',
               formatter: '{value}%',
-              color: '#21ee8b'
+              color: policeRing.trend === '-' ? '#21ee8b' : '#f70b0b'
             },
             data: [
               {
@@ -202,7 +219,7 @@ export default {
 
       option && myChart.setOption(option)
     },
-    initCharts2() {
+    initCharts2(inactivityRing) {
       const chartDom = document.getElementById('rightMiddle2')
       const myChart = echarts.init(chartDom)
       const option = {
@@ -246,7 +263,7 @@ export default {
             },
             anchor: {
               show: true,
-              icon: 'image://http://ldjy.asc.jx.cn/efedef9e-197a-4220-b99e-23b21caa8cfc.png',
+              icon: inactivityRing.trend === '-' ? 'image://http://ldjy.asc.jx.cn/f9f9f665-43c9-4628-b06a-f8c4fc1872d0.png' : 'image://http://ldjy.asc.jx.cn/efedef9e-197a-4220-b99e-23b21caa8cfc.png',
               showAbove: false,
               offsetCenter: [0, '-35%'],
               size: 20,
@@ -269,33 +286,19 @@ export default {
               fontSize: 18,
               fontWeight: 'bolder',
               formatter: '{value}%',
-              color: '#f70b0b'
+              color: inactivityRing.trend === '-' ? '#21ee8b' : '#f70b0b'
             },
             data: [
               {
-                value: 20,
-                name: '离线率环比'
+                value: inactivityRing.rate,
+                name: '不活跃环比'
               }
             ]
           }
         ]
       }
-      setInterval(function() {
-        const random = +(Math.random() * 60).toFixed(2)
-        myChart.setOption({
-          series: [
-            {
-              data: [
-                {
-                  value: random,
-                  name: '离线率环比'
-                }
-              ]
-            }
-          ]
-        })
-      }, 2000)
-
+      this.currentCycleInactivity = inactivityRing.currentCycle
+      this.lastCycleInactivity = inactivityRing.lastCycle
       option && myChart.setOption(option)
     }
   }
diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue
index ea5c6a2..0d6c9d3 100644
--- a/src/views/NewMainPageComponents/RightTop.vue
+++ b/src/views/NewMainPageComponents/RightTop.vue
@@ -5,10 +5,10 @@
       数据统计
       <div style="position: absolute;width: 150px;height: 20px;border: 1px solid #ffffff;right: 10px;bottom: -28px;font-size: 0">
         <div style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
-          当周
+          以周
         </div>
         <div style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
-          当月
+          以月
         </div>
         <div style="display: inline-block;height: 19px;width: 49px;font-size: 8px;text-align: center;line-height: 19px">
           指定
-- 
Gitee