fix: 修复时间乱序问题，优化图表数据处理逻辑，添加监控刷新时间设置

public/config.js

@@ -17,6 +17,7 @@ window.$$nazhuaConfig = {
   // hideFilter: false, // 隐藏筛选
   // hideTag: false, // 隐藏标签
   // hideDotBG: true, // 隐藏框框里面的点点背景
+  // monitorRefreshTime: 10, // 监控刷新时间间隔，单位s（秒）, 0为不刷新，为保证不频繁请求源站，最低生效值为10s
   // customCodeMap: {}, // 自定义的地图点信息
   // nezhaVersion: 'v1', // 哪吒版本
   // apiMonitorPath: '/api/v1/monitor/{id}',

src/components/charts/line.js

@@ -5,15 +5,19 @@ import {
   TooltipComponent,
   LegendComponent,
   GridComponent,
+  DataZoomComponent,
 } from 'echarts/components';
 import dayjs from 'dayjs';
 
+import config from '@/config';
+
 use([
   CanvasRenderer,
   LineChart,
   TooltipComponent,
   LegendComponent,
   GridComponent,
+  DataZoomComponent,
 ]);
 
 export default (
@@ -22,6 +26,7 @@ export default (
   valueList,
   mode = 'dark',
 ) => {
+  const fontFamily = config.nazhua.disableSarasaTermSC === true ? undefined : 'Sarasa Term SC';
   const option = {
     tooltip: {
       trigger: 'axis',
@@ -32,7 +37,7 @@ export default (
         const time = dayjs(parseInt(params[0].axisValue, 10)).format('YYYY.MM.DD HH:mm');
         let res = `${time}<br>`;
         params.forEach((i) => {
-          res += `${i.marker} ${i.seriesName}: ${i.value}ms<br>`;
+          res += `${i.marker} ${i.seriesName}: ${i.value[1]}ms<br>`;
         });
         return res;
       },
@@ -49,27 +54,22 @@ export default (
       data: cateList,
       textStyle: {
         color: mode === 'dark' ? '#ddd' : '#222',
-        fontFamily: 'Sarasa Term SC',
+        fontFamily,
         fontSize: 14,
       },
     },
-    xAxis: {
+    grid: {
-      type: 'category',
+      left: 0,
-      data: dateList,
+      right: 5,
-      axisLabel: {
+      bottom: 0,
-        hideOverlap: true,
+      containLabel: true,
-        interval: Math.max(
-          Math.ceil(dateList.length / 12),
-          1,
-        ),
-        nameTextStyle: {
-          fontSize: 12,
-        },
-        formatter: (val) => dayjs(parseInt(val, 10)).format('HH:mm'),
-        fontFamily: 'Sarasa Term SC',
-        color: mode === 'dark' ? '#eee' : '#222',
-      },
     },
+    dataZoom: [{
+      id: 'dataZoomX',
+      type: 'slider',
+      xAxisIndex: [0],
+      filterMode: 'filter',
+    }],
     yAxis: {
       type: 'value',
       splitLine: {
@@ -78,16 +78,22 @@ export default (
         },
       },
       axisLabel: {
-        fontFamily: 'Sarasa Term SC',
+        fontFamily,
         color: mode === 'dark' ? '#ddd' : '#222',
         fontSize: 12,
       },
     },
-    grid: {
+    xAxis: {
-      left: 0,
+      type: 'time',
-      right: 0,
+      data: dateList,
-      bottom: 0,
+      axisLabel: {
-      containLabel: true,
+        hideOverlap: true,
+        nameTextStyle: {
+          fontSize: 12,
+        },
+        fontFamily,
+        color: mode === 'dark' ? '#eee' : '#222',
+      },
     },
     series: valueList.map((i) => ({
       type: 'line',

src/views/components/server-detail/server-monitor.vue

@@ -101,9 +101,10 @@ const monitorChartData = computed(() => {
   const dateList = [];
   Object.keys(dateMap).forEach((i) => {
     if (dateMap[i]?.length) {
-      dateList.push(parseInt(i, 10));
+      const time = parseInt(i, 10);
+      dateList.push(time);
       dateMap[i].forEach((o) => {
-        cateMap[o.name].push(o.value);
+        cateMap[o.name].push([time, o.value]);
       });
     }
   });
@@ -151,9 +152,14 @@ async function setTimeLoadMonitor() {
     clearTimeout(loadMonitorTimer);
   }
   await loadMonitor();
+  let monitorRefreshTime = ((config.nazhua.monitorRefreshTime * 1) || 10);
+  if (Number.isNaN(monitorRefreshTime)) {
+    monitorRefreshTime = 10;
+  }
+  const sTime = Math.min(monitorRefreshTime, 10);
   loadMonitorTimer = setTimeout(() => {
     setTimeLoadMonitor();
-  }, 10000);
+  }, sTime * 1000);
 }
 
 onMounted(() => {
@@ -169,7 +175,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .server-monitor-group {
-  --line-chart-size: 270px;
+  --line-chart-size: 280px;
 }
 
 .module-head-group {