🪄 优化设置now“当前时间”的时机；多项数据监控列表弹出层优化；

src/components/charts/line.js

@@ -36,10 +36,29 @@ export default (
       },
       formatter: (params) => {
         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[1]}ms<br>`;
-        });
+        let res = `<p style="font-weight: bold; color: #ff6;">${time}</p>`;
+        if (params.length < 10) {
+          params.forEach((i) => {
+            res += `${i.marker} ${i.seriesName}: ${i.value[1]}ms<br>`;
+          });
+        } else {
+          res += '<table>';
+          let trEnd = false;
+          params.forEach((i, index) => {
+            if (index % 2 === 0) {
+              res += '<tr>';
+            }
+            res += `<td style="padding: 0 4px;">${i.marker} ${i.seriesName}: ${i.value[1]}ms</td>`;
+            if (index % 2 === 1) {
+              res += '</tr>';
+              trEnd = true;
+            }
+          });
+          if (!trEnd) {
+            res += '</tr>';
+          }
+          res += '</table>';
+        }
         return res;
       },
       backgroundColor: mode === 'dark' ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)',

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

@@ -166,10 +166,8 @@ const showCates = ref({});
 
 const monitorData = ref([]);
 
-const accpetShowTime = computed(() => {
-  const now = store.state.serverTime || Date.now();
-  return now - (minute.value * 60 * 1000);
-});
+const now = ref(Date.now());
+const accpetShowTime = computed(() => now.value - (minute.value * 60 * 1000));
 
 const minuteActiveArrowStyle = computed(() => {
   const index = minutes.findIndex((i) => i.value === minute.value);
@@ -308,6 +306,7 @@ function switchRefresh() {
 }
 
 function toggleMinute(value) {
+  now.value = store.state.serverTime || Date.now();
   minute.value = value;
 }
 
@@ -328,6 +327,7 @@ async function loadMonitor() {
   }).catch((err) => {
     console.error(err);
   });
+  now.value = store.state.serverTime || Date.now();
 }
 
 let loadMonitorTimer = null;