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 };
|
||
};
|