From f318f61b4ae3555eb942ce8d8d7edf98cd93ed49 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 22 Nov 2024 16:15:25 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=98=8E=E6=9A=97=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=9A=8F=E6=9C=BA=E9=A2=9C=E8=89=B2=E6=96=B9=E6=B3=95?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/generate-utils.ts | 50 +++++++++------- src/views/perfManage/kpiOverView/index.vue | 66 ++++++++++++++-------- 2 files changed, 72 insertions(+), 44 deletions(-) diff --git a/src/utils/generate-utils.ts b/src/utils/generate-utils.ts index 863eeb28..ec39385b 100644 --- a/src/utils/generate-utils.ts +++ b/src/utils/generate-utils.ts @@ -13,29 +13,41 @@ export function generateColorHEX(): string { * @returns rgb(24 144 255) / rgba(0,0,0,.85) */ export function generateColorRGBA(hasAlpha: boolean = false) { - let red:number; - let green: number; - let blue:number; - red = Math.floor(Math.random() * 256)+100;//+100增加顏色亮度 - green = Math.floor(Math.random() * 256)+100; - blue = Math.floor(Math.random() * 256)+100; + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; - const brightChannel = Math.floor(Math.random() * 3); - switch (brightChannel) { - case 0: - red = Math.min(255, red + 50); - break; - case 1: - green = Math.min(255, green + 50); - break; - case 2: - blue = Math.min(255, blue + 50); - break; + let red: number; + let green: number; + let blue: number; + + if (isDark) { + // 暗色模式下生成较亮的颜色 + red = Math.floor(Math.random() * 156) + 100; // 100-255 + green = Math.floor(Math.random() * 156) + 100; // 100-255 + blue = Math.floor(Math.random() * 156) + 100; // 100-255 + + // 确保至少有一个通道的值较高，使颜色更明亮 + const brightChannel = Math.floor(Math.random() * 3); + switch (brightChannel) { + case 0: + red = Math.min(255, red + 50); + break; + case 1: + green = Math.min(255, green + 50); + break; + case 2: + blue = Math.min(255, blue + 50); + break; + } + } else { + // 亮色模式下生成正常的颜色 + red = Math.floor(Math.random() * 256); // 0-255 + green = Math.floor(Math.random() * 256); // 0-255 + blue = Math.floor(Math.random() * 256); // 0-255 } if (hasAlpha) { - const alpha = Math.floor(Math.random() * 100)+50; - return `rgb(${red}, ${green}, ${blue}, 0.${alpha})`; + const alpha = Math.floor(Math.random() * 100); + return `rgba(${red}, ${green}, ${blue}, 0.${alpha})`; } return `rgb(${red}, ${green}, ${blue})`; diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue index 3ab8f8b6..b7a900e3 100644 --- a/src/views/perfManage/kpiOverView/index.vue +++ b/src/views/perfManage/kpiOverView/index.vue @@ -247,6 +247,7 @@ const fetchChartData = async () => { chartData.value = processChartData(allData); updateChart(); + updateKpiStats(); } catch (error) { console.error('Failed to fetch chart data:', error); message.error(t('common.getInfoFail')); @@ -276,11 +277,31 @@ const getSplitLineColor = () => { // 添加主题变化的观察器 const themeObserver = new MutationObserver(() => { if (chart) { + //清空颜色缓存 + kpiColors.clear(); // 获取当前的主题色 const splitLineColor = getSplitLineColor(); // 重新设置完整的图表配置并触发重新渲染 requestAnimationFrame(() => { + // 先生成所有新的颜色并存储 + selectedKPIs.value.forEach(kpiId => { + const color = generateColorRGBA(); + kpiColors.set(kpiId, color); + }); + // 使用存储的颜色更新图表系列 + const series = selectedKPIs.value.map(kpiId => { + const kpi = kpiColumns.value.find(col => col.kpiId === kpiId); + if (!kpi) return null; + + return { + name: kpi.title, + type: 'line', + data: chartData.value.map(item => item[kpiId] || 0), + itemStyle: { color: kpiColors.get(kpiId) }, + ...getSeriesConfig(), + }; + }).filter(Boolean); const option = { title: { text: t('views.perfManage.kpiOverView.kpiChartTitle'), @@ -373,24 +394,17 @@ const themeObserver = new MutationObserver(() => { extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);' }, // 重新设置系列数据 - series: selectedKPIs.value.map(kpiId => { - const kpi = kpiColumns.value.find(col => col.kpiId === kpiId); - if (!kpi) return null; - const color = kpiColors.get(kpiId) || generateColorRGBA(); - return { - name: kpi.title, - type: 'line', - data: chartData.value.map(item => item[kpiId] || 0), - itemStyle: { color }, - ...getSeriesConfig(), - }; - }).filter(Boolean) + series }; // 使用新的配置更新图表 chart!.setOption(option, true); // 强制重新渲染 chart!.resize(); + // 更新统计数据 + nextTick(() => { + updateKpiStats(); + }); }); } }); @@ -407,14 +421,6 @@ const updateChart = () => { const color = kpiColors.get(kpiId)||generateColorRGBA(); kpiColors.set(kpiId, color); - // 获取数据数组 - const data = chartData.value.map((item, index) => { - const value = item[kpiId] || 0; - // 如果是最后一个数据点，添加特殊样式 - - return value; - }); - return { name: kpi.title, type: 'line', @@ -743,10 +749,16 @@ interface KPIStats { } // 添加计算属性，用于计算每个指标的最大值和最小值 -const kpiStats = computed((): KPIStats[] => { - if (!chartData.value.length || !kpiColumns.value.length) return []; +// 将 kpiStats 从计算属性改为响应式引用 +const kpiStats = ref([]); - return selectedKPIs.value.map(kpiId => { +// 添加一个计算函数来更新统计数据 +const updateKpiStats = () => { + if (!chartData.value.length || !kpiColumns.value.length) { + kpiStats.value = []; + return; + } + kpiStats.value = selectedKPIs.value.map(kpiId => { // 找到对应的KPI标题 const kpi = kpiColumns.value.find(col => col.kpiId === kpiId); if (!kpi) return null; @@ -767,7 +779,8 @@ const kpiStats = computed((): KPIStats[] => { avg:avg }; }).filter((item): item is KPIStats => item !== null); -}); +}; + // 添加表格列定义 const statsColumns: TableColumnType[] = [ @@ -776,9 +789,12 @@ const statsColumns: TableColumnType[] = [ key: 'icon', width: 50, customRender: ({ record }: { record: KPIStats }) => { + // 获取当前主题下的颜色 + // 直接使用 kpiColors 中存储的颜色 + const color = kpiColors.get(record.kpiId); return h(LineOutlined, { style: { - color: kpiColors.get(record.kpiId) || '#000', // 使用与折线图相同的颜色 + color: color || '#000', // 使用与折线图相同的颜色 fontSize: '30px', // 增大图标尺寸到30px fontWeight: 'bold', // 加粗 }