From 5909b5e7500b20af31d14ee647f5f42f20d4d19b Mon Sep 17 00:00:00 2001 From: xueyinfei <1207092115@qq.com> Date: Sat, 24 May 2025 11:13:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E5=85=B3=E7=B3=BB,=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/meta/metaInfo/businssRelation.vue | 62 +++++++++---------- 1 file changed, 28 insertions(+), 34 deletions(-) diff --git a/vue-fastapi-frontend/src/views/meta/metaInfo/businssRelation.vue b/vue-fastapi-frontend/src/views/meta/metaInfo/businssRelation.vue index 4ec6bde..68cb5dd 100644 --- a/vue-fastapi-frontend/src/views/meta/metaInfo/businssRelation.vue +++ b/vue-fastapi-frontend/src/views/meta/metaInfo/businssRelation.vue @@ -13,7 +13,7 @@ const props = defineProps({ }) const g6data = ref([]) -function initG6(){ +function initG6() { const { Util, registerBehavior, @@ -97,8 +97,6 @@ function initG6(){ // here you need to update the related edges manualy since the new properties { startIndex, startX } for the nodes are custom, and cannot be recognized by G6 edgesToUpdate.forEach(edge => edge.refresh()) } - - }, click(e) { const { @@ -109,7 +107,6 @@ function initG6(){ if (!item) { return; } - if (shape.get("name") === "collapse") { graph.updateItem(item, { collapsed: true, @@ -122,28 +119,29 @@ function initG6(){ size: [300, 80], }); // setTimeout(() => graph.layout(), 100); - }else if (shape.get("name") && shape.get("name").startsWith("item")) { + } else if (shape.get("name") && shape.get("name").startsWith("item")) { let edges = graph.getEdges() let columnName = '' - g6data.value.forEach(data =>{ - if(data.id === item.getModel().id){ + g6data.value.forEach(data => { + if (data.id === item.getModel().id) { columnName = data.attrs[shape.get("name").split("-")[1]].key } }) - edges.forEach(edg =>{ - if((edg.getModel().sourceKey === columnName && edg.getModel().source === item.getModel().id) - || (edg.getModel().targetKey === columnName && edg.getModel().target === item.getModel().id)){ + edges.forEach(edg => { + if (edg.getModel().sourceKey === columnName && edg.getModel().source === item.getModel().id) { edg.show() - }else{ + } else if(edg.getModel().targetKey === columnName && edg.getModel().target === item.getModel().id){ + edg.show() + } else{ edg.hide() } }) let nodes = graph.getNodes() let index = Number(shape.get("name").split("-")[1]) - nodes.forEach(node=>{ + nodes.forEach(node => { let model = node.getModel() model.selectedIndex = NaN - graph.updateItem(node,model) + graph.updateItem(node, model) }) this.graph.updateItem(item, { selectedIndex: index, @@ -153,7 +151,7 @@ function initG6(){ selectedIndex: NaN, }); let edges = graph.getEdges() - edges.forEach(edg =>{ + edges.forEach(edg => { edg.show() }) } @@ -244,7 +242,7 @@ function initG6(){ // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "path-shape", }); - } else if (!sourceNode.collapsed) { + } else { let gap = Math.abs((startPoint.y - endPoint.y) / 3); if (startPoint["index"] === 1) { gap = -gap; @@ -270,7 +268,6 @@ function initG6(){ name: "path-shape", }); } - return shape; }, afterDraw(cfg, group) { @@ -311,14 +308,14 @@ function initG6(){ icon, } = cfg; const list = attrs; - const itemCount = list.length + 1; + const itemCount = list.length; const boxStyle = { stroke: "#096DD9", radius: 4, }; const afterList = list.slice( Math.floor(startIndex), - Math.floor(startIndex + itemCount - 1) + Math.floor(startIndex + itemCount) ); const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; //表头盒子 @@ -362,7 +359,7 @@ function initG6(){ group.addShape("rect", { attrs: { x: 0, - y: collapsed ? 30 : (list.length +1) * itemHeight+15, + y: collapsed ? 30 : (list.length + 1) * itemHeight + 15, height: 15, width, fill: "#eee", @@ -377,7 +374,7 @@ function initG6(){ group.addShape("text", { attrs: { x: width / 2 - 6, - y: (collapsed ? 30 : (list.length +1) * itemHeight+15) + 12, + y: (collapsed ? 30 : (list.length + 1) * itemHeight + 15) + 12, text: collapsed ? "+" : "-", width, fill: "#000", @@ -393,7 +390,7 @@ function initG6(){ x: 0, y: 0, width, - height: collapsed ? 45 : (list.length +1) * itemHeight+15 + 15, + height: collapsed ? 45 : (list.length + 1) * itemHeight + 15 + 15, ...boxStyle, }, draggable: true, @@ -411,7 +408,7 @@ function initG6(){ x: -8, y: 30, width: width + 16, - height: (list.length +1) * itemHeight+15 - 30, + height: (list.length + 1) * itemHeight + 15 - 30, }, }); //字段背景框 @@ -421,13 +418,13 @@ function initG6(){ x: 1, y: 30, width: width - 2, - height: (list.length +1 ) * itemHeight+15 - 30, + height: (list.length + 1) * itemHeight + 15 - 30, fill: "#fff", }, draggable: true, }); - if (list.length +1 > itemCount) { + if (list.length + 1 > itemCount) { const barStyle = { width: 4, padding: 0, @@ -444,24 +441,24 @@ function initG6(){ y: 30, x: width - barStyle.padding - barStyle.width, width: barStyle.width, - height: (list.length +1 ) * itemHeight- 30, + height: (list.length + 1) * itemHeight - 30, ...barStyle.boxStyle, }, }); const indexHeight = afterList.length > itemCount ? - (afterList.length / list.length+1) * (list.length +1) * itemHeight : + (afterList.length / list.length + 1) * (list.length + 1) * itemHeight : 10; //滚动轴框 listContainer.addShape("rect", { attrs: { y: 30 + barStyle.padding + - (startIndex / list.length+1) * ( (list.length+1 ) * itemHeight - 30), + (startIndex / list.length + 1) * ((list.length + 1) * itemHeight - 30), x: width - barStyle.padding - barStyle.width, width: barStyle.width, - height: Math.min( (list.length +1) * itemHeight, indexHeight), + height: Math.min((list.length + 1) * itemHeight, indexHeight), ...barStyle.innerStyle, }, }); @@ -541,7 +538,6 @@ function initG6(){ } - return keyshape; }, getAnchorPoints() { @@ -554,8 +550,7 @@ function initG6(){ const dataTransform = (data) => { const nodes = []; - const edges = []; - + let edges = []; data.map((node) => { nodes.push({ ...node @@ -578,7 +573,6 @@ function initG6(){ }); } }); - return { nodes, edges, @@ -631,8 +625,8 @@ function initG6(){ rankdir: 'LR', align: 'UL', controlPoints: true, - nodesep:1, - ranksep:1 + nodesep: 1, + ranksep: 1 }, animate: true, // fitView: true