From 33159befc3acb7388f0dc861fb80275ad8478045 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 5 Nov 2024 17:11:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=A2=9E=E5=8A=A0=E5=B9=B6=E5=8F=91?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=EF=BC=8C=E4=BC=98=E5=8C=96=E6=80=A7=E8=83=BD?=
 =?UTF-8?q?=E5=92=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/kpiOverView/index.vue | 249 +++++++++++----------
 1 file changed, 126 insertions(+), 123 deletions(-)

diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue
index 660c355d..bd8ef4bf 100644
--- a/src/views/perfManage/kpiOverView/index.vue
+++ b/src/views/perfManage/kpiOverView/index.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
 import * as echarts from 'echarts/core';
-import { LegendComponent } from 'echarts/components';
+import { GridComponent, TooltipComponent, TitleComponent,LegendComponent } from 'echarts/components';
 import { LineChart, BarChart } from 'echarts/charts';
-import { GridComponent, TooltipComponent, TitleComponent, } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
 import useI18n from '@/hooks/useI18n';
@@ -15,12 +14,27 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { BarChartOutlined, LineChartOutlined, UnorderedListOutlined, DownOutlined, MoreOutlined } from '@ant-design/icons-vue';
 
+//定义KPI接口
+interface KPIBase{
+  kpiId: string;
+  title: string;
+}
+
+interface KPIColumn extends KPIBase{
+  dataIndex: string;
+  key: string;
+  neType: string;
+}
 // 在这里定义 ChartDataItem 接口
 interface ChartDataItem {
   date: string; // 将存储完整的时间字符串，包含时分秒
   [kpiId: string]: string | number; // 动态指标
 }
 
