From e36dac9b81792b0f26ff3a60d91c011d0af83541 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Wed, 15 Jan 2025 17:13:38 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20KPI=E6=8C=87=E6=A0=87=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E5=A4=B4=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/perfManage/goldTarget/index.vue | 275 ++++++++++++++-------- 1 file changed, 177 insertions(+), 98 deletions(-) diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue index eba2f160..d0279b27 100644 --- a/src/views/perfManage/goldTarget/index.vue +++ b/src/views/perfManage/goldTarget/index.vue @@ -23,7 +23,7 @@ import { nextTick, onBeforeUnmount, h, - watch + watch, } from 'vue'; import { PageContainer } from 'antdv-pro-layout'; import { message, Modal, TableColumnType } from 'ant-design-vue/es'; @@ -410,12 +410,13 @@ function fnGetList() { }); // 计算总值 - const total = Number(values.reduce((sum, val) => sum + val, 0).toFixed(2)); + const total = Number( + values.reduce((sum, val) => sum + val, 0).toFixed(2) + ); // 计算平均值 - const avg = values.length > 0 - ? Number((total / values.length).toFixed(2)) - : 0; + const avg = + values.length > 0 ? Number((total / values.length).toFixed(2)) : 0; kpiStats.value.push({ kpiId: columns.key, @@ -423,7 +424,7 @@ function fnGetList() { max: values.length > 0 ? Math.max(...values) : 0, min: values.length > 0 ? Math.min(...values) : 0, avg: avg, - total: total + total: total, }); } } @@ -584,29 +585,31 @@ function fnRanderChartData() { type: 'category', boundaryGap: false, axisLabel: { - color: document.documentElement.getAttribute('data-theme') === 'dark' - ? '#CACADA' - : '#333' + color: + document.documentElement.getAttribute('data-theme') === 'dark' + ? '#CACADA' + : '#333', }, splitLine: { show: true, lineStyle: { - color: getSplitLineColor() - } + color: getSplitLineColor(), + }, }, data: chartDataXAxisData, }, yAxis: { axisLabel: { - color: document.documentElement.getAttribute('data-theme') === 'dark' - ? '#CACADA' - : '#333' + color: + document.documentElement.getAttribute('data-theme') === 'dark' + ? '#CACADA' + : '#333', }, splitLine: { show: true, lineStyle: { - color: getSplitLineColor() - } + color: getSplitLineColor(), + }, }, }, series: chartDataYSeriesData, @@ -754,59 +757,49 @@ function getSplitLineColor() { // 监听主题变化 watch( () => layoutStore.proConfig.theme, // 监听的值 - (newValue) => { + newValue => { if (kpiChart.value) { const splitLineColor = getSplitLineColor(); // 绘制图数据 - kpiChart.value.setOption( - { - tooltip: { - trigger: 'axis', - position: function (pt: any) { - return [pt[0], '10%']; - }, - confine: true, // 限制 tooltip 显示范围 - backgroundColor: newValue === 'dark' + kpiChart.value.setOption({ + tooltip: { + trigger: 'axis', + position: function (pt: any) { + return [pt[0], '10%']; + }, + confine: true, // 限制 tooltip 显示范围 + backgroundColor: + newValue === 'dark' ? 'rgba(48, 48, 48, 0.8)' : 'rgba(255, 255, 255, 0.9)', - borderColor: newValue === 'dark' - ? '#555' - : '#ddd', - textStyle: { - color: newValue === 'dark' - ? '#CACADA' - : '#333' + borderColor: newValue === 'dark' ? '#555' : '#ddd', + textStyle: { + color: newValue === 'dark' ? '#CACADA' : '#333', + }, + }, + xAxis: { + axisLabel: { + color: newValue === 'dark' ? '#CACADA' : '#333', + }, + splitLine: { + show: true, + lineStyle: { + color: splitLineColor, }, }, - xAxis: { - axisLabel: { - color: newValue === 'dark' - ? '#CACADA' - : '#333' - }, - splitLine: { - show: true, - lineStyle: { - color: splitLineColor - } - } + }, + yAxis: { + axisLabel: { + color: newValue === 'dark' ? '#CACADA' : '#333', }, - yAxis: { - axisLabel: { - color: newValue === 'dark' - ? '#CACADA' - : '#333' + splitLine: { + show: true, + lineStyle: { + color: splitLineColor, }, - splitLine: { - show: true, - lineStyle: { - color: splitLineColor - } - } - } - } - ); - + }, + }, + }); } } ); @@ -878,39 +871,67 @@ onBeforeUnmount(() => { - +