From 38812585f1f52b7e58e058127616111176f9396a Mon Sep 17 00:00:00 2001
From: ZK <1057786341@qq.com>
Date: Sat, 23 Jul 2022 21:58:47 +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

---
 src/components/Header.vue                     |  2 +-
 src/store/index.js                            |  2 +-
 src/utils/api.js                              |  4 +
 src/utils/config.js                           |  5 +-
 src/utils/websocket_service.js                |  2 +-
 src/views/NewMainPage.vue                     | 18 ++++-
 .../NewMainPageComponents/LeftCenter.vue      | 13 ++-
 src/views/NewMainPageComponents/LeftTop.vue   | 19 +++--
 src/views/NewMainPageComponents/LowerLeft.vue | 32 ++++++--
 .../NewMainPageComponents/RightBottom.vue     | 11 ++-
 .../NewMainPageComponents/RightMiddle.vue     | 81 +++++++++++++------
 src/views/NewMainPageComponents/RightTop.vue  | 46 +++++++----
 12 files changed, 171 insertions(+), 64 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index a41803b..e70826b 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -146,7 +146,7 @@ export default {
       this.$router.replace('/home')
     },
     toDataViews() {
-      this.$router.push('/MainPage')
+      this.$router.push('/NewMainPage')
       // const routeUrl = this.$router.resolve({
       //   path: '/MainPage'
       // })
diff --git a/src/store/index.js b/src/store/index.js
index 4a30dc2..fac244f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    dataPageData: null,
+    dataPageData: { lowerLeftVO: [] },
     test: []
   },
   mutations: {
diff --git a/src/utils/api.js b/src/utils/api.js
index c50eb5e..d515e98 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -22,3 +22,7 @@ export function getReportData(query) {
 export function downloadExcel(query) {
   return download('api/api/statistics/export', query)
 }
+
+export function getWebSocket() {
+  return getRequest('api/display/webSocket')
+}
diff --git a/src/utils/config.js b/src/utils/config.js
index dd929b5..82238f9 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,4 +1,5 @@
 module.exports = {
-  // baseUrl: 'localhost:2011',
-  baseUrl: '49.234.81.196:2011'
+  // baseUrl: 'localhost:2011'
+  // baseUrl: '49.234.81.196:2011'
+  baseUrl: '192.168.0.100:2011'
 }
diff --git a/src/utils/websocket_service.js b/src/utils/websocket_service.js
index 03f61b0..7a44cb6 100644
--- a/src/utils/websocket_service.js
+++ b/src/utils/websocket_service.js
@@ -99,7 +99,7 @@ unRegisterCallBack(socketType) {
      * websocket心跳检测
      */
 const heartCheck = {
-  timeout: 5000,
+  timeout: 50000,
   timeoutObj: null,
   serverTimeoutObj: null,
   reset: function() {
diff --git a/src/views/NewMainPage.vue b/src/views/NewMainPage.vue
index 39a13d9..62afbcd 100644
--- a/src/views/NewMainPage.vue
+++ b/src/views/NewMainPage.vue
@@ -25,14 +25,14 @@
       </router-link>
 
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-right" />
-      <router-link to="/deviceList">
+      <router-link to="/userManage">
         <div class="btn btn-one btn-one-right">
           系统设置
         </div>
       </router-link>
 
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-right" />
-      <router-link to="/userManage">
+      <router-link to="/deviceList">
         <div class="btn btn-one btn-one-right">
           设备管理
         </div>
@@ -86,6 +86,7 @@ import LowerLeft from './NewMainPageComponents/LowerLeft'
 import RightTop from './NewMainPageComponents/RightTop'
 import RightBottom from './NewMainPageComponents/RightBottom'
 import LeftTop from './NewMainPageComponents/LeftTop'
+import { getWebSocket } from '@/utils/api'
 export default {
   name: 'NewMainPage',
   components: { LeftTop, RightBottom, RightTop, LowerLeft, LeftCenter, RightMiddle },
@@ -93,7 +94,20 @@ export default {
     return {
 
     }
+  },
+  async mounted() {
+    this.$Socket.connect()
+    this.getWebSocket()
+  },
+  beforeDestroy() {
+    this.$Socket.close()
+  },
+  methods: {
+    getWebSocket() {
+      getWebSocket().then()
+    }
   }
+
 }
 </script>
 <style scoped lang="less">
diff --git a/src/views/NewMainPageComponents/LeftCenter.vue b/src/views/NewMainPageComponents/LeftCenter.vue
index 3681368..a21ae93 100644
--- a/src/views/NewMainPageComponents/LeftCenter.vue
+++ b/src/views/NewMainPageComponents/LeftCenter.vue
@@ -8,15 +8,15 @@
       <div class="table-wrapper">
         <el-table
           id="playList"
-          :data="tableData"
+          :data="leftCenterVO"
           style="width: 100%;color: rgb(160, 165, 178);font-size: 12px;text-align: center;margin-left: 10px"
           :show-header="true"
           :row-class-name="tableRowClassName"
         >
           <el-table-column prop="index" label="序号" min-width="15px" />
-          <el-table-column prop="address" label="区域" min-width="15px" />
-          <el-table-column prop="number" label="编号" min-width="15px" />
-          <el-table-column prop="error" label="报警率" min-width="15px" />
+          <el-table-column prop="areaId" label="区域" min-width="15px" />
+          <el-table-column prop="deviceId" label="编号" min-width="15px" />
+          <el-table-column prop="policeRate" label="报警率" min-width="15px" />
           <el-table-column prop="operate" label="操作" min-width="15px" />
 
           <p v-if="loading">
@@ -99,6 +99,11 @@ export default {
         operate: '查看'
       }]
     }
+  },
+  computed: {
+    leftCenterVO() {
+      return this.$store.state.dataPageData.leftCenterVO
+    }
   }
 }
 </script>
diff --git a/src/views/NewMainPageComponents/LeftTop.vue b/src/views/NewMainPageComponents/LeftTop.vue
index a25e80a..3c71415 100644
--- a/src/views/NewMainPageComponents/LeftTop.vue
+++ b/src/views/NewMainPageComponents/LeftTop.vue
@@ -6,32 +6,37 @@
     <div style="height: 65px" />
     <div class="num" style="width: 5%;" />
     <div class="num" style="width: 23%;">
-      120
+      {{ leftTopVO.equipmentNumber }}
     </div>
     <div class="num" style="width: 33%;">
-      118
+      {{ leftTopVO.onLineNumber }}
     </div>
     <div class="num" style="width: 30%;">
-      2
+      {{ leftTopVO.offLineNumber }}
     </div>
     <div class="num" style="height: 85px" />
 
     <div class="num" style="width: 10%;" />
     <div class="num" style="width: 14%;">
-      210
+      {{ leftTopVO.passedNumber }}
     </div>
     <div class="num" style="width: 40%;">
-      105
+      {{ leftTopVO.policeNumber }}
     </div>
     <div class="num" style="width: 25%;">
-      35%
+      {{ leftTopVO.policeRate }}
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'LeftTop'
+  name: 'LeftTop',
+  computed: {
+    leftTopVO() {
+      return this.$store.state.dataPageData.leftTopVO
+    }
+  }
 }
 </script>
 
