@@ -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);
+}
\ No newline at end of file