From eace7a4fd800451bd8e8186c1efffc040d0509eb Mon Sep 17 00:00:00 2001
From: wuteng <419274783@qq.com>
Date: Thu, 7 Aug 2025 14:52:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E6=89=B9=E6=AC=A1=E8=A7=84=E5=88=99?=
 =?UTF-8?q?=E5=9B=BE=E8=8A=82=E7=82=B9=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=85=A8?=
 =?UTF-8?q?bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../emis/emisTransPlanRuleTopoGraph/index.vue | 85 +++++++++++--------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
index dc03f464..54896135 100644
--- a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
+++ b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
@@ -42,6 +42,9 @@ export default {
             treeData: {},
             showMinimap:false,
             graph: null,
+            resizeTimer: null,
+             // 记录节点的展开状态
+            nodeStates: {},
             queryParams: {
                 pageNum: 1,
                 pageSize: 50,
@@ -108,6 +111,18 @@ export default {
             },
         });
         this.drawTreeGraph();
+        //监听窗口大小变化
+        window.addEventListener('resize', this.handleResize);
+    },
+    // 组件销毁时移除事件监听
+    beforeDestroy() {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        if (this.graph) {
+            this.graph.destroy();
+        }
     },
     beforeRouteEnter(to, from, next) {
         // 组件创建前 保存当前背景颜色
@@ -237,27 +252,9 @@ export default {
                 },
                 modes: {
                     default: [
-                        {
-                            type: "collapse-expand",
-                            onChange: function onChange(item, collapsed) {
-                                const data = item?.get("model");
-                                data.collapsed = collapsed;
-                                const model = {
-                                    id: data.id,
-                                    // labelCfg: { position: !collapsed ? "top" : "right" },
-                                };
-                                item.update(model);
-                                item.refresh();
-                                return true;
-                            },
-                        },
                         "drag-canvas",
                         "fixed-zoom-canvas",
                         "drag-node",
-                        // {
-                        //     type: 'drag-node',
-                        //     enableDelegate: true,
-                        // }
                     ],
                 },
                 layout: {
@@ -353,27 +350,30 @@ export default {
 
             this.graph.on("node:mouseleave", (evt) => {
                 const { item } = evt;
-                // this.graph.setItemState(item, "active", false);
             });
 
-            const animateCfg = { duration: 200, easing: "easeCubic" };
             this.graph.on("node:click", (evt) => {
-                const { item } = evt;
-                const node = item?.get("model");
-                //点击更多 显示锁起来的下一层节点
-                if (node.id.includes("expand")) {
-                    const parentNode = this.graph.getNeighbors(item, "source")[0].get("model");
+                const node = evt.item;
+                const model = node.getModel();
+                if (model.id.includes("expand")) {
+                    const parentNode = this.graph.getNeighbors(node, "source")[0].get("model");
                     this.graph.updateChildren(parentNode.childrenBak, parentNode.id);
-                }
-                setTimeout(() => {
-                    if (!node.id.includes("expand")) {
-                        this.graph.focusItem(item, true, animateCfg);
-                        this.graph.getNodes().forEach((node) => {
-                            this.graph.clearItemStates(node);
-                        });
-                        this.graph.setItemState(item, "selected", true);
+                } else {
+                    if (model.children && model.children.length > 0) {
+                        // 切换节点状态
+                        model.collapsed = !model.collapsed;
+                        this.nodeStates[model.id] = model.collapsed;
                     }
-                }, 500);
+                }
+                this.selectedNodeId = model.id;
+                this.graph.setItemState(node, 'selected', true);               
+                this.graph.render();
+                this.graph.fitCenter();
+                //重新渲染之后 恢复选中状态
+                const reRenderedNode = this.graph.findById(this.selectedNodeId);
+                if (reRenderedNode) {
+                    this.graph.setItemState(reRenderedNode, 'selected', true);
+                }
             });
 
             this.graph.on("canvas:click", () => {
@@ -618,7 +618,22 @@ export default {
         onLineChange(value) {
             this.queryParams.lineName = value.lineName;
         },
-
+        //防抖处理 窗口大小变化时触发 响应式画布大小
+        handleResize() {
+            if (this.resizeTimer) {
+                clearTimeout(this.resizeTimer);
+            }
+            this.resizeTimer = setTimeout(() => {
+                if (!this.graph) return;
+                const container = document.getElementById('container');
+                const width = container.clientWidth;
+                const height = container.clientHeight;
+                // 更新画布大小
+                this.graph.changeSize(width, height);
+                // 重新适应视图
+                this.graph.fitCenter();
+            }, 100);
+        },
     }
 }