From d5f2ca71cf3a58385fb40a0afdd8eb84746ce13c Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 29 Jan 2024 18:37:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=93=E6=89=91=E5=8F=96=E7=BD=91?=
 =?UTF-8?q?=E5=85=83=E7=8A=B6=E6=80=81=E6=94=B9ws=E8=AF=BB=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/ws-websocket.ts                   |   3 +-
 .../monitor/topologyArchitecture/index.vue    | 161 ++++++++++++------
 .../topologyBuild/hooks/registerEdge.ts       |   4 +-
 3 files changed, 109 insertions(+), 59 deletions(-)

diff --git a/src/plugins/ws-websocket.ts b/src/plugins/ws-websocket.ts
index 5019c27f..6bf9e099 100644
--- a/src/plugins/ws-websocket.ts
+++ b/src/plugins/ws-websocket.ts
@@ -166,7 +166,8 @@ export class WS {
       console.warn('websocket unavailable');
       return;
     }
-    console.log(' readyState', this.ws.readyState);
+    
+    // 非正常状态关闭
     if (
       this.ws.readyState === WebSocket.CLOSED ||
       this.ws.readyState === WebSocket.CLOSING
diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue
index 4be3a9eb..9251809a 100644
--- a/src/views/monitor/topologyArchitecture/index.vue
+++ b/src/views/monitor/topologyArchitecture/index.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { listNe, stateNe } from '@/api/ne/ne';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import { listNe } from '@/api/ne/ne';
 import { message } from 'ant-design-vue/lib';
 import { getGraphData } from '@/api/monitor/topology';
 import { parseDateToStr } from '@/utils/date-utils';
@@ -20,8 +23,10 @@ import {
 } from '../topologyBuild/hooks/registerNode';
 import useNeOptions from './useNeOptions';
 import useI18n from '@/hooks/useI18n';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
 const { t } = useI18n();
 const { fnNeRestart, fnNeStop, fnNeLogFile } = useNeOptions();
+const ws = new WS();
 
 /**图DOM节点实例对象 */
 const graphG6Dom = ref<HTMLElement | undefined>(undefined);
@@ -39,7 +44,20 @@ const graphState = reactive<Record<string, any>>({
 });
 
 /**非网元元素 */
-const notNeNodes = ['5GC', 'DN', 'UE', 'Base', "lan", "lan1", "lan2", "lan3", "lan4", "lan5", "lan6", "lan7"];
+const notNeNodes = [
+  '5GC',
+  'DN',
+  'UE',
+  'Base',
+  'lan',
+  'lan1',
+  'lan2',
+  'lan3',
+  'lan4',
+  'lan5',
+  'lan6',
+  'lan7',
+];
 
 /**图实例对象 */
 const graphG6 = ref<any>(null);
@@ -247,7 +265,6 @@ function fnGraphDataLoad(reload: boolean = false) {
       }
     })
     .then(res => {
-      console.log('fnGraphDataLoad', res);
       if (!res) return;
       const { combos, edges, nodes } = res.graphData;
 
@@ -269,7 +286,6 @@ function fnGraphDataLoad(reload: boolean = false) {
           return false;
         }
       );
-      console.log(nf);
 
       // 边过滤
       const ef: Record<string, any>[] = edges.filter(
@@ -320,52 +336,77 @@ const stateTimeout = ref<any>(null);
 /**查询网元状态 */
 async function fnGetState() {
   clearTimeout(stateTimeout.value);
-  const { combos, edges, nodes } = graphState.data;
-  // console.log({ combos, edges, nodes })
-
   // 获取节点状态
-  for (const node of nodes) {
+  for (const node of graphState.data.nodes) {
     if (notNeNodes.includes(node.id)) continue;
-    const { neType, neId, neName } = node.neInfo;
+    const { neType, neId } = node.neInfo;
     if (!neType || !neId) continue;
-    const result = await stateNe(neType, neId);
-    if (result.code === RESULT_CODE_SUCCESS) {
-      // 更新网元状态
-      const newNeState = Object.assign(node.neState, result.data, {
-        refreshTime: parseDateToStr(result.data.refreshTime, 'HH:mm:ss'),
-      });
+    ws.send({
+      requestId: `${neType}_${neId}`,
+      type: 'ne_state',
+      data: {
+        neType: neType,
+        neId: neId,
+      },
+    });
+  }
 
-      // 通过 ID 查询节点实例
-      const item = graphG6.value.findById(node.id);
-      if (item) {
-        const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
-        // 图片类型不能填充
-        if (node.type.startsWith('image')) {
-          // 更新节点
-          graphG6.value.updateItem(item, {
-            label: neName,
-          });
-          // 设置状态
-          graphG6.value.setItemState(item, 'top-right-dot', stateColor);
-        } else {
-          // 更新节点
-          graphG6.value.updateItem(item, {
-            label: neName,
-            // neState: newNeState,
-            style: {
-              fill: stateColor, // 填充色
-              stroke: stateColor, // 填充色
-            },
-            // labelCfg: {
-            //   style: {
-            //     fill: '#ffffff', // 标签文本色
-            //   },
-            // },
-          });
-          // 设置状态
-          graphG6.value.setItemState(item, 'stroke', newNeState.online);
-        }
-      }
+  stateTimeout.value = setTimeout(() => fnGetState(), 30_000);
+}
+
+/**接收数据后回调 */
+function wsError(ev: any) {
+  // 接收数据后回调
+  console.error(ev);
+}
+
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+  if (!requestId) return;
+  const [neType, neId] = requestId.split('_');
+  const { combos, edges, nodes } = graphState.data;
+  const node = nodes.find((item: Record<string, any>) => item.id === neType);
+
+  // 更新网元状态
+  const newNeState = Object.assign(node.neState, data, {
+    refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+    online: !!data.cpu,
+  });
+
+  // 通过 ID 查询节点实例
+  const item = graphG6.value.findById(node.id);
+  if (item) {
+    const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
+    // 图片类型不能填充
+    if (node.type.startsWith('image')) {
+      // 更新节点
+      graphG6.value.updateItem(item, {
+        label: newNeState.neName,
+      });
+      // 设置状态
+      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);
     }
   }
 
@@ -383,8 +424,7 @@ async function fnGetState() {
       //   `${edgeSource} - ${edgeTarget}`,
       //   neS.neState.online && neT.neState.online
       // );
-      const stateColor =
-        neS.neState.online && neT.neState.online ? '#000000' : '#ff4d4f'; // 状态颜色
+      // const stateColor = neS.neState.online && neT.neState.online ? '#000000' : '#ff4d4f'; // 状态颜色
       // 更新边
       // graphG6.value.updateItem(item, {
       //   label: `${edgeSource} - ${edgeTarget}`,
@@ -398,26 +438,35 @@ async function fnGetState() {
       //   },
       // });
       // 设置状态
-      // graphG6.value.setItemState(
-      //   item,
-      //   'line-dash',
-      //   neS.neState.online && neT.neState.online
-      // );
+      graphG6.value.setItemState(
+        item,
+        'line-dash',
+        neS.neState.online && neT.neState.online
+      );
     }
     if (neS && notNeNodes.includes(edgeTarget)) {
+      graphG6.value.setItemState(item, 'line-dash', neT.neState.online);
     }
     if (neT && notNeNodes.includes(edgeSource)) {
+      graphG6.value.setItemState(item, 'line-dash', neT.neState.online);
     }
   }
-
-  stateTimeout.value = setTimeout(() => fnGetState(), 30_000);
 }
 
 onMounted(() => {
   fnGraphDataLoad(false);
+
+  // 建立链接
+  const options: OptionsType = {
+    url: '/ws',
+    onmessage: wsMessage,
+    onerror: wsError,
+  };
+  ws.connect(options);
 });
 
 onBeforeUnmount(() => {
+  ws.close();
   clearTimeout(stateTimeout.value);
 });
 </script>
diff --git a/src/views/monitor/topologyBuild/hooks/registerEdge.ts b/src/views/monitor/topologyBuild/hooks/registerEdge.ts
index b1c6ca0f..babe5a7f 100644
--- a/src/views/monitor/topologyBuild/hooks/registerEdge.ts
+++ b/src/views/monitor/topologyBuild/hooks/registerEdge.ts
@@ -146,7 +146,7 @@ export function edgeLineAnimateState() {
           }
           if (value) {
             // 第一个矩形边
-            const fillColor = model?.labelCfg?.style?.fill || '#1890ff';
+            const fillColor = typeof value === 'string' ? value : '#1890ff';
             // 边缘路径的起始位置
             const startPoint = keyShape.getPoint(0);
             back1 = group.addShape('circle', {
@@ -221,7 +221,7 @@ export function edgeLineAnimateState() {
                   index = 0;
                 }
                 return {
-                  lineDash: [4, 2, 1, 2],
+                  lineDash: [4, 2, 2, 2],
                   lineDashOffset: -index,
                 };
               },