jianzhenyu
/
Changsha_tupu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

yangshi

small-tupu
菅振宇 6 months ago
parent
00a4defe40
commit
9bf9872cfd
1 changed files with 352 additions and 280 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. 632
      gyxtp/src/view/graphPageCopy0926.vue

632
gyxtp/src/view/graphPageCopy0926.vue
View File

@ -175,6 +175,22 @@
</div>
<div class="selectListInfo"
style="z-index: 2000;
max-height:35vw;
border-radius: 2px;
padding: 5px 0;
background-color: rgba(76,100,233,0.3) ;position:absolute;left: 5vw;top: 4vw;font-size: 0.9vw;overflow-y: scroll;margin-left: 1vw;margin-right: 1vw;">
<div class="flow-tree" :class="{ 'flow-tree-active': i === currentGroup }" v-for="i in [0,1,2]" style="padding: 0vw 2vw;" @click="changeGroup(i)">
<span class="custom-tree-node" style="display: flex;flex-direction: row;">
<div class="lineInfo" :class="{ 'lineInfo-active': i === currentGroup }" style="width: 0.2vw;height: 0.8vw; box-shadow: #FFFFFF 0px 0px 4px 1px;
background: rgb(255, 255, 255);display: inline-block;
margin-top: 0.6vw;margin-right: 0.5vw;"></div>
<div class="label1" style="color: #ffffff;font-size: 1.1vw;cursor: pointer;line-height: 2vw;">分组{{i}}</div>
</span>
</div>
</div>
<div class="graphContent">
<div :class="full ? 'full-screen' : 'show-box'">
@ -245,7 +261,7 @@ export default {
},
data() {
return {
currentGroup:1,
direction: "rtl",
// visGraph实例对象
visGraph: null,
@ -298,13 +314,17 @@ export default {
// lineUseTextPath: true,
defaultLineTextOffset_x: 2,
defaultLineTextOffset_y: -3,
// 布局核心：使用 center 布局实现环形
layout: {
layoutName: 'tree',
from: 'top',
min_per_width: 350,
max_per_width: 370,
min_per_height: 10,
max_per_height: 20
layoutName: 'center', // 关键：使用 center 布局
from: 'center', // 从中心向外扩展
levelDistance: '3000,3000,3000,3000,3000,3000,3000,3000', // 每一层的半径（可动态修改）
nodeDistance: 10, // 同一层节点间的最小角度间距（影响密度）
min_per_width: 200, // 最小水平间隔（角度相关）
max_per_width: 100,
clockwise: true, // 是否顺时针排列
startAngle: -Math.PI / 2, // 起始角度（-90°，顶部开始）
preventOverlap: true // 防止重叠
}
},
currentNode: {}, // 选中的节点对象
@ -385,6 +405,10 @@ export default {
}
},
methods: {
changeGroup(groupId){
this.currentGroup = groupId
this.getInfo()
},
onNodeCollapse(node, e) {
this.$refs.graphRef.refresh();
},
@ -800,42 +824,42 @@ export default {
switch (levelNum) {
case 0:
color = 'rgb(227,203,0)';
fontSize = '70px';
fontSize = '200px';
fontColor = 'rgb(255,255,255)';
break;
case 1:
color = 'rgb(47,47,230)';
fontSize = '68px';
fontSize = '200px';
fontColor = 'rgb(255,255,255)';
break;
case 2:
color = 'rgb(255,138,0)';
fontSize = '50px';
fontSize = '200px';
fontColor = 'rgb(255,255,255)';
break;
case 3:
color = 'rgb(30,255,0)';
fontSize = '40px';
fontSize = '200px';
fontColor = 'rgb(0,0,0)';
break;
case 4:
color = 'rgb(248,143,248)';
fontSize = '32px';
fontSize = '200px';
fontColor = 'rgb(255,255,255)';
break;
case 5:
color = 'rgb(65,154,255)';
fontSize = '30px';
fontSize = '200px';
fontColor = 'rgb(255,255,255)';
break;
case 6:
color = 'rgb(0,228,255)';
fontSize = '28px';
fontSize = '200px';
fontColor = 'rgb(0,0,0)';
break;
default:
color = 'rgb(200,200,200)';
fontSize = '24px';
fontSize = '200px';
fontColor = 'rgb(255,255,255)';
}
@ -843,277 +867,299 @@ export default {
// 修改点：当 groupId 为 '1' 时，Y 值反向
const y = groupId === '1' ? levelNum * -1400 : levelNum * 1400;
// 添加节点
nodes.push({
id: node.id,
text: node.name,
data: {
docId: node.docId,
group: node.groupId
},
level: levelNum,
x: x,
y: y,
fixed: true,
width: 150,
height: 150,
color: color,
font: `normal ${fontSize} Arial`,
fontColor: fontColor,
expandHolderPosition: 'right',
expanded: true,
styleClass:this.getNodeClass(node.name),
});
if (node.groupId==this.currentGroup || node.docLeve=="0"){
// 添加节点
nodes.push({
id: node.id,
text: node.name,
data: {
docId: node.docId,
group: node.groupId
},
level: levelNum,
// x: x,
// y: y,
// fixed: true,
width: 150,
height: 150,
color: color,
font: `normal ${fontSize} Arial`,
fontColor: fontColor,
expandHolderPosition: 'right',
expanded: true,
styleClass:this.getNodeClass(node.name),
});
}
});
});
});
}
// 处理孤立节点 - 放置在有连线节点的两侧
Object.keys(isolatedNodesByGroupAndLevel).sort().forEach(groupId => {
const groupData = isolatedNodesByGroupAndLevel[groupId];
const groupOffsetX = groupId === '0' ? -10200 : groupId === '1' ? 0 : 10200;
Object.keys(groupData).sort().forEach(level => {
const levelNodes = groupData[level];
const levelNum = parseInt(level);
// 确定孤立节点的Y坐标（与有连接节点保持一致）
const y = groupId === '1' ? levelNum * -1400 : levelNum * 1400;
// 获取或创建该层级该组别的位置信息
const levelGroupKey = `${levelNum}_${groupId}`;
// 先按docId排序孤立节点
const sortedIsolatedNodes = levelNodes.sort((a, b) => a.docId - b.docId);
if (!levelGroupPositions[levelGroupKey] || !levelGroupPositions[levelGroupKey].hasConnectedNodes) {
// 如果没有有连接的节点，居中展示孤立节点
const totalWidth = sortedIsolatedNodes.length * 200;
const startX = groupOffsetX - totalWidth / 2;
// 放置孤立节点（居中排列）
sortedIsolatedNodes.forEach((node, index) => {
// 根据层级设置节点样式
let color, fontSize, fontColor;
switch (levelNum) {
case 0:
color = 'rgb(227,203,0)';
fontSize = '70px';
fontColor = 'rgb(255,255,255)';
break;
case 1:
color = 'rgb(47,47,230)';
fontSize = '68px';
fontColor = 'rgb(255,255,255)';
break;
case 2:
color = 'rgb(255,138,0)';
fontSize = '50px';
fontColor = 'rgb(255,255,255)';
break;
case 3:
color = 'rgb(30,255,0)';
fontSize = '40px';
fontColor = 'rgb(0,0,0)';
break;
case 4:
color = 'rgb(248,143,248)';
fontSize = '32px';
fontColor = 'rgb(255,255,255)';
break;
case 5:
color = 'rgb(65,154,255)';
fontSize = '30px';
fontColor = 'rgb(255,255,255)';
break;
case 6:
color = 'rgb(0,228,255)';
fontSize = '28px';
fontColor = 'rgb(0,0,0)';
break;
default:
color = 'rgb(200,200,200)';
fontSize = '24px';
fontColor = 'rgb(255,255,255)';
}
const x = startX + index * 200;
nodes.push({
id: node.id,
text: node.name,
data: {
docId: node.docId,
group: node.groupId
},
x: x,
y: y,
fixed: true,
width: 150,
height: 150,
color: color,
font: `normal ${fontSize} Arial`,
fontColor: fontColor,
styleClass:this.getNodeClass(node.name),
});
});
} else {
// 如果有有连接的节点，在两侧放置孤立节点
const positionInfo = levelGroupPositions[levelGroupKey];
// 将孤立节点分成两组：左侧和右侧
const leftNodes = [];
const rightNodes = [];
sortedIsolatedNodes.forEach((node, index) => {
if (index % 2 === 0) {
leftNodes.push(node); // 偶数索引放左侧
} else {
rightNodes.push(node); // 奇数索引放右侧
}
});
// 放置左侧孤立节点（从右往左排列）
let currentLeftX = positionInfo.leftAvailableX;
for (let i = leftNodes.length - 1; i >= 0; i--) {
const node = leftNodes[i];
// 根据层级设置节点样式
let color, fontSize, fontColor;
switch (levelNum) {
case 0:
color = 'rgb(227,203,0)';
fontSize = '70px';
fontColor = 'rgb(255,255,255)';
break;
case 1:
color = 'rgb(47,47,230)';
fontSize = '68px';
fontColor = 'rgb(255,255,255)';
break;
case 2:
color = 'rgb(255,138,0)';
fontSize = '50px';
fontColor = 'rgb(255,255,255)';
break;
case 3:
color = 'rgb(30,255,0)';
fontSize = '40px';
fontColor = 'rgb(0,0,0)';
break;
case 4:
color = 'rgb(248,143,248)';
fontSize = '32px';
fontColor = 'rgb(255,255,255)';
break;
case 5:
color = 'rgb(65,154,255)';
fontSize = '30px';
fontColor = 'rgb(255,255,255)';
break;
case 6:
color = 'rgb(0,228,255)';
fontSize = '28px';
fontColor = 'rgb(0,0,0)';
break;
default:
color = 'rgb(200,200,200)';
fontSize = '24px';
fontColor = 'rgb(255,255,255)';
}
nodes.push({
id: node.id,
text: node.name,
data: {
docId: node.docId,
group: node.groupId
},
x: currentLeftX,
y: y,
fixed: true,
width: 150,
height: 150,
color: color,
font: `normal ${fontSize} Arial`,
fontColor: fontColor,
styleClass:this.getNodeClass(node.name),
});
currentLeftX -= 200;
}
// 放置右侧孤立节点（从左往右排列）
let currentRightX = positionInfo.rightAvailableX;
rightNodes.forEach(node => {
// 根据层级设置节点样式
let color, fontSize, fontColor;
switch (levelNum) {
case 0:
color = 'rgb(227,203,0)';
fontSize = '70px';
fontColor = 'rgb(255,255,255)';
break;
case 1:
color = 'rgb(47,47,230)';
fontSize = '68px';
fontColor = 'rgb(255,255,255)';
break;
case 2:
color = 'rgb(255,138,0)';
fontSize = '50px';
fontColor = 'rgb(255,255,255)';
break;
case 3:
color = 'rgb(30,255,0)';
fontSize = '40px';
fontColor = 'rgb(0,0,0)';
break;
case 4:
color = 'rgb(248,143,248)';
fontSize = '32px';
fontColor = 'rgb(255,255,255)';
break;
case 5:
color = 'rgb(65,154,255)';
fontSize = '30px';
fontColor = 'rgb(255,255,255)';
break;
case 6:
color = 'rgb(0,228,255)';
fontSize = '28px';
fontColor = 'rgb(0,0,0)';
break;
default:
color = 'rgb(200,200,200)';
fontSize = '24px';
fontColor = 'rgb(255,255,255)';
}
nodes.push({
id: node.id,
text: node.name,
data: {
docId: node.docId,
group: node.groupId
},
x: currentRightX,
y: y,
fixed: true,
width: 150,
height: 150,
color: color,
font: `normal ${fontSize} Arial`,
fontColor: fontColor,
styleClass:this.getNodeClass(node.name),
});
currentRightX += 200;
});
}
});
});
// Object.keys(isolatedNodesByGroupAndLevel).sort().forEach(groupId => {
// const groupData = isolatedNodesByGroupAndLevel[groupId];
// const groupOffsetX = groupId === '0' ? -10200 : groupId === '1' ? 0 : 10200;
//
// Object.keys(groupData).sort().forEach(level => {
// const levelNodes = groupData[level];
// const levelNum = parseInt(level);
//
// // 确定孤立节点的Y坐标（与有连接节点保持一致）
// const y = groupId === '1' ? levelNum * -1400 : levelNum * 1400;
//
// // 获取或创建该层级该组别的位置信息
// const levelGroupKey = `${levelNum}_${groupId}`;
//
// // 先按docId排序孤立节点
// const sortedIsolatedNodes = levelNodes.sort((a, b) => a.docId - b.docId);
//
// if (!levelGroupPositions[levelGroupKey] || !levelGroupPositions[levelGroupKey].hasConnectedNodes) {
// // 如果没有有连接的节点，居中展示孤立节点
// const totalWidth = sortedIsolatedNodes.length * 200;
// const startX = groupOffsetX - totalWidth / 2;
//
// // 放置孤立节点（居中排列）
// sortedIsolatedNodes.forEach((node, index) => {
// // 根据层级设置节点样式
// let color, fontSize, fontColor;
// switch (levelNum) {
// case 0:
// color = 'rgb(227,203,0)';
// fontSize = '70px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 1:
// color = 'rgb(47,47,230)';
// fontSize = '68px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 2:
// color = 'rgb(255,138,0)';
// fontSize = '50px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 3:
// color = 'rgb(30,255,0)';
// fontSize = '40px';
// fontColor = 'rgb(0,0,0)';
// break;
// case 4:
// color = 'rgb(248,143,248)';
// fontSize = '32px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 5:
// color = 'rgb(65,154,255)';
// fontSize = '30px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 6:
// color = 'rgb(0,228,255)';
// fontSize = '28px';
// fontColor = 'rgb(0,0,0)';
// break;
// default:
// color = 'rgb(200,200,200)';
// fontSize = '24px';
// fontColor = 'rgb(255,255,255)';
// }
//
// const x = startX + index * 200;
//
// if (node.groupId==this.currentGroup || node.docLeve=="0"){
// // 添加节点
// nodes.push({
// id: node.id,
// text: node.name,
// data: {
// docId: node.docId,
// group: node.groupId
// },
// level: levelNum,
// // x: x,
// // y: y,
// // fixed: true,
// width: 150,
// height: 150,
// color: color,
// font: `normal ${fontSize} Arial`,
// fontColor: fontColor,
// expandHolderPosition: 'right',
// expanded: true,
// styleClass:this.getNodeClass(node.name),
// });
// }
// });
// } else {
// // 如果有有连接的节点，在两侧放置孤立节点
// const positionInfo = levelGroupPositions[levelGroupKey];
//
// // 将孤立节点分成两组：左侧和右侧
// const leftNodes = [];
// const rightNodes = [];
//
// sortedIsolatedNodes.forEach((node, index) => {
// if (index % 2 === 0) {
// leftNodes.push(node); // 偶数索引放左侧
// } else {
// rightNodes.push(node); // 奇数索引放右侧
// }
// });
//
// // 放置左侧孤立节点（从右往左排列）
// let currentLeftX = positionInfo.leftAvailableX;
// for (let i = leftNodes.length - 1; i >= 0; i--) {
// const node = leftNodes[i];
//
// // 根据层级设置节点样式
// let color, fontSize, fontColor;
// switch (levelNum) {
// case 0:
// color = 'rgb(227,203,0)';
// fontSize = '70px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 1:
// color = 'rgb(47,47,230)';
// fontSize = '68px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 2:
// color = 'rgb(255,138,0)';
// fontSize = '50px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 3:
// color = 'rgb(30,255,0)';
// fontSize = '40px';
// fontColor = 'rgb(0,0,0)';
// break;
// case 4:
// color = 'rgb(248,143,248)';
// fontSize = '32px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 5:
// color = 'rgb(65,154,255)';
// fontSize = '30px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 6:
// color = 'rgb(0,228,255)';
// fontSize = '28px';
// fontColor = 'rgb(0,0,0)';
// break;
// default:
// color = 'rgb(200,200,200)';
// fontSize = '24px';
// fontColor = 'rgb(255,255,255)';
// }
//
// if (node.groupId==this.currentGroup || node.docLeve=="0"){
// // 添加节点
// nodes.push({
// id: node.id,
// text: node.name,
// data: {
// docId: node.docId,
// group: node.groupId
// },
// level: levelNum,
// // x: x,
// // y: y,
// // fixed: true,
// width: 150,
// height: 150,
// color: color,
// font: `normal ${fontSize} Arial`,
// fontColor: fontColor,
// expandHolderPosition: 'right',
// expanded: true,
// styleClass:this.getNodeClass(node.name),
// });
// }
//
// currentLeftX -= 200;
// }
//
// // 放置右侧孤立节点（从左往右排列）
// let currentRightX = positionInfo.rightAvailableX;
// rightNodes.forEach(node => {
// // 根据层级设置节点样式
// let color, fontSize, fontColor;
// switch (levelNum) {
// case 0:
// color = 'rgb(227,203,0)';
// fontSize = '70px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 1:
// color = 'rgb(47,47,230)';
// fontSize = '68px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 2:
// color = 'rgb(255,138,0)';
// fontSize = '50px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 3:
// color = 'rgb(30,255,0)';
// fontSize = '40px';
// fontColor = 'rgb(0,0,0)';
// break;
// case 4:
// color = 'rgb(248,143,248)';
// fontSize = '32px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 5:
// color = 'rgb(65,154,255)';
// fontSize = '30px';
// fontColor = 'rgb(255,255,255)';
// break;
// case 6:
// color = 'rgb(0,228,255)';
// fontSize = '28px';
// fontColor = 'rgb(0,0,0)';
// break;
// default:
// color = 'rgb(200,200,200)';
// fontSize = '24px';
// fontColor = 'rgb(255,255,255)';
// }
//
// if (node.groupId==this.currentGroup || node.docLeve=="0"){
// // 添加节点
// nodes.push({
// id: node.id,
// text: node.name,
// data: {
// docId: node.docId,
// group: node.groupId
// },
// level: levelNum,
// // x: x,
// // y: y,
// // fixed: true,
// width: 150,
// height: 150,
// color: color,
// font: `normal ${fontSize} Arial`,
// fontColor: fontColor,
// expandHolderPosition: 'right',
// expanded: true,
// styleClass:this.getNodeClass(node.name),
// });
// }
//
// currentRightX += 200;
// });
// }
// });
// });
// 处理连线
lineList.forEach(line => {
@ -1831,4 +1877,30 @@ tr {
background-color: #fff;
width: 400px!important;
}
.label1 {
font-size: 1vw;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: 14vw;
height: 2vw;
}
.lineInfo.lineInfo-active {
background: #0012ff !important;
box-shadow: rgb(255, 255, 255) 0px 0px 4px 1px;
}
.flow-tree {
/* 默认样式（可选） */
transition: background-color 0.3s ease, font-weight 0.3s ease;
}
.flow-tree-active {
background-color: rgba(255, 255, 255, 0.21);
font-weight: 600;
}/* 选中时的高亮样式（优先级更高） */
/* hover：鼠标悬停时 */
.flow-tree:hover {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
Write Preview
Loading…
Cancel
Save