🎈 perf(监控模块前端):

修复数据覆盖问题

frontend/package.json

@@ -13,6 +13,7 @@
     "codemirror": "^5.50.0",
     "core-js": "^3.9.0",
     "dateformat": "^3.0.3",
+    "echarts": "^5.1.2",
     "el-table-infinite-scroll": "^1.0.10",
     "element-ui": "^2.13.0",
     "js-cookie": "^2.2.1",

frontend/src/utils/eventBus.js

 /*
  * @Author: your name
  * @Date: 2021-07-01 15:02:16
- * @LastEditTime: 2021-07-05 15:22:36
- * @LastEditors: your name
+ * @LastEditTime: 2021-07-20 23:30:33
+ * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \evm-store\frontend\src\utils\eventBus.js
  */

frontend/src/views/system/monitor.vue

@@ -341,6 +341,7 @@ export default {
   data() {
     return {
       watchs: [],
+      globalData: null,
       device: null,
       devices: {},
       deviceList: null,
@@ -505,7 +506,10 @@ export default {
       this.socket.send(message);
     },
     handleMessage(msg) {
-      if (msg.type !== "report" || !msg.imei) return false;
+      if (msg.type !== "report" || !msg.imei) return null;
+      // 如果接收到的数据不是当前选中的设备，那么则直接丢弃
+      // 这里可以优化，将所有数据，保存到indexed datebase中
+      if (this.device && msg.imei != this.device) return null;
 
       if (!this.deviceList) {
         this.deviceList = [];
@@ -518,8 +522,10 @@ export default {
         else this.device = msg.imei;
       }
 
-      this.devices[msg.imei] = msg;
+      // 处理单位
       this.processData(msg);
+      // this.devices[msg.imei] = msg;
+      this.globalData = msg;
       this.resetData();
     },
     processData(msg) {
@@ -529,11 +535,9 @@ export default {
           var keys = this.form[item];
           for (var i = 0; i < keys.length; i++) {
             var k = keys[i];
-            // 只有当png_uncompressed_size不为0才更新
             if (item == "image") {
               for (var j = 0; j < msg[item].length; j++) {
-                if (msg[item][j][k])
-                  msg[item][j][k] = Math.ceil(msg[item][j][k] / 1024);
+                msg[item][j][k] = Math.ceil(msg[item][j][k] / 1024);
               }
             } else {
               msg[item][k] = Math.ceil(msg[item][k] / 1024);
@@ -544,37 +548,44 @@ export default {
     },
     onSelectChange(res) {
       this.device = res;
-      this.processData(this.devices[this.device]);
-      this.resetData();
+      // this.processData(this.devices[this.device]);
+      // this.resetData();
       console.log(res);
     },
     resetData() {
       wsNotify.eventBus.$emit("resize");
 
-      this.evmList = [{ ...this.devices[this.device].evm }];
-      this.lvglList = [{ ...this.devices[this.device].lvgl }];
-      this.system = [{ imei: this.devices[this.device].imei, ...this.devices[this.device].system, ...this.devices[this.device].request }];
+      this.evmList = [{ ...this.globalData.evm }];
+      this.lvglList = [{ ...this.globalData.lvgl }];
+      this.system = [{ imei: this.globalData.imei, ...this.globalData.system, ...this.globalData.request }];
 
       // 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新
       let uris = [];
       this.imageList.forEach((img) => {
         uris.push(img.uri);
       });
-      this.devices[this.device].image &&
-        this.devices[this.device].image.forEach((item) => {
-          if (!uris.includes(item.uri)) {
-            this.imageList.push(item);
+      this.globalData.image &&
+        this.globalData.image.forEach((item) => {
+          const target = this.imageList.find(img => img.uri === item.uri)
+          if (target) {
+            if (item.png_uncompressed_size && item.png_uncompressed_size !== target.png_uncompressed_size)
+              target.png_uncompressed_size = item.png_uncompressed_size
+            if (item.png_file_size && item.png_file_size !== target.png_file_size)
+              target.png_file_size = item.png_file_size
+            target.length = item.length
+            target.png_total_count = item.png_total_count
+          } else {
+            this.imageList.push(item)
           }
         });
-      // this.imageList = msg.image;
 
-      if (this.devices[this.device]) {
-        if (this.devices[this.device].evm)
-          this.evm = this.devices[this.device].evm;
-        if (this.devices[this.device].lvgl)
-          this.lvgl = this.devices[this.device].lvgl;
-        if (this.devices[this.device].image)
-          this.image = this.devices[this.device].image;
+      if (this.globalData) {
+        if (this.globalData.evm)
+          this.evm = this.globalData.evm;
+        if (this.globalData.lvgl)
+          this.lvgl = this.globalData.lvgl;
+        if (this.globalData.image)
+          this.image = this.globalData.image;
       }
     },
   },

frontend/vue.config.js

@@ -30,11 +30,11 @@ module.exports = {
         proxy: {
             // change xxx-api/login => mock/login
             // detail: https://cli.vuejs.org/config/#devserver-proxy
-            "/api/v1": {
-                target: "http://127.0.0.1:3000/",
-                changeOrigin: true,
-                pathRewrite: {},
-            },
+            // "/api/v1": {
+            //     target: "http://127.0.0.1:3000/",
+            //     changeOrigin: true,
+            //     pathRewrite: {},
+            // },
             "/api/v1/evm_store": {
                 target: "http://store.evmiot.com/",
                 changeOrigin: true,