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
Unified 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([]) 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

Write Preview
Loading…
Cancel
Save