From 874e01996ae2fbf70748d8752f8d1448baee4c47 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 22 Nov 2024 09:56:51 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=A0=85=E6=A0=BC=E7=BA=BF?= =?UTF-8?q?=EF=BC=8C=E6=9B=B2=E7=BA=BF=E5=B9=B3=E6=BB=91=EF=BC=8C=E5=B9=B3?= =?UTF-8?q?=E5=9D=87=E5=80=BC=E8=AE=A1=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/locales/en-US.ts | 1 + src/i18n/locales/zh-CN.ts | 1 + src/views/perfManage/kpiOverView/index.vue | 115 ++++++++++----------- 3 files changed, 59 insertions(+), 58 deletions(-) diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 8df6dc8e..de715fb2 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -1110,6 +1110,7 @@ export default { "kpiName":"NE Metrics Name", "maxValue":"Max Value", "minValue":"Min Value", + "avgValue":"Average Value", "kpiChartTitle":"Overview of NE metrics", "changeLine":"Change to Line Charts", "changeBar":"Change to Bar Charts", diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 55f1b37a..d65403f0 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -1110,6 +1110,7 @@ export default { "kpiName":"指标名", "maxValue":"最大值", "minValue":"最小值", + "avgValue":"平均值", "kpiChartTitle":"网元指标概览", "changeLine":"切换为折线图", "changeBar":"切换为柱状图", diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue index aa23d66c..da865a72 100644 --- a/src/views/perfManage/kpiOverView/index.vue +++ b/src/views/perfManage/kpiOverView/index.vue @@ -62,9 +62,9 @@ const ws = ref(null); // }); const ranges = ref([ {label:t('views.perfManage.customTarget.sixHoursAgo'),value:[dayjs().subtract(6, 'hours'), - dayjs(),]}, + dayjs(),]}, {label:t('views.perfManage.customTarget.threeHoursAgo'),value:[dayjs().subtract(3, 'hours'), - dayjs(),]}, + dayjs(),]}, {label:t('views.monitor.monitor.today'),value:[dayjs().startOf('day'), dayjs()]}, ]) //日期范围响应式变量 @@ -188,10 +188,9 @@ const processChartData = (rawData: any[]) => { } Object.assign(groupedData.get(timeKey), item); }); - // 获取当前选择的结束时间 - const endTime = dateRange.value[1]; - const processedData = Array.from(groupedData.values()) + + return Array.from(groupedData.values()) .sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup)) .map(item => {//转换成图表需要的格式 const dataItem: ChartDataItem = { date: item.timeGroup.toString() }; @@ -200,17 +199,6 @@ const processChartData = (rawData: any[]) => { }); return dataItem; }); - // 如果有数据，且最后一个数据点的时间小于选择的结束时间 - if (processedData.length > 0 && Number(processedData[processedData.length - 1].date) < Number(endTime)) { - // 添加一个结束时间点，所有指标值设为0 - const endDataPoint: ChartDataItem = { date: endTime }; - selectedKPIs.value.forEach(kpiId => { - endDataPoint[kpiId] = 0; - }); - processedData.push(endDataPoint); - } - - return processedData; }; // 获取图表数据方法 const fetchChartData = async () => { @@ -236,7 +224,7 @@ const fetchChartData = async () => { endTime: String(endTime), sortField: 'timeGroup', sortOrder: 'asc', - interval: 5, + interval: 60*15, kpiIds: TARGET_KPI_IDS[neType].join(','), }; @@ -272,8 +260,9 @@ const kpiColors = new Map(); // 更新图表类型 const getSeriesConfig = () => ({ - symbol: 'circle', + symbol: 'none', symbolSize: 6, + smooth:0.6, showSymbol: true, }); @@ -293,19 +282,7 @@ const updateChart = () => { const data = chartData.value.map((item, index) => { const value = item[kpiId] || 0; // 如果是最后一个数据点，添加特殊样式 - if (index === chartData.value.length - 1) { - return { - value, - symbolSize: 12, // 更大的节点 - itemStyle: { - color, // 保持与线条相同的颜色 - borderWidth: 3, // 添加边框 - borderColor: color, // 边框颜色 - shadowBlur: 10, // 添加阴影效果 - shadowColor: color, - }, - }; - } + return value; }); @@ -379,6 +356,13 @@ const updateChart = () => { xAxis: { // 指定x轴类型为类目轴，适用于离散的类目数据 type: 'category', + splitLine: { + show: true, + lineStyle: { + // 使用深浅的间隔色 + color: '#aaa', + } + }, //控制坐标轴两边留白 // 当为折线图时(isLine为true)时不留白，柱状图时留白 // 这样可以让折线图从原点开始，柱状图有合适的间距 @@ -389,29 +373,29 @@ const updateChart = () => { dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss') ), //设置坐标轴刻度标签的样式 - axisLabel: { - interval: function(index: number, value: string) { - const currentTime = dayjs(value); - const minutes = currentTime.minute(); - const seconds = currentTime.second(); - - // 始终显示小时的起始和结束时间点 - if ((minutes === 0 && seconds === 0) || - (minutes === 59 && seconds === 59)) { - return true; - } - - // 对于中间的时间点，使用 auto 的逻辑 - if (index % Math.ceil(chartData.value.length / 6) === 0) { - return true; - } - - return false; - }, - rotate: 0, - align: 'center', - hideOverlap: true - } + // axisLabel: { + // interval: function(index: number, value: string) { + // const currentTime = dayjs(value); + // const minutes = currentTime.minute(); + // const seconds = currentTime.second(); + // + // // 始终显示小时的起始和结束时间点 + // if ((minutes === 0 && seconds === 0) || + // (minutes === 59 && seconds === 59)) { + // return true; + // } + // + // // 对于中间的时间点，使用 auto 的逻辑 + // if (index % Math.ceil(chartData.value.length / 6) === 0) { + // return true; + // } + // + // return false; + // }, + // rotate: 0, + // align: 'center', + // hideOverlap: true + // } }, yAxis: { // y轴配置 @@ -585,6 +569,7 @@ interface KPIStats { title: string; max: number; min: number; + avg:number; } // 添加计算属性，用于计算每个指标的最大值和最小值 @@ -599,11 +584,17 @@ const kpiStats = computed((): KPIStats[] => { // 获取该指标的所有数值 const values = chartData.value.map(item => Number(item[kpiId]) || 0); + // 计算平均值 + const avg = values.length > 0 + ? Number((values.reduce((sum, val) => sum + val, 0) / values.length).toFixed(2)) + : 0; + return { kpiId: kpiId, title: kpi.title, max: Math.max(...values), - min: Math.min(...values) + min: Math.min(...values), + avg:avg }; }).filter((item): item is KPIStats => item !== null); }); @@ -628,13 +619,13 @@ const statsColumns: TableColumnType[] = [ title: t('views.perfManage.kpiOverView.kpiName'), dataIndex: 'title', key: 'title', - width: '65%', + width: '63%', }, { title: t('views.perfManage.kpiOverView.maxValue'), dataIndex: 'max', key: 'max', - width: '17%', + width: '12%', sorter: (a: KPIStats, b: KPIStats) => a.max - b.max, // 添加排序函数 sortDirections: ['ascend', 'descend'], }, @@ -642,9 +633,17 @@ const statsColumns: TableColumnType[] = [ title: t('views.perfManage.kpiOverView.minValue'), dataIndex: 'min', key: 'min', - width: '17%', + width: '12%', sorter: (a: KPIStats, b: KPIStats) => a.min - b.min, // 添加排序函数 sortDirections: ['ascend', 'descend'], + }, + { + title: t('views.perfManage.kpiOverView.avgValue'), // 需要在语言包中添加对应的翻译 + dataIndex: 'avg', + key: 'avg', + width: '12%', + sorter: (a: KPIStats, b: KPIStats) => a.avg - b.avg, + sortDirections: ['ascend', 'descend'], } ];