From 69f7031c0d349dd463ecbfbace121ac0d4046736 Mon Sep 17 00:00:00 2001 From: hi2hi Date: Fri, 13 Dec 2024 02:46:17 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=BB=E5=8A=A0=E6=9C=8D?= =?UTF-8?q?=E5=8A=A1=E5=99=A8=E7=8A=B6=E6=80=81=E6=B8=90=E5=8F=98=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/config.js | 1 + src/components/charts/donut.js | 29 ++++++++++++++++--- .../server/server-status-progress.vue | 10 +++++-- src/views/composable/server-monitor.js | 12 ++++++++ src/views/composable/server-status.js | 21 +++++++++----- 5 files changed, 58 insertions(+), 15 deletions(-) diff --git a/public/config.js b/public/config.js index a09dc42..1c0b30f 100644 --- a/public/config.js +++ b/public/config.js @@ -6,6 +6,7 @@ window.$$nazhuaConfig = { // listServerStatusType: 'progress', // 服务器状态类型--列表 // listServerRealTimeShowLoad: false, // 列表显示服务器实时负载 // detailServerStatusType: 'progress', // 服务器状态类型--详情页 + // serverStatusLinear: true, // 服务器状态渐变线性显示 // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体 // hideWorldMap: false, // 隐藏地图 // hideHomeWorldMap: false, // 隐藏首页地图 diff --git a/src/components/charts/donut.js b/src/components/charts/donut.js index 2363f87..7c7cbc4 100644 --- a/src/components/charts/donut.js +++ b/src/components/charts/donut.js @@ -7,12 +7,34 @@ import { PolarComponent, } from 'echarts/components'; +import config from '@/config'; + use([ CanvasRenderer, BarChart, PolarComponent, ]); +function handleColor(color) { + if (Array.isArray(color)) { + return { + type: 'linear', + x: 1, + y: 1, + x2: 0, + y2: 0, + colorStops: [{ + offset: 0, + color: color[0], // 0% 处的颜色 + }, { + offset: 1, + color: color[1], // 100% 处的颜色 + }], + }; + } + return color; +} + export default (used, total, itemColors, size = 100) => ({ angleAxis: { max: total, // 满分 @@ -56,11 +78,10 @@ export default (used, total, itemColors, size = 100) => ({ value: used, }], itemStyle: { - color: typeof itemColors === 'string' ? itemColors : itemColors?.used, + color: typeof itemColors === 'string' ? itemColors : handleColor(itemColors?.used), borderRadius: 5, - shadowColor: 'rgba(0, 0, 0, 0.2)', + shadowColor: config.nazhua.serverStatusLinear ? 'rgba(0, 0, 0, 0.5)' : undefined, shadowBlur: 10, - shadowOffsetY: 2, }, coordinateSystem: 'polar', cursor: 'default', @@ -74,7 +95,7 @@ export default (used, total, itemColors, size = 100) => ({ value: total, }], itemStyle: { - color: itemColors?.total || 'rgba(255, 255, 255, 0.2)', + color: handleColor(itemColors?.total) || 'rgba(255, 255, 255, 0.2)', }, coordinateSystem: 'polar', cursor: 'default', diff --git a/src/views/components/server/server-status-progress.vue b/src/views/components/server/server-status-progress.vue index 9dd1f8d..60fca78 100644 --- a/src/views/components/server/server-status-progress.vue +++ b/src/views/components/server/server-status-progress.vue @@ -75,7 +75,11 @@ const progressStyle = computed(() => { style.width = `${Math.min(props.used, 100)}%`; const color = typeof props.colors === 'string' ? props.colors : props.colors?.used; if (color) { - style.backgroundColor = color; + if (Array.isArray(color)) { + style.background = `linear-gradient(-35deg, ${color.join(',')})`; + } else { + style.backgroundColor = color; + } } return style; }); @@ -105,7 +109,7 @@ const progressStyle = computed(() => { width: 100%; height: var(--progress-bar-height); background: rgba(255, 255, 255, 0.2); - border-radius: var(--progress-bar-height); + border-radius: calc(var(--progress-bar-height) / 2); overflow: hidden; } @@ -115,7 +119,7 @@ const progressStyle = computed(() => { left: 0; bottom: 0; background-color: #08f; - border-radius: var(--progress-bar-height); + border-radius: calc(var(--progress-bar-height) / 2); } .progress-bar-label { diff --git a/src/views/composable/server-monitor.js b/src/views/composable/server-monitor.js index 91b665b..1e2a550 100644 --- a/src/views/composable/server-monitor.js +++ b/src/views/composable/server-monitor.js @@ -38,6 +38,11 @@ export function getThreshold(data, tolerance = 2) { */ const lineColorMap = {}; const lineColors = []; +const defaultColors = [ + '#5470c6', '#91cc75', '#fac858', + '#ee6666', '#73c0de', '#3ba272', + '#fc8452', '#9a60b4', '#ea7ccc', +]; /** * 将十六进制颜色转换为 RGB 数组 @@ -99,6 +104,13 @@ export function getLineColor(name) { if (lineColorMap[name]) { return lineColorMap[name]; } + // 如果默认颜色还有剩余，直接使用 + 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); diff --git a/src/views/composable/server-status.js b/src/views/composable/server-status.js index f5effd4..15d343f 100644 --- a/src/views/composable/server-status.js +++ b/src/views/composable/server-status.js @@ -1,6 +1,7 @@ import { computed, } from 'vue'; +import config from '@/config'; import validate from '@/utils/validate'; import * as hostUtils from '@/utils/host'; @@ -63,12 +64,13 @@ export default (params) => { case 'cpu': { const CoresVal = cpuInfo.value?.cores ? `${cpuInfo.value?.cores}C` : '-'; + const usedColor = config.nazhua.serverStatusLinear ? ['#0088FF', '#72B7FF'] : '#0088FF'; return { type: 'cpu', used: (props.info.State?.CPU || 0).toFixed(1) * 1, colors: { - used: '#0088ff', - total: 'rgba(255, 255, 255, 0.2)', + used: usedColor, + total: 'rgba(255, 255, 255, 0.25)', }, valText: `${(props.info.State?.CPU || 0).toFixed(1) * 1}%`, label: 'CPU', @@ -92,12 +94,13 @@ export default (params) => { } else { contentVal = `${Math.ceil(useMemAndTotalMem.value.total.m)}M`; } + const usedColor = config.nazhua.serverStatusLinear ? ['#2B6939', '#0AA344'] : '#0AA344'; return { type: 'mem', used: useMemAndTotalMem.value.usePercent, colors: { - used: '#0aa344', - total: 'rgba(255, 255, 255, 0.2)', + used: usedColor, + total: 'rgba(255, 255, 255, 0.25)', }, valText: usedVal, label: '内存', @@ -124,12 +127,13 @@ export default (params) => { } else { contentVal = `${Math.ceil(useSwapAndTotalSwap.value.total.m)}M`; } + const usedColor = config.nazhua.serverStatusLinear ? ['#FF8C00', '#F38100'] : '#FF8C00'; return { type: 'swap', used: useSwapAndTotalSwap.value.usePercent, colors: { - used: '#ff8c00', - total: 'rgba(255, 255, 255, 0.2)', + used: usedColor, + total: 'rgba(255, 255, 255, 0.25)', }, valText: usedVal, label: '交换', @@ -147,12 +151,13 @@ export default (params) => { } else { contentValue = `${Math.ceil(useDiskAndTotalDisk.value.total.g)}G`; } + const usedColor = config.nazhua.serverStatusLinear ? ['#00848F', '#70F3FF'] : '#70F3FF'; return { type: 'disk', used: useDiskAndTotalDisk.value.usePercent, colors: { - used: '#70f3ff', - total: 'rgba(255, 255, 255, 0.2)', + used: usedColor, + total: 'rgba(255, 255, 255, 0.25)', }, valText: `${(useDiskAndTotalDisk.value.used.g).toFixed(1) * 1}G`, label: '磁盘',