+//网元类型定义
+const ALL_NE_TYPES = ['AMF','SMF','UPF','MME','IMS','SMSC'] as const;
+type NeType= typeof ALL_NE_TYPES[number];
+
 echarts.use([
   LineChart,
   BarChart,
@@ -71,10 +85,6 @@ const toggleRealtime = () => {
   fnRealTimeSwitch(isRealtime.value);
 };
 
-// 定义所有网元类型
-const ALL_NE_TYPES = ['AMF', 'SMF', 'UPF', 'MME', 'IMS', 'SMSC'] as const;
-type NeType = (typeof ALL_NE_TYPES)[number];
-
 // 定义要筛选的指标 ID，按网元类型组织
 const TARGET_KPI_IDS: Record<NeType, string[]> = {
   AMF: ['AMF.02', 'AMF.03', 'AMF.A.07', 'AMF.A.08'],
@@ -113,63 +123,65 @@ const wsError = () => {
   message.error(t('common.websocketError'));
 };
 
-// 接收数据后回调
-const wsMessage = (res: Record<string, any>) => {
-  const { code, data } = res;
-  if (code === RESULT_CODE_ERROR) {
-    console.warn(res.msg);
-    return;
-  }
-
-  if (!data?.groupId) {
-    return;
-  }
-
-  const kpiEvent = data.data;
-  if (!kpiEvent) {
-    return;
-  }
+const handleWebSocketMessage = (kpiEvent:any)=>{
+  if(!kpiEvent)return;
 
   // 构造新的数据点
   const newData: ChartDataItem = {
-    date: kpiEvent.timeGroup
-      ? kpiEvent.timeGroup.toString()
-      : Date.now().toString(),
+    date: kpiEvent.timeGroup?.toString() || Date.now().toString(),
   };
 
   // 只添加已选中的指标的数据
   selectedKPIs.value.forEach(kpiId => {
-    if (kpiEvent[kpiId] !== undefined) {
-      newData[kpiId] = Number(kpiEvent[kpiId]);
-    } else {
-      newData[kpiId] = 0;
-    }
+    newData[kpiId] = Number(kpiEvent[kpiId])||0;
   });
 
   // 更新数据
   updateChartData(newData);
 };
+//成功回调
+const wsMessage = (res:Record<string,any>)=>{
+  const{code,data}=res;
+  if(code===RESULT_CODE_ERROR||!data?.gropId)return;
+  handleWebSocketMessage(data.data);
+};
+// 添加数据处理函数
+const processChartData = (rawData: any[]) => {
+  const groupedData = new Map<string, any>();//数据按时间分组
 
+  rawData.forEach(item => {//合并相同时间点的数据
+    const timeKey = item.timeGroup;
+    if (!groupedData.has(timeKey)) {//按时间排序
+      groupedData.set(timeKey, { timeGroup: timeKey });
+    }
+    Object.assign(groupedData.get(timeKey), item);
+  });
+
+  return Array.from(groupedData.values())
+    .sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup))
+    .map(item => {//转换成图表需要的格式
+      const dataItem: ChartDataItem = { date: item.timeGroup.toString() };
+      selectedKPIs.value.forEach(kpiId => {
+        dataItem[kpiId] = Number(item[kpiId]) || 0;
+      });
+      return dataItem;
+    });
+};
 // 获取图表数据方法
 const fetchChartData = async () => {
-  if (kpiColumns.value.length === 0) {
-    console.warn('No KPI columns available');
+  if(kpiColumns.value.length===0){
     updateChart();
     return;
   }
-
   try {
-    const [startTime, endTime] = dateRange.value;
-
+    const[startTime,endTime]=dateRange.value;
     if (!startTime || !endTime) {
       console.warn('Invalid date range:', dateRange.value);
       return;
     }
 
-    const allData: any[] = [];
-
-    // 使用 ALL_NE_TYPES 遍历网元类型
-    for (const neType of ALL_NE_TYPES) {
+    // 创建并行请求数组
+    const requests = ALL_NE_TYPES.map(async (neType) => {
       const params = {
         neType,
         neId: '001',
@@ -181,36 +193,23 @@ const fetchChartData = async () => {
         kpiIds: TARGET_KPI_IDS[neType].join(','),
       };
 
-      const res = await listKPIData(params);
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        allData.push(...res.data);
+      try {
+        const res = await listKPIData(params);
+        if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+          return res.data;
+        }
+        return [];
+      } catch (error) {
+        console.error(`Failed to fetch data for ${neType}:`, error);
+        return [];
       }
-    }
-
-    // 按时间分组合数据
-    const groupedData = new Map<string, any>();
-    allData.forEach(item => {
-      const timeKey = item.timeGroup;
-      if (!groupedData.has(timeKey)) {
-        groupedData.set(timeKey, { timeGroup: timeKey });
-      }
-      const existingData = groupedData.get(timeKey);
-      Object.assign(existingData, item);
     });
 
-    // 直接将处理后的数据赋值给 chartData.value
-    chartData.value = Array.from(groupedData.values())
-      .sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup))
-      .map(item => {
-        const dataItem: ChartDataItem = {
-          date: item.timeGroup.toString(),
-        };
-        kpiColumns.value.forEach(kpi => {
-          dataItem[kpi.kpiId] = Number(item[kpi.kpiId]) || 0;
-        });
-        return dataItem;
-      });
+    // 并行执行所有请求
+    const results = await Promise.all(requests);
+    const allData = results.flat();
 
+    chartData.value = processChartData(allData);
     updateChart();
   } catch (error) {
     console.error('Failed to fetch chart data:', error);
@@ -218,47 +217,49 @@ const fetchChartData = async () => {
   }
 };
 
-// 添加一个 Map 来存储每个指标的临时固定颜色
+// 存储每个指标的临时固定颜色
 const kpiColors = new Map<string, string>();
 
 // 定义图表类型的响应式变量
 const chartType = ref<'line' | 'bar'>('line');
 
-// 添加切换图表类型的方法
+// 切换图表类型的方法
 const toggleChartType = () => {
   chartType.value = chartType.value === 'line' ? 'bar' : 'line';
   updateChart();
 };
 
-// 更新图表
+// 更新图表类型
+const getCommonSeriesConfig=(isLine:boolean)=>({
+  symbol: isLine ? 'circle' : undefined,
+  symbolSize: isLine ? 6 : undefined,
+  showSymbol: isLine,
+  barWidth: !isLine ? 20 : undefined,
+  barGap: !isLine ? '30%' : undefined,
+  animation: !isLine,
+  animationDuration: 300,
+  animationEasing: 'cubicOut',
+});
 const updateChart = () => {
   if (!chart || !kpiColumns.value.length) return; //首先检查图表实例和指标是否存在
-  //过滤出已选择的指标列
-  const filteredColumns = kpiColumns.value.filter(col =>
-    selectedKPIs.value.includes(col.kpiId)
-  );
-  const legendData = filteredColumns.map(item => item.title); //创建图例数据数组，包含所有选中的指标的标题
-  //为每个选中的指标创建一个系列配置
-  const series = filteredColumns.map(item => {
-    const color = kpiColors.get(item.kpiId) || generateColorRGBA();
-    if (!kpiColors.has(item.kpiId)) {
-      kpiColors.set(item.kpiId, color); //保持指标颜色的临时一致性
-    }
+
+  const isLine = chartType.value==='line';
+  const commonConfig = getCommonSeriesConfig(isLine);
+
+  const series = selectedKPIs.value.map(kpiId => {
+    const kpi = kpiColumns.value.find(col=>col.kpiId ===kpiId);
+    if (!kpi) return null;
+    const color = kpiColors.get(kpiId)||generateColorRGBA();
+    kpiColors.set(kpiId, color);
 
     return {
-      name: item.title,
+      name: kpi.title,
       type: chartType.value, // 使用当前选择的图表类型
-      data:
-        chartData.value.length > 0
-          ? chartData.value.map(dataItem => dataItem[item.kpiId] || 0)
-          : [0],
-      smooth: chartType.value === 'line', // 只在折线图时使用平滑
-      symbol: chartType.value === 'line' ? 'circle' : undefined, // 只在折线图时显示标记
-      symbolSize: chartType.value === 'line' ? 6 : undefined,
-      showSymbol: chartType.value === 'line',
+      data:chartData.value.map(item=>item[kpiId]||0),
       itemStyle: { color },
+      ...commonConfig,
     };
-  });
+  }).filter(Boolean);
   //图表配置对象
   const option = {
     title: {
@@ -267,20 +268,26 @@ const updateChart = () => {
     },
     tooltip: {
       trigger: 'axis',
-      position: function (pt: any) {
-        return [pt[0], '10%'];
-      },
+      formatter: function (params: any[]) {
+        const time = params[0].axisValue;
+        let result = `${time}<br/>`;
+        params.forEach(param => {
+          const value = param.value === 0 ? '0' : param.value;
+          result += `${param.marker}${param.seriesName}: ${value}<br/>`;
+        });
+        return result;
+      }
     },
     legend: {
       //图例配置
-      data: legendData,
+      data: selectedKPIs.value.map(kpiId=>kpiColumns.value.find(col=>col.kpiId===kpiId)?.title),
       type: 'scroll',
       orient: 'horizontal',
       top: 25,
       textStyle: {
         fontSize: 12,
       },
-      selected: Object.fromEntries(legendData.map(name => [name, true])),
+      selected:Object.fromEntries(selectedKPIs.value.map(kpiId=>[kpiId,true])),
       show: true,
       left: 'center',
       width: '80%',
@@ -296,23 +303,26 @@ const updateChart = () => {
       containLabel: true,
     },
     xAxis: {
-      //x轴配置
+      // 指定x轴类型为类目轴，适用于离散的类目数据
       type: 'category',
-      boundaryGap: false,
-      data:
-        chartData.value.length > 0
-          ? chartData.value.map(item => {
-            // 将时间戳转换为包含时分秒的格式
-            return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
-          })
-          : [''],
+      // boundaryGap 控制坐标轴两边留白
+      // 当为折线图时(isLine为true)时不留白，柱状图时留白
+      // 这样可以让折线图从原点开始，柱状图有合适的间距
+      boundaryGap: isLine,
+      // 设置x轴的数据
+      // 将时间戳转换为格式化的时间字符串
+      data:chartData.value.map(item=>
+      dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
+      ),
+      // 设置坐标轴刻度标签的样式
       axisLabel: {
-        formatter: (value: string) => {
-          // 自定义 x 轴标签的显示格式
-          return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
-        },
+        // 格式化函数，这里直接返回原值
+        formatter: (value: string) => value,
+        // 刻度标签旋转角度，0表示不旋转
         rotate: 0,
-        interval: 'auto', // 自动计算显示��隔
+        // 自动计算标签显示的间隔，防止标签重叠
+        interval: 'auto', // 自动计算显示间隔
+        // 刻度标签对齐方式，右对齐
         align: 'right',
       },
     },
@@ -329,10 +339,12 @@ const updateChart = () => {
     },
     series: series, //配置数据
   };
-
-  chart.setOption(option); //使用新的配置更新图表
-  chart.resize(); //调整图表大小以适应容器
-
+  if(chart) {
+    requestAnimationFrame(() => {
+      chart!.setOption(option, true); //使用新的配置更新图表
+      chart!.resize(); //调整图表大小以适应容器
+    });
+  }
   // 如果已经有 observer，先断开连接
   if (observer) {
     observer.disconnect();
@@ -351,6 +363,8 @@ const updateChart = () => {
     observer.observe(container);
   }
 };
+//chart可能为null判断
+
 
 //钩子函数
 onMounted(async () => {
@@ -380,15 +394,6 @@ onMounted(async () => {
   }
 });
 
-// 定义指列类型
-interface KPIColumn {
-  title: string;
-  dataIndex: string;
-  key: string;
-  kpiId: string;
-  neType: string; // 添加网元类型字段
-}
-
 // 存储指标列信
 const kpiColumns = ref<KPIColumn[]>([]);
 // 添加选中指标的的状态
@@ -587,7 +592,6 @@ const secondaryKPIs = computed(() => {
   ALL_NE_TYPES.forEach(neType => {
     // 获取当前网元类型的主要指标 ID
     const primaryIds = TARGET_KPI_IDS[neType];
-
     // 从所有指标中筛选出当前网元其他指标
     groups[neType] = kpiColumns.value.filter(kpi => {
       // 检查是否不在主要指标列表中
@@ -719,7 +723,6 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
     </a-modal>
   </div>
 </template>
-
 <style scoped>
 .kpi-overview {
   padding: 20px;