fix(体系搜索): 监听窗口改变重新渲染

src/pages/regulatoryRepository/systemSearch/index.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="root">
-    <div id="mountNode" ref="mountNode"></div>
+    <div id="mountNode" ref="mountNode" />
-    <DialogTable ref="DialogTableRef"></DialogTable>
+    <DialogTable ref="DialogTableRef" />
-    <loading :loading="loading">加载中...</loading>
+    <loading :loading="loading">
+      加载中...
+    </loading>
   </div>
 </template>
 
 <script>
 import G6 from '@antv/g6';
 
-import DialogTable from "./components/DialogTable";
+import DialogTable from './components/DialogTable';
 
 export default {
-  name: "systemSearch",
+  name: 'SystemSearch',
   components: {
     DialogTable
   },
-  data(){
+  data () {
     return {
       data: {},
       loading: false,
@@ -47,7 +49,7 @@ export default {
       // }
     }
   },
-  mounted() {
+  mounted () {
     this.getData()
   },
   methods: {
@@ -62,11 +64,11 @@ export default {
         this.loading = false
       })
     },
-    initGraph(){
+    initGraph () {
       const that = this
       // 实例化 minimap 插件
       const minimap = new G6.Minimap({
-         size: [100, 100],
+        size: [ 100, 100 ],
         className: 'minimap',
         type: 'delegate',
       });
@@ -74,21 +76,21 @@ export default {
       const tooltip = new G6.Tooltip({
         offsetX: 10,
         offsetY: 20,
-        getContent(e) {
+        getContent (e) {
           const cfg = e.item.getModel()
           const outDiv = document.createElement('div');
           // outDiv.style.maxWidth = '200px';
           outDiv.innerHTML = `
-            <div>${cfg.menuName}( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )</div>`
+            <div>${ cfg.menuName }( ${ cfg.gbStandCount }/${ cfg.fbStandCount }/${ cfg.esStandCount } )</div>`
           return outDiv
         },
-        itemTypes: ['node']
+        itemTypes: [ 'node' ]
       });
 
       const mainColor = '#3170A7'
 
       G6.registerNode('card-node', {
-         draw: function drawShape(cfg, group) {
+        draw: function drawShape (cfg, group) {
           const r = 2;
           const color = '#5B8FF9';
           const w = cfg.size[0];
@@ -119,8 +121,8 @@ export default {
               fontSize: 12,
               lineHeight: 20,
               text: cfg.menuName.length > 5
-                   ? `${cfg.menuName.slice(0,5)}...( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )`
+                ? `${ cfg.menuName.slice(0, 5) }...( ${ cfg.gbStandCount }/${ cfg.fbStandCount }/${ cfg.esStandCount } )`
-                   : `${cfg.menuName}( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )`,
+                : `${ cfg.menuName }( ${ cfg.gbStandCount }/${ cfg.fbStandCount }/${ cfg.esStandCount } )`,
               fill: '#000',
               textAlign: 'center',
               cursor: 'pointer',
@@ -148,18 +150,18 @@ export default {
             rect.attr('stroke', mainColor) // 边框颜色
 
             const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
-             text.attr('fill','#fff')
+            text.attr('fill', '#fff')
           } else if (cfg.level === 1) {
             const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
             rect.attr('fill', '#eee')
             rect.attr('stroke', '#eee')
 
             const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
-             text.attr('fill','#000')
+            text.attr('fill', '#000')
           }
           return shape;
         },
-         setState(name, value, item) {
+        setState (name, value, item) {
           if (name === 'collapsed') {
             const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
             const icon = value ? G6.Marker.expand : G6.Marker.collapse;
@@ -171,7 +173,7 @@ export default {
       G6.registerEdge(
         'step-line',
         {
-            getControlPoints: function getControlPoints(cfg) {
+          getControlPoints: function getControlPoints (cfg) {
             const startPoint = cfg.startPoint;
             const endPoint = cfg.endPoint;
             return [
@@ -194,7 +196,6 @@ export default {
         'polyline',
       );
 
-
       const graph = new G6.TreeGraph({
         container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
         width: this.$refs.mountNode.scrollWidth, // Number，必须，图的宽度
@@ -203,12 +204,12 @@ export default {
         // fitViewPadding: [20, 40, 50, 20], // 画布上四周的留白宽度
         // 节点在默认状态下的样式配置（style）和其他配置
         defaultNode: {
-          type:'card-node',
+          type: 'card-node',
-          size: [160,30], // 节点大小
+          size: [ 160, 30 ], // 节点大小
           // 线的连接位置
           anchorPoints: [
-            [0.5, 0],
+            [ 0.5, 0 ],
-            [0.5, 1],
+            [ 0.5, 1 ],
           ],
           // width: 100,
           // height: 40,
@@ -304,10 +305,10 @@ export default {
         },
         // 交互
         modes: {
-          default: ['drag-canvas', 'zoom-canvas'], // 允许拖拽画布、放缩画布、拖拽节点
+          default: [ 'drag-canvas', 'zoom-canvas' ], // 允许拖拽画布、放缩画布、拖拽节点
         },
         // plugins: [minimap], // 将 minimap 实例配置到图上
-        plugins: [tooltip],
+        plugins: [ tooltip ],
       });
       this.setCollapse()
       graph.data(this.data); // 读取 Step 2 中的数据源到图上
@@ -315,12 +316,22 @@ export default {
       // graph.fitView()
       graph.fitCenter()
       // graph.focusItem(this.data.id)
+      // 添加事件监听
       this.initGraphEvent(graph)
+      // 监听窗口尺寸变化
+      window.addEventListener('resize', () => {
+        // 获取新的窗口尺寸
+        const newWidth = this.$refs.mountNode.offsetWidth;
+        const newHeight = this.$refs.mountNode.offsetHeight
+
+        // 更新 G6 图表的尺寸
+        graph.changeSize(newWidth, newHeight);
+      });
     },
     setCollapse () {
-      G6.Util.traverseTree(this.data, function (item) {
+      G6.Util.traverseTree(this.data, (item) => {
         if (item.level >= 2) {
-          //collapsed为true时默认收起
+          // collapsed为true时默认收起
           item.collapsed = true
         }
       })