From 6dd0bd0c63cb050f06270cb34a94f77087c117c7 Mon Sep 17 00:00:00 2001
From: cxc <quantulr@outlook.com>
Date: Mon, 27 Feb 2023 10:28:04 +0800
Subject: [PATCH] device detail websocket

---
 .env.production                      |  2 +-
 package.json                         |  1 +
 src/views/hardware/device/detail.vue | 84 ++++++++++++++++------------
 3 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/.env.production b/.env.production
index 5c541ca..b6c6618 100644
--- a/.env.production
+++ b/.env.production
@@ -3,4 +3,4 @@ ENV = 'production'
 
 # 管理系统/生产环境
 # VUE_APP_BASE_API = 'http://47.115.73.110:8080'
-VUE_APP_BASE_API = 'http://192.168.110.10:8080'
+VUE_APP_BASE_API = '/api'
diff --git a/package.json b/package.json
index f6496e0..c95aba5 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "quill": "1.3.7",
+    "reconnecting-websocket": "^4.4.0",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
     "vue": "2.6.10",
diff --git a/src/views/hardware/device/detail.vue b/src/views/hardware/device/detail.vue
index 531e949..9d0303f 100644
--- a/src/views/hardware/device/detail.vue
+++ b/src/views/hardware/device/detail.vue
@@ -12,8 +12,7 @@
         <span
           >设备类型：{{
             info.deviceType
-              ? this.deviceTypeList.find((v) => v.value == info.deviceType)
-                  .label
+              ? this.deviceTypeList.find(v => v.value == info.deviceType).label
               : ''
           }}</span
         >
@@ -134,9 +133,9 @@
                   <el-button
                     v-if="
                       v.key == '01305001' ||
-                      v.key == '01303001' ||
-                      v.key == '01306001' ||
-                      v.key == '01304001'
+                        v.key == '01303001' ||
+                        v.key == '01306001' ||
+                        v.key == '01304001'
                     "
                     type="primary"
                     plain
@@ -208,6 +207,7 @@
 import { getKeyHistory, info, updateValue } from '@/api/hardware/device';
 import { getProvinceByCode } from '@/api/hardware/province';
 import { handleOffsetAndRange } from '../../../utils/offsetMap';
