package.json

@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.4.20",
+  "version": "0.4.19",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/charts/line.js

@@ -36,29 +36,10 @@ export default (
       },
       formatter: (params) => {
         const time = dayjs(parseInt(params[0].axisValue, 10)).format('YYYY.MM.DD HH:mm');
-        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>';
-        }
+        let res = `${time}<br>`;
+        params.forEach((i) => {
+          res += `${i.marker} ${i.seriesName}: ${i.value[1]}ms<br>`;
+        });
         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,8 +166,10 @@ const showCates = ref({});
 
 const monitorData = ref([]);
 
-const now = ref(Date.now());
-const accpetShowTime = computed(() => now.value - (minute.value * 60 * 1000));
+const accpetShowTime = computed(() => {
+  const now = store.state.serverTime || Date.now();
+  return now - (minute.value * 60 * 1000);
+});
 
 const minuteActiveArrowStyle = computed(() => {
   const index = minutes.findIndex((i) => i.value === minute.value);
@@ -306,7 +308,6 @@ function switchRefresh() {
 }
 
 function toggleMinute(value) {
-  now.value = store.state.serverTime || Date.now();
   minute.value = value;
 }
 
@@ -327,7 +328,6 @@ async function loadMonitor() {
   }).catch((err) => {
     console.error(err);
   });
-  now.value = store.state.serverTime || Date.now();
 }
 
 let loadMonitorTimer = null;

src/views/composable/server-monitor.js

@@ -39,11 +39,9 @@ export function getThreshold(data, tolerance = 2) {
 const lineColorMap = {};
 const lineColors = [];
 const defaultColors = [
-  '#5470C6', '#91CC75', '#FAC858', '#EE6666',
-  '#73C0DE', '#3BA272', '#FC8452', '#9A60B4',
-  '#EA7CCC', '#C23531', '#2F4554', '#61A0A8',
-  '#D48265', '#91C7AE', '#749F83', '#CA8622',
-  '#BDA29A', '#6E7074', '#546570', '#C4CCD3',
+  '#5470c6', '#91cc75', '#fac858',
+  '#ee6666', '#73c0de', '#3ba272',
+  '#fc8452', '#9a60b4', '#ea7ccc',
 ];
 
 /**
@@ -78,24 +76,20 @@ function rgbDistance(color1, color2) {
  * 获取一个随机颜色
  * @returns {string} 返回一个随机颜色的字符串
  */
-function getColor(count = 0, len = 0) {
-  // 如果尝试次数超过 3 次，返回固定颜色组里面的颜色
-  if (count > 3) {
-    return defaultColors[len % defaultColors.length];
-  }
+function getColor() {
   const { color } = uniqolor.random({
     saturation: [75, 90],
     lightness: [65, 70],
     differencePoint: 100,
   });
   if (lineColors.includes(color)) {
-    return getColor(count + 1, len);
+    return getColor();
   }
   if (lineColors.some((i) => rgbDistance(
     hexToRgb(i),
     hexToRgb(color),
-  ) < 50)) {
-    return getColor(count + 1, len);
+  ) < 80)) {
+    return getColor();
   }
   return color;
 }
@@ -110,7 +104,14 @@ export function getLineColor(name) {
   if (lineColorMap[name]) {
     return lineColorMap[name];
   }
-  const color = getColor(0, lineColors.length);
+  // 如果默认颜色还有剩余，直接使用
+  if (defaultColors.length > 0) {
+    const color = defaultColors.shift();
+    lineColorMap[name] = color;
+    lineColors.push(color);
+    return color;
+  }
+  const color = getColor();
   lineColorMap[name] = color;
   lineColors.push(color);
   return color;