Skip to content

B
bkunyun
Commit 77b97bc9 authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun… 

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun into feat-20220705-customTemplate
parents ca93d0f2 8d55fa8d
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 35 deletions
src/views/Project/components/Flow/index.tsx
View file @ 77b97bc9
......@@ -7,6 +7,10 @@ import ReactFlow, {
Position,
ReactFlowProps,
Node,
applyNodeChanges,
applyEdgeChanges,
EdgeChange,
NodeChange,
} from "react-flow-renderer";
import { useCallback, useEffect, useMemo, useState } from "react";
import classNames from "classnames";
......@@ -22,6 +26,7 @@ import {
import { IBatchNode, ILine } from "./interface";
import styles from "./index.module.css";
import { Tooltip } from "@mui/material";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-22 10:15:22
......@@ -42,6 +47,8 @@ interface IProps extends ReactFlowProps {
type?: "edit" | "default";
/** 设置组件数据 组件为编辑状态使用 */
setTasks?: (val: ITask[]) => void;
/** 点击流程node 节点 返回唯一标识符 */
onFlowNodeClick?: (val: string) => void;
}
/** 获取imgUrl */
......@@ -61,40 +68,80 @@ const getImgUrl = (type: IExecutionStatus) => {
/** 自定义batch节点 */
const BatchNode = (props: IBatchNode) => {
const { data } = props;
const { dotStatus, style, isFlowNode, label, selectedStatus } = data;
const {
dotStatus,
style,
isFlowNode,
selectedStatus,
info: { title, isCheck, executionStatus, parameters },
} = data;
/** 获取输入参数数组 */
const inParamsArr = useMemo(() => {
return parameters.filter((item) => {
return item.parameterGroup === "in";
});
}, [parameters]);
/** 获取输出参数数组 */
const outParamsArr = useMemo(() => {
return parameters.filter((item) => {
return item.parameterGroup === "out";
});
}, [parameters]);
return (
<div
className={classNames({
[styles.batchNode]: true,
[styles.selectedBatchBox]: selectedStatus,
[styles.runBatchNode]: data.executionStatus === "Running",
[styles.doneBatchNode]: data.executionStatus === "Done",
[styles.errorBatchNode]: data.executionStatus === "Failed",
[styles.runBatchNode]: executionStatus === "Running",
[styles.doneBatchNode]: executionStatus === "Done",
[styles.errorBatchNode]: executionStatus === "Failed",
})}
style={style}
>
{dotStatus?.isInput ? (
<Handle
style={{ background: "#fff ", border: "1px solid #D1D6DE", left: 20 }}
type="target"
position={Position.Top}
/>
) : null}
{inParamsArr?.length &&
inParamsArr.map((item, index) => {
return (
<Tooltip title={item.name}>
<Handle
// title={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
left: index * 20 + 20,
}}
type="target"
position={Position.Top}
/>
</Tooltip>
);
})}
<div
className={classNames({
[styles.batchRotate]: isFlowNode,
})}
>
{label || ""}
{data.isCheck && <span className={styles.successDot}></span>}
{title || ""}
{isCheck && <span className={styles.successDot}></span>}
</div>
{dotStatus?.isOutput ? (
<Handle
style={{ background: "#fff ", border: "1px solid #D1D6DE", left: 20 }}
type="source"
position={Position.Bottom}
/>
) : null}
{outParamsArr?.length &&
outParamsArr.map((item, index) => {
return (
<Tooltip title={item.name}>
<Handle
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
left: index * 20 + 20,
}}
type="source"
position={Position.Bottom}
/>
</Tooltip>
);
})}
</div>
);
};
......@@ -102,13 +149,17 @@ const BatchNode = (props: IBatchNode) => {
/** 自定义flow节点 */
const FlowNode = (props: any) => {
const { data } = props;
const {
dotStatus,
info: { title, isCheck, executionStatus },
} = data;
return (
<div
className={classNames({
[styles.flowNode]: true,
})}
>
{data?.dotStatus?.isInput ? (
{dotStatus?.isInput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
type="target"
......@@ -116,17 +167,17 @@ const FlowNode = (props: any) => {
/>
) : null}
<div style={{ display: "flex", alignItems: "center" }}>
{data?.label || ""}
{data.isCheck && <span className={styles.successDot}></span>}
{getImgUrl(data.executionStatus) && (
{title || ""}
{isCheck && <span className={styles.successDot}></span>}
{getImgUrl(executionStatus) && (
<img
style={{ marginLeft: "6px" }}
src={getImgUrl(data.executionStatus)}
src={getImgUrl(executionStatus)}
alt=""
/>
)}
</div>
{data?.dotStatus?.isOutput ? (
{dotStatus?.isOutput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
type="source"
......@@ -146,6 +197,7 @@ const Flow = (props: IProps) => {
selectedNodeId,
type: flowType = "default",
setTasks,
onFlowNodeClick,
} = props;
/** 自定义的节点类型 */
const nodeTypes = useMemo(() => {
......@@ -257,8 +309,8 @@ const Flow = (props: IProps) => {
type: item.type === "BATCH" ? "batchNode" : "flowNode",
/** 每一项的数据 */
data: {
label: item.title || "",
// label: item.title || "",
info: item,
...(item.type === "BATCH"
? {
/** 是否有流节点 */
......@@ -269,12 +321,13 @@ const Flow = (props: IProps) => {
: inSideNodeId === item.id,
}
: {}),
/** 是否选中 */
isCheck: item.isCheck,
// /** 是否选中 */
// isCheck: item.isCheck,
/** 运行状态 */
executionStatus: item.executionStatus,
// executionStatus: item.executionStatus,
/** 输入输出圆点状态 */
dotStatus: nodesInputAndOutputStatus(item.id),
/** 样式 */
style: {
...getBatchStyle(item),
......@@ -359,6 +412,7 @@ const Flow = (props: IProps) => {
}
}
});
onFlowNodeClick && onFlowNodeClick(node.id);
};
const handlePaneClick = () => {
......@@ -367,9 +421,9 @@ const Flow = (props: IProps) => {
};
/** node节点 */
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [nodes, setNodes] = useNodesState(initialNodes);
/** 连线数组 */
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const [edges, setEdges] = useEdgesState(initialEdges);
useEffect(() => {
setEdges(initialEdges);
......@@ -379,6 +433,22 @@ const Flow = (props: IProps) => {
setNodes(initialNodes);
}, [initialNodes, setNodes]);
const onNodesChange = useCallback(
(changes: NodeChange[]) => {
console.log(changes, "1111");
setNodes((ns) => applyNodeChanges(changes, ns));
},
[setNodes]
);
const onEdgesChange = useCallback(
(changes: EdgeChange[]) => {
console.log(changes, "222222");
setEdges((es) => applyEdgeChanges(changes, es));
},
[setEdges]
);
return (
<ReactFlow
nodes={nodes}
......
src/views/Project/components/Flow/interface.ts
View file @ 77b97bc9
......@@ -2,12 +2,13 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-23 11:00:29
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-07 11:23:14
* @LastEditTime: 2022-07-11 15:24:53
* @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { CSSProperties } from "react";
import { ITask } from "../../ProjectSubmitWork/interface";
/** 线的参数 */
export interface ILine {
......@@ -40,7 +41,11 @@ export interface IBatchNodeData {
isCheck?: boolean;
/** 运行状态 */
executionStatus: string
/** 每一项信息 */
info: ITask
}
export interface IBatchNode {
data: IBatchNodeData
}
\ No newline at end of file
src/views/WorkFlowEdit/index.tsx
View file @ 77b97bc9
......@@ -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-07-11 11:31:14
* @LastEditTime: 2022-07-11 14:40:34
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -69,6 +69,7 @@ const WorkFlowEdit = (props: IProps) => {
const handleNodeClick = useCallback((val: string) => {
setSelectTaskId(val);
}, []);
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
......@@ -148,6 +149,7 @@ const WorkFlowEdit = (props: IProps) => {
tasks={templateConfigInfo}
setTasks={setTemplateConfigInfo}
type="edit"
onFlowNodeClick={handleNodeClick}
/>
</div>
</div>
......
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