From 566d594fef21dd18f294574b6ab7d0f441fd257d Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Fri, 27 Mar 2026 17:33:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=81=AB=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/eightwork/index.js                    |  12 ++
 src/enumerate/constant/index.js               |   3 +-
 .../Enterprise/HotWork/Homework/List/index.js |  61 ++----
 .../Enterprise/HotWork/Homework/View/index.js | 137 ++++++-------
 src/utils/flow.js                             | 193 ++++++++++--------
 5 files changed, 213 insertions(+), 193 deletions(-)

diff --git a/src/api/eightwork/index.js b/src/api/eightwork/index.js
index 9bfbb6e..bf54efa 100644
--- a/src/api/eightwork/index.js
+++ b/src/api/eightwork/index.js
@@ -8,6 +8,18 @@ export const eightworkInfo = declareRequest(
   "eightworkLoading",
   `Get > /eightwork/eightworkInfo/{id}`,
 );
+export const eightworkSupplementaryInfo = declareRequest(
+  "eightworkLoading",
+  `Post > @/eightwork/eightworkSupplementaryInfo/list`,
+);
+export const eightworkMeasuresLogs = declareRequest(
+  "eightworkLoading",
+  `Get > /eightwork/measuresLogs/listAll/{workId}`,
+);
+export const eightworkTaskLogFlowChart = declareRequest(
+  "eightworkLoading",
+  `Get > /eightwork/taskLog/flowChart/{workId}`,
+);
 export const eightworkType = declareRequest(
   "eightworkLoading",
   `Post > @/eightwork/eightworkTask/listByWorkType`,
diff --git a/src/enumerate/constant/index.js b/src/enumerate/constant/index.js
index 0ec0b80..ddd4dae 100644
--- a/src/enumerate/constant/index.js
+++ b/src/enumerate/constant/index.js
@@ -16,10 +16,11 @@ export {};
 export const STATUS_ENUM = [
   { name: "未开始", bianma: "0" },
   { name: "进行中", bianma: "1" },
+  { name: "打回", bianma: "2" },
   { name: "强制归档", bianma: "998" },
   { name: "归档", bianma: "999" },
 ];
 export const WORK_TYPE_ENUM = [
   { name: "相关方", bianma: "1" },
-  { name: "内部", bianma: "998" },
+  { name: "内部", bianma: "2" },
 ];
diff --git a/src/pages/Container/Enterprise/HotWork/Homework/List/index.js b/src/pages/Container/Enterprise/HotWork/Homework/List/index.js
index 7b10d99..eba1c69 100644
--- a/src/pages/Container/Enterprise/HotWork/Homework/List/index.js
+++ b/src/pages/Container/Enterprise/HotWork/Homework/List/index.js
@@ -89,14 +89,22 @@ function List(props) {
             dataIndex: "xgfFlag",
             render: (_, record) => getLabelName({ list: WORK_TYPE_ENUM, status: record.xgfFlag }),
           },
-          { title: "动火等级", dataIndex: "workLevel" },
-          { title: "申请人", dataIndex: "createName" },
-          { title: "申请单位", dataIndex: "todo" },
-          { title: "申请时间", dataIndex: "createTime" },
-          { title: "作业人", dataIndex: "todo" },
-          { title: "作业单位", dataIndex: "todo" },
-          { title: "作业时间", dataIndex: "todo" },
-          { title: "作业内容", dataIndex: "todo" },
+          {
+            title: "动火等级",
+            dataIndex: "workLevel",
+            render: (_, record) => getLabelName({ list: eightworkType, status: record.workLevel, idKey: "workLevel", nameKey: "taskName" }),
+          },
+          { title: "申请人", dataIndex: ["info", "applyUser"] },
+          { title: "申请单位", dataIndex: ["info", "applyUnit"] },
+          { title: "申请时间", dataIndex: ["info", "applyTime"] },
+          // { title: "作业人", dataIndex: ["info", "step_1", "actUserName"] },
+          // { title: "作业单位", dataIndex: ["info", "step_1", "actUserDepartmentName"] },
+          {
+            title: "作业时间",
+            dataIndex: ["info", "workStartTime"],
+            render: (_, record) => `${record.info.workStartTime}至${record.info.workEndTime}`,
+          },
+          { title: "作业内容", dataIndex: ["info", "workContent"] },
           {
             title: "审核状态",
             dataIndex: "status",
@@ -112,7 +120,7 @@ function List(props) {
                 <Button
                   type="link"
                   onClick={() => {
-                    setCurrentId(record.id);
+                    setCurrentId(record.workId);
                     setFlowModalOpen(true);
                   }}
                 >
@@ -121,12 +129,12 @@ function List(props) {
                 <Button
                   type="link"
                   onClick={() => {
-                    props.history.push(`./view?id=${record.id}`);
+                    props.history.push(`./view?id=${record.id}&workId=${record.workId}`);
                   }}
                 >
                   审批表详情
                 </Button>
-                {(!props.status && !props.entrance) && (
+                {(!props.status && !props.entrance && ![998, 999].includes(record.status)) && (
                   <Button
                     type="link"
                     danger
@@ -211,35 +219,8 @@ function FlowModalComponent(props) {
   const [flowEdges, setFlowEdges] = useState([]);
 
   const getData = async () => {
-    // 模拟分叉流程数据
-    // 主线流程：申请人提报 → 部门审批 → 安全部门审批 → 审批通过
-    // 分支流程：从"部门审批"分出"值班领导审批"，分支结束后汇入"安全部门审批"
-    const data = {
-      flowCOList: [
-        // 节点0：申请人提报
-        { status: 1, flowList: ["申请人提报", "张三", "2024-01-15 09:30"] },
-        // 节点1：部门审批（从这里开始分叉）
-        {
-          status: 2,
-          type: 1,
-          flowList: ["部门审批", "李四"],
-          branches: [
-            {
-              status: 2,
-              flowList: ["值班领导审批", "赵六"],
-              mergeIndex: 2, // 分支结束后汇入到节点2（安全部门审批）
-            },
-          ],
-        },
-        // 节点2：安全部门审批（分支汇入点）
-        { status: 2, flowList: ["安全部门审批", "王五"] },
-        // 节点3：审批通过
-        { status: 2, flowList: ["审批通过", "系统"] },
-      ],
-      thisFlow: 1,
-    };
-
-    const { nodes, edges } = getFlowData(data.flowCOList, data.thisFlow);
+    const { data } = await props["eightworkTaskLogFlowChart"]({ workId: props.id });
+    const { nodes, edges } = getFlowData(data);
     setFlowNodes(nodes);
     setFlowEdges(edges);
   };
diff --git a/src/pages/Container/Enterprise/HotWork/Homework/View/index.js b/src/pages/Container/Enterprise/HotWork/Homework/View/index.js
index 4620fd1..e476f1f 100644
--- a/src/pages/Container/Enterprise/HotWork/Homework/View/index.js
+++ b/src/pages/Container/Enterprise/HotWork/Homework/View/index.js
@@ -1,9 +1,10 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { Button, Divider, Image } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { useReactToPrint } from "react-to-print";
 import Page from "zy-react-library/components/Page";
 import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
+import { getFileUrl } from "zy-react-library/utils";
 import { NS_EIGHTWORK } from "~/enumerate/namespace";
 import "./index.less";
 
@@ -27,31 +28,21 @@ function View(props) {
   });
 
   const [info, setInfo] = useState({});
-  const [safetyMeasures, setSafetyMeasures] = useState([
-    { content: "动火操作人（焊工）、参与人（电工）及其他特种作业人员须持有效证书方可作业；动火相关设备、必须符合国家、行业标准；", status: "1" },
-    { content: "在动火部位配备2具以上适合现场灭火的相应介质合格灭火器 及(1)桶水", status: "1" },
-    { content: "动火前须设置警戒线，清理现场易燃物，对无法清理的要用水浇湿或进行有效隔离，对于有油污等易燃物或狭窄危险部位须铺垫方防火石棉布；", status: "1" },
-    { content: "动火前，现场管辖单位人员须检查确认动火安全措施落实到位；", status: "1" },
-    { content: "动火中，现场人员须严格遵守消防相关规章制度和操作规程；", status: "1" },
-    { content: "动火中，监火人不得离开动火现场；", status: "1" },
-    { content: "动火中，发现事故隐患须立即停止动火，待事故隐患排除后方可继续动火；", status: "0" },
-    { content: "动火结束，现场管辖单位人员与动火现场负责人共同对动火现场检查，确认现场清理完毕，无遗留火种，有延时监火要求的，现场管辖单位指定人员延时监火。", status: "1" },
-  ]);
-  const [otherSafetyMeasures, setOtherSafetyMeasures] = useState([
-    { content: "监火人不得离开动火现场；", preparedBy: "张三" },
-    { content: "动火前，现场管辖单位人员须检查确认动火安全措施落实到位；", preparedBy: "张三" },
-    { content: "动火中，现场人员须严格遵守消防相关规章制度和操作规程；", preparedBy: "张三" },
-  ]);
-  const [delayedFireMonitoringRecord, setDelayedFireMonitoringRecord] = useState([
-    { time: "2023-04-01 10:00:00", monitor: "张三", signature: "https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" },
-    { time: "2023-04-01 10:00:00", monitor: "张三", signature: "https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" },
-    { time: "2023-04-01 10:00:00", monitor: "张三", signature: "https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" },
-    { time: "2023-04-01 10:00:00", monitor: "张三", signature: "https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" },
-  ]);
+  const [safetyMeasures, setSafetyMeasures] = useState([]);
+  const [otherSafetyMeasures, setOtherSafetyMeasures] = useState([]);
+  const [delayedFireMonitoringRecord, setDelayedFireMonitoringRecord] = useState([]);
+  const [gasFireMonitoringRecord, setGasFireMonitoringRecord] = useState([]);
 
   const getData = async () => {
-    const { data } = await props["eightworkInfo"]({ id: query.id });
-    setInfo(data);
+    const { data: basicInfo } = await props["eightworkInfo"]({ id: query.id });
+    setInfo(basicInfo);
+    const { data: supplementaryInfo } = await props["eightworkSupplementaryInfo"]({ eqWorkId: query.workId, pageSize: 999, pageIndex: 1 });
+    setDelayedFireMonitoringRecord(supplementaryInfo.filter(item => item.type === "delay"));
+    setGasFireMonitoringRecord(supplementaryInfo.filter(item => item.type === "gas"));
+    const { data: measuresLogs } = await props["eightworkMeasuresLogs"]({ workId: query.workId });
+    console.log(measuresLogs);
+    setSafetyMeasures(measuresLogs.filter(item => item.type === 1));
+    setOtherSafetyMeasures(measuresLogs.filter(item => item.type === 2));
   };
 
   useEffect(() => {
@@ -77,7 +68,7 @@ function View(props) {
             <tr>
               <td colSpan={4} style={{ border: "none" }}>
                 <span>编号：</span>
-                <span>{info.xx}</span>
+                <span>{info.checkNo}</span>
               </td>
             </tr>
           </thead>
@@ -90,51 +81,59 @@ function View(props) {
             )}
             <tr>
               <td className="title">申请单位</td>
-              <td>{info.xx}</td>
+              <td>{info?.info?.applyUnit}</td>
               <td className="title">申请时间</td>
-              <td>{info.xx}</td>
+              <td>{info?.info?.applyTime}</td>
             </tr>
             <tr>
               <td className="title">动火部位</td>
-              <td>{info.xx}</td>
+              <td>{info?.info?.work_place}</td>
               <td className="title">动火方法</td>
-              <td>{info.xx}</td>
+              <td>{info?.info?.work_way}</td>
             </tr>
             <tr>
               <td className="title">动火等级</td>
-              <td>{info.xx}</td>
+              <td>{info?.info?.workLevelName}</td>
               <td className="title">作业内容</td>
-              <td>{info.xx}</td>
+              <td>{info?.info?.workContent}</td>
             </tr>
             <tr>
               <td className="title">动火时间</td>
-              <td colSpan={3}>{info.xx}</td>
+              <td colSpan={3}>{`${info?.info?.workStartTime} - ${info?.info?.workEndTime}`}</td>
             </tr>
             <tr>
-              <td className="title">现场管辖人</td>
-              <td>{info.xx}</td>
+              <td className="title">现场负责人</td>
+              <td>{info?.info?.step_10?.actUserName}</td>
               <td className="title">动火操作人</td>
-              <td>{info.xx}</td>
+              <td>{info?.info?.hotWorkActUser?.map(item => item.name).join(", ")}</td>
             </tr>
             <tr>
               <td className="title">动火监火人</td>
-              <td colSpan={3}>{info.xx}</td>
-            </tr>
-            <tr>
-              <td className="title center" colSpan={4}>可燃气体分析（运行的生产装置、罐区和具有火灾爆炸危险场所）</td>
-            </tr>
-            <tr>
-              <td className="title">分析时间</td>
-              <td>{info.xx}</td>
-              <td className="title">分析点</td>
-              <td>{info.xx}</td>
-            </tr>
-            <tr>
-              <td className="title">可燃气体检测结果</td>
-              <td>{info.xx}</td>
-              <td className="title">分析人</td>
-              <td>{info.xx}</td>
+              <td colSpan={3}>{info?.info?.workMonitor}</td>
             </tr>
+            {gasFireMonitoringRecord.length > 0 && (
+              <tr>
+                <td className="title center" colSpan={4}>可燃气体分析（运行的生产装置、罐区和具有火灾爆炸危险场所）</td>
+              </tr>
+            )}
+            {
+              gasFireMonitoringRecord.map(item => (
+                <Fragment key={item.id}>
+                  <tr>
+                    <td className="title">分析时间</td>
+                    <td>{item?.details?.analysisTime}</td>
+                    <td className="title">分析点</td>
+                    <td>{item?.details?.analysisPointName}</td>
+                  </tr>
+                  <tr>
+                    <td className="title">可燃气体检测结果</td>
+                    <td>{item?.details?.analysisResult}</td>
+                    <td className="title">分析人</td>
+                    <td>{item?.details?.analysisUserName}</td>
+                  </tr>
+                </Fragment>
+              ))
+            }
             <tr>
               <td className="title center" colSpan={4}>动火要求安全措施安全提示</td>
             </tr>
@@ -152,9 +151,9 @@ function View(props) {
                       <tr key={index}>
                         <td className="center">{index + 1}</td>
                         <td>{item.content}</td>
-                        <td className="center">{item.status === "1" ? "是" : "否"}</td>
+                        <td className="center">符合</td>
                         <td className="center">
-                          <Image src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width={50} height={50} />
+                          {item.signPath && <Image src={getFileUrl() + item.signPath} width={50} height={50} />}
                         </td>
                       </tr>
                     ))}
@@ -170,7 +169,7 @@ function View(props) {
                               </div>
                               <div>
                                 <span>编制人：</span>
-                                <span>{item.preparedBy}</span>
+                                <span>{item.createName}</span>
                               </div>
                             </div>
                           ))
@@ -185,48 +184,48 @@ function View(props) {
               <td className="title">动火单位(部门)负责人意见</td>
               <td className="right">
                 <div>
-                  <Image src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width={50} height={50} />
+                  {info?.info?.step_4?.signPath && <Image src={getFileUrl() + info?.info?.step_4?.signPath} width={50} height={50} />}
                 </div>
-                <div>{info.xx}</div>
+                <div>{info?.info?.step_4?.signTime}</div>
               </td>
               <td className="title">项目发包单位(部门)人员意见</td>
               <td className="right">
                 <div>
-                  <Image src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width={50} height={50} />
+                  {info?.info?.step_5?.signPath && <Image src={getFileUrl() + info?.info?.step_5?.signPath} width={50} height={50} />}
                 </div>
-                <div>{info.xx}</div>
+                <div>{info?.info?.step_5?.signTime}</div>
               </td>
             </tr>
             <tr>
               <td className="title">现场管辖单位(部门)负责人意见</td>
               <td className="right">
                 <div>
-                  <Image src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width={50} height={50} />
+                  {info?.info?.step_6?.signPath && <Image src={getFileUrl() + info?.info?.step_6?.signPath} width={50} height={50} />}
                 </div>
-                <div>{info.xx}</div>
+                <div>{info?.info?.step_6?.signTime}</div>
               </td>
               <td className="title">动火许可证签发单位意见</td>
               <td className="right">
                 <div>
-                  <Image src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width={50} height={50} />
+                  {info?.info?.step_7?.signPath && <Image src={getFileUrl() + info?.info?.step_7?.signPath} width={50} height={50} />}
                 </div>
-                <div>{info.xx}</div>
+                <div>{info?.info?.step_7?.signTime}</div>
               </td>
             </tr>
             <tr>
               <td className="title">动火前管辖单位现场人员许可</td>
               <td className="right">
                 <div>
-                  <Image src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width={50} height={50} />
+                  {info?.info?.step_9?.signPath && <Image src={getFileUrl() + info?.info?.step_9?.signPath} width={50} height={50} />}
                 </div>
-                <div>{info.xx}</div>
+                <div>{info?.info?.step_9?.signTime}</div>
               </td>
               <td className="title">动火后管辖单位现场人员验收</td>
               <td className="right">
                 <div>
-                  <Image src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width={50} height={50} />
+                  {info?.info?.step_11?.signPath && <Image src={getFileUrl() + info?.info?.step_11?.signPath} width={50} height={50} />}
                 </div>
-                <div>{info.xx}</div>
+                <div>{info?.info?.step_11?.signTime}</div>
               </td>
             </tr>
             <tr>
@@ -243,10 +242,10 @@ function View(props) {
                     </tr>
                     {delayedFireMonitoringRecord.map((item, index) => (
                       <tr key={index}>
-                        <td className="center">{item.monitor}</td>
-                        <td className="center">{item.time}</td>
+                        <td className="center">{item?.details?.actUserName}</td>
+                        <td className="center">{item?.details?.delayHotTime}</td>
                         <td className="center">
-                          <Image src={item.signature} width={50} height={50} />
+                          {item?.details?.delayHotPhoto && <Image src={getFileUrl() + item?.details?.delayHotPhoto} width={50} height={50} />}
                         </td>
                       </tr>
                     ))}
diff --git a/src/utils/flow.js b/src/utils/flow.js
index 6d40cf1..89464f7 100644
--- a/src/utils/flow.js
+++ b/src/utils/flow.js
@@ -1,12 +1,12 @@
 // 根据状态获取颜色
-export const getStatusColor = (status, type, thisFlow) => {
+export const getStatusColor = (status) => {
   // 进行中节点（当前待审批节点）显示红色
-  if (thisFlow && type === thisFlow) {
+  if (status === 0) {
     return "#ff4d4f"; // 红色（进行中）
   }
 
   // 已完成节点显示绿色
-  if (status === 1) {
+  if (status === 1 || status === 2) {
     return "#52c41a"; // 绿色（已完成）
   }
 
@@ -18,15 +18,14 @@ export const getStatusColor = (status, type, thisFlow) => {
 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 style={{ fontSize: "16px" }}>{flowItem.stepName}</div>
+      <div style={{ fontSize: "16px" }}>{flowItem.actUserName}</div>
+      <div style={{ fontSize: "16px" }}>{flowItem.updateTime}</div>
     </div>
   );
 };
 
-export const getFlowData = (list, thisFlow) => {
+export const getFlowData = (list) => {
   const nodes = [];
   const edges = [];
 
@@ -36,8 +35,11 @@ export const getFlowData = (list, thisFlow) => {
   const horizontalSpacing = 350;
   const verticalSpacing = 300;
 
-  // 收集分支信息
-  const branchInfos = [];
+  // 创建 stepId 到 index 的映射
+  const stepIdToIndex = {};
+  list.forEach((item, index) => {
+    stepIdToIndex[item.stepId] = index;
+  });
 
   // 第一遍：创建主线节点
   list.forEach((flowItem, index) => {
@@ -50,9 +52,9 @@ export const getFlowData = (list, thisFlow) => {
         status: flowItem.status,
       },
       style: {
-        background: getStatusColor(flowItem.status, flowItem.type, thisFlow),
+        background: getStatusColor(flowItem.status),
         color: "white",
-        borderColor: getStatusColor(flowItem.status, flowItem.type, thisFlow),
+        borderColor: getStatusColor(flowItem.status),
         width: nodeWidth,
         minHeight: nodeHeight,
         padding: "10px",
@@ -67,27 +69,20 @@ export const getFlowData = (list, thisFlow) => {
       position: { x: index * horizontalSpacing, y: 100 },
     });
 
-    // 记录分支信息
-    if (flowItem.branches && flowItem.branches.length > 0) {
-      flowItem.branches.forEach((branch, branchIdx) => {
-        branchInfos.push({
-          startIndex: index,
-          branchIndex: branchIdx,
-          branch,
-          mergeIndex: branch.mergeIndex,
-        });
-      });
-    }
+    // 创建主线边（只有当没有分支汇入时才连接到下一个节点）
+    // 如果当前节点的分支会汇入到下一个节点，则不画主线边
+    const hasBranchMergingToNext = flowItem.branches?.some(
+      branch => branch.mergeStepId === list[index + 1]?.stepId,
+    );
 
-    // 创建主线边
-    if (index < list.length - 1) {
+    if (index < list.length - 1 && !hasBranchMergingToNext) {
       edges.push({
         id: `edge-main-${index}`,
         source: `node-${index}`,
         target: `node-${index + 1}`,
         type: "smoothstep",
         animated: true,
-        style: { stroke: "#1890ff", strokeWidth: 2 },
+        style: { stroke: "#1890ff", strokeWidth: 3 },
         markerEnd: {
           type: "arrowclosed",
           color: "#1890ff",
@@ -97,67 +92,99 @@ export const getFlowData = (list, thisFlow) => {
   });
 
   // 第二遍：创建分支节点
-  branchInfos.forEach((info) => {
-    const { startIndex, branchIndex, branch, mergeIndex } = info;
-    const branchNodeId = `branch-${startIndex}-${branchIndex}`;
+  list.forEach((flowItem, index) => {
+    if (flowItem.branches && flowItem.branches.length > 0) {
+      const branches = flowItem.branches;
+      const branchCount = branches.length;
 
-    // 计算分支节点位置：在分叉节点和汇入节点中间，下方
-    const startX = startIndex * horizontalSpacing;
-    const mergeX = mergeIndex * horizontalSpacing;
-    const branchX = (startX + mergeX) / 2;
-    const branchY = 100 + verticalSpacing;
+      // 根据 mergeStepId 找到汇入节点的索引
+      let mergeIndex = -1;
+      if (branches[branchCount - 1].mergeStepId && stepIdToIndex[branches[branchCount - 1].mergeStepId] !== undefined) {
+        mergeIndex = stepIdToIndex[branches[branchCount - 1].mergeStepId];
+      }
 
-    nodes.push({
-      id: branchNodeId,
-      data: {
-        label: getNodeLabel(branch),
-        status: branch.status,
-      },
-      style: {
-        background: getStatusColor(branch.status, branch.type, thisFlow),
-        color: "white",
-        borderColor: getStatusColor(branch.status, branch.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: branchX, y: branchY },
-    });
+      // 计算分支节点位置：横向排列在主线下方
+      const startX = index * horizontalSpacing;
+      const totalBranchWidth = (branchCount - 1) * horizontalSpacing;
+      const branchStartX = startX - totalBranchWidth / 2;
+      const branchY = 100 + verticalSpacing;
 
-    // 从分叉节点连接到分支节点
-    edges.push({
-      id: `edge-branch-start-${startIndex}-${branchIndex}`,
-      source: `node-${startIndex}`,
-      target: branchNodeId,
-      type: "smoothstep",
-      animated: true,
-      style: { stroke: "#fa8c16", strokeWidth: 2 },
-      markerEnd: {
-        type: "arrowclosed",
-        color: "#fa8c16",
-      },
-    });
+      branches.forEach((branch, branchIdx) => {
+        const branchNodeId = `branch-${index}-${branchIdx}`;
+        const branchX = branchStartX + branchIdx * horizontalSpacing;
 
-    // 从分支节点连接到汇入节点
-    if (mergeIndex !== undefined && mergeIndex < list.length) {
-      edges.push({
-        id: `edge-branch-end-${startIndex}-${branchIndex}`,
-        source: branchNodeId,
-        target: `node-${mergeIndex}`,
-        type: "smoothstep",
-        animated: true,
-        style: { stroke: "#52c41a", strokeWidth: 2 },
-        markerEnd: {
-          type: "arrowclosed",
-          color: "#52c41a",
-        },
+        nodes.push({
+          id: branchNodeId,
+          data: {
+            label: getNodeLabel(branch),
+            status: branch.status,
+          },
+          style: {
+            background: getStatusColor(branch.status),
+            color: "white",
+            borderColor: getStatusColor(branch.status),
+            width: nodeWidth,
+            minHeight: nodeHeight,
+            padding: "10px",
+            borderRadius: 5,
+            wordBreak: "break-word",
+            whiteSpace: "normal",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+          },
+          position: { x: branchX, y: branchY },
+        });
+
+        // 从主节点连接到第一个分支节点
+        if (branchIdx === 0) {
+          edges.push({
+            id: `edge-branch-start-${index}`,
+            source: `node-${index}`,
+            target: branchNodeId,
+            type: "smoothstep",
+            animated: true,
+            style: { stroke: "#c41a1a", strokeWidth: 3 },
+            markerEnd: {
+              type: "arrowclosed",
+              color: "#c41a1a",
+            },
+          });
+        }
+
+        // 分支节点之间相互连接
+        if (branchIdx > 0) {
+          const prevBranchNodeId = `branch-${index}-${branchIdx - 1}`;
+          edges.push({
+            id: `edge-branch-connection-${index}-${branchIdx}`,
+            source: prevBranchNodeId,
+            target: branchNodeId,
+            type: "smoothstep",
+            animated: true,
+            style: { stroke: "#c41a1a", strokeWidth: 3 },
+            markerEnd: {
+              type: "arrowclosed",
+              color: "#c41a1a",
+            },
+          });
+        }
+
+        // 从最后一个分支节点连接到汇入节点
+        if (branchIdx === branchCount - 1 && mergeIndex >= 0) {
+          edges.push({
+            id: `edge-branch-end-${index}`,
+            source: branchNodeId,
+            target: `node-${mergeIndex}`,
+            type: "smoothstep",
+            animated: true,
+            style: { stroke: "#c41a1a", strokeWidth: 3 },
+            markerEnd: {
+              type: "arrowclosed",
+              color: "#c41a1a",
+            },
+          });
+        }
       });
     }
   });