From 662583c73bf3ca52ea3b4f40bb82ffe9ec41d795 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 17 Apr 2024 10:47:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=93=E6=89=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=E7=AA=97=E5=8F=A3=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monitor/topologyArchitecture/index.vue    | 29 ++++++++++++++++---
 .../monitor/topologyBuild/hooks/useGraph.ts   | 28 ++++++++++++++++--
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue
index cbc33109..551bdc8c 100644
--- a/src/views/monitor/topologyArchitecture/index.vue
+++ b/src/views/monitor/topologyArchitecture/index.vue
@@ -230,6 +230,23 @@ function handleRanderGraph(
 
   graphG6.value = graph;
 
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(function (entries) {
+    // 当元素大小发生变化时触发回调函数
+    entries.forEach(function (entry) {
+      if (!graphG6.value) {
+        return;
+      }
+      graphG6.value.changeSize(
+        entry.contentRect.width,
+        entry.contentRect.height - 30
+      );
+      graphG6.value.fitCenter();
+    });
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
   return graph;
 }
 
@@ -328,10 +345,13 @@ function fnGraphDataLoad(reload: boolean = false) {
       } else {
         handleRanderGraph(graphG6Dom.value, graphState.data);
       }
-      fnGetState();
-      interval10s.value = setInterval(() => {
-        fnGetState(); // 获取网元状态
-      }, 10_000);
+      clearInterval(interval10s.value);
+      interval10s.value = null;
+      fnGetState().finally(() => {
+        interval10s.value = setInterval(() => {
+          fnGetState(); // 获取网元状态
+        }, 10_000);
+      });
     });
 }
 
@@ -473,6 +493,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   ws.close();
   clearInterval(interval10s.value);
+  interval10s.value = null;
 });
 </script>
 
diff --git a/src/views/monitor/topologyBuild/hooks/useGraph.ts b/src/views/monitor/topologyBuild/hooks/useGraph.ts
index 7db5fece..751ccdc9 100644
--- a/src/views/monitor/topologyBuild/hooks/useGraph.ts
+++ b/src/views/monitor/topologyBuild/hooks/useGraph.ts
@@ -8,7 +8,7 @@ import {
   Menu,
   Tooltip,
 } from '@antv/g6';
-import { ref } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
 import {
   edgeCubicAnimateCircleMove,
   edgeCubicAnimateLineDash,
@@ -29,7 +29,7 @@ export const graphEvent = ref<{
   type: string;
   target: HTMLElement | (IShapeBase & ICanvas);
   item: Item | null;
-}>();
+} | null>(null);
 
 /**图元素选择开始结束点 */
 export const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
@@ -592,6 +592,23 @@ export default function useGraph() {
 
     graphG6.value = graph;
 
+    // 创建 ResizeObserver 实例
+    var observer = new ResizeObserver(function (entries) {
+      // 当元素大小发生变化时触发回调函数
+      entries.forEach(function (entry) {
+        if (!graphG6.value) {
+          return;
+        }
+        graphG6.value.changeSize(
+          entry.contentRect.width,
+          entry.contentRect.height - 30
+        );
+        graphG6.value.fitCenter();
+      });
+    });
+    // 监听元素大小变化
+    observer.observe(container);
+
     // 图元素选择开始结束点数据
     fnSelectSourceTargetOptionsData();
 
@@ -605,6 +622,13 @@ export default function useGraph() {
     graphMode.value = graphG6.value.getCurrentMode();
   }
 
+  onBeforeUnmount(() => {
+    graphG6.value = null;
+    graphEvent.value = null;
+    selectSourceTargetOptions.value = [];
+    selectComboOptions.value = [];
+  });
+
   return {
     graphMode,
     graphModeOptions,