feat: 图表修改

src/views/Project/ProjectJobDetail/index.module.css

@@ -37,11 +37,13 @@
 
 .swContent {
   display: flex;
+  height: calc(100vh - 56px);
 }
 .swFormBox {
   background-color: #fff;
   border-right: 1xp solid rgba(235, 237, 240, 1);
   width: 608px;
+  overflow-y: scroll;
   box-sizing: border-box;
   padding: 36px;
 }

src/views/Project/ProjectJobDetail/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-24 18:11:17
+ * @LastEditTime: 2022-06-26 10:26:48
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/views/Project/ProjectSubmitWork/index.module.css

@@ -46,11 +46,13 @@
 
 .swContent {
   display: flex;
+  height: calc(100vh - 56px);
 }
 .swFormBox {
   background-color: #fff;
   border-right: 1xp solid rgba(235, 237, 240, 1);
   width: 608px;
+  overflow-y: scroll;
   box-sizing: border-box;
   padding: 36px;
 }

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-24 18:10:26
+ * @LastEditTime: 2022-06-26 17:24:46
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,11 +23,10 @@ import { IResponse } from "@/api/http";
 import { templateConfigJson } from "./mock";
 import { useMessage } from "@/components/MySnackbar";
 
-
 const ProjectSubmitWork = () => {
-  const Message = useMessage()
+  const Message = useMessage();
   const [templateConfigInfo, setTemplateConfigInfo] =
-    useState<ITemplateConfig>(templateConfigJson as ITemplateConfig);
+    useState<ITemplateConfig>();
   const location: any = useLocation();
   const navigate = useNavigate();
   let configFormRef: any = React.createRef();
@@ -56,9 +55,9 @@ const ProjectSubmitWork = () => {
         tack.parameters.forEach((parameter) => {
           if (parameter.name === parameterName) {
             parameter.value = value;
-            const checkResult = getCheckResult(parameter,value)
-            parameter.error = checkResult.error
-            parameter.helperText = checkResult.helperText
+            const checkResult = getCheckResult(parameter, value);
+            parameter.error = checkResult.error;
+            parameter.helperText = checkResult.helperText;
           } else {
             return;
           }
@@ -71,29 +70,30 @@ const ProjectSubmitWork = () => {
   };
 
   const handleSubmitForm = () => {
-    let check = true
-    const {name, outputPath, nameAndOutputPathCheck} = configFormRef.current.getNameAndPath()
+    let check = true;
+    const { name, outputPath, nameAndOutputPathCheck } =
+      configFormRef.current.getNameAndPath();
     if (!nameAndOutputPathCheck) {
-      check = false
+      check = false;
     }
     const result: ITemplateConfig = _.cloneDeep(templateConfigInfo);
     result.tasks.forEach((tack) => {
       tack.parameters.forEach((parameter) => {
-          const checkResult = getCheckResult(parameter,parameter.value)
-          parameter.error = checkResult.error
-          parameter.helperText = checkResult.helperText
-          if (checkResult.error) {
-            check = false
-          }
+        const checkResult = getCheckResult(parameter, parameter.value);
+        parameter.error = checkResult.error;
+        parameter.helperText = checkResult.helperText;
+        if (checkResult.error) {
+          check = false;
+        }
       });
     });
     setTemplateConfigInfo(result);
     if (check) {
-      console.log('提交任务')
+      console.log("提交任务");
     } else {
-      Message.error('请完善左侧表单再提交')
+      Message.error("请完善左侧表单再提交");
     }
-  }
+  };
 
   return (
     <div className={styles.swBox}>
@@ -133,7 +133,10 @@ const ProjectSubmitWork = () => {
           <div className={styles.swHeaderGoback}></div>
         </div>
         <div className={styles.swHeaderRight}>
-          <ButtonComponent text="提交任务" click={handleSubmitForm}></ButtonComponent>
+          <ButtonComponent
+            text="提交任务"
+            click={handleSubmitForm}
+          ></ButtonComponent>
         </div>
       </div>
       <div className={styles.swContent}>

src/views/Project/components/Flow/index.module.css

@@ -32,3 +32,8 @@
   border-radius: 8px;
   margin-left: 8px;
 }
+
+.selectedBatchBox {
+  border: 1px solid #1370ff;
+  border-left: 4px solid #1370ff;
+}

src/views/Project/components/Flow/index.tsx

@@ -7,8 +7,9 @@ import ReactFlow, {
   Handle,
   Position,
   ReactFlowProps,
+  Node,
 } from "react-flow-renderer";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { IBatchNode, ILine } from "./interface";
 
@@ -33,6 +34,7 @@ const BatchNode = (props: IBatchNode) => {
     <div
       className={classNames({
         [styles.batchNode]: true,
+        [styles.selectedBatchBox]: false,
         [styles.selectBatchNode]: false,
       })}
       style={style}
@@ -96,7 +98,7 @@ const FlowNode = (props: any) => {
 
 const Flow = (props: IProps) => {
   const { tasks } = props;
-
+  const [selectedNodeId, setSelectedNodeId] = useState<string>("");
   /** 自定义的节点类型 */
   const nodeTypes = useMemo(() => {
     return { batchNode: BatchNode, flowNode: FlowNode };
@@ -192,7 +194,7 @@ const Flow = (props: IProps) => {
               padding: isFlowNode(item.id) ? "20px" : "12px 20px",
             },
           },
-          position: item.position,
+          position: { x: Number(item.position.x), y: Number(item.position.y) },
           ...(item.type === "BATCH" ? { style: { zIndex: -1 } } : {}),
           ...(item.parentNode ? { parentNode: item.parentNode } : {}),
           ...(item.type === "BATCH" ? { extent: "parent" } : {}),
@@ -208,19 +210,48 @@ const Flow = (props: IProps) => {
       tasks.forEach((item) => {
         val.push(...item.edges);
       });
-    val.map((item: ILine) => {
+    return val.map((item: ILine) => {
       return {
         id: item.id,
-        label: <div style={{ color: "#8A9099" }}>{item.label}</div>,
         source: item.source,
         target: item.target,
+        type: "step",
+        style: { stroke: "#1370FF" },
+        animated: true,
+        labelStyle: { fill: "#8A9099" },
+        labelBgStyle: { fill: "#F7F8FA " },
+        label: item.label ? `(${item.label})` : "",
+        rectStyle: {},
       };
     });
-    return val;
   }, [tasks]);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  /** flowNode点击事件 */
+  const onNodeClick = (e: any, node: Node) => {
+    tasks?.forEach((item) => {
+      if (item.id === node.id) {
+        if (item.parentNode) {
+          setSelectedNodeId(item.parentNode);
+        } else {
+          setSelectedNodeId(node.id);
+        }
+      }
+    });
+  };
+
+  /** node节点 */
+  const [nodes, setNodes] = useNodesState(initialNodes);
+  /** 连线数组 */
+  const [edges, setEdges] = useEdgesState(initialEdges);
+
+  useEffect(() => {
+    setEdges(initialEdges);
+  }, [initialEdges, setEdges]);
+
+  useEffect(() => {
+    console.log(initialNodes, "initialNodes");
+    setNodes(initialNodes);
+  }, [initialNodes, setNodes]);
 
   return (
     <ReactFlow
@@ -229,6 +260,7 @@ const Flow = (props: IProps) => {
       fitView
       proOptions={{ hideAttribution: true, account: "" }}
       nodeTypes={nodeTypes}
+      onNodeClick={onNodeClick}
       {...props}
     >
       <Controls />