✨ feat(): 资源监控页面添加报告导出功能

frontend/src/views/system/components/EvmChart.vue

@@ -31,7 +31,7 @@ import { wsNotify } from "@/utils/eventBus.js";
 //   dataList.push(randomData());
 // }
 
-let chart = null
+let chart = null;
 
 const seriesData = {
   heap_total_size: [],
@@ -131,12 +131,21 @@ export default {
       this.initChart();
     });
 
+    wsNotify.eventBus.$on("exportImg", () => {
+      let picInfo = chart.getDataURL({
+        type: "png",
+        pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
+        backgroundColor: "#fff",
+      }); //获取到的是一串base64信息
+      wsNotify.eventBus.$emit("exported", { type: "evm", data: picInfo });
+    });
+
     wsNotify.eventBus.$on("resize", () => {
-      if (chart) chart.resize()
+      if (chart) chart.resize();
     });
 
     wsNotify.eventBus.$on("clear-evm-chart", () => {
-      this.setOptions()
+      this.setOptions();
     });
   },
   beforeDestroy() {
@@ -159,7 +168,7 @@ export default {
       chart.setOption({ series: this.series });
     },
     handleMessage(data) {
-      if (!data || data.length == 0) this.cleanData()
+      if (!data || data.length == 0) this.cleanData();
       // 这里面应该增加一个数组长度判断，当超过了多少个之后，弹出数组第一项，防止数组内存溢出
       // seriesData[k].shift()
       Object.keys(data).forEach((k) => {

frontend/src/views/system/components/LvglChart.vue

@@ -155,6 +155,15 @@ export default {
       this.initChart();
     });
 
+    wsNotify.eventBus.$on("exportImg", () => {
+      let picInfo = chart.getDataURL({
+        type: "png",
+        pixelRatio: 1.5,
+        backgroundColor: "#fff",
+      });
+      wsNotify.eventBus.$emit("exported", { type: "lvgl", data: picInfo });
+    });
+
     wsNotify.eventBus.$on("resize", () => {
       if (chart) chart.resize()
     });

frontend/src/views/system/components/SystemChart.vue

@@ -103,6 +103,15 @@ export default {
       this.initChart();
     });
 
+    wsNotify.eventBus.$on("exportImg", () => {
+      let picInfo = chart.getDataURL({
+        type: "png",
+        pixelRatio: 1.5,
+        backgroundColor: "#fff",
+      });
+      wsNotify.eventBus.$emit("exported", { type: "system", data: picInfo });
+    });
+
     wsNotify.eventBus.$on("resize", () => {
       if (chart) chart.resize()
     });

frontend/src/views/system/monitor.vue

@@ -399,7 +399,7 @@ import LvglChart from "./components/LvglChart";
 import SystemChart from "./components/SystemChart";
 import { GridLayout, GridItem } from "vue-grid-layout";
 import { wsNotify } from "@/utils/eventBus.js";
-import { deepClone } from "@/utils/index"
+import { deepClone, download } from "@/utils/index";
 import Database from "@/utils/indexedDB";
 
 const dbObject = {
@@ -422,6 +422,58 @@ const dbObject = {
 const indexedDb = Database();
 let monitor = new indexedDb(dbObject);
 
+function resetResult() {
+  return {
+    systemMax: {},
+    systemMin: {},
+    systemAvg: {},
+    systemFirst: {},
+    systemLast: {},
+
+    evmMax: {},
+    evmMin: {},
+    evmAvg: {},
+    evmFirst: {},
+    evmLast: {},
+
+    lvglMax: {},
+    lvglMin: {},
+    lvglAvg: {},
+    lvglFirst: {},
+    lvglLast: {},
+
+    systemImg: null,
+    evmImg: null,
+    lvglImg: null,
+
+    imageList: [],
+  };
+}
+
+const result = resetResult();
+
+const system = {
+    free_size: null,
+    free_space_size: null,
+    used_space_size: null,
+  },
+  evm = {
+    heap_map_size: null,
+    heap_total_size: null,
+    heap_used_size: null,
+    stack_total_size: null,
+    stack_used_size: null,
+  },
+  lvgl = {
+    frag_pct: null,
+    free_biggest_size: null,
+    free_cnt: null,
+    free_size: null,
+    total_size: null,
+    used_cnt: null,
+    used_pct: null,
+  };
+
 export default {
   name: "Monitor",
   data() {
@@ -432,12 +484,22 @@ export default {
       device: null,
       devices: {},
       deviceList: null,
-      system: {},
+      system: {
+        free_size: null,
+        free_space_size: null,
+        used_space_size: null,
+      },
       systemList: [],
       systemHistory: [],
       evmHistory: [],
       lvglHistory: [],
-      evm: {},
+      evm: {
+        heap_map_size: null,
+        heap_total_size: null,
+        heap_used_size: null,
+        stack_total_size: null,
+        stack_used_size: null,
+      },
       evmList: [],
       lvgl: {},
       lvglList: [],
@@ -489,33 +551,147 @@ export default {
         });
     },
     getReport() {
+      wsNotify.eventBus.$emit("exportImg");
       monitor
         .getAllData((params) => {
           return params.imei && params.imei == this.device;
         })
         .then((res) => {
           console.log(res);
-          // const systemList = [],
-          //   evmList = [],
-          //   lvglList = [];
-          // res.forEach((item) => {
-          //   systemList.push(item.system);
-          //   evmList.push(item.evm);
-          //   lvglList.push(item.lvgl);
-          // });
+
+          // 最大值 最小值 平均值 第一次 最后一次
+          const systemList = [],
+            evmList = [],
+            lvglList = [];
+          let appList = [];
+
+          res.forEach((item) => {
+            systemList.push(
+              Object.assign(
+                { ts: Date.parse(item.system.timestamp) },
+                item.system
+              )
+            );
+            evmList.push(
+              Object.assign({ ts: Date.parse(item.system.timestamp) }, item.evm)
+            );
+            lvglList.push(
+              Object.assign(
+                { ts: Date.parse(item.system.timestamp) },
+                item.lvgl
+              )
+            );
+
+            appList = appList.concat(item.image.map((img) => {
+              if (img.png_detail && img.png_detail.length) {
+                result.imageList = result.imageList.concat(
+                  img.png_detail.map((p) => {
+                    p.page = item.uri;
+                    return p;
+                  })
+                );
+              }
+              return Object.assign({ ts: Date.parse(item.system.timestamp), ...img })
+            }));
+          });
+
+          result.appList = appList
+
+          Object.keys(evm).forEach((k) => {
+            result.evmFirst[k] = 0;
+            result.evmLast[k] = 0;
+            let first = 0,
+              last = Date.now();
+            const t = evmList.map((item) => {
+              if (item.ts > first) {
+                first = item.ts;
+                result.evmFirst[k] = item[k];
+              }
+              if (item.ts < last) {
+                last = item.ts;
+                result.evmLast[k] = item[k];
+              }
+              return item[k];
+            });
+
+            result.evmMax[k] = Math.max.apply(null, t);
+            result.evmMin[k] = Math.min.apply(null, t);
+            result.evmAvg[k] = Math.ceil(
+              t.reduce((prev, curr) => prev + curr) / t.length
+            );
+          });
+
+          Object.keys(lvgl).forEach((k) => {
+            result.lvglFirst[k] = 0;
+            result.lvglLast[k] = 0;
+            let first = 0,
+              last = Date.now();
+            const t = lvglList.map((item) => {
+              if (item.ts > first) {
+                first = item.ts;
+                result.lvglFirst[k] = item[k];
+              }
+              if (item.ts < last) {
+                last = item.ts;
+                result.lvglLast[k] = item[k];
+              }
+              return item[k];
+            });
+
+            result.lvglMax[k] =  Math.max.apply(null, t);
+            result.lvglMin[k] = Math.min.apply(null, t);
+            result.lvglAvg[k] = Math.ceil(
+              t.reduce((prev, curr) => prev + curr) / t.length
+            );
+          });
+
+          Object.keys(system).forEach((k) => {
+            result.systemFirst[k] = 0;
+            result.systemLast[k] = 0;
+            let first = 0,
+              last = Date.now();
+            const t = systemList.map((item) => {
+              if (item.ts > first) {
+                first = item.ts;
+                result.systemFirst[k] = item[k];
+              }
+              if (item.ts < last) {
+                last = item.ts;
+                result.systemLast[k] = item[k];
+              }
+              return item[k];
+            });
+
+            result.systemMax[k] =  Math.max.apply(null, t);
+            result.systemMin[k] = Math.min.apply(null, t);
+            result.systemAvg[k] = Math.ceil(
+              t.reduce((prev, curr) => prev + curr) / t.length
+            );
+          });
+
+          result.imei = this.globalData.imei
+          result.timestamp = this.globalData.system.timestamp
 
           let params = {
             templateName: "evue-monitor.json",
-            dataJson: res,
+            dataJson: result,
           };
 
           return getReport(params);
         })
         .then((res) => {
+          if (res.retcode == 0) {
+            download(res.message.file, res.message.url).then(res => {
+              console.log(res)
+            }).catch(err => {
+              console.log(err)
+            })
+            this.$message.success("success")
+          }
           console.log(res);
         })
         .catch((err) => {
-          this.$message.error(err.msg);
+          // this.$message.error(err.msg);
           console.log(err);
         });
     },
@@ -667,12 +843,12 @@ export default {
     resetData(m) {
       wsNotify.eventBus.$emit("resize");
 
-      this.evmList = [{ ...this.globalData.evm }];
-      this.lvglList = [{ ...this.globalData.lvgl }];
+      this.evmList = [{ ...m.evm }];
+      this.lvglList = [{ ...m.lvgl }];
       this.systemList = [
         {
-          imei: this.globalData.imei,
-          ...this.globalData.system,
+          imei: m.imei,
+          ...m.system,
         },
       ];
 
@@ -682,8 +858,8 @@ export default {
         item.highlight = false;
         uris.push(item.uri);
       });
-      this.globalData.image &&
-        this.globalData.image.forEach((item) => {
+      m.image &&
+        m.image.forEach((item) => {
           if (item.png_uncompressed_size > 0) {
             item.highlight = true;
           } else {
@@ -715,16 +891,23 @@ export default {
           }
         });
 
-      if (m) {
-        if (m.evm) this.evm = m.evm;
-        if (m.lvgl) this.lvgl = m.lvgl;
-        if (m.image) this.image = m.image;
-        if (m.system) this.system = m.system;
+      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;
+        if (this.globalData.system) this.system = this.globalData.system;
       }
     },
   },
   mounted() {
     this.socket = wsNotify;
+    wsNotify.eventBus.$on("exported", (res) => {
+      console.log(res);
+      if (res.type === "evm") result.evmImg = res.data;
+      else if (res.type === "lvgl") result.lvglImg = res.data;
+      else if (res.type === "system") result.systemImg = res.data;
+    });
+
     wsNotify.eventBus.$on("open", (message) => {
       this.sendMsg();
       this.$nextTick(() => {
@@ -745,7 +928,9 @@ export default {
   },
   destroyed() {
     // 页面关闭则销毁该数据库
-    monitor.deleteDB();
+    // monitor.deleteDB();
+    monitor.clearData();
+    // monitor.close();
   },
   created() {
     monitor

tools/build_out/tests/http_interval.py

 '''
 Author: your name
 Date: 2021-07-22 19:01:41
-LastEditTime: 2021-07-24 09:48:09
+LastEditTime: 2021-07-26 03:23:07
 LastEditors: Please set LastEditors
 Description: In User Settings Edit
 FilePath: \evm-store\tools\build_out\tests\http_interval.py
@@ -16,7 +16,7 @@ from threading import Timer, Thread
 def send_request(imei):
     payload = {
         "system": {"free_size": 1769792, "free_space_size": 5156864, "used_space_size": 1134592},
-        "lvgl": {"total_size": 0, "free_cnt": 0, "free_size": 0, "free_biggest_size": 0, "used_cnt": 0, "used_pct": 0, "frag_pct": 0},
+        "lvgl": {"total_size": 100, "free_cnt": 50, "free_size": 23, "free_biggest_size": 53, "used_cnt": 78, "used_pct":43, "frag_pct": 76},
         "evm": {"heap_total_size": 2097152, "heap_used_size": 575072, "heap_map_size": 8192, "stack_total_size": 102400, "stack_used_size": 1312},
         "image": [
             {"uri": "evue_launcher", "length": 13515, "png_total_count": 0,