developers
/
vue-fastapi-admin
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
xueyinfei 2 weeks ago
parent
7a7ef50af5
commit
5909b5e750
1 changed files with 28 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      vue-fastapi-frontend/src/views/meta/metaInfo/businssRelation.vue

62
vue-fastapi-frontend/src/views/meta/metaInfo/businssRelation.vue
View File

@ -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

Write Preview
Loading…
Cancel
Save