websocket订阅替换为借口提供数据

src/store/index.js

@@ -6,6 +6,7 @@ const debug = process.env.NODE_ENV !== 'production';
 
 // 默认状态
 const state = {
+  websocketTimeSec: 5000,
   loading: false, //全局 - 加载中....
   themeName: "light", // 主题
   windturbineMap: {},

src/views/LightMatrix/LightMatrix.vue

@@ -111,7 +111,6 @@ import Col from "@com/coms/grid/col.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import util from "@/helper/util.js";
 
-import { datainit, webtest } from "@tools/websocket.js";
 import store from "@store/index.js";
 
 export default {
@@ -128,8 +127,7 @@ export default {
   // 数据
   data () {
     return {
-      loadingFlg: false, // 遮罩开关
-      websocketServe: null, // websocket 服务实例
+      timmer: null, // 计时器
       sourceMap: {}, // 核心数据
       panelData: {
         first: {
@@ -344,22 +342,46 @@ export default {
 
     calcGfStr (calcStr) {
       return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
+    },
+
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "matrix/matrixDetialGfPush",
+        success (res) {
+          if (res.data) {
+            let sourceMap = res.data;
+            for (let key in sourceMap) {
+              if (key !== 'fczbmap' && key !== 'fjmap') {
+                sourceMap[key] += '';
+              } else if (key === 'fjmap') {
+                sourceMap[key].forEach(pItem => {
+                  pItem.forEach(cItem => {
+                    cItem.color = that.getColor(cItem.fjzt);
+                    cItem.isShow = that;
+                  });
+                });
+              }
+            }
+            that.sourceMap = sourceMap;
+          } else {
+            that.sourceMap = {};
+          }
+        }
+      });
     }
   },
 
   created () {
     let that = this;
-    that.loadingFlg = true;
-    that.BASE.showLoading();
     that.$nextTick(() => {
-      that.websocketServe && that.websocketServe.disconnect();
-      that.API.requestData({
-        method: "POST",
-        subUrl: "admin/websocketdisconnect",
-        success () {
-          that.websocketServe = datainit("/topic/matrixdetialgfpushtask");
-        }
-      });
+      that.requestData(true);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
     });
   },
 
@@ -367,35 +389,9 @@ export default {
 
   },
 
-  beforeDestroy () {
-    // 离开页面，销毁 websocket 实例
-    this.websocketServe && this.websocketServe.disconnect();
-  },
-
-  watch: {
-    // 监听 websocket 回调并包装数据用于展示
-    '$store.state.windturbineMap': function (res) {
-      this.loadingFlg && this.BASE.closeLoading();
-      this.loadingFlg = false;
-      if (res) {
-        let sourceMap = JSON.parse(res);
-        for (let key in sourceMap) {
-          if (key !== 'fczbmap' && key !== 'fjmap') {
-            sourceMap[key] += '';
-          } else if (key === 'fjmap') {
-            sourceMap[key].forEach(pItem => {
-              pItem.forEach(cItem => {
-                cItem.color = this.getColor(cItem.fjzt);
-                cItem.isShow = true;
-              });
-            });
-          }
-        }
-        this.sourceMap = sourceMap;
-      } else {
-        this.sourceMap = {};
-      }
-    }
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   }
 };
 </script>

src/views/LightMatrix1/LightMatrix1.vue

@@ -132,9 +132,9 @@ import Col from "@/components/coms/grid/col.vue";
 import SvgIcon from '@com/coms/icon/svg-icon.vue';
 import util from '@/helper/util.js';
 
-import { datainit, webtest } from "@tools/websocket.js";
 import store from "@store/index.js";
 import { isNumber } from 'util';
+import { setInterval, clearInterval } from 'timers';
 
 export default {
   // 名称
@@ -145,11 +145,11 @@ export default {
     Col,
     SvgIcon
   },
+
   // 数据
   data () {
     return {
-      loadingFlg: false, // 遮罩开关
-      websocketServe: null, // websocket 服务实例
+      timmer: null, // 计时器
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
@@ -216,6 +216,7 @@ export default {
       }]
     }
   },
+
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
@@ -277,58 +278,56 @@ export default {
       });
       this.sourceMap.fjmap = fjmap;
     },
-  },
 
-  mounted () {
-    let that = this;
-    that.loadingFlg = true;
-    that.BASE.showLoading();
-    that.$nextTick(() => {
-      that.websocketServe && that.websocketServe.disconnect();
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
       that.API.requestData({
+        showLoading,
         method: "POST",
-        subUrl: "admin/websocketdisconnect",
-        success () {
-          that.websocketServe = datainit("/topic/matrixpushtask");
+        subUrl: "matrix/matrixPush",
+        success (res) {
+          if (res) {
+            let sourceMap = res.data;
+            let fjmap = [];
+            for (let key in sourceMap) {
+              if (key !== 'fczbmap' && key !== 'fjmap') {
+                sourceMap[key] += '';
+              } else if (key === 'fjmap') {
+                sourceMap[key].forEach(pItem => {
+                  pItem.forEach(cItem => {
+                    cItem.color = that.getColor(cItem.fjzt);
+                    cItem.isShow = true;
+                  });
+                });
+              }
+            }
+            that.sourceMap = sourceMap;
+            if (that.fillCategory) {
+              that.changeShow(that.fillCategory, that.fillFjzt, true);
+            }
+          } else {
+            that.sourceMap = {};
+          }
+
         }
       });
-    });
+    }
   },
 
