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>({ /**当前图组名 */ - 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(undefined); /**图状态 */ const graphState = reactive>({ /**当前图组名 */ - 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',