diff --git a/src/views/perfManage/kpiKeyTarget/index.vue b/src/views/perfManage/kpiKeyTarget/index.vue index 0b4def30..111af39f 100644 --- a/src/views/perfManage/kpiKeyTarget/index.vue +++ b/src/views/perfManage/kpiKeyTarget/index.vue @@ -103,21 +103,8 @@ useDebounceFn(() => { } const newTypes = selectedNeTypes.value; - - // 更新 chartOrder - chartOrder.value = chartOrder.value.filter(item => newTypes.includes(item.i)); - +// 确保 chartStates 包含新的网元类型 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(); } @@ -126,7 +113,7 @@ useDebounceFn(() => { // 保存选中的网元型到本地存储 localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes)); - // 新初始图表 + // 初始图表 nextTick(() => { initCharts(); }); @@ -173,62 +160,6 @@ const initCharts = async () => { }, 200); }; -// 位置类型定义(记录布局) -interface LayoutItem { - x: number; - y: number; - w: number; - h: number; - i: AllChartType; -} - -type Layout = LayoutItem[]; - -//构建响应式数储存图表类型数据 -const chartOrder = ref( - JSON.parse(localStorage.getItem('chartOrder') || 'null') || - networkElementTypes.value.map((type, index) => ({//系统默认布局 - x: index % 2 * 6, // 每行两个图表,宽度为6 - y: Math.floor(index / 2) * 4, // 每个图表据 4 个单位高度 - w: 6, // 宽度为6单位 - h: 4, // 高度为4个单位 - i: type, // 使用网元类型作为唯一标识 - })) -); - -// 监听带防抖 -useDebounceFn((newLayout: Layout) => { - const filteredLayout = newLayout.filter(item => networkElementTypes.value.includes(item.i)); - if (JSON.stringify(filteredLayout) !== JSON.stringify(chartOrder.value)) { - chartOrder.value = filteredLayout; - nextTick(() => { - chartOrder.value.forEach((item) => { - const state = chartStates[item.i]; - if (state?.chart.value) { - state.chart.value.resize(); - renderChart(item.i); - } - }); - }); - } else { - console.log('No change in layout, skipping update'); - } -}, 200); -// 200ms 的防抖时间 - -// 听 chartOrder 的变化 -watch(chartOrder, (newOrder, oldOrder) => { - if (JSON.stringify(newOrder) !== JSON.stringify(oldOrder)) { - nextTick(() => { - Object.values(chartStates).forEach(state => { - if (state.chart.value) { - state.chart.value.resize(); - } - }); - }); - } -}, { deep: true }); - // 定义表格状态类型 type TableStateType = { loading: boolean; @@ -642,27 +573,6 @@ onMounted(async () => { // 保存这个默认选择到本地存储 localStorage.setItem('selectedNeTypes', JSON.stringify(DEFAULT_NE_TYPES)); } - - // 初化或更新 chartOrder - const savedLayout = localStorage.getItem('chartOrder'); - if (savedLayout) { - chartOrder.value = JSON.parse(savedLayout).filter((item: LayoutItem) => - networkElementTypes.value.includes(item.i) - ); - } - - // 如 chartOrder 为空或不包含所有选中的网元,添加缺失的网元 - const missingTypes = networkElementTypes.value.filter(type => !chartOrder.value.some(item => item.i === type)); - missingTypes.forEach((type) => { - chartOrder.value.push({ - x: (chartOrder.value.length % 2) * 6, - y: Math.floor(chartOrder.value.length / 2) * 4, - w: 6, - h: 4, - i: type, - }); - }); - await initCharts(); });