feat:添加累加值计算

This commit is contained in:
zhongzm
2024-11-28 18:45:11 +08:00
parent 83cb3f8728
commit 68b9c5fa5e
3 changed files with 21 additions and 7 deletions

View File

@@ -1111,6 +1111,7 @@ export default {
"maxValue":"Max Value", "maxValue":"Max Value",
"minValue":"Min Value", "minValue":"Min Value",
"avgValue":"Average Value", "avgValue":"Average Value",
"totalValue":"Worth Value",
"kpiChartTitle":"Overview of NE metrics", "kpiChartTitle":"Overview of NE metrics",
"changeLine":"Change to Line Charts", "changeLine":"Change to Line Charts",
"changeBar":"Change to Bar Charts", "changeBar":"Change to Bar Charts",

View File

@@ -1111,6 +1111,7 @@ export default {
"maxValue":"最大值", "maxValue":"最大值",
"minValue":"最小值", "minValue":"最小值",
"avgValue":"平均值", "avgValue":"平均值",
"totalValue":"总值",
"kpiChartTitle":"网元指标概览", "kpiChartTitle":"网元指标概览",
"changeLine":"切换为折线图", "changeLine":"切换为折线图",
"changeBar":"切换为柱状图", "changeBar":"切换为柱状图",

View File

@@ -14,7 +14,6 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
import { generateColorRGBA } from '@/utils/generate-utils'; import { generateColorRGBA } from '@/utils/generate-utils';
import { LineOutlined } from '@ant-design/icons-vue'; import { LineOutlined } from '@ant-design/icons-vue';
import { TableColumnType } from 'ant-design-vue'; import { TableColumnType } from 'ant-design-vue';
import { viewTransitionTheme } from 'antdv-pro-layout';
const { t, currentLocale } = useI18n(); const { t, currentLocale } = useI18n();
//定义KPI接口 //定义KPI接口
interface KPIBase{ interface KPIBase{
@@ -394,7 +393,7 @@ const themeObserver = new MutationObserver(() => {
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);' extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);'
}, },
// 重新设置系列数据 // 重新设置系列数据
series series
}; };
// 使用新的配置更新图表 // 使用新的配置更新图表
@@ -564,7 +563,7 @@ const updateChart = () => {
? '#CACADA' ? '#CACADA'
: '#333' : '#333'
}, },
// 添加自<EFBFBD><EFBFBD><EFBFBD>计算的分割段数 // 添加自计算的分割段数
splitNumber: 5, splitNumber: 5,
// 添加自动计算的最小/最大值范围 // 添加自动计算的最小/最大值范围
scale: true, scale: true,
@@ -745,7 +744,8 @@ interface KPIStats {
title: string; title: string;
max: number; max: number;
min: number; min: number;
avg:number; avg: number;
total: number;
} }
// 添加计算属性,用于计算每个指标的最大值和最小值 // 添加计算属性,用于计算每个指标的最大值和最小值
@@ -766,9 +766,12 @@ const updateKpiStats = () => {
// 获取该指标的所有数值 // 获取该指标的所有数值
const values = chartData.value.map(item => Number(item[kpiId]) || 0); const values = chartData.value.map(item => Number(item[kpiId]) || 0);
// 计算总值
const total = Number(values.reduce((sum, val) => sum + val, 0).toFixed(2));
// 计算平均值 // 计算平均值
const avg = values.length > 0 const avg = values.length > 0
? Number((values.reduce((sum, val) => sum + val, 0) / values.length).toFixed(2)) ? Number((total / values.length).toFixed(2))
: 0; : 0;
return { return {
@@ -776,7 +779,8 @@ const updateKpiStats = () => {
title: kpi.title, title: kpi.title,
max: Math.max(...values), max: Math.max(...values),
min: Math.min(...values), min: Math.min(...values),
avg:avg avg: avg,
total: total
}; };
}).filter((item): item is KPIStats => item !== null); }).filter((item): item is KPIStats => item !== null);
}; };
@@ -805,7 +809,7 @@ const statsColumns: TableColumnType<KPIStats>[] = [
title: t('views.perfManage.kpiOverView.kpiName'), title: t('views.perfManage.kpiOverView.kpiName'),
dataIndex: 'title', dataIndex: 'title',
key: 'title', key: 'title',
width: '63%', width: '50%',
}, },
{ {
title: t('views.perfManage.kpiOverView.maxValue'), title: t('views.perfManage.kpiOverView.maxValue'),
@@ -830,6 +834,14 @@ const statsColumns: TableColumnType<KPIStats>[] = [
width: '12%', width: '12%',
sorter: (a: KPIStats, b: KPIStats) => a.avg - b.avg, sorter: (a: KPIStats, b: KPIStats) => a.avg - b.avg,
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
},
{
title: t('views.perfManage.kpiOverView.totalValue'),
dataIndex: 'total',
key: 'total',
width: '12%',
sorter: (a: KPIStats, b: KPIStats) => a.total - b.total,
sortDirections: ['ascend', 'descend'],
} }
]; ];