-  beforeDestroy () {
-    // 离开页面，销毁 websocket 实例
-    this.websocketServe && this.websocketServe.disconnect();
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+      that.requestData(true);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
+    });
   },
 
-  watch: {
-    // 监听 websocket 回调并包装数据用于展示
-    '$store.state.windturbineMap': function (res) {
-
-      this.loadingFlg && this.BASE.closeLoading();
-      this.loadingFlg = false;
-      if (res) {
-        let sourceMap = JSON.parse(res);
-        let fjmap = [];
-        for (let key in sourceMap) {
-          if (key !== 'fczbmap' && key !== 'fjmap') {
-            sourceMap[key] += '';
-          } else if (key === 'fjmap') {
-            sourceMap[key].forEach(pItem => {
-              pItem.forEach(cItem => {
-                cItem.color = this.getColor(cItem.fjzt);
-                cItem.isShow = true;
-              });
-            });
-          }
-        }
-        this.sourceMap = sourceMap;
-        if (this.fillCategory) {
-          this.changeShow(this.fillCategory, this.fillFjzt, true);
-        }
-      } else {
-        this.sourceMap = {};
-      }
-    }
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   }
 }
 </script>
@@ -438,7 +437,7 @@ export default {
         }
         &:last-child {
           font-size: @fontsize;
-          font-family: "Bicubik";
+          font-family: 'Bicubik';
         }
       }
     }
