组批次拓扑图去掉页面滚动条

src/views/emis/emisTransPlanRuleTopoGraph/index.vue

@@ -107,6 +107,16 @@ export default {
         this.drawTreeGraph();
 
 
+    },
+    beforeRouteEnter(to, from, next) {
+        // 组件创建前 保存当前背景颜色
+        document.documentElement.style.overflow = 'hidden';
+        next();
+    },
+    beforeRouteLeave(to, from, next) {
+        // 组件销毁前 恢复样式
+        document.documentElement.style.overflow = '';
+        next();
     },
     methods: {
         /** 搜索按钮操作 */
@@ -127,7 +137,6 @@ export default {
             this.queryParams.productName = item.prodName;
         },
         drawTreeGraph() {
-            //
             this.contextMenu = new G6.Menu({
                 getContent(evt) {
 
@@ -213,6 +222,11 @@ export default {
                         },
                     },
                 },
+                nodeStateStyles: {
+                    closest: {
+                        fill: '#f00',
+                    },
+                },
                 modes: {
                     default: [
                         {
@@ -231,7 +245,11 @@ export default {
                         },
                         "drag-canvas",
                         "fixed-zoom-canvas",
-                        "drag-node"
+                        "drag-node",
+                        // {
+                        //     type: 'drag-node',
+                        //     enableDelegate: true,
+                        // }
                     ],
                 },
                 layout: {
@@ -332,20 +350,13 @@ export default {
 
             const animateCfg = { duration: 200, easing: "easeCubic" };
             this.graph.on("node:click", (evt) => {
-                // this.graph.fitView();
                 const { item } = evt;
                 const node = item?.get("model");
                 //点击更多 显示锁起来的下一层节点
                 if (node.id.includes("expand")) {
                     const parentNode = this.graph.getNeighbors(item, "source")[0].get("model");
-                    console.log(parentNode, parentNode.childrenBak);
                     this.graph.updateChildren(parentNode.childrenBak, parentNode.id);
                 }
-                // if (node.id.includes("expand")) {
-                //     const parentNode = this.graph.getNeighbors(item, "source")[0].get("model");
-                //     console.log(parentNode, parentNode.childrenBak);
-                //     this.graph.updateChildren(parentNode.childrenBak, parentNode.id);
-                // }
                 setTimeout(() => {
                     if (!node.id.includes("expand")) {
                         this.graph.focusItem(item, true, animateCfg);
@@ -362,7 +373,72 @@ export default {
                     this.graph.clearItemStates(node);
                 });
             });
+            let minDisNode;
+            this.graph.on('node:dragstart', (e) => {
+                console.log('dragstart')
+                minDisNode = undefined;
+            });
+            this.graph.on('node:drag', (e) => {
+                console.log('node:drag')
+                minDisNode = undefined;
+                const item = e.item;
+                const model = item.getModel();
+                const nodes = this.graph.getNodes();
+                let minDis = Infinity;
+                nodes.forEach((inode) => {
+                    this.graph.setItemState(inode, 'closest', false);
+                    const node = inode.getModel();
+                    if (node.id === model.id) return;
+                    const dis = (node.x - e.x) * (node.x - e.x) + (node.y - e.y) * (node.y - e.y);
+                    if (dis < minDis) {
+                        minDis = dis;
+                        minDisNode = inode;
+                    }
+                });
+                // console.log('minDisNode1', minDisNode);
+                // if (minDis < 2000) 
+                this.graph.setItemState(minDisNode, 'closest', true);
+                // else minDisNode = undefined;
+                // console.log('minDisNode2',minDisNode)
+            }); 
+            this.graph.on('node:dragend', (e) => {
+                // console.log('dragend')
+                const descriptionDiv = document.createElement('div');
+                descriptionDiv.innerHTML =
+                    'Move a subtree to a new parent by dragging the root node of the subtree.';
+                container.appendChild(descriptionDiv);
+                // console.log('minDisNode', minDisNode)
+                if (!minDisNode) {
+                    descriptionDiv.innerHTML = 'Failed. No node close to the dragged node.';
+                    return;
+                }
+                const item = e.item;
+                const id = item.getID();
+                const data = this.graph.findDataById(id);
+                // if the minDisNode is a descent of the dragged node, return
+                let isDescent = false;
+                const minDisNodeId = minDisNode.getID();
+                // console.log('dragend', minDisNodeId, isDescent, data, id);
+                console.log('目的节点==》',this.graph.findDataById(minDisNodeId)) //目的节点
+                console.log('拖动节点==》', this.graph.findDataById(id)) //拖动节点
+                G6.Util.traverseTree(data, (d) => {
+                    if (d.id === minDisNodeId) isDescent = true;
+                });
+                if (isDescent) {
+                    descriptionDiv.innerHTML = 'Failed. The target node is a descendant of the dragged node.';
+                    return;
+                }
+                this.graph.removeChild(id);
 
+                setTimeout(() => {
+                    const newParentData = this.graph.findDataById(minDisNodeId);
+                    let newChildren = newParentData.children;
+                    if (newChildren) newChildren.push(data);
+                    else newChildren = [data];
+                    this.graph.updateChildren(newChildren, minDisNodeId);
+                    descriptionDiv.innerHTML = 'Success.';
+                }, 600);
+            });
             // this.graph.data(this.treeData);
             // this.graph.render();
             this.graph.zoom(0.9);
@@ -413,10 +489,14 @@ export default {
                     return e.item._cfg.model.label;
                 },
                 getContent(e) {
-                    let outDiv = document.createElement("p");
+                    if (e.item._cfg.model.startSiteName) {
-                    // outDiv.innerHTML = ` ${e.item.getModel().id} `;
+                        return `<div class="tooltip">
-                    outDiv.innerHTML = ` ${e.item._cfg.model.supplierName || ''} `;
+                                <div>${e.item._cfg.model.startSiteName}->${e.item._cfg.model.nextSiteName}</div>
-                    return outDiv;
+                                <div>${e.item._cfg.model.supplierName || ''}</div>
+                            </div>`
+                    } else {
+                        return '';
+                    }
                 },
                 itemTypes: ["node"],
             });
@@ -515,7 +595,7 @@ export default {
 #container>>>.g6-component-tooltip {
     background: #333;
     color: #fff;
-    padding: 0 8px;
+    padding: 10px;
 }
 
 canvas {