OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

add allNe Tooltip

Browse Source
This commit is contained in:
lai
2025-05-23 17:08:04 +08:00
parent af513ba157
commit f2018eca30
5 changed files with 124 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/dashboard/overview/hooks/useTopology.ts
View File

@@ -35,16 +35,20 @@ export const graphState = reactive<Record<string, any>>({
export const graphG6 = ref<any>(null);
/**图点击选择 */
export const graphNodeClickID = ref<string>('UPF');
export const graphNodeClickID = ref<string>('UPF_001');
/**图节点网元信息状态 */
export const graphNodeState = computed(() =>
graphState.data.nodes.map((item: any) => ({
export const graphNodeState = computed(() =>{
return graphState.data.nodes.map((item: any) => ({
id: item.id,
label: item.label,
neInfo: item.neInfo,
neState: item.neState,
neInfoList:item.neInfoList,
neStateMap: item.neStateMap,
}))
}
);
/**图节点网元状态数量 */
@@ -69,8 +73,13 @@ export const neStateRequestMap = ref<Map<string, boolean>>(new Map());
/**neStateParse 网元状态 数据解析 */
export function neStateParse(neType: string, data: Record<string, any>,neId: string) {
// console.log('neStateParse',neType, data, neId);
const { combos, edges, nodes } = graphState.data;
const node = nodes.find((item: Record<string, any>) => item.id === neType);
//console.log('neStateParse',node);
if (!node) return;
// 初始化状态映射
@@ -83,28 +92,32 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
online: !!data.cpu,
neId: neId
};
// 如果是主要网元，更新节点状态
// 如果是001，更新节点状态。neInfo为主要的网元信息
if (node.neInfo && node.neInfo.neId === neId) {
// 使用Object.assign更新状态，确保所有字段都被正确复制
Object.assign(node.neState, newNeState);
}
//console.log(node.neState)
// 无论是否为主要网元，都更新状态映射
node.neStateMap[neId] = {...newNeState}; // 创建副本存储
// 通过 ID 查询节点实例
node.neStateMap[neId] = {...newNeState};
// 通过 ID 查询节点实例
const item = graphG6.value.findById(node.id);
if (item) {
// 如果是主要网元，更新节点显示状态
if (node.neInfo && node.neInfo.neId === neId) {
const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
// 检查当前节点下所有网元的状态
const allStates = Object.values(node.neStateMap);
// 判断状态颜色
let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
if (allStates.some((state: any) => !state.online)) {
// 如果有任何一个网元不正常
stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
}
// 图片类型不能填充
if (node.type && node.type.startsWith('image')) {
// 更新节点
if (node.label !== newNeState.neName) {
if (node.label !== newNeState.neType) {
graphG6.value.updateItem(item, {
label: newNeState.neName,
label: newNeState.neType,
});
}
// 设置状态
@@ -112,7 +125,7 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
} else {
// 更新节点
graphG6.value.updateItem(item, {
label: newNeState.neName,
label: newNeState.neType,
style: {
fill: stateColor, // 填充色
stroke: stateColor, // 填充色
@@ -121,7 +134,7 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
// 设置状态
graphG6.value.setItemState(item, 'stroke', newNeState.online);
}
}
}
// 设置边状态
@@ -179,6 +192,6 @@ export function topologyReset() {
nodes: [],
};
graphG6.value = null;
graphNodeClickID.value = 'UPF';
graphNodeClickID.value = 'UPF_001';
neStateRequestMap.value = new Map();
}