Browse Source

业务关系,修改调整页面展示

master
xueyinfei 2 weeks ago
parent
commit
5909b5e750
  1. 62
      vue-fastapi-frontend/src/views/meta/metaInfo/businssRelation.vue

62
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

Loading…
Cancel
Save