From 523aec67cee284c818bf259ca121e2c484d75f4f Mon Sep 17 00:00:00 2001 From: wuteng <419274783@qq.com> Date: Tue, 8 Jul 2025 10:07:23 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E6=89=B9=E6=AC=A1=E6=8B=93=E6=89=91?= =?UTF-8?q?=E5=9B=BE=E5=8E=BB=E6=8E=89=E9=A1=B5=E9=9D=A2=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../emis/emisTransPlanRuleTopoGraph/index.vue | 108 +++++++++++++++--- 1 file changed, 94 insertions(+), 14 deletions(-) diff --git a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue index 05ac0fef..de362e35 100644 --- a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue +++ b/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"); - // outDiv.innerHTML = ` ${e.item.getModel().id} `; - outDiv.innerHTML = ` ${e.item._cfg.model.supplierName || ''} `; - return outDiv; + if (e.item._cfg.model.startSiteName) { + return `
+
${e.item._cfg.model.startSiteName}->${e.item._cfg.model.nextSiteName}
+
${e.item._cfg.model.supplierName || ''}
+
` + } else { + return ''; + } }, itemTypes: ["node"], }); @@ -515,7 +595,7 @@ export default { #container>>>.g6-component-tooltip { background: #333; color: #fff; - padding: 0 8px; + padding: 10px; } canvas {