@@ -468,7 +467,7 @@ export default {
         position: relative;
 
         &::after {
-          content: "";
+          content: '';
           position: absolute;
           width: 1.481vh;
           height: 0.556vh;
@@ -516,7 +515,7 @@ export default {
 
           .sub-count {
             font-size: @fontsize-s;
-            font-family: "Bicubik";
+            font-family: 'Bicubik';
             font-weight: 500;
 
             &.write {

src/views/LightMatrix2/LightMatrix2.vue

@@ -84,7 +84,6 @@ import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
 import util from "@/helper/util.js";
 
-import { datainit, webtest } from "@tools/websocket.js";
 import store from "@store/index.js";
 
 export default {
@@ -98,8 +97,7 @@ export default {
   // 数据
   data () {
     return {
-      loadingFlg: false, // 遮罩开关
-      websocketServe: null, // websocket 服务实例
+      timmer: null, // 计时器
       sourceMap: {}, // 核心数据
       panel1Data: {
         first: {
@@ -308,96 +306,54 @@ export default {
       return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
     },
 
-    createGroupDatas: function (table) {
-      table.groupDatas = [];
-      let tempDatas = [];
-      table.datas.forEach((data, index) => {
-        if (index % table.col == 0) {
-          if (tempDatas.length > 0) {
-            table.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "matrix/matrixQfPush",
+        success (res) {
+          if (res.data) {
+            let sourceMap = res.data;
+            for (let key in sourceMap) {
+              if (key !== 'fczbmap' && key !== 'fjmap') {
+                sourceMap[key] += '';
+              } else if (key === 'fjmap') {
+                sourceMap[key].forEach(pItem => {
+                  pItem.forEach(cItem => {
+                    cItem.color = that.getColor(cItem.fjzt);
+                    cItem.isShow = true;
+                  });
+                });
+              }
+            }
+            that.sourceMap = sourceMap;
+          } else {
+            that.sourceMap = {};
           }
         }
-        tempDatas.push(util.copy(data));
       });
-      if (tempDatas.length > 0) {
-        table.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
-
-  created () {
-    // 创建后
-    let tempData = [];
-    for (let i = 0; i < 45; i++) {
-      tempData.push(util.copy(this.tables[0].datas[0]));
-      if (i == 39) {
-        tempData[i].color = "green";
-      }
-      if (i == 40) {
-        tempData[i].color = "pink";
-      }
-      if (i == 41) {
-        tempData[i].color = "orange";
-      }
-      if (i == 42) {
-        tempData[i].color = "red";
-      }
-      if (i == 43) {
-        tempData[i].color = "write";
-      }
-      if (i == 44) {
-        tempData[i].color = "gray";
-      }
-    }
-    this.tables[0].datas = util.copy(tempData);
-    this.createGroupDatas(this.tables[0]);
-    for (let i = 0; i < 5; i++) {
-      this.tables.push(util.copy(this.tables[0]));
     }
   },
 
-  mounted () {
+  created () {
     let that = this;
-    that.loadingFlg = true;
-    that.BASE.showLoading();
     that.$nextTick(() => {
-      that.websocketServe && that.websocketServe.disconnect();
-      that.API.requestData({
-        method: "POST",
-        subUrl: "admin/websocketdisconnect",
-        success () {
-          that.websocketServe = datainit("/topic/matrixqfpushtask");
-        }
-      });
+      that.requestData(true);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
     });
   },
 
-  watch: {
-    // 监听 websocket 回调并包装数据用于展示
-    '$store.state.windturbineMap': function (res) {
-      this.loadingFlg && this.BASE.closeLoading();
-      this.loadingFlg = false;
-      if (res) {
-        let sourceMap = JSON.parse(res);
-        for (let key in sourceMap) {
-          if (key !== 'fczbmap' && key !== 'fjmap') {
-            sourceMap[key] += '';
-          } else if (key === 'fjmap') {
-            sourceMap[key].forEach(pItem => {
-              pItem.forEach(cItem => {
-                cItem.color = this.getColor(cItem.fjzt);
-                cItem.isShow = true;
-              });
-            });
-          }
-        }
-        this.sourceMap = sourceMap;
-      } else {
-        this.sourceMap = {};
-      }
-    }
+  mounted () {
+
+  },
+
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   }
 };
 </script>

src/views/LightMatrix3/LightMatrix3.vue

@@ -107,7 +107,6 @@ import Col from "@/components/coms/grid/col.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import util from "@/helper/util.js";
 
-import { datainit, webtest } from "@tools/websocket.js";
 import store from "@store/index.js";
 
 export default {
@@ -119,11 +118,11 @@ export default {
     Col,
     SvgIcon,
   },
+
   // 数据
   data () {
     return {
-      loadingFlg: false, // 遮罩开关
-      websocketServe: null, // websocket 服务实例
+      timmer: null, // 遮罩开关
       sourceMap: {}, // 核心数据
       mapping: {
         green: "svg-standby",
@@ -314,6 +313,7 @@ export default {
       ],
     };
   },
+
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
@@ -347,99 +347,55 @@ export default {
       return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
     },
 
-    createGroupDatas (table) {
-      table.groupDatas = [];
-      let tempDatas = [];
-      table.datas.forEach((data, index) => {
-        if (index % table.col == 0) {
-          if (tempDatas.length > 0) {
-            table.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "matrix/matrixDetialPush",
+        success (res) {
+          if (res.data) {
+            let sourceMap = res.data;
+            for (let key in sourceMap) {
+              if (key !== 'fczbmap' && key !== 'fjmap') {
+                sourceMap[key] += '';
+              } else if (key === 'fjmap') {
+                sourceMap[key].forEach(pItem => {
+                  pItem.forEach(cItem => {
+                    cItem.color = that.getColor(cItem.fjzt);
+                    cItem.isShow = true;
+                  });
+                });
+              }
+            }
+            that.sourceMap = sourceMap;
+          } else {
+            that.sourceMap = {};
           }
         }
-        tempDatas.push(util.copy(data));
       });
-      if (tempDatas.length > 0) {
-        table.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
-
-  created () {
-    // 创建后
-    let tempData = [];
-    for (let i = 0; i < 45; i++) {
-      tempData.push(util.copy(this.tables[0].datas[0]));
-      if (i == 39) {
-        tempData[i].color = "green";
-      }
-      if (i == 40) {
-        tempData[i].color = "pink";
-      }
-      if (i == 41) {
-        tempData[i].color = "orange";
-      }
-      if (i == 42) {
-        tempData[i].color = "red";
-      }
-      if (i == 43) {
-        tempData[i].color = "write";
-      }
-      if (i == 44) {
-        tempData[i].color = "gray";
-      }
-    }
-    this.tables[0].datas = util.copy(tempData);
-    this.createGroupDatas(this.tables[0]);
-    for (let i = 0; i < 5; i++) {
-      this.tables.push(util.copy(this.tables[0]));
     }
   },
 
-  mounted () {
-    // 渲染后
+  created () {
     let that = this;
-    that.loadingFlg = true;
-    that.BASE.showLoading();
     that.$nextTick(() => {
-      that.websocketServe && that.websocketServe.disconnect();
-      that.API.requestData({
-        method: "POST",
-        subUrl: "admin/websocketdisconnect",
-        success () {
-          that.websocketServe = datainit("/topic/matrixdetialpushtask");
-        }
-      });
+      that.requestData(true);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
     });
   },
 
-  watch: {
-    // 监听 websocket 回调并包装数据用于展示
-    '$store.state.windturbineMap': function (res) {
-      this.loadingFlg && this.BASE.closeLoading();
-      this.loadingFlg = false;
-      if (res) {
-        let sourceMap = JSON.parse(res);
-        for (let key in sourceMap) {
-          if (key !== 'fczbmap' && key !== 'fjmap') {
-            sourceMap[key] += '';
-          } else if (key === 'fjmap') {
-            sourceMap[key].forEach(pItem => {
-              pItem.forEach(cItem => {
-                cItem.color = this.getColor(cItem.fjzt);
-                cItem.isShow = true;
-              });
-            });
-          }
-        }
-        this.sourceMap = sourceMap;
-      } else {
-        this.sourceMap = {};
-      }
-    }
-  }
+  mounted () {
+
+  },
 
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  }
 };
 </script>