+import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export default {
   name: 'DeviceDetail',
@@ -236,17 +236,18 @@ export default {
       centerChart: null,
       queryParams: {
         deviceId: '',
-        key: '',
+        key: ''
       },
       id: '',
       info: {},
       signal: [],
+      websocket: null,
       defaultSignal: [],
       signalUpdateTime: '',
       deviceTypeList: [
         { label: '锐能设备', value: 'rn' },
-        { label: '铁塔设备', value: 'tt' },
-      ],
+        { label: '铁塔设备', value: 'tt' }
+      ]
     };
   },
   watch: {
@@ -254,29 +255,29 @@ export default {
       if (!this.selectDate) {
         this.selectDate = '';
       }
-    },
+    }
   },
   computed: {
     // 过充  单体过充阈值
     overcharge() {
-      let a = this.signal.find((item) => item.keyCN == '单体过充阈值');
+      let a = this.signal.find(item => item.keyCN == '单体过充阈值');
       return a ? a.valueCN - 0 : null;
     },
     // 过放  单体过放阈值
     overdischarge() {
-      let a = this.signal.find((item) => item.keyCN == '单体过放阈值');
+      let a = this.signal.find(item => item.keyCN == '单体过放阈值');
       return a ? a.valueCN - 0 : null;
     },
     // 过压  单体过压阈值
     overVoltage() {
-      let a = this.signal.find((item) => item.keyCN == '单体过压阈值');
+      let a = this.signal.find(item => item.keyCN == '单体过压阈值');
       return a ? a.valueCN - 0 : null;
     },
     // 欠压  单体欠压阈值
     underVoltage() {
-      let a = this.signal.find((item) => item.keyCN == '单体欠压阈值');
+      let a = this.signal.find(item => item.keyCN == '单体欠压阈值');
       return a ? a.valueCN - 0 : null;
-    },
+    }
   },
   created() {
     let { id } = this.$route.query;
@@ -288,13 +289,16 @@ export default {
     this.id = id;
     this.getDetail();
   },
+  mounted() {
+    this.initWebsocket();
+  },
   methods: {
     handleOffsetAndRange,
     handleCommand(item, command) {
       this.$confirm('确认提交?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning',
+        type: 'warning'
       })
         .then(() => {
           item.value = command;
@@ -325,7 +329,7 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         inputPattern: /^[1-9]\d*$/,
-        inputErrorMessage: '校验失败',
+        inputErrorMessage: '校验失败'
       })
         .then(({ value }) => {
           item.value = value;
@@ -355,8 +359,8 @@ export default {
             let deviceSignal = JSON.parse(info.deviceSignal.signalJsonTurn);
             this.signal = deviceSignal.signal;
             this.defaultSignal = info.defaultSignal;
-            console.log(info.deviceSignal.signalJsonTurn);
-            console.log(this.signal);
+            // console.log(info.deviceSignal.signalJsonTurn);
+            // console.log(this.signal);
             // let a = deviceSignal.signal.find(
             //   item => item.keyCN == '单体过充阈值'
             // );
@@ -379,7 +383,7 @@ export default {
               reject({ msg, code });
             }
           })
-          .catch((error) => {
+          .catch(error => {
             reject(error);
           });
       });
@@ -410,7 +414,7 @@ export default {
       this.getChartData();
     },
     getChartData() {
-      getKeyHistory(this.queryParams).then((data) => {
+      getKeyHistory(this.queryParams).then(data => {
         this.$nextTick(() => {
           this.initChart(data);
         });
@@ -421,7 +425,7 @@ export default {
       this.centerChart = echarts.init(this.$refs.echa);
       let months = [];
       let nums = [];
-      data.map((item) => {
+      data.map(item => {
         for (const k in item) {
           months.push(k);
           nums.push(item[k]);
@@ -429,19 +433,19 @@ export default {
       });
       let option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: 'axis'
         },
         toolbox: {
           show: true,
           feature: {
             dataView: {
               readOnly: true,
-              optionToContent: function (opt) {
+              optionToContent: function(opt) {
                 let axisData = opt.xAxis[0].data; //坐标数据
                 let series = opt.series; //折线图数据
                 let tdHeads = '<td>序号</td><td>时间</td>'; //表头
                 let tdBodys = ''; //数据
-                series.forEach(function (item) {
+                series.forEach(function(item) {
                   //组装表头
                   tdHeads += `<td style="text-align:center">${item.name}</td>`;
                 });
@@ -458,23 +462,23 @@ export default {
                 }
                 table += '</tbody></table>';
                 return table;
-              },
+              }
             },
             // restore: {},
-            saveAsImage: {},
-          },
+            saveAsImage: {}
+          }
         },
         xAxis: {
           name: '时间',
           type: 'category',
           boundaryGap: false,
-          data: months.map(function (str) {
+          data: months.map(function(str) {
             return str.replace(' ', '\n');
-          }),
+          })
         },
         yAxis: {
           name: '数值',
-          type: 'value',
+          type: 'value'
         },
         series: [
           {
@@ -482,14 +486,24 @@ export default {
             type: 'line',
             data: nums,
             lineStyle: {
-              color: '#46a6ff',
-            },
-          },
-        ],
+              color: '#46a6ff'
+            }
+          }
+        ]
       };
       this.centerChart.setOption(option);
     },
-  },
+    initWebsocket() {
+      const wsBaseUrl =
+        process.env.NODE_ENV === 'development'
+          ? '192.168.110.10:8080'
+          : `${window.location.host}${process.env.VUE_APP_BASE_API}`;
+      this.websocket = new ReconnectingWebSocket(`ws://${wsBaseUrl}/ws`);
+      this.websocket.addEventListener('message', e => {
+        this.$message.success(e.data);
+      });
+    }
+  }
 };
 </script>