diff --git a/src/views/NewMainPageComponents/LowerLeft.vue b/src/views/NewMainPageComponents/LowerLeft.vue
index 37f2a54..47b5a45 100644
--- a/src/views/NewMainPageComponents/LowerLeft.vue
+++ b/src/views/NewMainPageComponents/LowerLeft.vue
@@ -15,11 +15,33 @@ export default {
 
     }
   },
+  computed: {
+    lowerLeftVO() {
+      return this.$store.state.dataPageData.lowerLeftVO
+    }
+  },
+  watch: {
+    lowerLeftVO: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (this.myChart) {
+          if (newVal) {
+            this.initCharts(this.lowerLeftVO.yData, this.lowerLeftVO.passedNumber, this.lowerLeftVO.policeNumber)
+          } else {
+            this.initCharts(this.lowerLeftVO.yData, this.lowerLeftVO.passedNumber, this.lowerLeftVO.policeNumber)
+          }
+        } else {
+          this.initCharts(this.lowerLeftVO.yData, this.lowerLeftVO.passedNumber, this.lowerLeftVO.policeNumber)
+        }
+      },
+      deep: true
+    }
+  },
   mounted() {
-    this.initCharts()
+    this.initCharts(this.lowerLeftVO.yData, this.lowerLeftVO.passedNumber, this.lowerLeftVO.policeNumber)
   },
   methods: {
-    initCharts() {
+    initCharts(yData, passedNumber, policeNumber) {
       const chartDom = document.getElementById('lowerLeft')
       const myChart = echarts.init(chartDom)
       const option = {
@@ -61,20 +83,20 @@ export default {
         yAxis: {
           // show: false,
           type: 'category',
-          data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10']
+          data: yData
         },
         series: [
           {
             name: '当前通过人数',
             color: '#ff9d1f',
             type: 'bar',
-            data: [18203, 23489, 29034, 104970, 131744, 630230, 29034, 104970, 131744, 630230]
+            data: passedNumber
           },
           {
             name: '当前报警人数',
             color: '#14abec',
             type: 'bar',
-            data: [19325, 23438, 31000, 121594, 134141, 681807, 31000, 121594, 134141, 681807]
+            data: policeNumber
           }
         ]
       }
diff --git a/src/views/NewMainPageComponents/RightBottom.vue b/src/views/NewMainPageComponents/RightBottom.vue
index bc3bb75..f783af1 100644
--- a/src/views/NewMainPageComponents/RightBottom.vue
+++ b/src/views/NewMainPageComponents/RightBottom.vue
@@ -12,14 +12,14 @@
         <div class="table-wrapper">
           <el-table
             id="playList"
-            :data="tableData"
+            :data="policeThreshold"
             style="width: 100%;color: rgb(160, 165, 178);font-size: 12px;margin-left: 10px"
             :show-header="true"
             :row-class-name="tableRowClassName"
           >
             <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>
@@ -106,6 +106,11 @@ export default {
         operate: '查看'
       }]
     }
+  },
+  computed: {
+    policeThreshold() {
+      return this.$store.state.dataPageData.policeThreshold
+    }
   }
 }
 </script>
diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index 700c199..8fbfee5 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">
           指定
@@ -27,11 +27,11 @@
         <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">{{ currentCycle }}</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">{{ lastCycle }}</span>
           </div>
         </div>
       </div>
@@ -62,12 +62,43 @@
 import * as echarts from 'echarts'
 export default {
   name: 'RightMiddle',
+  data() {
+    return {
+      currentCycle: 0,
+      lastCycle: 0
+    }
+  },
+  computed: {
+    policeRing() {
+      return this.$store.state.dataPageData.policeRing
+    }
+  },
+  watch: {
+    policeRing: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        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
+    }
+  },
   mounted() {
-    this.initCharts1()
+    this.initCharts1(this.policeRing)
     this.initCharts2()
   },
   methods: {
-    initCharts1() {
+    initCharts1(policeRing) {
       const chartDom = document.getElementById('rightMiddle1')
       const myChart = echarts.init(chartDom)
       const option = {
@@ -111,7 +142,7 @@ export default {
             },
             anchor: {
               show: true,
-              icon: 'image://http://ldjy.asc.jx.cn/f9f9f665-43c9-4628-b06a-f8c4fc1872d0.png',
+              icon: policeRing.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,
@@ -144,28 +175,30 @@ export default {
             },
             data: [
               {
-                value: 20,
+                value: policeRing.rate,
                 name: '报警率环比'
               }
             ]
           }
         ]
       }
-      setInterval(function() {
-        const random = +(Math.random() * 60).toFixed(2)
-        myChart.setOption({
-          series: [
-            {
-              data: [
-                {
-                  value: random,
-                  name: '报警率环比'
-                }
-              ]
-            }
-          ]
-        })
-      }, 2000)
+      this.currentCycle = policeRing.currentCycle
+      this.lastCycle = policeRing.lastCycle
+      // setInterval(function() {
+      //   const random = +(Math.random() * 60).toFixed(2)
+      //   myChart.setOption({
+      //     series: [
+      //       {
+      //         data: [
+      //           {
+      //             value: random,
+      //             name: '报警率环比'
+      //           }
+      //         ]
+      //       }
+      //     ]
+      //   })
+      // }, 2000)
 
       option && myChart.setOption(option)
     },
@@ -255,7 +288,7 @@ export default {
               data: [
                 {
                   value: random,
-                  name: '报警率环比'
+                  name: '离线率环比'
                 }
               ]
             }
diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue
index 84e9cf3..ea5c6a2 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">
           指定
@@ -23,11 +23,33 @@
 import * as echarts from 'echarts'
 export default {
   name: 'RightTop',
+  computed: {
+    rightTop() {
+      return this.$store.state.dataPageData.rightTop
+    }
+  },
+  watch: {
+    rightTop: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (this.myChart) {
+          if (newVal) {
+            this.initCharts(this.rightTop)
+          } else {
+            this.initCharts(this.rightTop)
+          }
+        } else {
+          this.initCharts(this.rightTop)
+        }
+      },
+      deep: true
+    }
+  },
   mounted() {
-    this.initCharts()
+    this.initCharts(this.rightTop)
   },
   methods: {
-    initCharts() {
+    initCharts(rightTop) {
       const chartDom = document.getElementById('rightTop')
       const myChart = echarts.init(chartDom)
       const option = {
@@ -73,7 +95,7 @@ export default {
               type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
             },
             type: 'category',
-            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', 'Sat', 'Sun'],
+            data: rightTop.yData,
             axisPointer: {
               type: 'shadow'
             }
@@ -112,12 +134,10 @@ export default {
             type: 'bar',
             tooltip: {
               valueFormatter: function(value) {
-                return value + ' ml'
+                return value + '人'
               }
             },
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-            ]
+            data: rightTop.passedNumber
           },
           {
             name: '报警人次',
@@ -125,12 +145,10 @@ export default {
             type: 'bar',
             tooltip: {
               valueFormatter: function(value) {
-                return value + ' ml'
+                return value + '人'
               }
             },
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            ]
+            data: rightTop.policeNumber
           },
           {
             name: '报警率',
@@ -142,7 +160,7 @@ export default {
                 return value + '%'
               }
             },
-            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+            data: rightTop.policeRate
           }
         ],
         dataZoom: [
-- 
Gitee