fix: 拓扑组件监听窗口变化

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>
 

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,