From f2018eca30e533adfc7325f2244d13ce5c02ad34 Mon Sep 17 00:00:00 2001 From: lai <10633968+laiyujun1@user.noreply.gitee.com> Date: Fri, 23 May 2025 17:08:04 +0800 Subject: [PATCH] add allNe Tooltip --- .../overview/components/NeResources/index.vue | 25 +-- .../overview/components/Topology/index.vue | 9 +- .../dashboard/overview/hooks/useTopology.ts | 47 +++-- src/views/dashboard/overview/index.vue | 179 +++++++----------- .../monitor/topologyArchitecture/index.vue | 2 +- 5 files changed, 124 insertions(+), 138 deletions(-) diff --git a/src/views/dashboard/overview/components/NeResources/index.vue b/src/views/dashboard/overview/components/NeResources/index.vue index a50a6a20..fb32626f 100644 --- a/src/views/dashboard/overview/components/NeResources/index.vue +++ b/src/views/dashboard/overview/components/NeResources/index.vue @@ -236,8 +236,11 @@ function handleRanderChart( } function fnChangeData(data: any[], itemID: string) { - let info = data.find((item: any) => item.id === itemID); - if (!info || !info.neState.online) return; + const neType=itemID.split('_')[0]; + const neID=itemID.split('_')[1]; + let info = data.find((item: any) => item.id === neType); + + if (!info || !info.neStateMap[neID]?.online) return; // if (!info.neState.online) { // info = data.find((item: any) => item.id === itemID); // graphNodeClickID.value = itemID; @@ -249,16 +252,16 @@ function fnChangeData(data: any[], itemID: string) { // console.log(info.neState.disk); let sysCpuUsage = 0; let nfCpuUsage = 0; - if (info.neState.cpu) { - nfCpuUsage = info.neState.cpu.nfCpuUsage; - const nfCpu = +(info.neState.cpu.nfCpuUsage / 100); + if (info.neStateMap[neID].cpu) { + nfCpuUsage = info.neStateMap[neID].cpu.nfCpuUsage; + const nfCpu = +(info.neStateMap[neID].cpu.nfCpuUsage / 100); nfCpuUsage = +nfCpu.toFixed(2); if (nfCpuUsage > 100) { nfCpuUsage = 100; } - sysCpuUsage = info.neState.cpu.sysCpuUsage; - let sysCpu = +(info.neState.cpu.sysCpuUsage / 100); + sysCpuUsage = info.neStateMap[neID].cpu.sysCpuUsage; + let sysCpu = +(info.neStateMap[neID].cpu.sysCpuUsage / 100); sysCpuUsage = +sysCpu.toFixed(2); if (sysCpuUsage > 100) { sysCpuUsage = 100; @@ -266,8 +269,8 @@ function fnChangeData(data: any[], itemID: string) { } let sysMemUsage = 0; - if (info.neState.mem) { - const men = info.neState.mem.sysMemUsage; + if (info.neStateMap[neID].mem) { + const men = info.neStateMap[neID].mem.sysMemUsage; sysMemUsage = +(men / 100).toFixed(2); if (sysMemUsage > 100) { sysMemUsage = 100; @@ -275,8 +278,8 @@ function fnChangeData(data: any[], itemID: string) { } let sysDiskUsage = 0; - if (info.neState.disk && Array.isArray(info.neState.disk.partitionInfo)) { - let disks: any[] = info.neState.disk.partitionInfo; + if (info.neStateMap[neID].disk && Array.isArray(info.neStateMap[neID].disk.partitionInfo)) { + let disks: any[] = info.neStateMap[neID].disk.partitionInfo; disks = disks.sort((a, b) => +b.used - +a.used); if (disks.length > 0) { const { total, used } = disks[0]; diff --git a/src/views/dashboard/overview/components/Topology/index.vue b/src/views/dashboard/overview/components/Topology/index.vue index 775b7455..51e55688 100644 --- a/src/views/dashboard/overview/components/Topology/index.vue +++ b/src/views/dashboard/overview/components/Topology/index.vue @@ -27,6 +27,7 @@ const graphNodeTooltip = new Tooltip({ getContent(evt) { if (!evt) return t('views.monitor.topologyBuild.graphNotInfo'); const { id, label, neState, neInfoList, neStateMap }: any = evt.item?.getModel(); + //console.log(neInfoList,neState,neInfoList); if (notNeNodes.includes(id)) { return `
${label || id}
`; } @@ -122,7 +123,7 @@ const graphNodeTooltip = new Tooltip({ ? (neStateInfo.online ? t('views.monitor.topology.normalcy') : t('views.monitor.topology.exceptions')) - : '未知' + : 'undefined' } ${index < sameTypeNes.length - 1 ? '
------------------------
' : ''} @@ -253,8 +254,9 @@ function handleRanderGraph( // 图片路径处理 if (node.img) node.img = parseBasePath(node.img); - if (node.icon && node.icon.show && node.icon?.img) + if (node.icon.show && node.icon?.img){ node.icon.img = parseBasePath(node.icon.img); + } // 遍历是否有网元数据 const nodeID: string = node.id; @@ -263,11 +265,12 @@ function handleRanderGraph( if (notNeNodes.includes(nodeID)) { return true; } - + //(neTypeMap.get(nodeID),nodeID,node.neState) // 处理网元节点 if (neTypeMap.has(nodeID)) { // all NeInfo Reflect.set(node, 'neInfoList', neTypeMap.get(nodeID)); + Reflect.set(node, 'neInfo', neTypeMap.get(nodeID)[0] || {}); return true; } diff --git a/src/views/dashboard/overview/hooks/useTopology.ts b/src/views/dashboard/overview/hooks/useTopology.ts index c4c1b64d..ff83a840 100644 --- a/src/views/dashboard/overview/hooks/useTopology.ts +++ b/src/views/dashboard/overview/hooks/useTopology.ts @@ -35,16 +35,20 @@ export const graphState = reactive>({ export const graphG6 = ref(null); /**图点击选择 */ -export const graphNodeClickID = ref('UPF'); +export const graphNodeClickID = ref('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>(new Map()); /**neStateParse 网元状态 数据解析 */ export function neStateParse(neType: string, data: Record,neId: string) { + // console.log('neStateParse',neType, data, neId); + const { combos, edges, nodes } = graphState.data; + const node = nodes.find((item: Record) => item.id === neType); + //console.log('neStateParse',node); + if (!node) return; // 初始化状态映射 @@ -83,28 +92,32 @@ export function neStateParse(neType: string, data: Record,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,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,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(); } diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index 8d3e2637..17af2b48 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -91,6 +91,7 @@ function fnGetNeState() { for (const neInfo of neInfoList) { + if (!neInfo.neType || !neInfo.neId) continue; wsSend({ @@ -173,9 +174,9 @@ async function fnGetSkim() { const handler = neHandlers.get(child.neType); return handler ? { - promise: handler.request(child.neId), - process: handler.process, - } + promise: handler.request(child.neId), + process: handler.process, + } : null; }) .filter(Boolean) || [] @@ -209,6 +210,8 @@ async function fnGetSkim() { }); } + + /**初始数据函数 */ function loadData() { fnGetNeState(); // 获取网元状态 @@ -237,7 +240,7 @@ function loadData() { if (!interval5s.value || !initFlag) return; fnGetSkim(); // 获取概览信息 fnGetNeState(); // 获取网元状态 - }, 5_000); + }, 10_000); } /**栏目信息跳转 */ @@ -264,6 +267,8 @@ function fnSelectNe(value: any, option: any) { let udmNeId = ref('001'); let udmOtions = ref[]>([]); +let onlineOtions = ref[]>([]); + /**用户数量-选择UDM */ function fnSelectUDM(e: any) { udmNeId.value = e.key; @@ -273,7 +278,11 @@ function fnSelectUDM(e: any) { } }); } - +/**资源控制-选择NE */ +function fnSelectNeRe(e: any) { + graphNodeClickID.value = e.key; +} +// // 定义一个方法返回 views 容器 const getPopupContainer = () => { // 使用 ref 或其他方式来引用你的 views 容器 @@ -300,19 +309,29 @@ onMounted(() => { //queryParams.neRealId = arr[0].value; fnSelectNe(arr[0].value, arr[0]); } + //online Ne + let onlineArr: Record[] = []; // UDM let arr1: Record[] = []; res.data.forEach((v: any) => { + if (v.status && ['UDM', 'UPF', 'AUSF', 'PCF', 'SMF', 'AMF', 'OMC', 'SMSC', 'IMS', 'MME'].includes(v.neType)) { + onlineArr.push({ value: v.neType + '_' + v.neId, label: v.neName, rmUid: v.rmUid }); + } if (v.neType === 'UDM') { arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid }); } }); udmOtions.value = arr1; + onlineOtions.value = onlineArr; if (arr1.length > 0) { fnSelectUDM({ key: arr1[0].value }); } + if (onlineArr.length > 0) { + fnSelectNeRe({ key: onlineArr[0].value }); + } + // 过滤不可用的网元 neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter( (item: any) => { @@ -354,11 +373,7 @@ onBeforeUnmount(() => {