update

frontend/src/views/system/chart.vue

@@ -25,14 +25,12 @@
     </el-form>
     <LineChart :chartData="evm" :dataList="evmList"></LineChart>
     <LvglChart :chartData="lvgl"></LvglChart>
-    <ImageChart :chartData="image"></ImageChart>
   </div>
 </template>
 <script>
 import { getWatchList, getMonitorData } from "@/api/index";
 import LineChart from "./components/EvmChart";
 import LvglChart from "./components/LvglChart";
-import ImageChart from "./components/ImageChart";
 import { wsNotify } from "@/utils/eventBus.js";
 export default {
   name: "AppChart",
@@ -59,7 +57,6 @@ export default {
   components: {
     LineChart,
     LvglChart,
-    ImageChart,
   },
   methods: {
     sendMsg() {

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

@@ -113,12 +113,7 @@ export default {
           data: seriesData.stack_used_size,
         },
       ],
-      legendData: [
-        "heap_total_size",
-        "heap_used_size",
-        "stack_total_size",
-        "stack_used_size",
-      ],
+      legendData: Object.keys(seriesData),
     };
   },
   watch: {
@@ -229,13 +224,14 @@ export default {
           //   show: false,
           // },
           axisLabel: {
-            formatter: "{hh}:{mm}:{ss}",
+            formatter: "{HH}:{mm}:{ss}",
           },
         },
         yAxis: {
           type: "value",
           scale: true,
-          boundaryGap: [0, "100%"],
+          // boundaryGap: [0, "100%"],
+          // splitNumber: 10,
           splitLine: {
             show: false,
           },

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

@@ -7,6 +7,8 @@ import * as echarts from "echarts";
 require("echarts/theme/macarons");
 import resize from "./mixins/resize";
 
+let chart = null
+
 const seriesData = {
   heap_total_size: [],
   heap_used_size: [],
@@ -42,7 +44,6 @@ export default {
   data() {
     return {
       loading: null,
-      chart: null,
       series: [
         {
           name: "heap_total_size",
@@ -54,7 +55,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.heap_total_size,
+          data: [],
         },
         {
           name: "heap_used_size",
@@ -65,7 +66,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.heap_used_size,
+          data: [],
         },
         {
           name: "stack_total_size",
@@ -76,7 +77,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.stack_total_size,
+          data: [],
         },
         {
           name: "stack_used_size",
@@ -87,15 +88,10 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.stack_used_size,
+          data: [],
         },
       ],
-      legendData: [
-        "heap_total_size",
-        "heap_used_size",
-        "stack_total_size",
-        "stack_used_size",
-      ],
+      legendData: Object.keys(seriesData),
     };
   },
   watch: {
@@ -112,25 +108,40 @@ export default {
     });
   },
   beforeDestroy() {
-    if (!this.chart) {
+    if (!chart) {
       return;
     }
-    this.chart.dispose();
-    this.chart = null;
+    chart.clear();
+    chart.dispose();
   },
   methods: {
     handleData(data) {
       Object.keys(seriesData).forEach((key) => {
         seriesData[key] = [];
       });
-      // this.series.forEach((item) => {
-      //   item.data = [];
-      // });
-      // this.chart.setOption({ series: this.series });
 
+      this.series.forEach((item) => {
+        item.data = [];
+      });
+      // chart.setOption({ series: this.series });
       data.forEach((item) => {
         this.handleMessage(item);
       });
+
+      let temp = Object.assign(this.series);
+      temp.forEach(item => {
+        if (Object.prototype.hasOwnProperty.call(seriesData, item.name)) {
+          item.data = seriesData[item.name]
+        }
+      });
+      this.series = temp;
+
+      this.$nextTick(() => {
+        chart &&
+          chart.setOption({
+            series: this.series,
+          });
+      });
     },
     handleMessage(data) {
       Object.keys(data).forEach((k) => {
@@ -141,20 +152,13 @@ export default {
           });
         }
       });
-
-      this.$nextTick(() => {
-        this.chart &&
-          this.chart.setOption({
-            series: this.series,
-          });
-      });
     },
     initChart() {
-      this.chart = echarts.init(this.$el, "macarons");
+      chart = echarts.init(this.$el, "macarons");
       this.setOptions();
     },
     setOptions() {
-      this.chart.setOption({
+      chart.setOption({
         title: {
           text: "EVM",
         },
@@ -169,13 +173,12 @@ export default {
           //   show: false,
           // },
           axisLabel: {
-            formatter: "{hh}:{mm}:{ss}",
+            formatter: "{HH}:{mm}:{ss}",
           },
         },
         yAxis: {
           type: "value",
           scale: true,
-          boundaryGap: [0, "100%"],
           splitLine: {
             show: false,
           },

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

@@ -207,12 +207,12 @@ export default {
             show: false,
           },
           axisLabel: {
-            formatter: "{hh}:{mm}:{ss}",
+            formatter: "{HH}:{mm}:{ss}",
           },
         },
         yAxis: {
           type: "value",
-          boundaryGap: [0, "100%"],
+          // boundaryGap: [0, "100%"],
           splitLine: {
             show: false,
           },

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

@@ -6,7 +6,6 @@
 import * as echarts from "echarts";
 require("echarts/theme/macarons");
 import resize from "./mixins/resize";
-import { getDateTimeString } from "@/utils/utils";
 
 const seriesData = {
   frag_pct: [],
@@ -56,7 +55,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.frag_pct,
+          data: [],
         },
         {
           name: "free_biggest_size",
@@ -66,7 +65,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.free_biggest_size,
+          data: [],
         },
         {
           name: "free_cnt",
@@ -76,7 +75,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.free_cnt,
+          data: [],
         },
         {
           name: "free_size",
@@ -86,7 +85,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.free_size,
+          data: [],
         },
         {
           name: "total_size",
@@ -96,7 +95,7 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.total_size,
+          data: [],
         },
         {
           name: "used_cnt",
@@ -106,28 +105,20 @@ export default {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.used_cnt,
+          data: [],
         },
         {
-          name: "used_pctused_pct",
+          name: "used_pct",
           type: "line",
           showSymbol: false,
           emphasis: {
             focus: "series",
             blurScope: "coordinateSystem",
           },
-          data: seriesData.used_pctused_pct,
+          data: [],
         },
       ],
-      legendData: [
-        "frag_pct",
-        "free_biggest_size",
-        "free_cnt",
-        "free_size",
-        "total_size",
-        "used_cnt",
-        "used_pctused_pct",
-      ],
+      legendData: Object.keys(seriesData),
     };
   },
   watch: {
@@ -158,22 +149,19 @@ export default {
       this.series.forEach(item => {
         item.data = []
       });
-      this.chart.setOption({ series: this.series });
+      // this.chart.setOption({ series: this.series });
 
       data.forEach((item) => {
         this.handleMessage(item);
       });
-    },
-    handleMessage(data) {
-      Object.keys(data).forEach((k) => {
-        var t = getDateTimeString(new Date());
-        if (k == "timestamp") t = data[k];
-        if (this.legendData.includes(k))
-          seriesData[k].push({
-            name: k,
-            value: [t, data[k]],
-          });
+
+      let temp = Object.assign(this.series);
+      temp.forEach(item => {
+        if (Object.prototype.hasOwnProperty.call(seriesData, item.name)) {
+          item.data = seriesData[item.name]
+        }
       });
+      this.series = temp;
 
       this.$nextTick(() => {
         this.chart &&
@@ -182,6 +170,15 @@ export default {
           });
       });
     },
+    handleMessage(data) {
+      Object.keys(data).forEach((k) => {
+        if (this.legendData.includes(k))
+          seriesData[k].push({
+            name: k,
+            value: [data.timestamp, data[k]],
+          });
+      });
+    },
     initChart() {
       this.chart = echarts.init(this.$el, "macarons");
       this.setOptions();
@@ -197,12 +194,11 @@ export default {
             show: false,
           },
           axisLabel: {
-            formatter: "{hh}:{mm}:{ss}",
+            formatter: "{HH}:{mm}:{ss}",
           },
         },
         yAxis: {
           type: "value",
-          boundaryGap: [0, "100%"],
           splitLine: {
             show: false,
           },

frontend/src/views/system/history.vue

@@ -37,8 +37,8 @@
       >
       <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
     </el-form>
-    <EvmHistoryChart :dataList="[]"></EvmHistoryChart>
-    <LvglHistoryChart :dataList="[]"></LvglHistoryChart>
+    <EvmHistoryChart :dataList="evmList"></EvmHistoryChart>
+    <LvglHistoryChart :dataList="lvglList"></LvglHistoryChart>
   </div>
 </template>
 <script>
@@ -100,6 +100,12 @@ export default {
   },
   methods: {
     fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
       let params = {
         watch: this.watch_id,
       };
@@ -113,6 +119,7 @@ export default {
       }
       getMonitorData(params)
         .then((res) => {
+          console.log("====>", res.type);
           if (res.type == "object") {
             this.evmList = res.data.evm;
             this.lvglList = res.data.lvgl;
@@ -125,6 +132,9 @@ export default {
         })
         .catch((err) => {
           this.$message.warning(err.msg);
+        })
+        .finally(() => {
+          loading.close();
         });
     },
     fetchSelectData() {
@@ -132,7 +142,6 @@ export default {
       getWatchList()
         .then((res) => {
           if (res.code == 200) this.watchs = res.data;
-          console.log(this.watchs);
         })
         .catch((err) => {
           this.$message.warning(err.msg);

frontend/src/views/system/monitor.vue

@@ -306,7 +306,17 @@ export default {
       this.lvgl = [{ ...msg.lvgl }];
       this.evm = [{ ...msg.evm }];
       this.request = [{ ...msg.request }];
-      this.image = msg.image;
+      // 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新
+      let uris = [];
+      this.image.forEach((img) => {
+        uris.push(img.uri)
+      });
+      msg.image.forEach((item) => {
+        if (!uris.includes(item.uri)) {
+          this.image.push(item)
+        }
+      });
+      // this.image = msg.image;
     },
     onSelectChange(res) {
       this.device = res;
@@ -316,22 +326,22 @@ export default {
   },
   mounted() {},
   created() {
-    this.socket = wsNotify
+    this.socket = wsNotify;
     wsNotify.eventBus.$on("open", (message) => {
       this.sendMsg();
       this.$nextTick(() => {
-        console.log(message)
+        console.log(message);
       });
     });
     wsNotify.eventBus.$on("close", (message) => {
       this.$nextTick(() => {
-        console.log(message)
+        console.log(message);
       });
     });
     wsNotify.eventBus.$on("message", (message) => {
       this.$nextTick(() => {
-        console.log(message)
-        this.handleMessage(message)
+        console.log(message);
+        this.handleMessage(message);
       });
     });
     // this.initWebSocket();