From dfc3d9e750f69c20586a35c8367a46cb57a41af6 Mon Sep 17 00:00:00 2001 From: hi2hi Date: Thu, 12 Dec 2024 09:31:14 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E8=B0=83=E6=95=B4=E7=BD=91?= =?UTF-8?q?=E7=BB=9C=E7=9B=91=E6=8E=A7=EF=BC=8C=E6=96=B9=E4=BE=BF=E8=BF=87?= =?UTF-8?q?=E6=BB=A4=E5=90=8E=E8=83=BD=E7=BB=A7=E7=BB=AD=E5=88=B7=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/charts/line.js | 41 +++-- .../server-detail/server-monitor.vue | 148 +++++++++++++++++- src/views/composable/server-monitor.js | 19 +++ yarn.lock | 5 + 5 files changed, 191 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 21844a9..6061fd4 100644 --- a/package.json +++ b/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", diff --git a/src/components/charts/line.js b/src/components/charts/line.js index 67e0203..eb5a5e7 100644 --- a/src/components/charts/line.js +++ b/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, diff --git a/src/views/components/server-detail/server-monitor.vue b/src/views/components/server-detail/server-monitor.vue index 67931e7..e007f71 100644 --- a/src/views/components/server-detail/server-monitor.vue +++ b/src/views/components/server-detail/server-monitor.vue @@ -43,6 +43,42 @@ + +
+
+ + + {{ cateItem.name }} + + + {{ cateItem.avg }}ms + + + -ms + +
+
+ { 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(() => { diff --git a/src/views/composable/server-monitor.js b/src/views/composable/server-monitor.js index 3500e15..3183b7b 100644 --- a/src/views/composable/server-monitor.js +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 95e1364..674189b 100644 --- a/yarn.lock +++ b/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"