Merge remote-tracking branch 'origin/lichang'

src/views/perfManage/kpiKeyTarget/index.vue

@@ -16,14 +16,11 @@ import { ColumnsType } from 'ant-design-vue/es/table';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { LineSeriesOption } from 'echarts/charts';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { Select } from 'ant-design-vue';
+import { useDebounceFn } from '@vueuse/core';
 const { t, currentLocale } = useI18n();
-
 const neInfoStore = useNeInfoStore();
-
 //WebSocket连接
 const ws = ref<WS | null>(null);
-
 //添加实时数据开关状态
 const realTimeEnabled = ref(false);
 //实时数据开关
@@ -31,7 +28,6 @@ const handleRealTimeSwitch = (checked: any) => {
   fnRealTimeSwitch(!!checked);
 };
 
-
 // 定义所有可能的网元类型
 const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf','upf','mme','mocngw','smsc','cbc','ausf'] as const;
 type AllChartType = typeof ALL_NE_TYPES[number];
@@ -42,46 +38,63 @@ const networkElementTypes = ref<AllChartType[]>([...ALL_NE_TYPES]);
 // 添加选择的网元类型，也使用 ALL_NE_TYPES 初始化
 const selectedNeTypes = ref<AllChartType[]>([...ALL_NE_TYPES]);
 
-// 监听 selectedNeTypes 的变化
+// 临时状态 存储最新的选择
+const latestSelectedTypes = ref<AllChartType[]>([]);
+
+// watch 函数
 watch(selectedNeTypes, (newTypes) => {
-  //console.log('Selected types changed:', newTypes);
+  console.log('Selected types changed:', newTypes);
-  if (JSON.stringify(newTypes) !== JSON.stringify(networkElementTypes.value)) {
+  // 立即更新 UI
-    networkElementTypes.value = newTypes;
+  networkElementTypes.value = newTypes;
-
+  // 更新临时状态
-    // 更新 chartOrder
+  latestSelectedTypes.value = newTypes;
-    chartOrder.value = chartOrder.value.filter(item => newTypes.includes(item.i));
+  // 触发防抖函数
-
+  debouncedUpdateCharts();
-    newTypes.forEach((type) => {
-      if (!chartOrder.value.some(item => item.i === type)) {
-        chartOrder.value.push({
-          x: (chartOrder.value.length % 2) * 6,
-          y: Math.floor(chartOrder.value.length / 2) * 4,
-          w: 6,
-          h: 4,
-          i: type,
-        });
-      }
-      // 确保 chartStates 包含新的网元类型
-      if (!chartStates[type]) {
-        chartStates[type] = createChartState();
-      }
-    });
-
-    //console.log('Updated chartOrder:', chartOrder.value);
-
-    // 保存选中的网元类型到本地存储
-    localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
-
-    // 重新初始化图表
-    nextTick(() => {
-      initCharts();
-    });
-  }
 }, { deep: true });
 
