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([]) const g6data = ref([])
function initG6(){ function initG6() {
const { const {
Util, Util,
registerBehavior, 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 // 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()) edgesToUpdate.forEach(edge => edge.refresh())
} }
}, },
click(e) { click(e) {
const { const {
@ -109,7 +107,6 @@ function initG6(){
if (!item) { if (!item) {
return; return;
} }
if (shape.get("name") === "collapse") { if (shape.get("name") === "collapse") {
graph.updateItem(item, { graph.updateItem(item, {
collapsed: true, collapsed: true,
@ -122,28 +119,29 @@ function initG6(){
size: [300, 80], size: [300, 80],
}); });
// setTimeout(() => graph.layout(), 100); // 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 edges = graph.getEdges()
let columnName = '' let columnName = ''
g6data.value.forEach(data =>{ g6data.value.forEach(data => {
if(data.id === item.getModel().id){ if (data.id === item.getModel().id) {
columnName = data.attrs[shape.get("name").split("-")[1]].key columnName = data.attrs[shape.get("name").split("-")[1]].key
} }
}) })
edges.forEach(edg =>{ edges.forEach(edg => {
if((edg.getModel().sourceKey === columnName && edg.getModel().source === item.getModel().id) if (edg.getModel().sourceKey === columnName && edg.getModel().source === item.getModel().id) {
|| (edg.getModel().targetKey === columnName && edg.getModel().target === item.getModel().id)){
edg.show() edg.show()
}else{ } else if(edg.getModel().targetKey === columnName && edg.getModel().target === item.getModel().id){
edg.show()
} else{
edg.hide() edg.hide()
} }
}) })
let nodes = graph.getNodes() let nodes = graph.getNodes()
let index = Number(shape.get("name").split("-")[1]) let index = Number(shape.get("name").split("-")[1])
nodes.forEach(node=>{ nodes.forEach(node => {
let model = node.getModel() let model = node.getModel()
model.selectedIndex = NaN model.selectedIndex = NaN
graph.updateItem(node,model) graph.updateItem(node, model)
}) })
this.graph.updateItem(item, { this.graph.updateItem(item, {
selectedIndex: index, selectedIndex: index,
@ -153,7 +151,7 @@ function initG6(){
selectedIndex: NaN, selectedIndex: NaN,
}); });
let edges = graph.getEdges() let edges = graph.getEdges()
edges.forEach(edg =>{ edges.forEach(edg => {
edg.show() 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 // 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", name: "path-shape",
}); });
} else if (!sourceNode.collapsed) { } else {
let gap = Math.abs((startPoint.y - endPoint.y) / 3); let gap = Math.abs((startPoint.y - endPoint.y) / 3);
if (startPoint["index"] === 1) { if (startPoint["index"] === 1) {
gap = -gap; gap = -gap;
@ -270,7 +268,6 @@ function initG6(){
name: "path-shape", name: "path-shape",
}); });
} }
return shape; return shape;
}, },
afterDraw(cfg, group) { afterDraw(cfg, group) {
@ -311,14 +308,14 @@ function initG6(){
icon, icon,
} = cfg; } = cfg;
const list = attrs; const list = attrs;
const itemCount = list.length + 1; const itemCount = list.length;
const boxStyle = { const boxStyle = {
stroke: "#096DD9", stroke: "#096DD9",
radius: 4, radius: 4,
}; };
const afterList = list.slice( const afterList = list.slice(
Math.floor(startIndex), Math.floor(startIndex),
Math.floor(startIndex + itemCount - 1) Math.floor(startIndex + itemCount)
); );
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
// //
@ -362,7 +359,7 @@ function initG6(){
group.addShape("rect", { group.addShape("rect", {
attrs: { attrs: {
x: 0, x: 0,
y: collapsed ? 30 : (list.length +1) * itemHeight+15, y: collapsed ? 30 : (list.length + 1) * itemHeight + 15,
height: 15, height: 15,
width, width,
fill: "#eee", fill: "#eee",
@ -377,7 +374,7 @@ function initG6(){
group.addShape("text", { group.addShape("text", {
attrs: { attrs: {
x: width / 2 - 6, x: width / 2 - 6,
y: (collapsed ? 30 : (list.length +1) * itemHeight+15) + 12, y: (collapsed ? 30 : (list.length + 1) * itemHeight + 15) + 12,
text: collapsed ? "+" : "-", text: collapsed ? "+" : "-",
width, width,
fill: "#000", fill: "#000",
@ -393,7 +390,7 @@ function initG6(){
x: 0, x: 0,
y: 0, y: 0,
width, width,
height: collapsed ? 45 : (list.length +1) * itemHeight+15 + 15, height: collapsed ? 45 : (list.length + 1) * itemHeight + 15 + 15,
...boxStyle, ...boxStyle,
}, },
draggable: true, draggable: true,
@ -411,7 +408,7 @@ function initG6(){
x: -8, x: -8,
y: 30, y: 30,
width: width + 16, 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, x: 1,
y: 30, y: 30,
width: width - 2, width: width - 2,
height: (list.length +1 ) * itemHeight+15 - 30, height: (list.length + 1) * itemHeight + 15 - 30,
fill: "#fff", fill: "#fff",
}, },
draggable: true, draggable: true,
}); });
if (list.length +1 > itemCount) { if (list.length + 1 > itemCount) {
const barStyle = { const barStyle = {
width: 4, width: 4,
padding: 0, padding: 0,
@ -444,24 +441,24 @@ function initG6(){
y: 30, y: 30,
x: width - barStyle.padding - barStyle.width, x: width - barStyle.padding - barStyle.width,
width: barStyle.width, width: barStyle.width,
height: (list.length +1 ) * itemHeight- 30, height: (list.length + 1) * itemHeight - 30,
...barStyle.boxStyle, ...barStyle.boxStyle,
}, },
}); });
const indexHeight = const indexHeight =
afterList.length > itemCount ? afterList.length > itemCount ?
(afterList.length / list.length+1) * (list.length +1) * itemHeight : (afterList.length / list.length + 1) * (list.length + 1) * itemHeight :
10; 10;
// //
listContainer.addShape("rect", { listContainer.addShape("rect", {
attrs: { attrs: {
y: 30 + y: 30 +
barStyle.padding + 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, x: width - barStyle.padding - barStyle.width,
width: barStyle.width, width: barStyle.width,
height: Math.min( (list.length +1) * itemHeight, indexHeight), height: Math.min((list.length + 1) * itemHeight, indexHeight),
...barStyle.innerStyle, ...barStyle.innerStyle,
}, },
}); });
@ -541,7 +538,6 @@ function initG6(){
} }
return keyshape; return keyshape;
}, },
getAnchorPoints() { getAnchorPoints() {
@ -554,8 +550,7 @@ function initG6(){
const dataTransform = (data) => { const dataTransform = (data) => {
const nodes = []; const nodes = [];
const edges = []; let edges = [];
data.map((node) => { data.map((node) => {
nodes.push({ nodes.push({
...node ...node
@ -578,7 +573,6 @@ function initG6(){
}); });
} }
}); });
return { return {
nodes, nodes,
edges, edges,
@ -631,8 +625,8 @@ function initG6(){
rankdir: 'LR', rankdir: 'LR',
align: 'UL', align: 'UL',
controlPoints: true, controlPoints: true,
nodesep:1, nodesep: 1,
ranksep:1 ranksep: 1
}, },
animate: true, animate: true,
// fitView: true // fitView: true

Loading…
Cancel
Save