From 147b2fad8dec6bd22a065dbf90a1d49285ca52b9 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Thu, 17 Oct 2024 19:54:40 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E7=BD=91=E5=85=83=E5=93=8D=E5=BA=94?= =?UTF-8?q?=E5=BC=8F=E6=95=B0=E7=BB=84=E6=B7=BB=E5=8A=A0=E9=98=B2=E6=8A=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/perfManage/kpiKeyTarget/index.vue | 120 +++++++++++--------- 1 file changed, 65 insertions(+), 55 deletions(-) diff --git a/src/views/perfManage/kpiKeyTarget/index.vue b/src/views/perfManage/kpiKeyTarget/index.vue index 57616248..1e7ea9ab 100644 --- a/src/views/perfManage/kpiKeyTarget/index.vue +++ b/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(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([...ALL_NE_TYPES]); // 添加选择的网元类型，也使用 ALL_NE_TYPES 初始化 const selectedNeTypes = ref([...ALL_NE_TYPES]); -// 监听 selectedNeTypes 的变化 +// 临时状态 存储最新的选择 +const latestSelectedTypes = ref([]); + +// watch 函数 watch(selectedNeTypes, (newTypes) => { - //console.log('Selected types changed:', newTypes); - if (JSON.stringify(newTypes) !== JSON.stringify(networkElementTypes.value)) { - networkElementTypes.value = newTypes; - - // 更新 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(); - }); - } + console.log('Selected types changed:', newTypes); + // 立即更新 UI + networkElementTypes.value = newTypes; + // 更新临时状态 + latestSelectedTypes.value = newTypes; + // 触发防抖函数 + debouncedUpdateCharts(); }, { 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( 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) { 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 chartOrder:', chartOrder.value); + console.log('Initialized networkElementTypes:', networkElementTypes.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) => {