device detail websocket

.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'

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",

src/views/hardware/device/detail.vue

@@ -12,8 +12,7 @@
         <span
           >设备类型：{{
             info.deviceType
-              ? this.deviceTypeList.find((v) => v.value == info.deviceType)
+              ? this.deviceTypeList.find(v => v.value == info.deviceType).label
-                  .label
               : ''
           }}</span
         >
@@ -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(info.deviceSignal.signalJsonTurn);
-            console.log(this.signal);
+            // 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,7 +433,7 @@ export default {
       });
       let option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: 'axis'
         },
         toolbox: {
           show: true,
@@ -458,11 +462,11 @@ export default {
                 }
                 table += '</tbody></table>';
                 return table;
-              },
+              }
             },
             // restore: {},
-            saveAsImage: {},
+            saveAsImage: {}
-          },
+          }
         },
         xAxis: {
           name: '时间',
@@ -470,11 +474,11 @@ export default {
           boundaryGap: false,
           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>