From ead834dd956ddb69078ed51bacae98cc2dde999e Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Sat, 14 Dec 2024 04:03:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=84=20=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AEnow=E2=80=9C=E5=BD=93=E5=89=8D=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E2=80=9D=E7=9A=84=E6=97=B6=E6=9C=BA=EF=BC=9B=E5=A4=9A=E9=A1=B9?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9B=91=E6=8E=A7=E5=88=97=E8=A1=A8=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E5=B1=82=E4=BC=98=E5=8C=96=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/line.js                 | 27 ++++++++++++++++---
 .../server-detail/server-monitor.vue          |  8 +++---
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/charts/line.js b/src/components/charts/line.js
index ecf87ec..491713f 100644
--- a/src/components/charts/line.js
+++ b/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)',
diff --git a/src/views/components/server-detail/server-monitor.vue b/src/views/components/server-detail/server-monitor.vue
index ba22511..3aa610d 100644
--- a/src/views/components/server-detail/server-monitor.vue
+++ b/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;