84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
|
// 根据状态获取颜色
|
|||
|
|
export const getStatusColor = (status, type, thisFlow) => {
|
|||
|
|
// 如果data.thisFlow和flowItem的type相等，则显示红色
|
|||
|
|
if (thisFlow && type === thisFlow) {
|
|||
|
|
return "#ff4d4f"; // 红色（正在审核）
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据状态设置颜色
|
|||
|
|
switch (status) {
|
|||
|
|
case 0: return "#1890ff"; // 蓝色
|
|||
|
|
case 1: return "#52c41a"; // 绿色
|
|||
|
|
case 2: return "#52c41a"; // 绿色
|
|||
|
|
default: return "#1890ff";
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取节点标签
|
|||
|
|
export const getNodeLabel = (flowItem) => {
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: "10px", textAlign: "center" }}>
|
|||
|
|
<div style={{ fontSize: "16px" }}>{flowItem.flowList[0]}</div>
|
|||
|
|
{flowItem.flowList.slice(1).map((item, index) => (
|
|||
|
|
<div key={index} style={{ fontSize: "16px", marginTop: "5px" }}>{item}</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const getFlowData = (list, thisFlow) => {
|
|||
|
|
const nodes = [];
|
|||
|
|
const edges = [];
|
|||
|
|
|
|||
|
|
// 计算节点位置以居中显示
|
|||
|
|
const nodeWidth = 300;
|
|||
|
|
const nodeHeight = 200;
|
|||
|
|
const horizontalSpacing = 350;
|
|||
|
|
const verticalPosition = 100;
|
|||
|
|
|
|||
|
|
// 创建节点
|
|||
|
|
list.forEach((flowItem, index) => {
|
|||
|
|
nodes.push({
|
|||
|
|
id: `node-${index}`,
|
|||
|
|
data: {
|
|||
|
|
label: getNodeLabel(flowItem),
|
|||
|
|
status: flowItem.status,
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
background: getStatusColor(flowItem.status, flowItem.type, thisFlow),
|
|||
|
|
color: "white",
|
|||
|
|
borderColor: getStatusColor(flowItem.status, flowItem.type, thisFlow),
|
|||
|
|
width: nodeWidth,
|
|||
|
|
minHeight: nodeHeight,
|
|||
|
|
padding: "10px",
|
|||
|
|
borderRadius: 5,
|
|||
|
|
wordBreak: "break-word",
|
|||
|
|
whiteSpace: "normal",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
position: { x: index * horizontalSpacing, y: verticalPosition },
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 创建连接线
|
|||
|
|
for (let i = 0; i < list.length - 1; i++) {
|
|||
|
|
edges.push({
|
|||
|
|
id: `edge-${i}`,
|
|||
|
|
source: `node-${i}`,
|
|||
|
|
target: `node-${i + 1}`,
|
|||
|
|
type: "smoothstep",
|
|||
|
|
animated: true,
|
|||
|
|
style: { stroke: "#1890ff", strokeWidth: 2 },
|
|||
|
|
markerEnd: {
|
|||
|
|
type: "arrowclosed",
|
|||
|
|
color: "#1890ff",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return { nodes, edges };
|
|||
|
|
};
|