组批次拓扑图去掉页面滚动条
This commit is contained in:
wuteng
parent
da76081cd5
commit
523aec67ce
@ -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 `<div class="tooltip">
|
||||
<div>${e.item._cfg.model.startSiteName}->${e.item._cfg.model.nextSiteName}</div>
|
||||
<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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user