fix：样式调整，增加栅格线，曲线平滑，平均值计算

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",

src/i18n/locales/zh-CN.ts

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

src/views/perfManage/kpiOverView/index.vue

@@ -62,9 +62,9 @@ const ws = ref<WS | null>(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<string, string>();
 
 // 更新图表类型
 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<KPIStats>[] = [
     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<KPIStats>[] = [
     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'],
   }
 ];