fix:清楚旧功能的多余代码
This commit is contained in:
@@ -103,21 +103,8 @@ useDebounceFn(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const newTypes = selectedNeTypes.value;
|
const newTypes = selectedNeTypes.value;
|
||||||
|
// 确保 chartStates 包含新的网元类型
|
||||||
// 更新 chartOrder
|
|
||||||
chartOrder.value = chartOrder.value.filter(item => newTypes.includes(item.i));
|
|
||||||
|
|
||||||
newTypes.forEach((type) => {
|
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]) {
|
if (!chartStates[type]) {
|
||||||
chartStates[type] = createChartState();
|
chartStates[type] = createChartState();
|
||||||
}
|
}
|
||||||
@@ -126,7 +113,7 @@ useDebounceFn(() => {
|
|||||||
// 保存选中的网元型到本地存储
|
// 保存选中的网元型到本地存储
|
||||||
localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
|
localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
|
||||||
|
|
||||||
// 新初始图表
|
// 初始图表
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
initCharts();
|
initCharts();
|
||||||
});
|
});
|
||||||
@@ -173,62 +160,6 @@ const initCharts = async () => {
|
|||||||
}, 200);
|
}, 200);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 位置类型定义(记录布局)
|
|
||||||
interface LayoutItem {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
w: number;
|
|
||||||
h: number;
|
|
||||||
i: AllChartType;
|
|
||||||
}
|
|
||||||
|
|
||||||
type Layout = LayoutItem[];
|
|
||||||
|
|
||||||
//构建响应式数储存图表类型数据
|
|
||||||
const chartOrder = ref<Layout>(
|
|
||||||
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 = {
|
type TableStateType = {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
@@ -642,27 +573,6 @@ onMounted(async () => {
|
|||||||
// 保存这个默认选择到本地存储
|
// 保存这个默认选择到本地存储
|
||||||
localStorage.setItem('selectedNeTypes', JSON.stringify(DEFAULT_NE_TYPES));
|
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();
|
await initCharts();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user