panbaolin/SourceTermAnalysisSystem_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据同步逻辑修改

Browse Source
This commit is contained in:
冯少康 2026-08-07 16:39:41 +08:00
parent 5c50d114b4
commit cedc6ca7a1
3 changed files with 835 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

528
src/pages/sjtb/configTask/dataTable/antvX6.ts
View File

@ -1,9 +1,9 @@
import type { Edge, Node, NodeConfig } from '@antv/x6';
import { Graph } from '@antv/x6';
import { v4 as uuidv4 } from 'uuid';
import type { Edge, Node, NodeConfig } from "@antv/x6";
import { Graph } from "@antv/x6";
import { v4 as uuidv4 } from "uuid";
// 层级类型定义
export type NodeLevel = 'level2' | 'level3' | 'level4';
export type NodeLevel = "level2" | "level3" | "level4";
// 目标灌库数据的类型定义
interface ImportDataItem {
@ -50,14 +50,14 @@ export class X6Graph {
private readonly nodeStyle = {
width: 100,
height: 40,
fill: '#0a4a5c', // 深色背景（示例中的深青色）
stroke: '#0a4a5c', // 边框与背景同色，视觉上隐藏边框
fill: "#0a4a5c", // 深色背景（示例中的深青色）
stroke: "#0a4a5c", // 边框与背景同色，视觉上隐藏边框
strokeWidth: 2,
radius: 4,
label: {
fill: '#93CDD5', // 白色文字
fill: "#93CDD5", // 白色文字
fontSize: 14,
fontWeight: 'bold', // 可选：文字加粗
fontWeight: "bold", // 可选：文字加粗
},
};
@ -69,16 +69,16 @@ export class X6Graph {
// 层级X坐标映射
private readonly levelXMap = new Map<NodeLevel, number>([
['level2', 300],
['level3', 550],
['level4', 1000],
["level2", 300],
["level3", 550],
["level4", 1000],
]);
// 层级节点数量记录
private readonly levelCountMap = new Map<NodeLevel, number>([
['level2', 0],
['level3', 0],
['level4', 0],
["level2", 0],
["level3", 0],
["level4", 0],
]);
constructor(containerId: string) {
@ -87,7 +87,12 @@ export class X6Graph {
}
private createMenuElement() {
this.menuElement = document.createElement('div');
this.menuElement = document.getElementById("ant-x6-menu4");
if(this.menuElement){
this.menuElement.remove();
}
this.menuElement = document.createElement("div");
this.menuElement.id = "ant-x6-menu4";
this.menuElement.style.cssText = `
position: absolute;
width: 120px;
@ -101,18 +106,22 @@ export class X6Graph {
font-family: sans-serif;
`;
// 1. 配置同步字段：新增“配置”菜单项
const configItem = document.createElement('div');
configItem.id = 'ant-x6-menu-1';
configItem.style.cssText = `
// 3. 配置
let pzItem = document.getElementById("ant-x6-menu");
if (pzItem) {
pzItem.remove();
}
pzItem = document.createElement("div");
pzItem.id = "ant-x6-menu";
pzItem.style.cssText = `
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
border-bottom: 1px solid #f0f0f0; /* 分隔线，区分两个选项 */
`;
configItem.textContent = '配置同步字段';
configItem.addEventListener('click', () => {
const nodeId = this.menuElement?.getAttribute('data-node-id');
pzItem.textContent = "配置";
pzItem.addEventListener("click", () => {
const nodeId = this.menuElement?.getAttribute("data-node-id");
if (nodeId) {
const graph = this.getGraph();
const targetNode = graph.getCellById(nodeId) as Node;
@ -122,35 +131,41 @@ export class X6Graph {
// 2. 高亮样式（保持原有）
targetNode.attr({
body: {
stroke: 'rgb(12,129,123)',
stroke: "rgb(12,129,123)",
strokeWidth: 2,
strokeDasharray: '5, 5',
strokeDasharray: "5, 5",
},
});
// ======================== 新增：获取所有父级信息 ========================
// 1. 定义追溯父级的方法
const getAllParents = (targetNodeId: string): Array<{ id: string; label: string; level?: NodeLevel }> => {
const parents: Array<{ id: string; label: string; level?: NodeLevel }> = [];
const getAllParents = (
targetNodeId: string,
): Array<{ id: string; label: string; level?: NodeLevel }> => {
const parents: Array<{
id: string;
label: string;
level?: NodeLevel;
}> = [];
let currentNodeId = targetNodeId;
// 循环追溯：直到找不到父节点（根节点）
while (true) {
// 找到指向当前节点的连线（来源即父节点）
const parentEdge = graph.getEdges().find(edge => edge.getTargetCellId() === currentNodeId);
if (!parentEdge)
break; // 无父节点，终止循环
const parentEdge = graph
.getEdges()
.find((edge) => edge.getTargetCellId() === currentNodeId);
if (!parentEdge) break; // 无父节点，终止循环
// 获取父节点ID和父节点实例
const parentNodeId = parentEdge.getSourceCellId();
const parentNode = graph.getCellById(parentNodeId) as Node;
if (!parentNode)
break;
if (!parentNode) break;
// 收集父节点信息（ID、标签、层级）
parents.push({
id: parentNodeId,
label: parentNode.attr('label/text') || '', // 节点显示的文字
label: parentNode.attr("label/text") || "", // 节点显示的文字
level: parentNode.getData().level, // 父节点的层级
});
@ -169,45 +184,155 @@ export class X6Graph {
// 关键：添加当前节点信息（含label），拼接成“父级+当前节点”的完整链
const currentNodeInfo = {
id: nodeId,
label: targetNode.attr('label/text') || '', // 从当前节点获取label
label: targetNode.attr("label/text") || "", // 从当前节点获取label
level: nodeLevel,
};
allParentsOrdered = [...allParentsOrdered, currentNodeInfo];
console.log('目标节点（父级+自身）完整链：', allParentsOrdered);
console.log("目标节点（父级+自身）完整链：", allParentsOrdered);
// ========================================================================
// 3. 事件总线传递：携带完整链信息
EventBusTool.getEventBus().publish('antvX6Event', {
key: 'configNode',
EventBusTool.getEventBus().publish("antvX6Event", {
key: "configNode",
id: nodeId,
label: targetNode.attr('label/text') || '',
label: targetNode.attr("label/text") || "",
level: nodeLevel,
allParents: allParentsOrdered, // 包含父级+当前节点（均有label）
});
}
this.hideMenu();
});
// 配置项悬停效果
configItem.addEventListener('mouseenter', () => {
configItem.style.background = '#f0f0f0';
// 配置菜单悬停效果
pzItem.addEventListener("mouseenter", () => {
pzItem.style.background = "#f0f0f0";
});
configItem.addEventListener('mouseleave', () => {
configItem.style.background = 'white';
pzItem.addEventListener("mouseleave", () => {
pzItem.style.background = "white";
});
// 1. 配置同步字段：新增“配置”菜单项
let configItem = document.getElementById("ant-x6-menu-1");
if (configItem) {
configItem.remove();
}
configItem = document.createElement("div");
configItem.id = "ant-x6-menu-1";
configItem.style.cssText = `
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
border-bottom: 1px solid #f0f0f0; /* 分隔线，区分两个选项 */
`;
configItem.textContent = "配置同步字段";
configItem.addEventListener("click", () => {
const nodeId = this.menuElement?.getAttribute("data-node-id");
if (nodeId) {
const graph = this.getGraph();
const targetNode = graph.getCellById(nodeId) as Node;
const nodeData = targetNode.getData();
const nodeLevel = nodeData.level;
// 2. 高亮样式（保持原有）
targetNode.attr({
body: {
stroke: "rgb(12,129,123)",
strokeWidth: 2,
strokeDasharray: "5, 5",
},
});
// ======================== 新增：获取所有父级信息 ========================
// 1. 定义追溯父级的方法
const getAllParents = (
targetNodeId: string,
): Array<{ id: string; label: string; level?: NodeLevel }> => {
const parents: Array<{
id: string;
label: string;
level?: NodeLevel;
}> = [];
let currentNodeId = targetNodeId;
// 循环追溯：直到找不到父节点（根节点）
while (true) {
// 找到指向当前节点的连线（来源即父节点）
const parentEdge = graph
.getEdges()
.find((edge) => edge.getTargetCellId() === currentNodeId);
if (!parentEdge) break; // 无父节点，终止循环
// 获取父节点ID和父节点实例
const parentNodeId = parentEdge.getSourceCellId();
const parentNode = graph.getCellById(parentNodeId) as Node;
if (!parentNode) break;
// 收集父节点信息（ID、标签、层级）
parents.push({
id: parentNodeId,
label: parentNode.attr("label/text") || "", // 节点显示的文字
level: parentNode.getData().level, // 父节点的层级
});
// 下一轮追溯：以父节点为当前节点，找它的父节点
currentNodeId = parentNodeId;
}
return parents; // 返回所有父级（顺序：直接父级 → 祖父级 → ... → 根节点父级）
};
// 2. 执行追溯，获取所有父级
const allParentNodes = getAllParents(nodeId);
// 反转数组，让顺序变为“根节点父级 → 祖父级 → 直接父级”
let allParentsOrdered = allParentNodes.reverse();
// 关键：添加当前节点信息（含label），拼接成“父级+当前节点”的完整链
const currentNodeInfo = {
id: nodeId,
label: targetNode.attr("label/text") || "", // 从当前节点获取label
level: nodeLevel,
};
allParentsOrdered = [...allParentsOrdered, currentNodeInfo];
console.log("目标节点（父级+自身）完整链：", allParentsOrdered);
// ========================================================================
// 3. 事件总线传递：携带完整链信息
EventBusTool.getEventBus().publish("antvX6Event", {
key: "configNode",
id: nodeId,
label: targetNode.attr("label/text") || "",
level: nodeLevel,
allParents: allParentsOrdered, // 包含父级+当前节点（均有label）
isTbsl:false,
});
}
this.hideMenu();
});
// 配置项悬停效果
configItem.addEventListener("mouseenter", () => {
configItem.style.background = "#f0f0f0";
});
configItem.addEventListener("mouseleave", () => {
configItem.style.background = "white";
});
// 2. 配置同步数量
const syncNumItem = document.createElement('div');
syncNumItem.id = 'ant-x6-menu-2';
let syncNumItem = document.getElementById("ant-x6-menu-2");
if (syncNumItem) {
syncNumItem.remove();
}
syncNumItem = document.createElement("div");
syncNumItem.id = "ant-x6-menu-2";
syncNumItem.style.cssText = `
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
border-bottom: 1px solid #f0f0f0; /* 分隔线，区分两个选项 */
`;
syncNumItem.textContent = '配置同步数量';
syncNumItem.addEventListener('click', () => {
const nodeId = this.menuElement?.getAttribute('data-node-id');
syncNumItem.textContent = "配置同步数量";
syncNumItem.addEventListener("click", () => {
const nodeId = this.menuElement?.getAttribute("data-node-id");
if (nodeId) {
const graph = this.getGraph();
const targetNode = graph.getCellById(nodeId) as Node;
@ -215,28 +340,40 @@ export class X6Graph {
// TODO：配置同步数量逻辑
// 3. 事件总线传递：携带完整链信息
EventBusTool.getEventBus().publish("antvX6Event", {
key: "configNode",
id: nodeId,
label: targetNode.attr("label/text") || "",
level: nodeLevel,
isTbsl:true,
});
}
this.hideMenu();
});
// 配置同步数量菜单悬停效果
syncNumItem.addEventListener('mouseenter', () => {
syncNumItem.style.background = '#f0f0f0';
syncNumItem.addEventListener("mouseenter", () => {
syncNumItem.style.background = "#f0f0f0";
});
syncNumItem.addEventListener('mouseleave', () => {
syncNumItem.style.background = 'white';
syncNumItem.addEventListener("mouseleave", () => {
syncNumItem.style.background = "white";
});
// 3. 原有“删除”菜单项（保持不变，调整顺序在配置项下方）
const deleteItem = document.createElement('div');
deleteItem.id = 'ant-x6-menu-3';
let deleteItem = document.getElementById("ant-x6-menu-3");
if (deleteItem) {
deleteItem.remove();
}
deleteItem = document.createElement("div");
deleteItem.id = "ant-x6-menu-3";
deleteItem.style.cssText = `
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
`;
deleteItem.textContent = '删除';
deleteItem.addEventListener('click', () => {
const nodeId = this.menuElement?.getAttribute('data-node-id');
deleteItem.textContent = "删除";
deleteItem.addEventListener("click", () => {
const nodeId = this.menuElement?.getAttribute("data-node-id");
if (nodeId) {
// 获取图形实例和目标节点（和配置项逻辑一致）
const graph = this.getGraph();
@ -244,8 +381,8 @@ export class X6Graph {
// 从节点数据中提取level
const nodeLevel = targetNode.getData().level;
this.removeNode(nodeId);
EventBusTool.getEventBus().publish('antvX6Event', {
key: 'removeNode',
EventBusTool.getEventBus().publish("antvX6Event", {
key: "removeNode",
id: nodeId,
level: nodeLevel, // 新增：传递level信息
});
@ -253,14 +390,15 @@ export class X6Graph {
this.hideMenu();
});
// 删除项悬停效果
deleteItem.addEventListener('mouseenter', () => {
deleteItem.style.background = '#f0f0f0';
deleteItem.addEventListener("mouseenter", () => {
deleteItem.style.background = "#f0f0f0";
});
deleteItem.addEventListener('mouseleave', () => {
deleteItem.style.background = 'white';
deleteItem.addEventListener("mouseleave", () => {
deleteItem.style.background = "white";
});
// 3. 将两个菜单项添加到菜单容器（配置项在上，删除项在下）
this.menuElement.appendChild(pzItem);
this.menuElement.appendChild(configItem);
this.menuElement.appendChild(syncNumItem);
this.menuElement.appendChild(deleteItem);
@ -271,12 +409,11 @@ export class X6Graph {
* 显示右键菜单
*/
private showMenu(nodeId: string, x: number, y: number) {
if (!this.menuElement)
return;
this.menuElement.setAttribute('data-node-id', nodeId);
if (!this.menuElement) return;
this.menuElement.setAttribute("data-node-id", nodeId);
this.menuElement.style.left = `${x}px`;
this.menuElement.style.top = `${y}px`;
this.menuElement.style.display = 'block';
this.menuElement.style.display = "block";
}
/**
@ -284,7 +421,7 @@ export class X6Graph {
*/
private hideMenu() {
if (this.menuElement) {
this.menuElement.style.display = 'none';
this.menuElement.style.display = "none";
}
}
@ -302,14 +439,14 @@ export class X6Graph {
container,
width: container.clientWidth,
height: container.clientHeight,
grid: options.grid ?? { size: 10, visible: false, type: 'dot' },
grid: options.grid ?? { size: 10, visible: false, type: "dot" },
mousewheel: options.zoom ?? {
enabled: true,
modifiers: 'ctrl',
modifiers: "ctrl",
minScale: 0.5,
maxScale: 2,
},
panning: { enabled: true, modifier: 'shift' },
panning: { enabled: true, modifier: "shift" },
snapline: true,
// 关键：完善选择配置，确保单击和框选生效
selecting: {
@ -318,20 +455,24 @@ export class X6Graph {
});
// 注册“直接曲线虚线”自定义边
Graph.registerEdge('direct-curved-dashed-edge', {
inherit: 'edge',
// 连接器：使用 smooth（平滑曲线，无额外拐点）
connector: { name: 'smooth' },
attrs: {
line: {
targetMarker: '', // 移除目标标记（可选）
stroke: '#A2B1C3', // 线条颜色
strokeWidth: 2, // 线条宽度
strokeDasharray: '5, 5', // 虚线：线段5px + 间隔5px
Graph.registerEdge(
"direct-curved-dashed-edge",
{
inherit: "edge",
// 连接器：使用 smooth（平滑曲线，无额外拐点）
connector: { name: "smooth" },
attrs: {
line: {
targetMarker: "", // 移除目标标记（可选）
stroke: "#A2B1C3", // 线条颜色
strokeWidth: 2, // 线条宽度
strokeDasharray: "5, 5", // 虚线：线段5px + 间隔5px
},
},
zIndex: 0, // 层级（避免遮挡节点）
},
zIndex: 0, // 层级（避免遮挡节点）
}, true);
true,
);
// 绑定右键菜单事件
this.bindRightClickEvent();
@ -346,7 +487,7 @@ export class X6Graph {
const graph = this.getGraph();
// 节点右键点击
graph.on('node:contextmenu', (args) => {
graph.on("node:contextmenu", (args) => {
args.e.preventDefault(); // 阻止浏览器默认右键菜单
const { cell, e } = args;
const node = cell as Node;
@ -360,25 +501,40 @@ export class X6Graph {
return;
}
if (nodeData.level === 'level2') {
} else if (nodeData.level === 'level3') {
} else if (nodeData.level === 'level4') {
if (nodeData.level === "level2") {
const item2 = document.getElementById("ant-x6-menu");
item2.style.display = "block";
const item = document.getElementById("ant-x6-menu-1");
item.style.display = "none";
const item1 = document.getElementById("ant-x6-menu-2");
item1.style.display = "none";
} else if (nodeData.level === "level3") {
const item = document.getElementById("ant-x6-menu-1");
item.style.display = "block";
const item1 = document.getElementById("ant-x6-menu-2");
item1.style.display = "block";
const item2 = document.getElementById("ant-x6-menu");
item2.style.display = "none";
} else if (nodeData.level === "level4") {
const item = document.getElementById("ant-x6-menu-1");
item.style.display = "none";
const item1 = document.getElementById("ant-x6-menu-2");
item1.style.display = "none";
const item2 = document.getElementById("ant-x6-menu");
item2.style.display = "none";
}
// 显示菜单（位置为点击坐标）
this.showMenu(node.id, e.clientX, e.clientY);
});
// 画布空白处右键点击（隐藏菜单）
graph.on('blank:contextmenu', (args) => {
graph.on("blank:contextmenu", (args) => {
args.e.preventDefault();
this.hideMenu();
});
// 点击其他区域隐藏菜单
document.addEventListener('click', () => {
document.addEventListener("click", () => {
this.hideMenu();
});
}
@ -388,7 +544,7 @@ export class X6Graph {
*/
private calculateTextWidth(text: string, fontSize = 14): number {
// 创建临时元素计算文字宽度
const tempSpan = document.createElement('span');
const tempSpan = document.createElement("span");
tempSpan.style.cssText = `
position: absolute;
visibility: hidden;
@ -430,9 +586,11 @@ export class X6Graph {
private addNode(config: SimpleNodeConfig): Node {
const graph = this.getGraph();
// 计算根节点自适应宽度
const rootWidth = this.calculateTextWidth(config.label, this.nodeStyle.label.fontSize) + this.nodePadding * 2;
const rootWidth =
this.calculateTextWidth(config.label, this.nodeStyle.label.fontSize) +
this.nodePadding * 2;
const node = graph.addNode({
shape: 'rect',
shape: "rect",
id: config.id,
x: config.x,
y: config.y,
@ -451,11 +609,11 @@ export class X6Graph {
// 文字的样式（颜色、位置、字号等）
label: {
text: config.label,
fill: '#ffffff', // 白色文字
fill: "#ffffff", // 白色文字
fontSize: 14,
fontWeight: 'bold',
textAnchor: 'middle', // 文字水平居中
verticalAnchor: 'middle', // 文字垂直居中
fontWeight: "bold",
textAnchor: "middle", // 文字水平居中
verticalAnchor: "middle", // 文字垂直居中
},
},
data: {
@ -473,7 +631,10 @@ export class X6Graph {
/**
* 添加子节点（按层级动态分配位置）
*/
addChildNode(parentId: string, config: ChildNodeConfig): { node: Node; edge: Edge } {
addChildNode(
parentId: string,
config: ChildNodeConfig,
): { node: Node; edge: Edge } {
const graph = this.getGraph();
// 校验父节点
@ -500,20 +661,20 @@ export class X6Graph {
// 创建连线
const edge = graph.addEdge({
shape: 'direct-curved-dashed-edge',
shape: "direct-curved-dashed-edge",
source: {
cell: parentId,
anchor: { name: 'right' },
anchor: { name: "right" },
},
// 目标节点（子节点）的锚点：左侧
target: {
cell: childNode.id,
anchor: { name: 'left' },
anchor: { name: "left" },
},
style: {
stroke: '#888',
stroke: "#888",
strokeWidth: 1.2,
targetMarker: { name: 'block', size: 8 },
targetMarker: { name: "block", size: 8 },
},
});
@ -524,8 +685,8 @@ export class X6Graph {
// 重排同层级节点
this.rearrangeLevelNodes(config.level);
// 新增：如果添加的是第三层级，同步重排第二层级
if (config.level === 'level3') {
this.rearrangeLevelNodes('level2');
if (config.level === "level3") {
this.rearrangeLevelNodes("level2");
}
return { node: childNode, edge: edge as Edge };
}
@ -539,28 +700,28 @@ export class X6Graph {
const centerY = (containerHeight - this.nodeStyle.height) / 2; // 画布中心点
// 获取当前层级的所有节点（按标签排序）
const levelNodes = graph.getNodes()
.filter(node => node.getData().level === level)
const levelNodes = graph
.getNodes()
.filter((node) => node.getData().level === level)
.sort((a, b) => {
const labelA = a.attr('label/text') || '';
const labelB = b.attr('label/text') || '';
const labelA = a.attr("label/text") || "";
const labelB = b.attr("label/text") || "";
return labelA.localeCompare(labelB, undefined, { numeric: true });
});
const totalNodes = levelNodes.length;
if (totalNodes === 0)
return;
if (totalNodes === 0) return;
// ======================== 第二层级：间距根据自身第三层级子节点数量动态调整 ========================
if (level === 'level2') {
// 1. 统计每个第二层级节点的第三层级子节点数量
if (level === "level2") {
// 1. 统计每个第二层级节点的第三层级子节点数量
const level2ChildCount = new Map<string, number>();
levelNodes.forEach((node) => {
const childIds = this.getChildNodeIds(node.id);
// 筛选出属于第三层级的子节点
const level3ChildCount = childIds.filter((childId) => {
const childNode = graph.getCellById(childId) as Node;
return childNode?.getData().level === 'level3';
return childNode?.getData().level === "level3";
}).length;
level2ChildCount.set(node.id, level3ChildCount);
});
@ -588,58 +749,73 @@ export class X6Graph {
// 3. 计算整体偏移量，让第二层级节点整体垂直居中
const lastNodeY = nodePositions.get(levelNodes[totalNodes - 1].id) || 0;
const totalHeight = lastNodeY - nodePositions.get(levelNodes[0].id) || 0 + this.nodeStyle.height;
const offset = centerY - (nodePositions.get(levelNodes[0].id) || 0) - totalHeight / 2;
const totalHeight =
lastNodeY - nodePositions.get(levelNodes[0].id) ||
0 + this.nodeStyle.height;
const offset =
centerY - (nodePositions.get(levelNodes[0].id) || 0) - totalHeight / 2;
// 4. 应用最终位置（加上偏移量，确保整体居中）
levelNodes.forEach((node) => {
const nodeY = (nodePositions.get(node.id) || 0) + offset;
const nodeX = this.levelXMap.get('level2') || 300;
const nodeX = this.levelXMap.get("level2") || 300;
node.setPosition(nodeX, nodeY);
});
}
// ======================== 第三层级：跟随父节点垂直分布 ========================
else if (level === 'level3') {
else if (level === "level3") {
const parentGroups = new Map<string, Node[]>();
levelNodes.forEach((node) => {
const parentEdge = graph.getEdges().find(edge => edge.getTargetCellId() === node.id);
const parentEdge = graph
.getEdges()
.find((edge) => edge.getTargetCellId() === node.id);
if (parentEdge) {
const parentId = parentEdge.getSourceCellId();
parentGroups.set(parentId, [...(parentGroups.get(parentId) || []), node]);
parentGroups.set(parentId, [
...(parentGroups.get(parentId) || []),
node,
]);
}
});
parentGroups.forEach((children, parentId) => {
const parentNode = graph.getCellById(parentId) as Node;
if (!parentNode)
return;
if (!parentNode) return;
const parentY = parentNode.getPosition().y;
const childCount = children.length;
const verticalGap = 20; // 第三层级内部固定间距
const totalChildHeight = this.nodeStyle.height * childCount + verticalGap * (childCount - 1);
const totalChildHeight =
this.nodeStyle.height * childCount + verticalGap * (childCount - 1);
const startOffset = -totalChildHeight / 2 + this.nodeStyle.height / 2;
children.forEach((child, index) => {
const childY = parentY + startOffset + (this.nodeStyle.height + verticalGap) * index;
const childX = this.levelXMap.get('level3') || 550;
const childY =
parentY +
startOffset +
(this.nodeStyle.height + verticalGap) * index;
const childX = this.levelXMap.get("level3") || 550;
child.setPosition(childX, childY);
});
});
}
else if (level === 'level4') {
// 1. 按父节点（level3）分组（每个level3只对应1个level4）
} else if (level === "level4") {
// 1. 按父节点（level3）分组（每个level3只对应1个level4）
const parentGroups = new Map<string, Node[]>();
levelNodes.forEach((node) => {
const parentEdge = graph.getEdges().find(edge => edge.getTargetCellId() === node.id);
const parentEdge = graph
.getEdges()
.find((edge) => edge.getTargetCellId() === node.id);
if (parentEdge) {
const parentId = parentEdge.getSourceCellId();
// 只保留level3的父节点（确保父节点层级正确）
const parentNode = graph.getCellById(parentId) as Node;
if (parentNode?.getData().level === 'level3') {
parentGroups.set(parentId, [...(parentGroups.get(parentId) || []), node]);
if (parentNode?.getData().level === "level3") {
parentGroups.set(parentId, [
...(parentGroups.get(parentId) || []),
node,
]);
}
}
});
@ -647,12 +823,11 @@ export class X6Graph {
// 2. 每个level3父节点的level4子节点：放在父节点右侧（固定间距）
parentGroups.forEach((children, parentId) => {
const parentNode = graph.getCellById(parentId) as Node;
if (!parentNode)
return;
if (!parentNode) return;
// level4固定在level3父节点右侧，X坐标=level3X + 节点宽度 + 间距（20px）
const parentPos = parentNode.getPosition();
const level4X = this.levelXMap.get('level4') || 800;
const level4X = this.levelXMap.get("level4") || 800;
// Y坐标与父节点完全对齐（上下居中）
const level4Y = parentPos.y;
@ -662,8 +837,8 @@ export class X6Graph {
targetChild.setPosition(level4X, level4Y);
// 多余节点直接删除（避免多个level4）
if (children.length > 1) {
children.slice(1).forEach(excessNode => excessNode.remove());
this.resetLevelCount('level4'); // 重置数量统计
children.slice(1).forEach((excessNode) => excessNode.remove());
this.resetLevelCount("level4"); // 重置数量统计
}
}
});
@ -676,8 +851,7 @@ export class X6Graph {
removeNode(nodeId: string): void {
const graph = this.getGraph();
const cell = graph.getCellById(nodeId);
if (!cell || !graph.isNode(cell))
return;
if (!cell || !graph.isNode(cell)) return;
const node = cell as Node;
const nodeLevel = node.getData().level as NodeLevel;
@ -702,33 +876,30 @@ export class X6Graph {
* @param importData - 目标灌库数据（格式如 [{userName: "...", tables: [...]}]）
* @param rootConfig - 根节点配置（需提前确定根节点的 id 和 label，如 sourceOwner）
*/
importData(
importData: ImportDataItem[],
rootId,
): void {
importData(importData: ImportDataItem[], rootId): void {
// 3. 遍历灌库数据，创建 level2→level3→level4 层级
importData.forEach((item) => {
// 3.1 创建 level2 节点（userName 作为 label，父节点是根节点）
// 3.1 创建 level2 节点（userName 作为 label，父节点是根节点）
const { node: level2Node } = this.addChildNode(rootId, {
id: uuidv4(),
label: item.userName,
level: 'level2',
level: "level2",
});
// 3.2 遍历当前 level2 的 tables，创建 level3 和 level4 节点
item.tables.forEach((table) => {
// 3.2.1 创建 level3 节点（tableName 作为 label，父节点是当前 level2）
// 3.2.1 创建 level3 节点（tableName 作为 label，父节点是当前 level2）
const { node: level3Node } = this.addChildNode(level2Node.id, {
id: uuidv4(),
label: table.tableName,
level: 'level3',
level: "level3",
});
// 3.2.2 创建 level4 节点（columnName 作为 label，父节点是当前 level3）
this.addChildNode(level3Node.id, {
id: uuidv4(),
label: table.columnName,
level: 'level4',
level: "level4",
});
});
});
@ -740,55 +911,72 @@ export class X6Graph {
* @param name - 传入的targetOwner字段值
* @returns 符合格式的目标表格数组 / 错误信息
*/
getTargetTableData(taskId: string, name: string): { data?: TargetTableItem[]; error?: string } {
getTargetTableData(
taskId: string,
name: string,
): { data?: TargetTableItem[]; error?: string } {
const graph = this.getGraph();
const result: TargetTableItem[] = [];
// 1. 找到所有 level2 节点（sourceOwner 来源于 level2 的 label）
const level2Nodes = graph.getNodes().filter(node => node.getData().level === 'level2');
const level2Nodes = graph
.getNodes()
.filter((node) => node.getData().level === "level2");
if (level2Nodes.length === 0) {
return { error: '未找到任何 level2 节点，无法组装数据' };
return { error: "未找到任何 level2 节点，无法组装数据" };
}
// 2. 遍历每个 level2 节点，校验子级并组装数据
for (const level2Node of level2Nodes) {
const sourceOwner = level2Node.attr('label/text') || '';
const sourceOwner = level2Node.attr("label/text") || "";
if (!sourceOwner) {
return { error: `存在未设置 label 的 level2 节点（ID: ${level2Node.id}）` };
return {
error: `存在未设置 label 的 level2 节点（ID: ${level2Node.id}）`,
};
}
// 2.1 校验 level2 是否有子级（必须包含 level3）
const level2ChildIds = this.getChildNodeIds(level2Node.id);
const level3Nodes = level2ChildIds
.map(id => graph.getCellById(id) as Node)
.filter(node => node?.getData().level === 'level3');
.map((id) => graph.getCellById(id) as Node)
.filter((node) => node?.getData().level === "level3");
if (level3Nodes.length === 0) {
return { error: `level2 节点「${sourceOwner}」下无 level3 子节点，请完善配置` };
return {
error: `level2 节点「${sourceOwner}」下无 level3 子节点，请完善配置`,
};
}
// 2.2 遍历每个 level3 节点，校验子级并组装数据
for (const level3Node of level3Nodes) {
const tableName = level3Node.attr('label/text') || '';
const tableName = level3Node.attr("label/text") || "";
if (!tableName) {
return { error: `存在未设置 label 的 level3 节点（父级：${sourceOwner}）` };
return {
error: `存在未设置 label 的 level3 节点（父级：${sourceOwner}）`,
};
}
const syncCount = level3Node.getData().syncCount||"";
// 2.2.1 校验 level3 是否有子级（必须包含 level4）
const level3ChildIds = this.getChildNodeIds(level3Node.id);
const level4Nodes = level3ChildIds
.map(id => graph.getCellById(id) as Node)
.filter(node => node?.getData().level === 'level4');
.map((id) => graph.getCellById(id) as Node)
.filter((node) => node?.getData().level === "level4");
if (level4Nodes.length === 0) {
return { error: `level3 节点「${tableName}」下无 level4 子节点，请完善配置` };
return {
error: `level3 节点「${tableName}」下无 level4 子节点，请完善配置`,
};
}
// 2.2.2 遍历每个 level4 节点（每个level3仅取第一个有效level4，避免重复）
const validLevel4Node = level4Nodes[0];
const columnName = validLevel4Node.attr('label/text') || '';
const columnName = validLevel4Node.attr("label/text") || "";
if (!columnName) {
return { error: `存在未设置 label 的 level4 节点（父级：${tableName}）` };
return {
error: `存在未设置 label 的 level4 节点（父级：${tableName}）`,
};
}
// 2.2.3 组装单条数据
@ -798,6 +986,7 @@ export class X6Graph {
targetOwner: name, // 传入的name字段作为targetOwner
tableName,
columnName,
syncCount
});
}
}
@ -821,7 +1010,10 @@ export class X6Graph {
* 获取子节点ID列表
*/
private getChildNodeIds(parentId: string): string[] {
return this.getGraph().getEdges().filter(edge => edge.getSourceCellId() === parentId).map(edge => edge.getTargetCellId());
return this.getGraph()
.getEdges()
.filter((edge) => edge.getSourceCellId() === parentId)
.map((edge) => edge.getTargetCellId());
}
/**
@ -836,9 +1028,9 @@ export class X6Graph {
*/
clear(): void {
this.getGraph().clearCells();
this.levelCountMap.set('level2', 0);
this.levelCountMap.set('level3', 0);
this.levelCountMap.set('level4', 0);
this.levelCountMap.set("level2", 0);
this.levelCountMap.set("level3", 0);
this.levelCountMap.set("level4", 0);
}
/**
@ -858,7 +1050,7 @@ export class X6Graph {
*/
private getGraph(): Graph {
if (!this.graph) {
throw new Error('请先调用 init() 初始化画布');
throw new Error("请先调用 init() 初始化画布");
}
return this.graph;
}

412
src/pages/sjtb/configTask/dataTable/index.vue
View File

@ -1,16 +1,23 @@
<script setup lang="ts">
import { ElMessage, ElSelect } from 'element-plus';
import { v4 as uuidv4 } from 'uuid';
import { useI18n } from 'vue-i18n';
import { createTargetTables, getFileId, getMindMap, getTable, getUser, targetUser } from '@/utils/axios/sync/configTask/index';
import { ElMessage, ElSelect } from "element-plus";
import { v4 as uuidv4 } from "uuid";
import { useI18n } from "vue-i18n";
import {
createTargetTables,
getFileId,
getMindMap,
getTable,
getUser,
targetUser,
} from "@/utils/axios/sync/configTask/index";
import { X6Graph } from './antvX6';
import { X6Graph } from "./antvX6";
// 接收一个名为 data 的对象 props，类型为 DataProps
const props = defineProps<{
data: DataProps; // 这里的 data 就是父组件传递的整个对象
}>();
const emit = defineEmits(['cancel']);
const emit = defineEmits(["cancel"]);
// 定义一个接口描述对象结构
interface DataProps {
taskId: string;
@ -35,17 +42,17 @@ const level3 = ref<InstanceType<typeof ElSelect> | null>(null);
const level4 = ref<InstanceType<typeof ElSelect> | null>(null);
// 手动输入模式名
const manualModeInput = ref('');
const manualModeInput = ref("");
// 表单数据
const formData = reactive({
taskId: '',
sourceId: '', // 默认选中“mySql”
sourceName: '',
taskId: "",
sourceId: "", // 默认选中“mySql”
sourceName: "",
mode: [],
dataValue: [],
field: '',
targetUserName: '',
field: "",
targetUserName: "",
});
// 当前配置项Id
@ -56,7 +63,14 @@ const prevModeValues = ref<string[]>([]);
// 记录上一次的选中值(数据表列表)
const prevDataValues = ref<string[]>([]);
// 记录上一次的选中值(字段列表)
const prevFieldValues = ref<string>('');
const prevFieldValues = ref<string>("");
// 配置同步数量弹框
const pztbslFlag = ref(false);
const pztbslValue = ref("");
// 当前配置同步数量的节点id
const nowPzTbslId = ref(null);
// 配置的数据表集合
const configDataValues = ref<string[]>([]);
@ -64,7 +78,7 @@ const configDataValues = ref<string[]>([]);
// 初始化思维导图画布
function initGraph() {
// 初始化画布（容器ID为 graph-container）
graph.value = new X6Graph('graphContainer').init({ grid: false, zoom: true });
graph.value = new X6Graph("graphContainer").init({ grid: false, zoom: true });
// 1. 创建根节点
const root = graph.value.addRootNode({
@ -77,16 +91,15 @@ function initGraph() {
// 模式选择变化（正确的事件参数：仅新值）
function handleModeChange(newValues: string[]) {
if (!graph.value)
return;
if (!graph.value) return;
// 旧值从 prevModeValues 中获取
const oldValues = prevModeValues.value;
// 1. 找出新增的选项（需要新增节点）
const added = newValues.filter(v => !oldValues.includes(v));
const added = newValues.filter((v) => !oldValues.includes(v));
// 2. 找出移除的选项（需要删除节点）
const removed = oldValues.filter(v => !newValues.includes(v));
const removed = oldValues.filter((v) => !newValues.includes(v));
// 新增节点
added.forEach((value) => {
@ -95,7 +108,7 @@ function handleModeChange(newValues: string[]) {
graph.value?.addChildNode(formData.sourceId, {
id: value,
label: item.label,
level: 'level2',
level: "level2",
});
}
});
@ -111,21 +124,20 @@ function handleModeChange(newValues: string[]) {
// 数据选择变化（模仿 handleModeChange 逻辑）
function handleDataListChange(newValues: string[]) {
if (!graph.value)
return;
if (!graph.value) return;
// 旧值从 prevDataValues 中获取
const oldValues = prevDataValues.value;
// 1. 找出新增的选项（需要新增节点）
const added = newValues.filter(v => !oldValues.includes(v));
const added = newValues.filter((v) => !oldValues.includes(v));
// 2. 找出移除的选项（需要删除节点）
const removed = oldValues.filter(v => !newValues.includes(v));
const removed = oldValues.filter((v) => !newValues.includes(v));
// 新增节点（假设添加到 level3 层级，父节点为某个 level2 节点，可按需修改）
added.forEach((value) => {
// 从数据列表中找到对应项的 label
const item = dataList.value.find(item => item.value === value);
const item = dataList.value.find((item) => item.value === value);
if (item) {
// 假设父节点 ID 为某个 level2 节点（例如：取第一个 level2 节点的 ID，或通过参数传入）
// 实际场景中需根据业务确定父节点 ID
@ -134,7 +146,7 @@ function handleDataListChange(newValues: string[]) {
graph.value?.addChildNode(parentNodeId, {
id: `${value}`, // 避免与其他节点 ID 冲突，加前缀区分
label: item.label,
level: 'level3', // 假设数据节点为 level3 层级
level: "level3", // 假设数据节点为 level3 层级
});
}
});
@ -152,11 +164,11 @@ function handleDataListChange(newValues: string[]) {
}
// 数据选择变化（单选逻辑）
function handleFieldListChange(newValue: string) { // 注意：参数从 string[] 改为 string
console.log('当前选中值：', newValue);
function handleFieldListChange(newValue: string) {
// 注意：参数从 string[] 改为 string
console.log("当前选中值：", newValue);
if (!graph.value)
return;
if (!graph.value) return;
// 1. 旧值从 prevFieldValues 中获取（同样存单个值，非数组）
const oldValue = prevFieldValues.value;
@ -175,7 +187,7 @@ function handleFieldListChange(newValue: string) { // 注意：参数从 string[
// 第二步：再新增新值对应的节点（如果新值存在）
if (newValue) {
// 从数据列表找到新值对应的label
const item = fieldList.value.find(item => item.value === newValue);
const item = fieldList.value.find((item) => item.value === newValue);
if (item) {
// 动态获取父节点ID（这里逻辑保持你原有，可根据业务调整）
const parentNodeId = configData.value[2].id;
@ -183,7 +195,7 @@ function handleFieldListChange(newValue: string) { // 注意：参数从 string[
graph.value.addChildNode(parentNodeId, {
id: newValue,
label: item.label,
level: 'level4', // 单选节点层级为level4
level: "level4", // 单选节点层级为level4
});
}
}
@ -202,67 +214,130 @@ onMounted(() => {
// 根据源数据库获取(模式/用户名)列表
nextTick(() => {
getTargetUserName(formData.taskId);
getMindMap({
taskId: formData.taskId,
}, (res) => {
initGraph();
getModelList((value: any) => {
console.log(value);
if (res.result.userInfos.length) {
console.log(res);
graph.value?.importData(res.result.userInfos, formData.sourceId);
res.result.userInfos.forEach((item: any) => {
modeList.value.forEach((mode: any) => {
if (mode.label === item.userName) {
formData.mode.push(mode.value);
getMindMap(
{
taskId: formData.taskId,
},
(res) => {
initGraph();
getModelList((value: any) => {
console.log(value);
if (res.result.userInfos.length) {
graph.value?.importData(res.result.userInfos, formData.sourceId);
res.result.userInfos.forEach((item: any) => {
const graphSl = graph.value?.getGraph();
// 获取全部节点实例
const allNodes = graphSl.getNodes();
console.log(allNodes, "allNodes");
// 过滤：根据你存名称的字段，这里假设字段是 label；如果你的字段是 name，就改成 item.name
const matchNodesData = allNodes
.map((node) => {
return {
label: node.label,
id: node.id,
};
})
.filter((item1) => {
return item1.label == item.userName;
});
const exists = modeList.value.find(
(item1: any) => item1.label === item.userName
);
if (!exists) {
const newItem = {
value: matchNodesData[0].id,
label: item.userName,
};
modeList.value.push(newItem);
formData.mode.push(newItem.value);
} else {
formData.mode.push(exists.value);
}
});
});
}
});
}
});
// mindMap.value = res.result;
});
// mindMap.value = res.result;
}
);
});
// 注册antvX6Event回调事件
EventBusTool.getEventBus().subscribe('antvX6Event', (res: any) => {
EventBusTool.getEventBus().subscribe("antvX6Event", (res: any) => {
// 如果进入全屏，全屏icon没有高亮的话，需要高亮
if (res.key === 'removeNode') {
if (res.key === "removeNode") {
console.log(res.id);
if (res.level === 'level2') {
if (res.level === "level2") {
// 3. 从下拉选中值中移除（关键：同步下拉选择器的选中状态）
formData.mode = formData.mode.filter(v => v !== res.id);
prevModeValues.value = prevModeValues.value.filter(v => v !== res.id);
formData.mode = formData.mode.filter((v) => v !== res.id);
prevModeValues.value = prevModeValues.value.filter((v) => v !== res.id);
formData.dataValue = [];
formData.field = '';
}
else if (res.level === 'level3') {
formData.field = "";
} else if (res.level === "level3") {
// 3. 从下拉选中值中移除（关键：同步下拉选择器的选中状态）
formData.dataValue = formData.dataValue.filter(v => v !== res.id);
prevDataValues.value = prevDataValues.value.filter(v => v !== res.id);
formData.field = '';
}
else if (res.level === 'level4') {
formData.field = '';
prevFieldValues.value = '';
formData.dataValue = formData.dataValue.filter((v) => v !== res.id);
prevDataValues.value = prevDataValues.value.filter((v) => v !== res.id);
formData.field = "";
} else if (res.level === "level4") {
formData.field = "";
prevFieldValues.value = "";
}
}
if (res.key === 'configNode') {
if (res.key === "configNode") {
configData.value = res.allParents;
configDataValues.value = [...formData.dataValue, formData.field];
console.log(
configDataValues.value,
configData.value,
"2configData.value"
);
// 请求
if (res.level === 'level2') {
if (res.level === "level2") {
getDataListById(res.label);
}
if (res.level === 'level3') {
getFieldById(res.label);
if (res.level === "level3") {
if (res.isTbsl) {
const graphSl = graph.value?.getGraph();
const jdItem = graphSl.getCellById(res.id);
nowPzTbslId.value = res.id;
const oldSyncCount = jdItem.getData().syncCount;
pztbslFlag.value = true;
if (oldSyncCount) {
pztbslValue.value = oldSyncCount;
} else {
pztbslValue.value = "";
}
} else {
getFieldById(res.label);
}
}
}
});
});
function paTbslMethod() {
if (!pztbslValue.value) {
ElMessage({
type: "error",
message: `请配置同步数量`,
});
return;
}
const graphSl = graph.value?.getGraph();
const jdItem = graphSl.getCellById(nowPzTbslId.value);
jdItem.setData({ ...jdItem.getData(), syncCount:pztbslValue.value })
pztbslFlag.value = false;
pztbslValue.value = "";
nowPzTbslId.value = null;
}
// 根据taskId获取目标用户名
function getTargetUserName(taskId: any) {
targetUser({ taskId }, (res) => {
@ -299,6 +374,8 @@ function getDataListById(name: any) {
};
});
console.log(formData, "2141");
level3.value?.toggleMenu();
formData.dataValue = [];
});
@ -307,22 +384,29 @@ function getDataListById(name: any) {
function getFieldById(name: any) {
console.log(configData.value[1].label, name);
getFileId({ sourceId: formData.sourceId, username: configData.value[1].label, tableName: name }, (res) => {
fieldList.value = res.result.map((item: any) => {
return {
value: uuidv4(),
label: item,
};
});
level4.value?.toggleMenu();
formData.field = '';
});
getFileId(
{
sourceId: formData.sourceId,
username: configData.value[1].label,
tableName: name,
},
(res) => {
fieldList.value = res.result.map((item: any) => {
return {
value: uuidv4(),
label: item,
};
});
level4.value?.toggleMenu();
formData.field = "";
}
);
}
// 手动添加模式
function handleAddMode() {
const inputVal = manualModeInput.value.trim();
if (!inputVal) {
ElMessage({ type: 'warning', message: '请输入模式名称' });
ElMessage({ type: "warning", message: "请输入模式名称" });
return;
}
// 检查是否已存在相同 label 的模式
@ -332,97 +416,152 @@ function handleAddMode() {
if (!formData.mode.includes(exists.value)) {
formData.mode.push(exists.value);
handleModeChange([...formData.mode]);
} else {
ElMessage({ type: "warning", message: "该模式已添加" });
}
else {
ElMessage({ type: 'warning', message: '该模式已添加' });
}
}
else {
} else {
// 新建项并选中
const newItem = { value: uuidv4(), label: inputVal };
modeList.value.push(newItem);
formData.mode.push(newItem.value);
handleModeChange([...formData.mode]);
}
manualModeInput.value = '';
manualModeInput.value = "";
}
// 保存事件
function handleSave() {
if (!formData.targetUserName) {
ElMessage({
type: 'error',
type: "error",
message: `请选择目标用户名`,
});
return;
}
const data = graph.value?.getTargetTableData(formData.taskId, formData.targetUserName);
const data = graph.value?.getTargetTableData(
formData.taskId,
formData.targetUserName
);
console.log(data);
if (data) {
createTargetTables(data, (res) => {
console.log(res);
if (res === true) {
ElMessage({
type: 'success',
message: `配置数据表成功`,
});
emit('cancel');
}
}, 30 * 60 * 1000);
}
else {
createTargetTables(
data,
(res) => {
console.log(res);
if (res === true) {
ElMessage({
type: "success",
message: `配置数据表成功`,
});
emit("cancel");
}
},
30 * 60 * 1000
);
} else {
ElMessage({
type: 'error',
type: "error",
message: `配置有误，请检查`,
});
}
}
// 取消事件
function handleCancel() {
emit('cancel');
emit("cancel");
}
</script>
<template>
<div class="dataTable">
<ElForm :inline="true" :model="formData" class="custom-form" style="margin-bottom: 20px;">
<ElForm
:inline="true"
:model="formData"
class="custom-form"
style="margin-bottom: 20px"
>
<ElFormItem :label="t('database')">
<ElInput v-model="formData.sourceName" disabled style="width: 180px" />
</ElFormItem>
<ElFormItem :label="t('mode')">
<!-- <ElFormItem :label="t('mode')">
<ElSelect v-model="formData.mode" style="width: 220px" multiple :max-collapse-tags="0" collapse-tags
collapse-tags-tooltip filterable :placeholder="t('pleaseSelect')" class="custom-select"
allow-create default-first-option :reserve-keyword="false"
@change="handleModeChange">
<ElOption v-for="(item, index) in modeList" :key="index" :label="item.label" :value="item.value" />
</ElSelect>
</ElFormItem>
<!--<ElFormItem label="手动输入模式" v-show="!formData.mode || !formData.mode.length">
</ElFormItem> -->
<!-- <ElFormItem label="手动输入模式" v-show="!formData.mode || !formData.mode.length">
<div style="display: flex; align-items: center;">
<ElInput v-model="manualModeInput" style="width: 160px" placeholder="输入模式名" @keyup.enter="handleAddMode" />
<ElButton type="primary" style="margin-left: 4px; height: 34px; border-radius: 4px;" @click="handleAddMode">
添加
</ElButton>
</div>
</ElFormItem>-->
</ElFormItem> -->
<ElFormItem :label="t('mode')">
<ElInput
v-model="manualModeInput"
style="width: 160px"
placeholder="输入模式名"
@keyup.enter="handleAddMode"
/>
</ElFormItem>
<ElFormItem :label="t('dataTable')">
<ElSelect ref="level3" v-model="formData.dataValue" style="width: 220px" multiple :max-collapse-tags="0"
collapse-tags collapse-tags-tooltip filterable :placeholder="t('pleaseSelect')" class="custom-select"
@change="handleDataListChange">
<ElOption v-for="(item, index) in dataList" :key="index" :label="item.label" :value="item.value" />
<ElSelect
ref="level3"
v-model="formData.dataValue"
style="width: 220px"
multiple
:max-collapse-tags="0"
collapse-tags
collapse-tags-tooltip
filterable
:placeholder="t('pleaseSelect')"
class="custom-select"
@change="handleDataListChange"
>
<ElOption
v-for="(item, index) in dataList"
:key="index"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
<ElFormItem :label="t('field')">
<ElSelect ref="level4" v-model="formData.field" style="width: 220px" filterable :placeholder="t('pleaseSelect')"
class="custom-select" @change="handleFieldListChange">
<ElOption v-for="(item, index) in fieldList" :key="index" :label="item.label" :value="item.value"
:disabled="formData.dataValue.length === 0" />
<ElSelect
ref="level4"
v-model="formData.field"
style="width: 220px"
filterable
:placeholder="t('pleaseSelect')"
class="custom-select"
@change="handleFieldListChange"
>
<ElOption
v-for="(item, index) in fieldList"
:key="index"
:label="item.label"
:value="item.value"
:disabled="formData.dataValue.length === 0"
/>
</ElSelect>
</ElFormItem>
<ElFormItem :label="t('targetUserName')">
<ElSelect v-model="formData.targetUserName" style="width: 220px" filterable :placeholder="t('pleaseSelect')"
class="custom-select">
<ElOption v-for="(item, index) in targetUserNameList" :key="index" :label="item.label" :value="item.value" />
<ElSelect
v-model="formData.targetUserName"
style="width: 220px"
filterable
:placeholder="t('pleaseSelect')"
class="custom-select"
>
<ElOption
v-for="(item, index) in targetUserNameList"
:key="index"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
</ElForm>
@ -432,13 +571,32 @@ function handleCancel() {
</div>
<div class="btns">
<div class="save" @click="handleSave">
保存
</div>
<div class="close" @click="handleCancel">
取消
</div>
<div class="save" @click="handleSave">保存</div>
<div class="close" @click="handleCancel">取消</div>
</div>
<Dialog
v-model="pztbslFlag"
title="配置同步数量"
width="20vw"
class="config-dialog"
>
<el-input
v-model="pztbslValue"
style="width: 240px"
type="number"
placeholder="请配置同步数量"
/>
<template #footer>
<ElButton
type="text"
style="color: #fff; cursor: no-drop"
@click="paTbslMethod"
>
配置
</ElButton>
</template>
</Dialog>
</div>
</template>
@ -447,6 +605,14 @@ function handleCancel() {
width: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
::v-deep .config-dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.custom-form {
margin-bottom: 20px;

332
src/pages/xzypybj/configTask/dataTable/antvX6.ts
View File

@ -1,9 +1,9 @@
import type { Edge, Node, NodeConfig } from '@antv/x6';
import { Graph } from '@antv/x6';
import { v4 as uuidv4 } from 'uuid';
import type { Edge, Node, NodeConfig } from "@antv/x6";
import { Graph } from "@antv/x6";
import { v4 as uuidv4 } from "uuid";
// 层级类型定义
export type NodeLevel = 'level2' | 'level3' | 'level4';
export type NodeLevel = "level2" | "level3" | "level4";
// 目标灌库数据的类型定义
interface ImportDataItem {
@ -50,14 +50,14 @@ export class X6Graph {
private readonly nodeStyle = {
width: 100,
height: 40,
fill: '#0a4a5c', // 深色背景（示例中的深青色）
stroke: '#0a4a5c', // 边框与背景同色，视觉上隐藏边框
fill: "#0a4a5c", // 深色背景（示例中的深青色）
stroke: "#0a4a5c", // 边框与背景同色，视觉上隐藏边框
strokeWidth: 2,
radius: 4,
label: {
fill: '#93CDD5', // 白色文字
fill: "#93CDD5", // 白色文字
fontSize: 14,
fontWeight: 'bold', // 可选：文字加粗
fontWeight: "bold", // 可选：文字加粗
},
};
@ -69,16 +69,16 @@ export class X6Graph {
// 层级X坐标映射
private readonly levelXMap = new Map<NodeLevel, number>([
['level2', 300],
['level3', 550],
['level4', 800],
["level2", 300],
["level3", 550],
["level4", 800],
]);
// 层级节点数量记录
private readonly levelCountMap = new Map<NodeLevel, number>([
['level2', 0],
['level3', 0],
['level4', 0],
["level2", 0],
["level3", 0],
["level4", 0],
]);
constructor(containerId: string) {
@ -87,7 +87,7 @@ export class X6Graph {
}
private createMenuElement() {
this.menuElement = document.createElement('div');
this.menuElement = document.createElement("div");
this.menuElement.style.cssText = `
position: absolute;
width: 100px;
@ -102,16 +102,16 @@ export class X6Graph {
`;
// 1. 新增“配置”菜单项
const configItem = document.createElement('div');
const configItem = document.createElement("div");
configItem.style.cssText = `
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
border-bottom: 1px solid #f0f0f0; /* 分隔线，区分两个选项 */
`;
configItem.textContent = '配置';
configItem.addEventListener('click', () => {
const nodeId = this.menuElement?.getAttribute('data-node-id');
configItem.textContent = "配置";
configItem.addEventListener("click", () => {
const nodeId = this.menuElement?.getAttribute("data-node-id");
if (nodeId) {
const graph = this.getGraph();
const targetNode = graph.getCellById(nodeId) as Node;
@ -121,35 +121,41 @@ export class X6Graph {
// 2. 高亮样式（保持原有）
targetNode.attr({
body: {
stroke: 'rgb(12,129,123)',
stroke: "rgb(12,129,123)",
strokeWidth: 2,
strokeDasharray: '5, 5',
strokeDasharray: "5, 5",
},
});
// ======================== 新增：获取所有父级信息 ========================
// 1. 定义追溯父级的方法
const getAllParents = (targetNodeId: string): Array<{ id: string; label: string; level?: NodeLevel }> => {
const parents: Array<{ id: string; label: string; level?: NodeLevel }> = [];
const getAllParents = (
targetNodeId: string,
): Array<{ id: string; label: string; level?: NodeLevel }> => {
const parents: Array<{
id: string;
label: string;
level?: NodeLevel;
}> = [];
let currentNodeId = targetNodeId;
// 循环追溯：直到找不到父节点（根节点）
while (true) {
// 找到指向当前节点的连线（来源即父节点）
const parentEdge = graph.getEdges().find(edge => edge.getTargetCellId() === currentNodeId);
if (!parentEdge)
break; // 无父节点，终止循环
const parentEdge = graph
.getEdges()
.find((edge) => edge.getTargetCellId() === currentNodeId);
if (!parentEdge) break; // 无父节点，终止循环
// 获取父节点ID和父节点实例
const parentNodeId = parentEdge.getSourceCellId();
const parentNode = graph.getCellById(parentNodeId) as Node;
if (!parentNode)
break;
if (!parentNode) break;
// 收集父节点信息（ID、标签、层级）
parents.push({
id: parentNodeId,
label: parentNode.attr('label/text') || '', // 节点显示的文字
label: parentNode.attr("label/text") || "", // 节点显示的文字
level: parentNode.getData().level, // 父节点的层级
});
@ -168,19 +174,19 @@ export class X6Graph {
// 关键：添加当前节点信息（含label），拼接成“父级+当前节点”的完整链
const currentNodeInfo = {
id: nodeId,
label: targetNode.attr('label/text') || '', // 从当前节点获取label
label: targetNode.attr("label/text") || "", // 从当前节点获取label
level: nodeLevel,
};
allParentsOrdered = [...allParentsOrdered, currentNodeInfo];
console.log('目标节点（父级+自身）完整链：', allParentsOrdered);
console.log("目标节点（父级+自身）完整链：", allParentsOrdered);
// ========================================================================
// 3. 事件总线传递：携带完整链信息
EventBusTool.getEventBus().publish('antvX6Event', {
key: 'configNode',
EventBusTool.getEventBus().publish("antvX6Event", {
key: "configNode",
id: nodeId,
label: targetNode.attr('label/text') || '',
label: targetNode.attr("label/text") || "",
level: nodeLevel,
allParents: allParentsOrdered, // 包含父级+当前节点（均有label）
});
@ -188,23 +194,23 @@ export class X6Graph {
this.hideMenu();
});
// 配置项悬停效果
configItem.addEventListener('mouseenter', () => {
configItem.style.background = '#f0f0f0';
configItem.addEventListener("mouseenter", () => {
configItem.style.background = "#f0f0f0";
});
configItem.addEventListener('mouseleave', () => {
configItem.style.background = 'white';
configItem.addEventListener("mouseleave", () => {
configItem.style.background = "white";
});
// 2. 原有“删除”菜单项（保持不变，调整顺序在配置项下方）
const deleteItem = document.createElement('div');
const deleteItem = document.createElement("div");
deleteItem.style.cssText = `
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
`;
deleteItem.textContent = '删除';
deleteItem.addEventListener('click', () => {
const nodeId = this.menuElement?.getAttribute('data-node-id');
deleteItem.textContent = "删除";
deleteItem.addEventListener("click", () => {
const nodeId = this.menuElement?.getAttribute("data-node-id");
if (nodeId) {
// 获取图形实例和目标节点（和配置项逻辑一致）
const graph = this.getGraph();
@ -212,8 +218,8 @@ export class X6Graph {
// 从节点数据中提取level
const nodeLevel = targetNode.getData().level;
this.removeNode(nodeId);
EventBusTool.getEventBus().publish('antvX6Event', {
key: 'removeNode',
EventBusTool.getEventBus().publish("antvX6Event", {
key: "removeNode",
id: nodeId,
level: nodeLevel, // 新增：传递level信息
});
@ -221,11 +227,11 @@ export class X6Graph {
this.hideMenu();
});
// 删除项悬停效果
deleteItem.addEventListener('mouseenter', () => {
deleteItem.style.background = '#f0f0f0';
deleteItem.addEventListener("mouseenter", () => {
deleteItem.style.background = "#f0f0f0";
});
deleteItem.addEventListener('mouseleave', () => {
deleteItem.style.background = 'white';
deleteItem.addEventListener("mouseleave", () => {
deleteItem.style.background = "white";
});
// 3. 将两个菜单项添加到菜单容器（配置项在上，删除项在下）
@ -238,12 +244,11 @@ export class X6Graph {
* 显示右键菜单
*/
private showMenu(nodeId: string, x: number, y: number) {
if (!this.menuElement)
return;
this.menuElement.setAttribute('data-node-id', nodeId);
if (!this.menuElement) return;
this.menuElement.setAttribute("data-node-id", nodeId);
this.menuElement.style.left = `${x}px`;
this.menuElement.style.top = `${y}px`;
this.menuElement.style.display = 'block';
this.menuElement.style.display = "block";
}
/**
@ -251,7 +256,7 @@ export class X6Graph {
*/
private hideMenu() {
if (this.menuElement) {
this.menuElement.style.display = 'none';
this.menuElement.style.display = "none";
}
}
@ -269,14 +274,14 @@ export class X6Graph {
container,
width: container.clientWidth,
height: container.clientHeight,
grid: options.grid ?? { size: 10, visible: false, type: 'dot' },
grid: options.grid ?? { size: 10, visible: false, type: "dot" },
mousewheel: options.zoom ?? {
enabled: true,
modifiers: 'ctrl',
modifiers: "ctrl",
minScale: 0.5,
maxScale: 2,
},
panning: { enabled: true, modifier: 'shift' },
panning: { enabled: true, modifier: "shift" },
snapline: true,
// 关键：完善选择配置，确保单击和框选生效
selecting: {
@ -285,20 +290,24 @@ export class X6Graph {
});
// 注册“直接曲线虚线”自定义边
Graph.registerEdge('direct-curved-dashed-edge', {
inherit: 'edge',
// 连接器：使用 smooth（平滑曲线，无额外拐点）
connector: { name: 'smooth' },
attrs: {
line: {
targetMarker: '', // 移除目标标记（可选）
stroke: '#A2B1C3', // 线条颜色
strokeWidth: 2, // 线条宽度
strokeDasharray: '5, 5', // 虚线：线段5px + 间隔5px
Graph.registerEdge(
"direct-curved-dashed-edge",
{
inherit: "edge",
// 连接器：使用 smooth（平滑曲线，无额外拐点）
connector: { name: "smooth" },
attrs: {
line: {
targetMarker: "", // 移除目标标记（可选）
stroke: "#A2B1C3", // 线条颜色
strokeWidth: 2, // 线条宽度
strokeDasharray: "5, 5", // 虚线：线段5px + 间隔5px
},
},
zIndex: 0, // 层级（避免遮挡节点）
},
zIndex: 0, // 层级（避免遮挡节点）
}, true);
true,
);
// 绑定右键菜单事件
this.bindRightClickEvent();
@ -313,7 +322,7 @@ export class X6Graph {
const graph = this.getGraph();
// 节点右键点击
graph.on('node:contextmenu', (args) => {
graph.on("node:contextmenu", (args) => {
args.e.preventDefault(); // 阻止浏览器默认右键菜单
const { cell, e } = args;
const node = cell as Node;
@ -331,13 +340,13 @@ export class X6Graph {
});
// 画布空白处右键点击（隐藏菜单）
graph.on('blank:contextmenu', (args) => {
graph.on("blank:contextmenu", (args) => {
args.e.preventDefault();
this.hideMenu();
});
// 点击其他区域隐藏菜单
document.addEventListener('click', () => {
document.addEventListener("click", () => {
this.hideMenu();
});
}
@ -368,7 +377,7 @@ export class X6Graph {
private addNode(config: SimpleNodeConfig): Node {
const graph = this.getGraph();
const node = graph.addNode({
shape: 'rect',
shape: "rect",
id: config.id,
x: config.x,
y: config.y,
@ -387,11 +396,11 @@ export class X6Graph {
// 文字的样式（颜色、位置、字号等）
label: {
text: config.label,
fill: '#ffffff', // 白色文字
fill: "#ffffff", // 白色文字
fontSize: 14,
fontWeight: 'bold',
textAnchor: 'middle', // 文字水平居中
verticalAnchor: 'middle', // 文字垂直居中
fontWeight: "bold",
textAnchor: "middle", // 文字水平居中
verticalAnchor: "middle", // 文字垂直居中
},
},
data: {
@ -409,7 +418,10 @@ export class X6Graph {
/**
* 添加子节点（按层级动态分配位置）
*/
addChildNode(parentId: string, config: ChildNodeConfig): { node: Node; edge: Edge } {
addChildNode(
parentId: string,
config: ChildNodeConfig,
): { node: Node; edge: Edge } {
const graph = this.getGraph();
// 校验父节点
@ -436,20 +448,20 @@ export class X6Graph {
// 创建连线
const edge = graph.addEdge({
shape: 'direct-curved-dashed-edge',
shape: "direct-curved-dashed-edge",
source: {
cell: parentId,
anchor: { name: 'right' },
anchor: { name: "right" },
},
// 目标节点（子节点）的锚点：左侧
target: {
cell: childNode.id,
anchor: { name: 'left' },
anchor: { name: "left" },
},
style: {
stroke: '#888',
stroke: "#888",
strokeWidth: 1.2,
targetMarker: { name: 'block', size: 8 },
targetMarker: { name: "block", size: 8 },
},
});
@ -460,8 +472,8 @@ export class X6Graph {
// 重排同层级节点
this.rearrangeLevelNodes(config.level);
// 新增：如果添加的是第三层级，同步重排第二层级
if (config.level === 'level3') {
this.rearrangeLevelNodes('level2');
if (config.level === "level3") {
this.rearrangeLevelNodes("level2");
}
return { node: childNode, edge: edge as Edge };
}
@ -475,28 +487,28 @@ export class X6Graph {
const centerY = (containerHeight - this.nodeStyle.height) / 2; // 画布中心点
// 获取当前层级的所有节点（按标签排序）
const levelNodes = graph.getNodes()
.filter(node => node.getData().level === level)
const levelNodes = graph
.getNodes()
.filter((node) => node.getData().level === level)
.sort((a, b) => {
const labelA = a.attr('label/text') || '';
const labelB = b.attr('label/text') || '';
const labelA = a.attr("label/text") || "";
const labelB = b.attr("label/text") || "";
return labelA.localeCompare(labelB, undefined, { numeric: true });
});
const totalNodes = levelNodes.length;
if (totalNodes === 0)
return;
if (totalNodes === 0) return;
// ======================== 第二层级：间距根据自身第三层级子节点数量动态调整 ========================
if (level === 'level2') {
// 1. 统计每个第二层级节点的第三层级子节点数量
if (level === "level2") {
// 1. 统计每个第二层级节点的第三层级子节点数量
const level2ChildCount = new Map<string, number>();
levelNodes.forEach((node) => {
const childIds = this.getChildNodeIds(node.id);
// 筛选出属于第三层级的子节点
const level3ChildCount = childIds.filter((childId) => {
const childNode = graph.getCellById(childId) as Node;
return childNode?.getData().level === 'level3';
return childNode?.getData().level === "level3";
}).length;
level2ChildCount.set(node.id, level3ChildCount);
});
@ -524,58 +536,73 @@ export class X6Graph {
// 3. 计算整体偏移量，让第二层级节点整体垂直居中
const lastNodeY = nodePositions.get(levelNodes[totalNodes - 1].id) || 0;
const totalHeight = lastNodeY - nodePositions.get(levelNodes[0].id) || 0 + this.nodeStyle.height;
const offset = centerY - (nodePositions.get(levelNodes[0].id) || 0) - totalHeight / 2;
const totalHeight =
lastNodeY - nodePositions.get(levelNodes[0].id) ||
0 + this.nodeStyle.height;
const offset =
centerY - (nodePositions.get(levelNodes[0].id) || 0) - totalHeight / 2;
// 4. 应用最终位置（加上偏移量，确保整体居中）
levelNodes.forEach((node) => {
const nodeY = (nodePositions.get(node.id) || 0) + offset;
const nodeX = this.levelXMap.get('level2') || 300;
const nodeX = this.levelXMap.get("level2") || 300;
node.setPosition(nodeX, nodeY);
});
}
// ======================== 第三层级：跟随父节点垂直分布 ========================
else if (level === 'level3') {
else if (level === "level3") {
const parentGroups = new Map<string, Node[]>();
levelNodes.forEach((node) => {
const parentEdge = graph.getEdges().find(edge => edge.getTargetCellId() === node.id);
const parentEdge = graph
.getEdges()
.find((edge) => edge.getTargetCellId() === node.id);
if (parentEdge) {
const parentId = parentEdge.getSourceCellId();
parentGroups.set(parentId, [...(parentGroups.get(parentId) || []), node]);
parentGroups.set(parentId, [
...(parentGroups.get(parentId) || []),
node,
]);
}
});
parentGroups.forEach((children, parentId) => {
const parentNode = graph.getCellById(parentId) as Node;
if (!parentNode)
return;
if (!parentNode) return;
const parentY = parentNode.getPosition().y;
const childCount = children.length;
const verticalGap = 20; // 第三层级内部固定间距
const totalChildHeight = this.nodeStyle.height * childCount + verticalGap * (childCount - 1);
const totalChildHeight =
this.nodeStyle.height * childCount + verticalGap * (childCount - 1);
const startOffset = -totalChildHeight / 2 + this.nodeStyle.height / 2;
children.forEach((child, index) => {
const childY = parentY + startOffset + (this.nodeStyle.height + verticalGap) * index;
const childX = this.levelXMap.get('level3') || 550;
const childY =
parentY +
startOffset +
(this.nodeStyle.height + verticalGap) * index;
const childX = this.levelXMap.get("level3") || 550;
child.setPosition(childX, childY);
});
});
}
else if (level === 'level4') {
// 1. 按父节点（level3）分组（每个level3只对应1个level4）
} else if (level === "level4") {
// 1. 按父节点（level3）分组（每个level3只对应1个level4）
const parentGroups = new Map<string, Node[]>();
levelNodes.forEach((node) => {
const parentEdge = graph.getEdges().find(edge => edge.getTargetCellId() === node.id);
const parentEdge = graph
.getEdges()
.find((edge) => edge.getTargetCellId() === node.id);
if (parentEdge) {
const parentId = parentEdge.getSourceCellId();
// 只保留level3的父节点（确保父节点层级正确）
const parentNode = graph.getCellById(parentId) as Node;
if (parentNode?.getData().level === 'level3') {
parentGroups.set(parentId, [...(parentGroups.get(parentId) || []), node]);
if (parentNode?.getData().level === "level3") {
parentGroups.set(parentId, [
...(parentGroups.get(parentId) || []),
node,
]);
}
}
});
@ -583,12 +610,11 @@ export class X6Graph {
// 2. 每个level3父节点的level4子节点：放在父节点右侧（固定间距）
parentGroups.forEach((children, parentId) => {
const parentNode = graph.getCellById(parentId) as Node;
if (!parentNode)
return;
if (!parentNode) return;
// level4固定在level3父节点右侧，X坐标=level3X + 节点宽度 + 间距（20px）
const parentPos = parentNode.getPosition();
const level4X = this.levelXMap.get('level4') || 800;
const level4X = this.levelXMap.get("level4") || 800;
// Y坐标与父节点完全对齐（上下居中）
const level4Y = parentPos.y;
@ -598,8 +624,8 @@ export class X6Graph {
targetChild.setPosition(level4X, level4Y);
// 多余节点直接删除（避免多个level4）
if (children.length > 1) {
children.slice(1).forEach(excessNode => excessNode.remove());
this.resetLevelCount('level4'); // 重置数量统计
children.slice(1).forEach((excessNode) => excessNode.remove());
this.resetLevelCount("level4"); // 重置数量统计
}
}
});
@ -612,8 +638,7 @@ export class X6Graph {
removeNode(nodeId: string): void {
const graph = this.getGraph();
const cell = graph.getCellById(nodeId);
if (!cell || !graph.isNode(cell))
return;
if (!cell || !graph.isNode(cell)) return;
const node = cell as Node;
const nodeLevel = node.getData().level as NodeLevel;
@ -638,33 +663,30 @@ export class X6Graph {
* @param importData - 目标灌库数据（格式如 [{userName: "...", tables: [...]}]）
* @param rootConfig - 根节点配置（需提前确定根节点的 id 和 label，如 sourceOwner）
*/
importData(
importData: ImportDataItem[],
rootId,
): void {
importData(importData: ImportDataItem[], rootId): void {
// 3. 遍历灌库数据，创建 level2→level3→level4 层级
importData.forEach((item) => {
// 3.1 创建 level2 节点（userName 作为 label，父节点是根节点）
// 3.1 创建 level2 节点（userName 作为 label，父节点是根节点）
const { node: level2Node } = this.addChildNode(rootId, {
id: uuidv4(),
label: item.userName,
level: 'level2',
level: "level2",
});
// 3.2 遍历当前 level2 的 tables，创建 level3 和 level4 节点
item.tables.forEach((table) => {
// 3.2.1 创建 level3 节点（tableName 作为 label，父节点是当前 level2）
// 3.2.1 创建 level3 节点（tableName 作为 label，父节点是当前 level2）
const { node: level3Node } = this.addChildNode(level2Node.id, {
id: uuidv4(),
label: table.tableName,
level: 'level3',
level: "level3",
});
// 3.2.2 创建 level4 节点（columnName 作为 label，父节点是当前 level3）
this.addChildNode(level3Node.id, {
id: uuidv4(),
label: table.columnName,
level: 'level4',
level: "level4",
});
});
});
@ -676,55 +698,70 @@ export class X6Graph {
* @param name - 传入的targetOwner字段值
* @returns 符合格式的目标表格数组 / 错误信息
*/
getTargetTableData(taskId: string, name: string): { data?: TargetTableItem[]; error?: string } {
getTargetTableData(
taskId: string,
name: string,
): { data?: TargetTableItem[]; error?: string } {
const graph = this.getGraph();
const result: TargetTableItem[] = [];
// 1. 找到所有 level2 节点（sourceOwner 来源于 level2 的 label）
const level2Nodes = graph.getNodes().filter(node => node.getData().level === 'level2');
const level2Nodes = graph
.getNodes()
.filter((node) => node.getData().level === "level2");
if (level2Nodes.length === 0) {
return { error: '未找到任何 level2 节点，无法组装数据' };
return { error: "未找到任何 level2 节点，无法组装数据" };
}
// 2. 遍历每个 level2 节点，校验子级并组装数据
for (const level2Node of level2Nodes) {
const sourceOwner = level2Node.attr('label/text') || '';
const sourceOwner = level2Node.attr("label/text") || "";
if (!sourceOwner) {
return { error: `存在未设置 label 的 level2 节点（ID: ${level2Node.id}）` };
return {
error: `存在未设置 label 的 level2 节点（ID: ${level2Node.id}）`,
};
}
// 2.1 校验 level2 是否有子级（必须包含 level3）
const level2ChildIds = this.getChildNodeIds(level2Node.id);
const level3Nodes = level2ChildIds
.map(id => graph.getCellById(id) as Node)
.filter(node => node?.getData().level === 'level3');
.map((id) => graph.getCellById(id) as Node)
.filter((node) => node?.getData().level === "level3");
if (level3Nodes.length === 0) {
return { error: `level2 节点「${sourceOwner}」下无 level3 子节点，请完善配置` };
return {
error: `level2 节点「${sourceOwner}」下无 level3 子节点，请完善配置`,
};
}
// 2.2 遍历每个 level3 节点，校验子级并组装数据
for (const level3Node of level3Nodes) {
const tableName = level3Node.attr('label/text') || '';
const tableName = level3Node.attr("label/text") || "";
if (!tableName) {
return { error: `存在未设置 label 的 level3 节点（父级：${sourceOwner}）` };
return {
error: `存在未设置 label 的 level3 节点（父级：${sourceOwner}）`,
};
}
// 2.2.1 校验 level3 是否有子级（必须包含 level4）
const level3ChildIds = this.getChildNodeIds(level3Node.id);
const level4Nodes = level3ChildIds
.map(id => graph.getCellById(id) as Node)
.filter(node => node?.getData().level === 'level4');
.map((id) => graph.getCellById(id) as Node)
.filter((node) => node?.getData().level === "level4");
if (level4Nodes.length === 0) {
return { error: `level3 节点「${tableName}」下无 level4 子节点，请完善配置` };
return {
error: `level3 节点「${tableName}」下无 level4 子节点，请完善配置`,
};
}
// 2.2.2 遍历每个 level4 节点（每个level3仅取第一个有效level4，避免重复）
const validLevel4Node = level4Nodes[0];
const columnName = validLevel4Node.attr('label/text') || '';
const columnName = validLevel4Node.attr("label/text") || "";
if (!columnName) {
return { error: `存在未设置 label 的 level4 节点（父级：${tableName}）` };
return {
error: `存在未设置 label 的 level4 节点（父级：${tableName}）`,
};
}
// 2.2.3 组装单条数据
@ -757,7 +794,10 @@ export class X6Graph {
* 获取子节点ID列表
*/
private getChildNodeIds(parentId: string): string[] {
return this.getGraph().getEdges().filter(edge => edge.getSourceCellId() === parentId).map(edge => edge.getTargetCellId());
return this.getGraph()
.getEdges()
.filter((edge) => edge.getSourceCellId() === parentId)
.map((edge) => edge.getTargetCellId());
}
/**
@ -772,9 +812,9 @@ export class X6Graph {
*/
clear(): void {
this.getGraph().clearCells();
this.levelCountMap.set('level2', 0);
this.levelCountMap.set('level3', 0);
this.levelCountMap.set('level4', 0);
this.levelCountMap.set("level2", 0);
this.levelCountMap.set("level3", 0);
this.levelCountMap.set("level4", 0);
}
/**
@ -794,7 +834,7 @@ export class X6Graph {
*/
private getGraph(): Graph {
if (!this.graph) {
throw new Error('请先调用 init() 初始化画布');
throw new Error("请先调用 init() 初始化画布");
}
return this.graph;
}