✨ feat(资源监视器): 前端增加资源监视器系统字段

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

+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+import { getDateTimeString } from "@/utils/utils";
+import { wsNotify } from "@/utils/eventBus.js";
+
+const seriesData = {
+  free_size: [],
+  free_space_size: [],
+  used_space_size: [],
+  total_size: [],
+  used_cnt: [],
+  used_pct: [],
+};
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "270px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: true,
+    },
+    dataList: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      series: [
+        {
+          name: "free_size",
+          type: "line",
+          showSymbol: false,
+          emphasis: {
+            scale: false,
+            focus: "series",
+            blurScope: "coordinateSystem",
+          },
+          data: seriesData.free_size,
+        },
+        {
+          name: "free_space_size",
+          type: "line",
+          showSymbol: false,
+          emphasis: {
+            focus: "series",
+            blurScope: "coordinateSystem",
+          },
+          data: seriesData.free_space_size,
+        },
+        {
+          name: "used_space_size",
+          type: "line",
+          showSymbol: false,
+          emphasis: {
+            focus: "series",
+            blurScope: "coordinateSystem",
+          },
+          data: seriesData.used_space_size,
+        },
+      ],
+      legendData: [
+        "free_size",
+        "free_space_size",
+        "used_space_size"
+      ],
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.handleMessage(val);
+      },
+    },
+    dataList: {
+      deep: true,
+      handler(val) {
+        if (val.length > 0) this.handleData(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+
+    wsNotify.eventBus.$on("resize", () => {
+      if (this.chart) this.chart.resize()
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    handleData(data) {
+      Object.keys(seriesData).forEach(key => {
+        seriesData[key] = []
+      });
+      this.series.forEach(item => {
+        item.data = []
+      });
+      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]],
+          });
+      });
+
+      this.$nextTick(() => {
+        this.chart &&
+          this.chart.setOption({
+            series: this.series,
+          });
+      });
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions();
+    },
+    setOptions() {
+      this.chart.setOption({
+        title: {
+          text: "SYSTEM",
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 10,
+          top: 50,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "time",
+          splitLine: {
+
+          },
+          axisLabel: {
+            formatter: "{HH}:{mm}:{ss}",
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: [0, "100%"],
+          splitLine: {
+
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            animation: false,
+          },
+          padding: [5, 10],
+        },
+        legend: {
+          data: this.legendData,
+          selected: {
+            free_size: true,
+            free_space_size: true,
+            used_space_size: false
+          },
+        },
+        series: this.series,
+      });
+    },
+  },
+};
+</script>

frontend/src/views/system/monitor.vue

@@ -59,7 +59,7 @@
           <p class="item-title">SYSTEM</p>
           <el-table
             element-loading-text="Loading"
-            :data="system"
+            :data="systemList"
             size="mini"
             border
             stripe
@@ -310,7 +310,7 @@
           @container-resized="containerResizedEvent"
           @moved="movedEvent"
         >
-          <EvmChart :chartData="evm"></EvmChart>
+          <SystemChart :chartData="system"></SystemChart>
         </grid-item>
         <grid-item
           :x="0"
@@ -323,6 +323,20 @@
           @resized="resizedEvent"
           @container-resized="containerResizedEvent"
           @moved="movedEvent"
+        >
+          <EvmChart :chartData="evm"></EvmChart>
+        </grid-item>
+        <grid-item
+          :x="0"
+          :y="34"
+          :w="12"
+          :h="7"
+          i="8"
+          @resize="resizeEvent"
+          @move="moveEvent"
+          @resized="resizedEvent"
+          @container-resized="containerResizedEvent"
+          @moved="movedEvent"
         >
           <LvglChart :chartData="lvgl"></LvglChart>
         </grid-item>
@@ -334,6 +348,7 @@
 import { getWatchList, getMonitorData } from "@/api/index";
 import EvmChart from "./components/EvmChart";
 import LvglChart from "./components/LvglChart";
+import SystemChart from "./components/SystemChart";
 import { GridLayout, GridItem } from "vue-grid-layout";
 import { wsNotify } from "@/utils/eventBus.js";
 export default {
@@ -345,7 +360,8 @@ export default {
       device: null,
       devices: {},
       deviceList: null,
-      system: [],
+      system: {},
+      systemList: [],
       evm: {},
       evmList: [],
       lvgl: {},
@@ -354,7 +370,7 @@ export default {
       imageList: [],
       socket: null,
       form: {
-        system: ["free_size"],
+        system: ["free_size", "free_space_size", "used_space_size"],
         lvgl: ["total_size", "free_size", "free_biggest_size"],
         evm: [
           "total_size",
@@ -368,13 +384,14 @@ export default {
         image: ["png_uncompressed_size", "png_file_size", "length"],
       },
       layout: [
-        { x: 0, y: 0, w: 6, h: 5, i: "0", static: false },
-        { x: 6, y: 0, w: 6, h: 5, i: "1", static: true },
-        { x: 0, y: 5, w: 6, h: 5, i: "2", static: false },
-        { x: 6, y: 5, w: 6, h: 5, i: "3", static: false },
-        { x: 0, y: 10, w: 12, h: 10, i: "4", static: false },
-        { x: 0, y: 20, w: 12, h: 7, i: "5", static: false },
-        { x: 0, y: 27, w: 12, h: 7, i: "6", static: false },
+        { x: 0, y: 0, w: 6, h: 5, i: "1", static: false },
+        { x: 6, y: 0, w: 6, h: 5, i: "2", static: true },
+        { x: 0, y: 5, w: 6, h: 5, i: "3", static: false },
+        { x: 6, y: 5, w: 6, h: 5, i: "4", static: false },
+        { x: 0, y: 10, w: 12, h: 10, i: "5", static: false },
+        { x: 0, y: 20, w: 12, h: 7, i: "6", static: false },
+        { x: 0, y: 27, w: 12, h: 7, i: "7", static: false },
+        { x: 0, y: 34, w: 12, h: 7, i: "8", static: false },
       ],
       draggable: true,
       resizable: true,
@@ -385,6 +402,7 @@ export default {
     GridItem,
     EvmChart,
     LvglChart,
+    SystemChart,
   },
   methods: {
     moveEvent(i, newX, newY) {
@@ -557,7 +575,7 @@ export default {
 
       this.evmList = [{ ...this.globalData.evm }];
       this.lvglList = [{ ...this.globalData.lvgl }];
-      this.system = [{ imei: this.globalData.imei, ...this.globalData.system, ...this.globalData.request }];
+      this.systemList = [{ imei: this.globalData.imei, ...this.globalData.system, ...this.globalData.request }];
 
       // 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新
       let uris = [];
@@ -586,6 +604,8 @@ export default {
           this.lvgl = this.globalData.lvgl;
         if (this.globalData.image)
           this.image = this.globalData.image;
+        if (this.globalData.system)
+          this.system = this.globalData.system;
       }
     },
   },