Commit 7fd917a1 authored by 吴永生#A02208's avatar 吴永生#A02208

feat: 添加跳转

parent 2bd51ded
...@@ -47,4 +47,5 @@ ...@@ -47,4 +47,5 @@
} }
.swFlowBox { .swFlowBox {
flex: 1; flex: 1;
height: calc(100vh - 56px);
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-24 16:04:32 * @LastEditTime: 2022-06-24 18:11:17
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -12,15 +12,17 @@ import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew"; ...@@ -12,15 +12,17 @@ import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { fetchWorkFlowJob } from "@/api/project_api"; import { fetchWorkFlowJob } from "@/api/project_api";
import { useLocation } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { IResponse } from "@/api/http"; import { IResponse } from "@/api/http";
import styles from "./index.module.css"; import styles from "./index.module.css";
import { ITemplateConfig } from "../ProjectSubmitWork/interface"; import { ITemplateConfig } from "../ProjectSubmitWork/interface";
import Flow from "../components/Flow";
const ProjectSubmitWork = () => { const ProjectSubmitWork = () => {
const [workFlowJobInfo, setWorkFlowJobInfo] = useState<ITemplateConfig>(); const [workFlowJobInfo, setWorkFlowJobInfo] = useState<ITemplateConfig>();
const location: any = useLocation(); const location: any = useLocation();
const navigate = useNavigate();
/** 获取模版数据 */ /** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, { const { run } = useMyRequest(fetchWorkFlowJob, {
...@@ -32,7 +34,7 @@ const ProjectSubmitWork = () => { ...@@ -32,7 +34,7 @@ const ProjectSubmitWork = () => {
useEffect(() => { useEffect(() => {
run({ run({
id: "42d69257-b579-4c7d-bc27-8f8ab1fd3ea3", id: "b1044787-9618-4324-bc44-8d38e781aa44",
}); });
}, [run]); }, [run]);
...@@ -42,6 +44,7 @@ const ProjectSubmitWork = () => { ...@@ -42,6 +44,7 @@ const ProjectSubmitWork = () => {
<div className={styles.swHeaderLeft}> <div className={styles.swHeaderLeft}>
<IconButton <IconButton
color="primary" color="primary"
onClick={() => navigate(-1)}
aria-label="upload picture" aria-label="upload picture"
component="span" component="span"
size="small" size="small"
...@@ -70,7 +73,7 @@ const ProjectSubmitWork = () => { ...@@ -70,7 +73,7 @@ const ProjectSubmitWork = () => {
<div>详情</div> <div>详情</div>
</div> </div>
<div className={styles.swFlowBox}> <div className={styles.swFlowBox}>
<div>图表</div> <Flow tasks={workFlowJobInfo?.tasks} />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 15:25:25 * @Date: 2022-06-21 15:25:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-23 18:20:50 * @LastEditTime: 2022-06-24 17:13:33
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -14,7 +14,7 @@ interface IProps { ...@@ -14,7 +14,7 @@ interface IProps {
} }
const WorkFlow = (props: IProps) => { const WorkFlow = (props: IProps) => {
const { templateConfigInfo } = props; const { templateConfigInfo } = props;
return <Flow data={templateConfigInfo} />; return <Flow tasks={templateConfigInfo?.tasks} />;
}; };
export default WorkFlow; export default WorkFlow;
...@@ -56,4 +56,5 @@ ...@@ -56,4 +56,5 @@
} }
.swFlowBox { .swFlowBox {
flex: 1; flex: 1;
height: calc(100vh - 56px);
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-24 09:47:09 * @LastEditTime: 2022-06-24 18:10:26
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -17,15 +17,15 @@ import { ITemplateConfig } from "./interface"; ...@@ -17,15 +17,15 @@ import { ITemplateConfig } from "./interface";
import _ from "lodash"; import _ from "lodash";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { fetchTemplateConfigInfo } from "@/api/project_api"; import { fetchTemplateConfigInfo } from "@/api/project_api";
import { useLocation } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { IResponse } from "@/api/http"; import { IResponse } from "@/api/http";
import { templateConfigJson } from "./mock"; // import { templateConfigJson } from "./mock";
const ProjectSubmitWork = () => { const ProjectSubmitWork = () => {
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITemplateConfig>( const [templateConfigInfo, setTemplateConfigInfo] =
templateConfigJson as any useState<ITemplateConfig>();
);
const location: any = useLocation(); const location: any = useLocation();
const navigate = useNavigate();
/** 获取模版数据 */ /** 获取模版数据 */
const { run } = useMyRequest(fetchTemplateConfigInfo, { const { run } = useMyRequest(fetchTemplateConfigInfo, {
...@@ -35,9 +35,9 @@ const ProjectSubmitWork = () => { ...@@ -35,9 +35,9 @@ const ProjectSubmitWork = () => {
}); });
useEffect(() => { useEffect(() => {
// run({ run({
// id: location?.state?.id, id: location?.state?.id,
// }); });
}, [location?.state?.id, run]); }, [location?.state?.id, run]);
const setParameter = (value: any, taskId: string, parameterName: string) => { const setParameter = (value: any, taskId: string, parameterName: string) => {
...@@ -64,6 +64,7 @@ const ProjectSubmitWork = () => { ...@@ -64,6 +64,7 @@ const ProjectSubmitWork = () => {
<div className={styles.swHeaderLeft}> <div className={styles.swHeaderLeft}>
<IconButton <IconButton
color="primary" color="primary"
onClick={() => navigate(-1)}
aria-label="upload picture" aria-label="upload picture"
component="span" component="span"
size="small" size="small"
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-17 14:48:57 * @Date: 2022-06-17 14:48:57
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-24 16:32:16 * @LastEditTime: 2022-06-24 16:41:40
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx * @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -83,7 +83,7 @@ const TemplateBox = (props: any) => { ...@@ -83,7 +83,7 @@ const TemplateBox = (props: any) => {
<Button <Button
size={"small"} size={"small"}
text={"使用模版"} text={"使用模版"}
click={() => {}} click={() => addTemplateBlock(info.id)}
style={{ marginLeft: "12px" }} style={{ marginLeft: "12px" }}
/> />
)} )}
......
import { import { IEdge, ITask } from "../../ProjectSubmitWork/interface";
ITemplateConfig,
IEdge,
ITask,
} from "../../ProjectSubmitWork/interface";
import ReactFlow, { import ReactFlow, {
MiniMap,
Controls, Controls,
Background, Background,
useNodesState, useNodesState,
...@@ -27,7 +22,7 @@ import styles from "./index.module.css"; ...@@ -27,7 +22,7 @@ import styles from "./index.module.css";
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
interface IProps extends ReactFlowProps { interface IProps extends ReactFlowProps {
data?: ITemplateConfig; tasks?: ITask[];
} }
/** 自定义batch节点 */ /** 自定义batch节点 */
...@@ -100,7 +95,7 @@ const FlowNode = (props: any) => { ...@@ -100,7 +95,7 @@ const FlowNode = (props: any) => {
}; };
const Flow = (props: IProps) => { const Flow = (props: IProps) => {
const { data } = props; const { tasks } = props;
/** 自定义的节点类型 */ /** 自定义的节点类型 */
const nodeTypes = useMemo(() => { const nodeTypes = useMemo(() => {
...@@ -112,8 +107,8 @@ const Flow = (props: IProps) => { ...@@ -112,8 +107,8 @@ const Flow = (props: IProps) => {
(id: string) => { (id: string) => {
/** 所有的连线 */ /** 所有的连线 */
const lineArr: IEdge[] = []; const lineArr: IEdge[] = [];
data?.tasks?.length && tasks?.length &&
data?.tasks.forEach((item) => { tasks.forEach((item) => {
lineArr.push(...item.edges); lineArr.push(...item.edges);
}); });
/** 所有的输入节点ID */ /** 所有的输入节点ID */
...@@ -125,20 +120,20 @@ const Flow = (props: IProps) => { ...@@ -125,20 +120,20 @@ const Flow = (props: IProps) => {
isOutput, isOutput,
}; };
}, },
[data?.tasks] [tasks]
); );
/** 获取是否有流节点 */ /** 获取是否有流节点 */
const isFlowNode = useCallback( const isFlowNode = useCallback(
(id: string) => { (id: string) => {
return ( return (
data?.tasks?.length && tasks?.length &&
data?.tasks?.some((item) => { tasks?.some((item) => {
return item.parentNode === id; return item.parentNode === id;
}) })
); );
}, },
[data?.tasks] [tasks]
); );
/** 通过子flow节点计算batch节点的样式 */ /** 通过子flow节点计算batch节点的样式 */
...@@ -146,8 +141,8 @@ const Flow = (props: IProps) => { ...@@ -146,8 +141,8 @@ const Flow = (props: IProps) => {
(value: ITask) => { (value: ITask) => {
const positionXArr: number[] = []; const positionXArr: number[] = [];
const positionYArr: number[] = []; const positionYArr: number[] = [];
data?.tasks?.length && tasks?.length &&
data?.tasks?.forEach((item) => { tasks?.forEach((item) => {
if (item.parentNode === value.id) { if (item.parentNode === value.id) {
positionXArr.push(item.position?.x || 0); positionXArr.push(item.position?.x || 0);
positionYArr.push(item.position?.y || 0); positionYArr.push(item.position?.y || 0);
...@@ -174,14 +169,14 @@ const Flow = (props: IProps) => { ...@@ -174,14 +169,14 @@ const Flow = (props: IProps) => {
height, height,
}; };
}, },
[data?.tasks] [tasks]
); );
/** 生成初始化node节点 */ /** 生成初始化node节点 */
const initialNodes = useMemo(() => { const initialNodes = useMemo(() => {
const val: any = []; const val: any = [];
data?.tasks?.length && tasks?.length &&
data?.tasks.forEach((item) => { tasks.forEach((item) => {
val.push({ val.push({
id: item.id, id: item.id,
type: item.type === "BATCH" ? "batchNode" : "flowNode", type: item.type === "BATCH" ? "batchNode" : "flowNode",
...@@ -204,13 +199,13 @@ const Flow = (props: IProps) => { ...@@ -204,13 +199,13 @@ const Flow = (props: IProps) => {
}); });
}); });
return val; return val;
}, [data?.tasks, getBatchStyle, isFlowNode, nodesInputAndOutputStatus]); }, [tasks, getBatchStyle, isFlowNode, nodesInputAndOutputStatus]);
/** 生成初始化的连线节点 */ /** 生成初始化的连线节点 */
const initialEdges = useMemo(() => { const initialEdges = useMemo(() => {
const val: ILine[] = []; const val: ILine[] = [];
data?.tasks?.length && tasks?.length &&
data?.tasks.forEach((item) => { tasks.forEach((item) => {
val.push(...item.edges); val.push(...item.edges);
}); });
val.map((item: ILine) => { val.map((item: ILine) => {
...@@ -222,7 +217,7 @@ const Flow = (props: IProps) => { ...@@ -222,7 +217,7 @@ const Flow = (props: IProps) => {
}; };
}); });
return val; return val;
}, [data]); }, [tasks]);
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment