拓扑图修改

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

@@ -68,47 +68,59 @@ export const graphNodeStateNum = computed(() => {
 export const neStateRequestMap = ref<Map<string, boolean>>(new Map());
 
 /**neStateParse 网元状态 数据解析 */
-export function neStateParse(neType: string, data: Record<string, any>) {
+export function neStateParse(neType: string, data: Record<string, any>,neId: string) {
   const { combos, edges, nodes } = graphState.data;
   const node = nodes.find((item: Record<string, any>) => item.id === neType);
+  if (!node) return;
+
+    // 初始化状态映射
+    if (!node.neStateMap) node.neStateMap = {};
 
   // 更新网元状态
-  const newNeState = Object.assign(node.neState, data, {
+  const newNeState :any = {
+    ...data,  // 先展开data对象
     refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
     online: !!data.cpu,
-  });
+    neId: neId
+  };
+
+    // 如果是主要网元，更新节点状态
+    if (node.neInfo && node.neInfo.neId === neId) {
+      // 使用Object.assign更新状态，确保所有字段都被正确复制
+      Object.assign(node.neState, newNeState);
+    }
+
+    // 无论是否为主要网元，都更新状态映射
+    node.neStateMap[neId] = {...newNeState};  // 创建副本存储
 
   // 通过 ID 查询节点实例
   const item = graphG6.value.findById(node.id);
   if (item) {
-    const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
-    // 图片类型不能填充
-    if (node.type.startsWith('image')) {
-      // 更新节点
-      if (node.label !== newNeState.neName) {
+    // 如果是主要网元，更新节点显示状态
+    if (node.neInfo && node.neInfo.neId === neId) {
+      const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
+      // 图片类型不能填充
+      if (node.type && node.type.startsWith('image')) {
+        // 更新节点
+        if (node.label !== newNeState.neName) {
+          graphG6.value.updateItem(item, {
+            label: newNeState.neName,
+          });
+        }
+        // 设置状态
+        graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+      } else {
+        // 更新节点
         graphG6.value.updateItem(item, {
           label: newNeState.neName,
+          style: {
+            fill: stateColor, // 填充色
+            stroke: stateColor, // 填充色
+          },
         });
+        // 设置状态
+        graphG6.value.setItemState(item, 'stroke', newNeState.online);
       }
-      // 设置状态
-      graphG6.value.setItemState(item, 'top-right-dot', stateColor);
-    } else {
-      // 更新节点
-      graphG6.value.updateItem(item, {
-        label: newNeState.neName,
-        // neState: newNeState,
-        style: {
-          fill: stateColor, // 填充色
-          stroke: stateColor, // 填充色
-        },
-        // labelCfg: {
-        //   style: {
-        //     fill: '#ffffff', // 标签文本色
-        //   },
-        // },
-      });
-      // 设置状态
-      graphG6.value.setItemState(item, 'stroke', newNeState.online);
     }
   }
 

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

@@ -34,7 +34,6 @@ export default function useWS() {
 
   /**接收数据后回调 */
   function wsMessage(res: Record<string, any>) {
-    //console.log(res);
     const { code, requestId, data } = res;
     if (code === RESULT_CODE_ERROR) {
       console.warn(res.msg);
@@ -43,7 +42,8 @@ export default function useWS() {
     // 网元状态
     if (requestId && requestId.startsWith('neState')) {
       const neType = requestId.split('_')[1];
-      neStateParse(neType, data);
+      const neId = requestId.split('_')[2];
+      neStateParse(neType, data,neId);
       return;
     }