-// 初始化所有图表的函数
+// 防抖函数
+const debouncedUpdateCharts = useDebounceFn(() => {
+  // 比较当前选择和最新选择
+  if (JSON.stringify(latestSelectedTypes.value) !== JSON.stringify(selectedNeTypes.value)) {
+    // 如果不一致，以最新选择为准
+    selectedNeTypes.value = latestSelectedTypes.value;
+  }
+
+  const newTypes = selectedNeTypes.value;
+
+  // 更新 chartOrder
+  chartOrder.value = chartOrder.value.filter(item => newTypes.includes(item.i));
+
+  newTypes.forEach((type) => {
+    if (!chartOrder.value.some(item => item.i === type)) {
+      chartOrder.value.push({
+        x: (chartOrder.value.length % 2) * 6,
+        y: Math.floor(chartOrder.value.length / 2) * 4,
+        w: 6,
+        h: 4,
+        i: type,
+      });
+    }
+    // 确保 chartStates 包含新的网元类型
+    if (!chartStates[type]) {
+      chartStates[type] = createChartState();
+    }
+  });
+
+  console.log('Updated chartOrder:', chartOrder.value);
+
+  // 保存选中的网元类型到本地存储
+  localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
+
+  // 重新初始化图表
+  nextTick(() => {
+    initCharts();
+  });
+}, 300);
+
+// initCharts 函数
 const initCharts = async () => {
-  //console.log('Initializing charts for:', networkElementTypes.value);
+  console.log('Initializing charts for:', networkElementTypes.value);
 
   // 清除不再需要的图表
   Object.keys(chartStates).forEach((key) => {
@@ -99,7 +112,7 @@ const initCharts = async () => {
 
   // 初始化或更新需要的图表
   for (const type of networkElementTypes.value) {
-    //console.log('Initializing chart for:', type);
+    console.log('Initializing chart for:', type);
     if (!chartStates[type]) {
       chartStates[type] = createChartState();
     }
@@ -113,13 +126,13 @@ const initCharts = async () => {
     }
   }
 
-  //console.log('Finished initializing charts');
+  console.log('Finished initializing charts');
 
   // 保存更新后的布局
   localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
 };
 
-// 添加类型定义
+// 类型定义
 interface LayoutItem {
   x: number;
   y: number;
@@ -138,7 +151,7 @@ const chartOrder = ref<Layout>(
     y: Math.floor(index / 2) * 4,  // 每个图表占据 4 个单位高度
     w: 6,  // 宽度为6单位
     h: 4,  // 高度为4个单位
-    i: type,  // 使用网元类型作为唯一标识符
+    i: type,  // 使用网元类型作为唯一标识
   }))
 );
 
@@ -321,7 +334,7 @@ const initChart = (type: AllChartType) => {
         }
       });
 
-      // 开始观察图表容器
+      // 观察图表容器
       state.observer.value.observe(container);
     });
   };
@@ -355,7 +368,6 @@ const fetchData = async (type: AllChartType) => {
       });
     }
   } catch (error) {
-    console.log("123")
     console.error(error);
     message.error(t('common.getInfoFail'));
   } finally {
@@ -396,13 +408,13 @@ function fnRealTimeSwitch(bool: boolean) {
   }
 }
 
-// 接收数据后错误回
+// 接收数据后错误回调
 function wsError() {
 
   message.error(t('common.websocketError'));
 }
 
-// 修改 wsMessage 数
+//  wsMessage 数据回调
 function wsMessage(res: Record<string, any>) {
   const { code, data } = res;
   if (code === RESULT_CODE_ERROR) {
@@ -535,7 +547,6 @@ const fetchKPITitle = async (type: AllChartType) => {
   const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
   try {
     const res = await getKPITitle(type.toUpperCase());
-    console.log(res);
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       chartStates[type].tableColumns.value = res.data.map(item => ({
         title: item[`${language}Title`],
@@ -549,7 +560,6 @@ const fetchKPITitle = async (type: AllChartType) => {
       }));
     }
   } catch (error) {
-    console.log("321")
     console.error(error);
     message.warning(t('common.getInfoFail'));
   }
@@ -563,7 +573,7 @@ onMounted(async () => {
   ws.value = new WS();
   await neInfoStore.fnNelist();
 
-  // 从本地存储中读取选中的网元类型
+  // 从本地存储中读取选中的网类型
   const savedSelectedNeTypes = localStorage.getItem('selectedNeTypes');
   if (savedSelectedNeTypes) {
     const parsedSelectedNeTypes = JSON.parse(savedSelectedNeTypes) as AllChartType[];
@@ -596,15 +606,15 @@ onMounted(async () => {
     }));
   }
 
-  //console.log('Initialized networkElementTypes:', networkElementTypes.value);
+  console.log('Initialized networkElementTypes:', networkElementTypes.value);
-  //console.log('Initialized chartOrder:', chartOrder.value);
+  console.log('Initialized chartOrder:', chartOrder.value);
 
   await initCharts();
 });
 
 // 在组件卸载时销毁图表实例
 onUnmounted(() => {
-  if(ws.value &&ws.value.state()===WebSocket.OPEN) {
+  if(ws.value && ws.value.state() === WebSocket.OPEN) {
     ws.value.close();
   }
   Object.values(chartStates).forEach((state) => {