add allNe Tooltip

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);
+  const neType=itemID.split('_')[0];
-  if (!info || !info.neState.online) return;
+  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) {
+  if (info.neStateMap[neID].cpu) {
-    nfCpuUsage = info.neState.cpu.nfCpuUsage;
+    nfCpuUsage = info.neStateMap[neID].cpu.nfCpuUsage;
-    const nfCpu = +(info.neState.cpu.nfCpuUsage / 100);
+    const nfCpu = +(info.neStateMap[neID].cpu.nfCpuUsage / 100);
     nfCpuUsage = +nfCpu.toFixed(2);
     if (nfCpuUsage > 100) {
       nfCpuUsage = 100;
     }
 
-    sysCpuUsage = info.neState.cpu.sysCpuUsage;
+    sysCpuUsage = info.neStateMap[neID].cpu.sysCpuUsage;
-    let sysCpu = +(info.neState.cpu.sysCpuUsage / 100);
+    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) {
+  if (info.neStateMap[neID].mem) {
-    const men = info.neState.mem.sysMemUsage;
+    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)) {
+  if (info.neStateMap[neID].disk && Array.isArray(info.neStateMap[neID].disk.partitionInfo)) {
-    let disks: any[] = info.neState.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];

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 `<div><span>${label || id}</span></div>`;
     }
@@ -122,7 +123,7 @@ const graphNodeTooltip = new Tooltip({
           ? (neStateInfo.online
               ? t('views.monitor.topology.normalcy')
               : t('views.monitor.topology.exceptions'))
-          : '未知'
+          : 'undefined'
       }
       </span></div>
       ${index < sameTypeNes.length - 1 ? '<div>------------------------</div>' : ''}
@@ -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;
           }

src/views/dashboard/overview/hooks/useTopology.ts

@@ -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(() =>
+export const graphNodeState = computed(() =>{
-  graphState.data.nodes.map((item: any) => ({
+ 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};  // 创建副本存储
+    node.neStateMap[neId] = {...newNeState};
-
+      // 通过 ID 查询节点实例
-  // 通过 ID 查询节点实例
   const item = graphG6.value.findById(node.id);
   if (item) {
-    // 如果是主要网元，更新节点显示状态
+    // 检查当前节点下所有网元的状态
-    if (node.neInfo && node.neInfo.neId === neId) {
+    const allStates = Object.values(node.neStateMap);
-      const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
+    // 判断状态颜色
+    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();
 }

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),
+              promise: handler.request(child.neId),
-                process: handler.process,
+              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<string>('001');
 let udmOtions = ref<Record<string, any>[]>([]);
+let onlineOtions = ref<Record<string, any>[]>([]);
+
 /**用户数量-选择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<string, any>[] = [];
 
           // UDM
           let arr1: Record<string, any>[] = [];
           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(() => {
 <template>
   <div class="viewport" ref="viewportDom">
     <div class="brand">
-      <div
+      <div class="brand-title" @click="toggle" :title="t('views.dashboard.overview.fullscreen')">
-        class="brand-title"
-        @click="toggle"
-        :title="t('views.dashboard.overview.fullscreen')"
-      >
         {{ t('views.dashboard.overview.title') }}
         <FullscreenExitOutlined v-if="isFullscreen" />
         <FullscreenOutlined v-else />
@@ -375,29 +390,20 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.userTitle') }}
           </h3>
           <div class="data">
-            <div
+            <div class="item toRouter" :title="t('views.dashboard.overview.toRouter')">
-              class="item toRouter"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div @click="fnToRouter('Sub_2010')">
-                <UserOutlined
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
                 {{ skimState.udmSubNum }}
               </div>
               <span>
-                <a-dropdown :trigger="['click']">
+                <a-dropdown :trigger="['click']" :get-Popup-Container="getPopupContainer">
                   <div class="toDeep-text">
                     {{ t('views.dashboard.overview.skim.users') }}
                     <DownOutlined style="margin-left: 12px; font-size: 12px" />
                   </div>
                   <template #overlay>
                     <a-menu @click="fnSelectUDM">
-                      <a-menu-item
+                      <a-menu-item v-for="v in udmOtions" :key="v.value" :disabled="udmNeId === v.value">
-                        v-for="v in udmOtions"
-                        :key="v.value"
-                        :disabled="udmNeId === v.value"
-                      >
                         {{ v.label }}
                       </a-menu-item>
                     </a-menu>
@@ -405,13 +411,8 @@ onBeforeUnmount(() => {
                 </a-dropdown>
               </span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')"
-              class="item toRouter"
+              style="margin: 0 12px" v-perms:has="['dashboard:overview:imsUeNum']">
-              @click="fnToRouter('Ims_2080')"
-              :title="t('views.dashboard.overview.toRouter')"
-              style="margin: 0 12px"
-              v-perms:has="['dashboard:overview:imsUeNum']"
-            >
               <div>
                 <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
                 {{ skimState.imsUeNum }}
@@ -420,12 +421,8 @@ onBeforeUnmount(() => {
                 {{ t('views.dashboard.overview.skim.imsUeNum') }}
               </span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('Ue_2081')" :title="t('views.dashboard.overview.toRouter')"
-              class="item toRouter"
+              v-perms:has="['dashboard:overview:smfUeNum']">
-              @click="fnToRouter('Ue_2081')"
-              :title="t('views.dashboard.overview.toRouter')"
-              v-perms:has="['dashboard:overview:smfUeNum']"
-            >
               <div>
                 <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
                 {{ skimState.smfUeNum }}
@@ -444,29 +441,18 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.baseTitle') }}
           </h3>
           <div class="data">
-            <div
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <img
+                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
                 {{ skimState.gnbNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <UserOutlined
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
                 {{ skimState.gnbUeNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
@@ -481,29 +467,18 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.baseTitle') }}
           </h3>
           <div class="data">
-            <div
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <img
+                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
                 {{ skimState.enbNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <UserOutlined
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
                 {{ skimState.enbUeNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
@@ -529,23 +504,14 @@ onBeforeUnmount(() => {
       <!-- 实时流量 -->
       <div class="upfFlow panel">
         <div class="inner">
-          <h3
+          <h3 class="toRouter" :title="t('views.dashboard.overview.toRouter')"
-            class="toRouter"
+            style="display: flex; align-items: center">
-            :title="t('views.dashboard.overview.toRouter')"
-            style="display: flex; align-items: center"
-          >
             <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             <span @click="fnToRouter('GoldTarget_2104')">{{
               t('views.dashboard.overview.upfFlow.title')
             }}</span>
-            <a-select
+            <a-select v-model:value="upfWhoId" :options="neOtions" :get-Popup-Container="getPopupContainer"
-              v-model:value="upfWhoId"
+              class="toDeep" style="width: 100px; color: #fff; margin-left: auto" @change="fnSelectNe" />
-              :options="neOtions"
-              :get-Popup-Container="getPopupContainer"
-              class="toDeep"
-              style="width: 100px; color: #fff; margin-left: auto"
-              @change="fnSelectNe"
-            />
           </h3>
 
           <div class="chart">
@@ -556,11 +522,8 @@ onBeforeUnmount(() => {
       <!-- 网络拓扑 -->
       <div class="topology panel">
         <div class="inner">
-          <h3
+          <h3 class="toRouter" @click="fnToRouter('TopologyArchitecture_2128')"
-            class="toRouter"
+            :title="t('views.dashboard.overview.toRouter')">
-            @click="fnToRouter('TopologyArchitecture_2128')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
             <span>
               <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
               {{ t('views.dashboard.overview.topology.title') }}
@@ -590,17 +553,11 @@ onBeforeUnmount(() => {
 
             <!-- 筛选 -->
             <div class="filter">
-              <span
+              <span :data-key="v" :class="{ active: upfTFActive === v }" v-for="v in ['0', '7', '30']" :key="v" @click="
-                :data-key="v"
+                () => {
-                :class="{ active: upfTFActive === v }"
+                  upfTFActive = v;
-                v-for="v in ['0', '7', '30']"
+                }
-                :key="v"
+              ">
-                @click="
-                  () => {
-                    upfTFActive = v;
-                  }
-                "
-              >
                 {{
                   v === '0'
                     ? '24' + t('common.units.hour')
@@ -633,11 +590,7 @@ onBeforeUnmount(() => {
       <!-- 告警统计 -->
       <div class="alarmType panel">
         <div class="inner">
-          <h3
+          <h3 class="toRouter" @click="fnToRouter('HistoryAlarm_2097')" :title="t('views.dashboard.overview.toRouter')">
-            class="toRouter"
-            @click="fnToRouter('HistoryAlarm_2097')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
             <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
           </h3>
@@ -649,10 +602,22 @@ onBeforeUnmount(() => {
       <!-- 资源情况 -->
       <div class="resources panel">
         <div class="inner">
-          <h3>
+          <h3 style="display: flex; align-items: center;">
             <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             {{ t('views.dashboard.overview.resources.title') }}：
-            {{ graphNodeClickID }}
+            <a-dropdown :trigger="['click']" :get-Popup-Container="getPopupContainer">
+              <div class="toDeep-text">
+                {{ graphNodeClickID }}
+                <DownOutlined style="margin-left: 12px; font-size: 12px" />
+              </div>
+              <template #overlay>
+                <a-menu @click="fnSelectNeRe">
+                  <a-menu-item v-for="v in onlineOtions" :key="v.value">
+                    {{ v.label }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </h3>
           <div class="chart">
             <NeResources />
@@ -665,6 +630,7 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 @import url('./css/index.css');
+
 .toDeep {
   --editor-background-color: blue;
 }
@@ -681,6 +647,7 @@ onBeforeUnmount(() => {
 .toDeep :deep(.ant-select-selection-item) {
   color: #fff;
 }
+
 .toDeep-text {
   color: #4c9bfd !important;
   font-size: 0.844rem !important;

src/views/monitor/topologyArchitecture/index.vue

@@ -539,7 +539,7 @@ function wsMessage(res: Record<string, any>) {
     // 图片类型不能填充
     if (node.type && node.type.startsWith('image')) {
       // 更新节点
-      if (node.label !== node.neInfo.neName) {
+      if (node.label !== node.neInfo.neType) {
         graphG6.value.updateItem(item, {
           label: node.neInfo.neType,
         });