✨ 调整网络监控，方便过滤后能继续刷新

package.json

@@ -17,6 +17,7 @@
     "flag-icons": "^7.2.3",
     "font-logos": "^1.3.0",
     "remixicon": "^4.5.0",
+    "uniqolor": "^1.1.1",
     "vue": "^3.5.12",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5",

src/components/charts/line.js

@@ -3,7 +3,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { LineChart } from 'echarts/charts';
 import {
   TooltipComponent,
-  LegendComponent,
+  // LegendComponent,
   GridComponent,
   DataZoomComponent,
 } from 'echarts/components';
@@ -15,7 +15,7 @@ use([
   CanvasRenderer,
   LineChart,
   TooltipComponent,
-  LegendComponent,
+  // LegendComponent,
   GridComponent,
   DataZoomComponent,
 ]);
@@ -28,6 +28,7 @@ export default (
 ) => {
   const fontFamily = config.nazhua.disableSarasaTermSC === true ? undefined : 'Sarasa Term SC';
   const option = {
+    darkMode: mode === 'dark',
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -49,26 +50,35 @@ export default (
         fontSize: 14,
       },
     },
-    legend: {
-      top: 5,
-      data: cateList,
-      textStyle: {
-        color: mode === 'dark' ? '#ddd' : '#222',
-        fontFamily,
-        fontSize: 14,
-      },
-    },
+    // legend: {
+    //   show: false,
+    //   data: cateList.map((i) => ({
+    //     name: i.name,
+    //     itemStyle: {
+    //       color: i.color,
+    //     },
+    //     lineStyle: {
+    //       color: i.color,
+    //     },
+    //   })),
+    //   textStyle: {
+    //     color: mode === 'dark' ? '#ddd' : '#222',
+    //     fontFamily,
+    //     fontSize: 14,
+    //   },
+    // },
     grid: {
-      left: 0,
+      top: 10,
+      left: 5,
       right: 5,
-      bottom: 0,
+      bottom: 50,
       containLabel: true,
     },
     dataZoom: [{
       id: 'dataZoomX',
       type: 'slider',
       xAxisIndex: [0],
-      filterMode: 'filter',
+      filterMode: 'none',
     }],
     yAxis: {
       type: 'value',
@@ -96,9 +106,8 @@ export default (
       },
     },
     series: valueList.map((i) => ({
+      ...i,
       type: 'line',
-      data: i.data,
-      name: i.name,
       smooth: true,
       connectNulls: true,
       legendHoverLink: false,

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

@@ -43,6 +43,42 @@
         </div>
       </div>
     </div>
+
+    <div class="monitor-cate-group">
+      <div
+        v-for="cateItem in monitorChartData.cateList"
+        :key="cateItem.id"
+        class="monitor-cate-item"
+        :class="{
+          disabled: showCates[cateItem.id] === false,
+        }"
+        :style="{
+          '--cate-color': cateItem.color,
+        }"
+        :title="cateItem.title"
+        @click="toggleShowCate(cateItem.id)"
+      >
+        <span class="cate-legend" />
+        <span
+          class="cate-name"
+        >
+          {{ cateItem.name }}
+        </span>
+        <span
+          v-if="cateItem.avg !== 0"
+          class="cate-avg-ms"
+        >
+          {{ cateItem.avg }}ms
+        </span>
+        <span
+          v-else
+          class="cate-avg-ms"
+        >
+          -ms
+        </span>
+      </div>
+    </div>
+
     <line-chart
       :cate-list="monitorChartData.cateList"
       :date-list="monitorChartData.dateList"
@@ -63,11 +99,13 @@ import {
 } from 'vue';
 import config from '@/config';
 import request from '@/utils/request';
+import validate from '@/utils/validate';
 
 import LineChart from '@/components/charts/line.vue';
 
 import {
   getThreshold,
+  getLineColor,
 } from '@/views/composable/server-monitor';
 
 const props = defineProps({
@@ -79,6 +117,7 @@ const props = defineProps({
 
 const refreshData = ref(true);
 const peakShaving = ref(false);
+const showCates = ref({});
 
 const monitorData = ref([]);
 
@@ -105,6 +144,7 @@ const monitorChartData = computed(() => {
     const dateMap = {};
     if (!cateMap[i.monitor_name]) {
       cateMap[i.monitor_name] = {
+        id: i.monitor_id,
         dateMap,
         avgs: [],
       };
@@ -132,10 +172,11 @@ const monitorChartData = computed(() => {
     });
   });
   let dateList = [];
+  let valueList = [];
   const cateList = [];
-  const valueList = [];
   Object.keys(cateMap).forEach((i) => {
     const {
+      id,
       dateMap,
       avgs,
     } = cateMap[i];
@@ -144,16 +185,44 @@ const monitorChartData = computed(() => {
       avgs.push([time, value]);
       dateList.push(time);
     });
-    valueList.push({
-      name: i,
-      data: avgs,
-    });
+    const color = getLineColor(id);
     if (avgs.length) {
-      cateList.push(i);
+      if (!validate.hasOwn(showCates.value, id)) {
+        showCates.value[id] = true;
+      }
+      const cateItem = {
+        id,
+        name: i,
+        color,
+        avg: (avgs.reduce((a, b) => a + b[1], 0) / avgs.length).toFixed(2) * 1,
+        over: ((avgs.filter((o) => o[1] > 0).length / avgs.length) * 100).toFixed(2) * 1,
+      };
+      if (Number.isNaN(cateItem.avg)) {
+        cateItem.avg = 0;
+      }
+      const titles = [
+        cateItem.name,
+        `平均延迟：${cateItem.avg}ms`,
+        `执行成功：${cateItem.over}%`,
+      ];
+      cateItem.title = titles.join('\n');
+      cateList.push(cateItem);
+      valueList.push({
+        id,
+        name: i,
+        data: avgs,
+        itemStyle: {
+          color,
+        },
+        lineStyle: {
+          color,
+        },
+      });
     }
   });
   // 去重
   dateList = Array.from(new Set(dateList)).sort((a, b) => a - b);
+  valueList = valueList.filter((i) => showCates.value[i.id]);
   return {
     dateList,
     cateList,
@@ -169,6 +238,10 @@ function switchRefresh() {
   refreshData.value = !refreshData.value;
 }
 
+function toggleShowCate(id) {
+  showCates.value[id] = !showCates.value[id];
+}
+
 async function loadMonitor() {
   await request({
     url: (
@@ -221,7 +294,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .server-monitor-group {
-  --line-chart-size: 280px;
+  --line-chart-size: 300px;
 }
 
 .module-head-group {
@@ -288,4 +361,65 @@ onUnmounted(() => {
     }
   }
 }
+
+.monitor-cate-group {
+  --gap-size: 0;
+  margin: 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: center;
+  gap: var(--gap-size);
+  margin-right: calc(var(--gap-size) * -1);
+
+  .monitor-cate-item {
+    // --cate-item-width: calc(20% - var(--gap-size));
+    --cate-item-height: 28px;
+    --cate-item-font-size: 14px;
+    --cate-color: #fff;
+
+    display: flex;
+    align-items: center;
+    width: var(--cate-item-width);
+    height: var(--cate-item-height);
+    gap: 6px;
+    padding: 0 6px;
+    font-size: var(--cate-item-font-size);
+    // background: rgba(#fff, 0.2);
+    border-radius: 4px;
+    cursor: pointer;
+
+    .cate-legend {
+      width: 0.5em;
+      height: 0.5em;
+      // border-radius: 50%;
+      // width: 6px;
+      // height: calc(var(--cate-item-height) - 10px);
+      // margin-left: -6px;
+      background: var(--cate-color);
+    }
+
+    .cate-name {
+      // flex: 1;
+      height: var(--cate-item-height);
+      line-height: calc(var(--cate-item-height) + 2px);
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
+      // overflow: hidden;
+      color: #eee;
+    }
+
+    .cate-avg-ms {
+      // width: 55px;
+      height: var(--cate-item-height);
+      line-height: calc(var(--cate-item-height) + 2px);
+      text-align: right;
+      color: #fff;
+    }
+
+    &.disabled {
+      filter: grayscale(1);
+      opacity: 0.5;
+    }
+  }
+}
 </style>

src/views/composable/server-monitor.js

@@ -1,3 +1,5 @@
+import uniqolor from 'uniqolor';
+
 /**
  * 计算数据的阈值和平均值
  *
@@ -30,3 +32,20 @@ export function getThreshold(data, tolerance = 2) {
     max,
   };
 }
+
+const lineNameColorMap = {};
+const lineColorNameMap = {};
+
+export function getLineColor(name) {
+  if (lineNameColorMap[name]) {
+    return lineNameColorMap[name];
+  }
+  const { color } = uniqolor.random({
+    saturation: [75, 90],
+    lightness: [65, 70],
+    differencePoint: 100,
+  });
+  lineNameColorMap[name] = color;
+  lineColorNameMap[color] = name;
+  return color;
+}

yarn.lock

@@ -2900,6 +2900,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+uniqolor@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/uniqolor/-/uniqolor-1.1.1.tgz#ef35e41d930d31b90228a18d82dd151b8106b2f3"
+  integrity sha512-HUwezlXCwm5bzsEXW7AP7ybezH13uWENRgYT+3dOdhJPvpYucSqvIGckMiLn+Uy2j0NVf3fPp43uZ4aun3t4Ww==
+
 update-browserslist-db@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"