修复服务检测顶部仪表盘数据没有动态更新的问题

src/utils/dataUiOptions.ts

@@ -278,9 +278,9 @@ export function getGaugeData({ value = 50 }) {
         "backgroundColor": "#FFFFFFff",
         "color": "#1A1A1Aff",
         "animation": {
-          "use": false,
-          "speed": 1,
-          "acceleration": 1
+          "use": true,
+          "speed": 0.5,
+          "acceleration": 0.5
         },
         "layout": {
           "track": {
@@ -314,7 +314,7 @@ export function getGaugeData({ value = 50 }) {
           "fontSize": 48,
           "prefix": "",
           "suffix": "%",
-          "roundingValue": 1,
+          "roundingValue": 2,
           "showPlusSymbol": false,
           "useRatingColor": true,
           "color": "#1A1A1Aff",

src/views/system/monitor/server/index.vue

@@ -86,6 +86,7 @@ import { VueUiGauge, VueUiXy } from "vue-data-ui";
 import "vue-data-ui/style.css";
 import { getGaugeData, getLine2Data } from "/@/utils/dataUiOptions";
 import { useThemeChange } from '/@/hooks/useCommon';
+import { deepClone } from '/@/utils/other';
 
 let interval: any = null;
 let es: any = null;
@@ -178,21 +179,6 @@ const myChart6Data: any = {
   value: [],
 }
 
-function setOptChart1(value: number) {
-  const chartData = getGaugeData({ value })
-  config.value = chartData.config
-  dataset.value = chartData.dataset
-}
-function setOptChart2(value: number) {
-  const chartData = getGaugeData({ value })
-  config2.value = chartData.config
-  dataset2.value = chartData.dataset
-}
-function setOptChart3(value: number) {
-  const chartData = getGaugeData({ value })
-  config3.value = chartData.config
-  dataset3.value = chartData.dataset
-}
 function setOptChart(dataset: any, config: any, myChartData: any, value: number, color = '') {
   myChartData.name.push(dayjs().format('mm:ss'));
   myChartData.value.push(value);
@@ -244,12 +230,12 @@ function displayHost(event: { data: any; }) {
 
 function displayMem(event: { data: any; }) {
   const data = JSON.parse(event.data);
-  setOptChart2(data.usedPercent.toFixed(2));
   sysInfo.memTotal = data.total
   sysInfo.memUsed = data.used
   sysInfo.available = data.available
   sysInfo.goUsed = data.goUsed
-  sysInfo.memUsage = data.usedPercent.toFixed(2)
+  sysInfo.memUsage = Number(data.usedPercent.toFixed(2))
+  dataset2.value = getGaugeData({ value: sysInfo.memUsage }).dataset
   setOptChart(dataset5, config5, myChart5Data, sysInfo.memUsage, '#56B5FF');
   loading.value = false
 }
@@ -259,8 +245,8 @@ function displayCpu(event: { data: any; }) {
 
   sysInfo.cpuNum = data.Number
   sysInfo.cpuCores = data.Cores
-  sysInfo.cpuUsed = data.UsedPercent[0].toFixed(2)
-  setOptChart1(data.UsedPercent[0].toFixed(2));
+  sysInfo.cpuUsed = Number(data.UsedPercent[0].toFixed(2))
+  dataset.value = getGaugeData({ value: sysInfo.cpuUsed }).dataset
   setOptChart(dataset4, config4, myChart4Data, sysInfo.cpuUsed, '#4FE4F0');
   loading.value = false
 }
@@ -276,8 +262,8 @@ function displayDisk(event: { data: any; }) {
   const data = JSON.parse(event.data)
   sysInfo.diskTotal = data.total
   sysInfo.diskUsed = data.used
-  sysInfo.diskUsedPercent = data.usedPercent.toFixed(2)
-  setOptChart3(data.usedPercent.toFixed(2));
+  sysInfo.diskUsedPercent = Number(data.usedPercent.toFixed(2))
+  dataset3.value = getGaugeData({ value: sysInfo.diskUsedPercent }).dataset
   setOptChart(dataset6, config6, myChart6Data, sysInfo.diskUsedPercent, '#7387F4');
   loading.value = false
 }