javascript
复制代码
import { Graph } from "@antv/x6";
const groupMock = {
groups: {
top: {
position: "top",
attrs: {
circle: {
magnet: true,
stroke: "#8f8f8f",
r: 1,
style: {
visibility: "hidden",
},
},
},
},
left: {
position: "left",
attrs: {
circle: {
magnet: true,
stroke: "#8f8f8f",
r: 1,
style: {
visibility: "hidden",
},
},
},
},
right: {
position: "right",
attrs: {
circle: {
magnet: true,
stroke: "#8f8f8f",
r: 1,
style: {
visibility: "hidden",
},
},
},
},
bottom: {
position: "bottom",
attrs: {
circle: {
magnet: true,
stroke: "#8f8f8f",
r: 1,
style: {
visibility: "hidden",
},
},
},
},
bottomR: {
position: {
name: "absolute",
args: { x: 70, y: 50 },
},
attrs: {
circle: {
magnet: true,
stroke: "#8f8f8f",
r: 1,
style: {
visibility: "hidden",
},
},
},
},
},
};
export const antvX6TypeConfig = (width, headerWidth) => {
Graph.registerNode(
"lane-contanier",
{
inherit: "rect",
markup: [
{
tagName: "rect",
selector: "body",
},
{
tagName: "rect",
selector: "name-rect",
},
{
tagName: "text",
selector: "name-text",
},
],
attrs: {
body: {
fill: "#FFF",
stroke: "#5F95FF",
strokeWidth: 1,
},
"name-rect": {
width: headerWidth,
height: 40,
fill: "#5F95FF",
stroke: "#fff",
strokeWidth: 1,
x: -1,
},
"name-text": {
ref: "name-rect",
refY: 0.5,
refX: 0.5,
textAnchor: "middle",
fontWeight: "bold",
fill: "#fff",
fontSize: 18,
},
},
},
true
);
Graph.registerNode(
"lane",
{
inherit: "rect",
markup: [
{
tagName: "rect",
selector: "body",
},
{
tagName: "rect",
selector: "name-rect",
},
{
tagName: "text",
selector: "name-text",
},
],
attrs: {
body: {
fill: "#FFF",
stroke: "#5F95FF",
strokeWidth: 1,
},
"name-rect": {
width: width,
height: 40,
fill: "#5F95FF",
stroke: "#fff",
strokeWidth: 1,
x: -1,
},
"name-text": {
ref: "name-rect",
refY: 0.5,
refX: 0.5,
textAnchor: "middle",
fontWeight: "bold",
fill: "#fff",
fontSize: 18,
},
},
},
true
);
Graph.registerNode(
"lane-rect",
{
inherit: "rect",
width: 100,
height: 60,
attrs: {
body: {
strokeWidth: 1,
stroke: "#5F95FF",
fill: "#EFF4FF",
},
text: {
fontSize: 18,
fill: "#262626",
},
},
ports: {
...groupMock,
items: [
{ id: "top-1", group: "top" },
{ id: "left-1", group: "left" },
{ id: "right-1", group: "right" },
{ id: "bottom-1", group: "bottom" },
{ id: "bottom-1R", group: "bottomR" },
],
},
},
true
);
Graph.registerNode(
"lane-polygon",
{
inherit: "polygon",
width: 80,
height: 80,
attrs: {
body: {
strokeWidth: 1,
stroke: "#5F95FF",
fill: "#EFF4FF",
refPoints: "0,10 10,0 20,10 10,20",
},
text: {
fontSize: 18,
fill: "#262626",
},
},
ports: {
...groupMock,
items: [
{ id: "top-2", group: "top" },
{ id: "left-2", group: "left" },
{ id: "right-2", group: "right" },
{ id: "bottom-2", group: "bottom" },
],
},
},
true
);
Graph.registerEdge(
"lane-edge",
{
inherit: "edge",
attrs: {
line: {
stroke: "#8A9EB8",
strokeWidth: 2,
},
},
label: {
attrs: {
label: {
fill: "#8A9EB8",
fontSize: 18,
},
},
},
},
true
);
Graph.registerEdge(
"lane-edge-revoke",
{
inherit: "edge",
attrs: {
line: {
stroke: "#E96F0C",
strokeWidth: 2,
},
},
label: {
attrs: {
label: {
fill: "#E96F0C",
fontSize: 18,
},
},
},
},
true
);
}
// 盒子 - 流程已经过
const success_box = {
attrs: {
body: {
fill: "#5cbf77",
stroke: "#5cbf77",
strokeWidth: 1
},
text: {
fill: "#262626",
lineHeight: 24,
fontSize: 18,
}
}
}
// 盒子 - 未经过
const never_passed_box = {
attrs: {
body: {
fill: "#f56c6c",
stroke: "#f56c6c",
strokeWidth: 1
},
text: {
fill: "#262626",
lineHeight: 24,
fontSize: 18,
}
}
}
// 盒子 - 流程到达
const success_box_active = {
attrs: {
body: {
fill: "#ffc000",
stroke: "#ffc000",
strokeWidth: 1
},
text: {
fill: "#262626",
lineHeight: 24,
fontSize: 18,
}
}
}
// 盒子 - 跳过
const success_box_skip = {
attrs: {
body: {
fill: "#bfbfbf",
stroke: "#bfbfbf",
strokeWidth: 1
},
text: {
fill: "#262626",
lineHeight: 24,
fontSize: 18,
}
}
}
// 线条 - 流程已经过 - 是
const success_line = {
labels: [{
position: 0.5, // 沿路径50%位置
attrs: {
text: {
text: "是",
fill: "#5cbf77",
stroke: "#5cbf77",
fontSize: 18,
}
}
}],
attrs: {
line: {
stroke: "#5cbf77",
strokeWidth: 2
}
},
label: {
attrs: {
label: {
text: "是",
fill: "#5cbf77",
fontSize: 18,
},
},
},
}
// 线条 - 流程未经过 - 是
const never_passed_line = {
labels: [{
position: 0.5, // 沿路径50%位置
attrs: {
text: {
text: "是",
fill: "#f56c6c",
stroke: "#f56c6c",
fontSize: 18,
}
}
}],
attrs: {
line: {
stroke: "#f56c6c",
strokeWidth: 2
}
},
label: {
attrs: {
label: {
text: "是",
fill: "#f56c6c",
fontSize: 18,
},
},
},
}
// 线条 - 流程跳过 - 是
const success_line_skip = {
labels: [{
position: 0.5, // 沿路径50%位置
attrs: {
text: {
text: "是",
fill: "#bfbfbf",
stroke: "#bfbfbf",
fontSize: 18,
}
}
}],
attrs: {
line: {
stroke: "#bfbfbf",
strokeWidth: 2
}
},
label: {
attrs: {
label: {
text: "是",
fill: "#bfbfbf",
fontSize: 18,
},
},
},
}
// 线条 - 流程跳过 - 否
const success_line_skip_no = {
labels: [{
position: 0.5, // 沿路径50%位置
attrs: {
text: {
text: "否",
fill: "#bfbfbf",
stroke: "#bfbfbf",
fontSize: 18,
}
}
}],
attrs: {
line: {
stroke: "#bfbfbf",
strokeWidth: 2
}
},
label: {
attrs: {
label: {
text: "否",
fill: "#bfbfbf",
fontSize: 18,
},
},
},
}
// 线条 - 流程已经过-否字
const success_line_no = {
labels: [{
position: 0.5, // 沿路径50%位置
attrs: {
text: {
text: "否",
fill: "#5cbf77",
stroke: "#5cbf77",
fontSize: 18,
}
}
}],
attrs: {
line: {
stroke: "#5cbf77",
strokeWidth: 2
}
},
label: {
attrs: {
label: {
text: "否",
fill: "#5cbf77",
fontSize: 18,
},
},
},
}
// 线条 - 未经过-否字
const never_passed_line_no = {
labels: [{
position: 0.5, // 沿路径50%位置
attrs: {
text: {
text: "否",
fill: "#f56c6c",
stroke: "#f56c6c",
fontSize: 18,
}
}
}],
attrs: {
line: {
stroke: "#f56c6c",
strokeWidth: 2
}
},
label: {
attrs: {
label: {
text: "否",
fill: "#f56c6c",
fontSize: 18,
},
},
},
}
// 线条 - 流程已经过 - 无文字
const success_line_no_text = {
attrs: {
line: {
stroke: "#5cbf77",
strokeWidth: 2
}
},
}
// 线条 - 流程未经过 - 无文字
const never_passed_line_no_text = {
attrs: {
line: {
stroke: "#f56c6c",
strokeWidth: 2
}
},
}
// 线条 - 流程跳过 - 无文字
const success_line_skip_no_text = {
labels: [{
position: 0.5, // 沿路径50%位置
attrs: {
text: {
text: "",
fill: "#bfbfbf",
stroke: "#bfbfbf",
fontSize: 18,
}
}
}],
attrs: {
line: {
stroke: "#bfbfbf",
strokeWidth: 2
}
},
label: {
attrs: {
label: {
text: "",
fill: "#bfbfbf",
fontSize: 18,
},
},
},
}
export const dataMock = (node, flowLogRepVOS, width = 300, height = 800) => {
return [
{
id: "1",
shape: "lane",
width: width,
height: height,
position: {
x: 60,
y: 40,
},
label: "节点1",
}, {
id: "2",
shape: "lane",
width: width,
height: height,
position: {
x: 60 + width,
y: 40,
},
label: "节点2",
}, {
id: "3",
shape: "lane",
width: width,
height: height,
position: {
x: 60 + width * 2,
y: 40,
},
label: "节点3",
}, {
id: "4",
shape: "lane",
width: width,
height: height,
position: {
x: 60 + width * 3,
y: 40,
},
label: "节点4",
}, {
id: "5",
shape: "lane",
width: width,
height: height,
position: {
x: 60 + width * 4,
y: 40,
},
label: "节点5",
}, {
id: "6",
shape: "lane",
width: width,
height: height,
position: {
x: 60 + width * 5,
y: 40,
},
label: "节点6",
}, {
id: "7",
shape: "lane",
width: width,
height: height,
position: {
x: 60 + width * 6,
y: 40,
},
label: "节点7\n（审批）",
}, {
id: "8",
shape: "lane",
width: width,
height: height,
position: {
x: 60 + width * 7,
y: 40,
},
label: "节点8",
}, {
id: "9",
shape: "lane-rect",
width: 100,
height: 50,
position: {
x: 190,
y: 120,
},
label: "开始",
attrs: {
body: {
rx: 30,
ry: 20,
fill: "#5cbf77",
},
},
parent: "1",
}, {
id: "10", // 10
shape: "lane-rect",
width: 310,
height: 120,
position: {
x: 85,
y: 260
},
label: "提交",
...(node >= 10 && node < 20 ? success_box_active : node >= 20 ? success_box : never_passed_box),
}, {
id: "11", // 20
shape: "lane-rect",
width: 240,
height: 120,
position: {
x: 125 + width,
y: 260
},
label: "审批",
...(node >= 20 && node < 30 ? success_box_active : node >= 30 ? success_box : never_passed_box),
}, {
id: "12", // 20+
shape: "lane-polygon",
width: 240,
height: 80,
position: {
x: 125 + width,
y: 480
},
label: '审批是否通过',
...(node >= 30 ? success_box : never_passed_box),
}, {
id: "13", // 30
shape: "lane-rect",
width: 240,
height: 120,
position: {
x: 125 + width * 2,
y: 260
},
label: "审批",
...(node >= 30 && node < 40 ? success_box_active : node >= 40 ? success_box : never_passed_box),
}, {
id: "14", // 30+
shape: "lane-polygon",
width: 240,
height: 80,
position: {
x: 125 + width * 2,
y: 480
},
label: '审批是否通过',
...(node >= 40 ? success_box : never_passed_box),
}, {
id: "15", // 40
shape: "lane-rect",
width: 240,
height: 120,
position: {
x: 125 + width * 3,
y: 260
},
label: "审批",
...(node >= 40 && node < 50 ? success_box_active : node >= 50 ? success_box : never_passed_box),
}, {
id: "16", // 40+
shape: "lane-polygon",
width: 240,
height: 80,
position: {
x: 125 + width * 3,
y: 480
},
label: '审批是否通过',
...(node >= 50 ? success_box : never_passed_box),
}, {
id: "17", // 50
shape: "lane-rect",
width: 240,
height: 120,
position: {
x: 125 + width * 4,
y: 260
},
label: "审批",
...(node >= 50 && node < 60 ? success_box_active : node >= 60 ? success_box : never_passed_box),
}, {
id: "18", // 50+
shape: "lane-polygon",
width: 240,
height: 80,
position: {
x: 125 + width * 4,
y: 480
},
label: '审批是否通过',
...(node >= 60 ? success_box : never_passed_box),
}, {
id: "20", // 60
shape: "lane-rect",
width: 240,
height: 120,
position: {
x: 125 + width * 5,
y: 260
},
label: "审批",
...(node >= 60 && node < 70 ? success_box_active : node >= 70 && flowLogRepVOS.some(x => x.node > 59 && x.node < 70) ? success_box : node >= 70 && !flowLogRepVOS.some(x => x.node > 59 && x.node < 70) ? success_box_skip : never_passed_box),
}, {
id: "21", // 60+
shape: "lane-polygon",
width: 240,
height: 80,
position: {
x: 125 + width * 5,
y: 480
},
label: '审批是否通过',
...(node >= 70 && flowLogRepVOS.some(x => x.node > 59 && x.node < 70) ? success_box : node >= 70 && !flowLogRepVOS.some(x => x.node > 59 && x.node < 70) ? success_box_skip : never_passed_box),
}, {
id: "22", // 70
shape: "lane-rect",
width: 240,
height: 120,
position: {
x: 125 + width * 6,
y: 760
},
label: "抄送",
...(node >= 70 && node < 80 ? success_box_active : node >= 80 ? success_box : never_passed_box),
}, {
id: "23", // 80
shape: "lane-rect",
width: 240,
height: 120,
position: {
x: 125 + width * 7,
y: 760
},
label: "抄送",
...(node >= 80 && node < 90 ? success_box_active : node >= 90 ? success_box : never_passed_box),
}, {
id: "24",
shape: "lane-rect",
width: 100,
height: 50,
position: {
x: 195 + width * 7,
y: 960
},
label: "结束",
attrs: {
body: {
rx: 30,
ry: 20,
},
},
attrs: {
body: {
rx: 30,
ry: 20,
fill: node > 100 ? "#5cbf77" : '#f56c6c',
}
},
}, {
id: "25",
shape: "lane-edge",
source: { cell: "9", port: "bottom-2" },
target: { cell: "10", port: "top-1" },
...success_line_no_text,
}, {
id: "26",
shape: "lane-edge",
source: { cell: "10", port: "right-2" },
target: { cell: "11", port: "left-1" },
...(node >= 20 ? success_line_no_text : never_passed_line_no_text),
}, {
id: "27",
shape: "lane-edge",
source: { cell: "11", port: "bottom-2" },
target: { cell: "12", port: "top-1" },
...(node >= 30 ? success_line_no_text : never_passed_line_no_text),
}, {
id: "28",
shape: "lane-edge",
source: { cell: "12", port: "right-2" },
target: { cell: "13", port: "left-1" },
...(node >= 30 ? success_line : never_passed_line),
vertices: [{ x: 180 + width * 1.6, y: 500 }],
}, {
id: "29",
shape: "lane-edge",
source: { cell: "12", port: "bottom-2" },
target: { cell: "10", port: "bottom-1" },
label: "否",
vertices: [{ x: 200 + width * 1.1, y: 620 }],
}, {
id: "30",
shape: "lane-edge",
source: { cell: "13", port: "bottom-2" },
target: { cell: "14", port: "top-1" },
...(node >= 40 ? success_line_no_text : never_passed_line_no_text),
}, {
id: "31",
shape: "lane-edge",
source: { cell: "14", port: "right-2" },
target: { cell: "15", port: "left-1" },
...(node >= 40 ? success_line : never_passed_line),
vertices: [{ x: 180 + width * 2.6, y: 500 }],
}, {
id: "32",
shape: "lane-edge",
source: { cell: "14", port: "bottom-2" },
target: { cell: "10", port: "bottom-1" },
label: "否",
vertices: [{ x: 200 + width * 2.1, y: 620 }],
}, {
id: "33",
shape: "lane-edge",
source: { cell: "15", port: "bottom-2" },
target: { cell: "16", port: "top-1" },
...(node >= 50 ? success_line_no_text : never_passed_line_no_text),
}, {
id: "34",
shape: "lane-edge",
source: { cell: "16", port: "right-2" },
target: { cell: "17", port: "left-1" },
...(node >= 50 ? success_line : never_passed_line),
vertices: [{ x: 180 + width * 3.6, y: 500 }],
}, {
id: "35",
shape: "lane-edge",
source: { cell: "16", port: "bottom-2" },
target: { cell: "10", port: "bottom-1" },
label: "否",
vertices: [{ x: 200 + width * 2.1, y: 620 }],
}, {
id: "36",
shape: "lane-edge",
source: { cell: "17", port: "bottom-2" },
target: { cell: "18", port: "top-1" },
...(node >= 60 ? success_line_no_text : never_passed_line_no_text),
}, {
id: "37",
shape: "lane-edge",
source: { cell: "18", port: "bottom-2" },
target: { cell: "10", port: "bottom-1" },
label: "否",
vertices: [{ x: 200 + width * 4.1, y: 620 }],
}, {
id: "38",
shape: "lane-edge",
source: { cell: "18", port: "right-2" },
target: { cell: "20", port: "top-2" },
...(node >= 60 ? success_line : never_passed_line),
vertices: [{ x: 200 + width * 4.55, y: 500 }],
}, {
id: "40",
shape: "lane-edge",
source: { cell: "20", port: "bottom-2" },
target: { cell: "21", port: "top-1" },
...(node >= 70 ? success_line_no_text : never_passed_line_no_text),
}, {
id: "41",
shape: "lane-edge",
source: { cell: "21", port: "bottom-2" },
target: { cell: "10", port: "bottom-1" },
label: "否",
vertices: [{ x: 200 + width * 5.1, y: 620 }],
}, {
id: "43",
shape: "lane-edge",
source: { cell: "21", port: "right-2" },
target: { cell: "22", port: "left-1" },
...(node >= 70 ? success_line : never_passed_line),
vertices: [{ x: 200 + width * 5.5, y: 820 }],
}, {
id: "44",
shape: "lane-edge",
source: { cell: "22", port: "right-2" },
target: { cell: "23", port: "left-1" },
...(node >= 80 ? success_line_no_text : never_passed_line_no_text),
}, {
id: "45",
shape: "lane-edge",
source: { cell: "23", port: "bottom-2" },
target: { cell: "24", port: "top-1" },
...(node >= 100 ? success_line_no_text : never_passed_line_no_text),
},
]
}
