From 47c07e7a3c6b4ec23248a893342c86a98a3096e5 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 25 Jan 2024 17:40:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=93=E6=89=91=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E5=93=8D=E5=BA=94=E6=94=B9=E5=8F=98=E5=AE=BD?=
 =?UTF-8?q?=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../overview/components/Topology/index.vue       | 16 ++++++++++++++++
 .../dashboard/overview/hooks/useTopology.ts      |  2 +-
 src/views/monitor/topologyArchitecture/index.vue |  4 +++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/views/dashboard/overview/components/Topology/index.vue b/src/views/dashboard/overview/components/Topology/index.vue
index 76c607c0..295075ce 100644
--- a/src/views/dashboard/overview/components/Topology/index.vue
+++ b/src/views/dashboard/overview/components/Topology/index.vue
@@ -138,6 +138,8 @@ function handleRanderGraph(
     height: clientHeight - 36,
     fitCenter: true,
     fitView: true,
+    fitViewPadding: [40],
+    autoPaint: true,
     modes: {
       default: [
         'drag-combo',
@@ -166,6 +168,20 @@ function handleRanderGraph(
 
   graphG6.value = graph;
 
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(function (entries) {
+    // 当元素大小发生变化时触发回调函数
+    entries.forEach(function (entry) {
+      graphG6.value.changeSize(
+        entry.contentRect.width,
+        entry.contentRect.height - 30
+      );
+      graphG6.value.fitCenter();
+    });
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
   return graph;
 }
 
diff --git a/src/views/dashboard/overview/hooks/useTopology.ts b/src/views/dashboard/overview/hooks/useTopology.ts
index 0c490952..727ad6d3 100644
--- a/src/views/dashboard/overview/hooks/useTopology.ts
+++ b/src/views/dashboard/overview/hooks/useTopology.ts
@@ -3,7 +3,7 @@ import { computed, reactive, ref } from 'vue';
 /**图状态 */
 export const graphState = reactive<Record<string, any>>({
   /**当前图组名 */
-  group: '5GC System Architecture2',
+  group: '5GC System Architecture3',
   /**图数据 */
   data: {
     combos: [],
diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue
index 6b1c4ebf..8db11cff 100644
--- a/src/views/monitor/topologyArchitecture/index.vue
+++ b/src/views/monitor/topologyArchitecture/index.vue
@@ -29,7 +29,7 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
 /**图状态 */
 const graphState = reactive<Record<string, any>>({
   /**当前图组名 */
-  group: '5GC System Architecture2',
+  group: '5GC System Architecture3',
   /**图数据 */
   data: {
     combos: [],
@@ -182,6 +182,8 @@ function handleRanderGraph(
     height: clientHeight,
     fitCenter: true,
     fitView: true,
+    fitViewPadding: [40],
+    autoPaint: true,
     modes: {
       default: [
         'drag-combo',