init

package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
     "@ant-design/pro-components": "^2.8.10",
-    "@ant-design/pro-flow": "^1.3.12",
     "@cqsjjb/jjb-common-decorator": "latest",
     "@cqsjjb/jjb-common-lib": "latest",
     "@cqsjjb/jjb-dva-runtime": "latest",

src/pages/Container/Enterprise/HotWork/Homework/List/index.js

@@ -1,6 +1,5 @@
-import { FlowView, FlowViewProvider } from "@ant-design/pro-flow";
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
-import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
+import { ReactFlow, ReactFlowProvider } from "@xyflow/react";
 import { Button, Modal, Space } from "antd";
 import { useEffect, useState } from "react";
 import FormBuilder from "zy-react-library/components/FormBuilder";
@@ -15,6 +14,7 @@ import { getLabelName } from "zy-react-library/utils";
 import { STATUS_ENUM, WORK_TYPE_ENUM } from "~/enumerate/constant";
 import { NS_EIGHTWORK } from "~/enumerate/namespace";
 import { getFlowData } from "~/utils/flow";
+import "@xyflow/react/dist/style.css";
 
 function List(props) {
   // status 默认不传是作业管理，999 是归档管理，998 是强制关闭管理
@@ -25,7 +25,7 @@ function List(props) {
 
   const [eightworkType, setEightworkType] = useState([]);
   const [forceTerminationModalOpen, setForceTerminationModalOpen] = useState(false);
-  const [flowModalOpen, setFlowModalOpen] = useState(true);
+  const [flowModalOpen, setFlowModalOpen] = useState(false);
   const [currentId, setCurrentId] = useState("");
 
   const { tableProps, getData } = useTable(props["eightworkList"], {
@@ -208,77 +208,6 @@ const ForceTerminationModalComponent = (props) => {
   );
 };
 
-const CustomFlowNode = ({ data }) => {
-  const { title, backgroundColor, width, height } = data;
-  return (
-    <div
-      style={{
-        backgroundColor,
-        width,
-        height,
-        color: "#fff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      {title}
-    </div>
-  );
-};
-
-const CustomFlowEdge = (edge) => {
-  console.log(111);
-  const {
-    id,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition,
-    targetPosition,
-    style = {},
-    markerEnd,
-  } = edge;
-
-  const [edgePath, labelX, labelY] = getBezierPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-  });
-  console.log(edgePath);
-  console.log(labelX);
-  console.log(labelY);
-  return (
-    <>
-      <BaseEdge
-        className={edge.data.className}
-        path={edgePath}
-        markerEnd={markerEnd}
-        style={style}
-      />
-      <EdgeLabelRenderer>
-        <div
-          style={{
-            position: "absolute",
-            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            fontSize: 12,
-            // everything inside EdgeLabelRenderer has no pointer events by default
-            // if you have an interactive element, set pointer-events: all
-            pointerEvents: "all",
-          }}
-          className="nodrag nopan"
-        >
-          123123123
-        </div>
-      </EdgeLabelRenderer>
-    </>
-  );
-};
-
 function FlowModalComponent(props) {
   const [flowNodes, setFlowNodes] = useState([]);
   const [flowEdges, setFlowEdges] = useState([]);
@@ -314,17 +243,23 @@ function FlowModalComponent(props) {
         <Button key="cancel" onClick={props.onCancel}>取消</Button>,
       ]}
     >
-      <div style={{ width: "100%", height: 500 }}>
-        <FlowViewProvider>
-          <FlowView
+      <ReactFlowProvider>
+        <div style={{ width: "100%", height: 500 }}>
+          <ReactFlow
             nodes={flowNodes}
             edges={flowEdges}
-            miniMap={false}
-            nodeTypes={{ customNode: CustomFlowNode }}
-            // edgeTypes={{ buttonEdge: CustomFlowEdge }}
-          />
-        </FlowViewProvider>
-      </div>
+            fitView
+            preventScrolling={false}
+            connectionMode="loose"
+            zoomOnScroll={true}
+            zoomOnPinch={true}
+            panOnScroll={true}
+            panOnScrollSpeed={0.5}
+            proOptions={{ hideAttribution: true }}
+          >
+          </ReactFlow>
+        </div>
+      </ReactFlowProvider>
     </Modal>
   );
 }

src/utils/flow.js

@@ -30,34 +30,51 @@ 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}`,
-      type: "customNode",
-      width: nodeWidth,
-      height: nodeHeight,
       data: {
-        backgroundColor: getStatusColor(flowItem.status, flowItem.type, thisFlow),
-        title: getNodeLabel(flowItem),
+        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,
-        height: nodeHeight,
+        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 },
+    });
+
+    edges.push({
+      id: `edge-${index}`,
+      source: `node-${index}`,
+      target: `node-${index + 1}`,
+      type: "smoothstep",
+      animated: true,
+      style: { stroke: "#1890ff", strokeWidth: 2 },
+      markerEnd: {
+        type: "arrowclosed",
+        color: "#1890ff",
       },
     });
   });
 
-  // 创建连接线
-  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,
-    });
-  }
-
   return { nodes, edges };
 };