Skip to content

B
bkunyun
Commit 2cfbf2e2 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

fix: 算子列表开发

parent 82b14568
Show whitespace changes
Inline Side-by-side
Showing with 192 additions and 45 deletions
src/views/Project/ProjectJobDetail/index.tsx
View file @ 2cfbf2e2
......@@ -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-06 11:01:44
* @LastEditTime: 2022-07-06 17:05:13
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -75,8 +75,8 @@ const ProjectSubmitWork = observer(() => {
/** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, {
pollingInterval:1000 * 60,
pollingWhenHidden:false,
pollingInterval: 1000 * 60,
pollingWhenHidden: false,
onSuccess: (res: IResponse<ITaskInfo>) => {
getOutouts(res.data.outputs);
setWorkFlowJobInfo(res.data);
......@@ -85,7 +85,6 @@ const ProjectSubmitWork = observer(() => {
useEffect(() => {
const locationInfo: any = location?.state;
console.log(333)
run({
id: locationInfo.taskId,
});
......@@ -106,12 +105,12 @@ const ProjectSubmitWork = observer(() => {
}
};
/** 返回事件 */
/** 返回事件 */
const onBack = useCallback(() => {
navigate('/product/cadd/projectWorkbench', {
state: {type: 'workbenchList'}
})
},[navigate])
navigate("/product/cadd/projectWorkbench", {
state: { type: "workbenchList" },
});
}, [navigate]);
const outputPathTransform = (path: string) => {
path = path.slice(13);
......@@ -202,7 +201,7 @@ const ProjectSubmitWork = observer(() => {
if (errorCode === 0) {
message.success("操作成功！");
}
onBack()
onBack();
},
});
......@@ -213,7 +212,7 @@ const ProjectSubmitWork = observer(() => {
if (errorCode === 0) {
message.success("操作成功！");
}
onBack()
onBack();
},
});
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 2cfbf2e2
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-05 18:06:17
* @LastEditTime: 2022-07-06 17:32:50
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -28,8 +28,9 @@ import {
addWorkbenchTemplate,
} from "@/api/workbench_api";
import usePass from "@/hooks/usePass";
import ReactFlowEdit from "@/views/WorkFlowEdit";
import WorkFlowEdit from "@/views/WorkFlowEdit";
import { useStores } from "@/store";
import { ICustomTemplate } from "./interface";
import styles from "./index.module.css";
......@@ -54,6 +55,13 @@ const ProjectMembers = observer(() => {
/** 已选择增加的模板列表 */
const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
/** 是否显示自定义模版编辑并带有参数 */
const [customTemplateInfo, setCustomTemplateInfo] = useState<ICustomTemplate>(
{
show: false,
}
);
// 获取模板列表
const { run: getTemplateInfo } = useMyRequest(getWorkbenchTemplate, {
onSuccess: (result: any) => {
......@@ -223,9 +231,7 @@ const ProjectMembers = observer(() => {
{templateList &&
templateList.length > 0 &&
templateList.map((item, key) => {
return (
<TemplateBox data={item} startDialog={startDialog} key={key} />
);
return <TemplateBox data={item} startDialog={startDialog} />;
})}
</Box>
)}
......@@ -264,7 +270,7 @@ const ProjectMembers = observer(() => {
searchTemplateNameCallback={searchTemplateNameCallback}
/>
{/* <ReactFlowEdit/> */}
{customTemplateInfo?.show ? <WorkFlowEdit /> : null}
<SimpleDialog
text={"确认移除该模板吗？"}
......
src/views/Project/ProjectWorkbench/workbenchTemplate/interface.tsx 0 → 100644
View file @ 2cfbf2e2
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 14:44:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 14:47:28
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/interface.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export interface ICustomTemplate{
show?: boolean;
id?: string;
}
\ No newline at end of file
src/views/Project/components/Flow/index.tsx
View file @ 2cfbf2e2
......@@ -14,7 +14,11 @@ import classNames from "classnames";
import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobSue from "@/assets/project/jobSue.svg";
import { IEdge, IExecutionStatus, ITask } from "../../ProjectSubmitWork/interface";
import {
IEdge,
IExecutionStatus,
ITask,
} from "../../ProjectSubmitWork/interface";
import { IBatchNode, ILine } from "./interface";
import styles from "./index.module.css";
......@@ -30,23 +34,23 @@ interface IProps extends ReactFlowProps {
tasks?: ITask[];
/** 点击batch事件 */
onBatchClick?: (val: string) => void;
setSelectedNodeId?: (val:string) => void;
setSelectedNodeId?: (val: string) => void;
selectedNodeId?: string;
}
/** 获取imgUrl */
const getImgUrl = (type: IExecutionStatus) => {
if(type === 'Done'){
return jobSue
/** 获取imgUrl */
const getImgUrl = (type: IExecutionStatus) => {
if (type === "Done") {
return jobSue;
}
if(type === 'Failed'){
return jobFail
if (type === "Failed") {
return jobFail;
}
if(type === 'Running'){
return jobRun
}
return undefined
if (type === "Running") {
return jobRun;
}
return undefined;
};
/** 自定义batch节点 */
const BatchNode = (props: IBatchNode) => {
......@@ -106,7 +110,13 @@ const FlowNode = (props: any) => {
<div style={{ display: "flex", alignItems: "center" }}>
{data?.label || ""}
{data.isCheck && <span className={styles.successDot}></span>}
{getImgUrl(data.executionStatus) && <img style={{ marginLeft: "6px" }} src={getImgUrl(data.executionStatus)} alt="" />}
{getImgUrl(data.executionStatus) && (
<img
style={{ marginLeft: "6px" }}
src={getImgUrl(data.executionStatus)}
alt=""
/>
)}
</div>
{data?.dotStatus?.isOutput ? (
<Handle
......@@ -126,6 +136,8 @@ const Flow = (props: IProps) => {
const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode };
}, []);
/** 内部维护的选择的节点Id */
const [inSideNodeId, setInSideNodeId] = useState<string>("");
/** 获取是否有输入节点或者是否有输出节点 */
const nodesInputAndOutputStatus = useCallback(
......@@ -213,7 +225,9 @@ const Flow = (props: IProps) => {
/** 是否有流节点 */
isFlowNode: isFlowNode(item.id),
/** 选中状态 */
selectedStatus: selectedNodeId === item.id,
selectedStatus: selectedNodeId
? selectedNodeId === item.id
: inSideNodeId === item.id,
}
: {}),
isCheck: item.isCheck,
......@@ -237,6 +251,7 @@ const Flow = (props: IProps) => {
tasks,
isFlowNode,
selectedNodeId,
inSideNodeId,
nodesInputAndOutputStatus,
getBatchStyle,
]);
......@@ -255,12 +270,13 @@ const Flow = (props: IProps) => {
}, []);
});
return val.map((item: ILine) => {
const newSelectId = selectedNodeId ? selectedNodeId : inSideNodeId;
return {
id: item.id,
source: item.source,
target: item.target,
type: "smoothstep",
...(item?.batchId === selectedNodeId
...(item?.batchId === newSelectId
? { style: { stroke: "#1370FF" }, animated: true }
: {}),
labelStyle: { fill: "#8A9099" },
......@@ -268,30 +284,35 @@ const Flow = (props: IProps) => {
label: item.label ? `(${item.label})` : "",
};
});
}, [selectedNodeId, tasks]);
}, [inSideNodeId, selectedNodeId, tasks]);
/** flowNode点击事件 */
const onNodeClick = (e: any, node: Node) => {
tasks?.forEach((item) => {
if (item.id === node.id) {
if (item.parentNode) {
setSelectedNodeId && setSelectedNodeId(item.parentNode);
setSelectedNodeId
? setSelectedNodeId(item.parentNode)
: setInSideNodeId(item.parentNode);
onBatchClick && onBatchClick(item.parentNode);
document.getElementById(`point${item.parentNode}`)?.scrollIntoView(true)
document
.getElementById(`point${item.parentNode}`)
?.scrollIntoView(true);
} else {
setSelectedNodeId && setSelectedNodeId(node.id);
setSelectedNodeId
? setSelectedNodeId(node.id)
: setInSideNodeId(node.id);
onBatchClick && onBatchClick(node.id || "");
document.getElementById(`point${node.id}`)?.scrollIntoView(true)
document.getElementById(`point${node.id}`)?.scrollIntoView(true);
}
}
});
};
const handlePaneClick = () => {
setSelectedNodeId && setSelectedNodeId('');
onBatchClick && onBatchClick('');
}
setSelectedNodeId ? setSelectedNodeId("") : setInSideNodeId("");
onBatchClick && onBatchClick("");
};
/** node节点 */
const [nodes, setNodes] = useNodesState(initialNodes);
......
src/views/WorkFlowEdit/components/OperatorList/index.module.css 0 → 100644
View file @ 2cfbf2e2
.operatorItemBox {
background-color: #fff;
border-radius: 4px;
cursor: grab;
padding: 16px 0;
border-bottom: 1px solid #f0f2f5;
}
.operatorItemTitle {
user-select: none;
font-size: 14px;
color: #1e2633;
}
.operatorItemText {
color: #8a9099;
margin: 8px 0;
font-size: 12px;
user-select: none;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.labelBox {
user-select: none;
display: inline-block;
border-radius: 2px;
font-size: 12px;
padding: 2px 8px;
}
.footerBx {
display: flex;
align-items: center;
}
src/views/WorkFlowEdit/components/OperatorList/index.tsx 0 → 100644
View file @ 2cfbf2e2
import { IOperatorItemProps } from "./interface";
import { OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import styles from "./index.module.css";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:16:01
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 16:27:16
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
const OperatorItem = (props: IOperatorItemProps) => {
const { info } = props;
return (
<div className={styles.operatorItemBox}>
<h2 className={styles.operatorItemTitle}>说什么呢啊</h2>
<div className={styles.operatorItemText}>
STU utility
是一个R-packa标处理目标处理，目标处理目标处理标处理目标处理后期委屈好委屈农，博啊发布丢我被欺安度切换阿斯顿几切换，i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
</div>
<div className={styles.footerBx}>
<span
className={styles.labelBox}
style={{
background: true ? "#EBF3FF" : "#E3FAEC",
color: true ? "#1370FF" : "#02AB83",
}}
>
公共平台
</span>
<OutlinedInput
onChange={(e: any) => {
console.log(e.target.value);
}}
// value={templateName}
placeholder="输入关键词搜索"
size="small"
sx={{ flex: 1, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
</div>
</div>
);
};
const OperatorList = () => {
const arr = [222, 3333, 339];
return (
<>
{arr.map((item) => {
return <OperatorItem key={item} info={item} />;
})}
</>
);
};
export default OperatorList;
src/views/WorkFlowEdit/components/OperatorList/interface.ts 0 → 100644
View file @ 2cfbf2e2
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:32:11
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 15:32:42
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export interface IOperatorItemProps {
info: any
}
\ No newline at end of file
src/views/WorkFlowEdit/index.module.css
View file @ 2cfbf2e2
......@@ -32,10 +32,10 @@
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 608px;
width: 360px;
overflow-y: scroll;
box-sizing: border-box;
padding: 36px;
padding: 24px;
}
.swFlowBox {
flex: 1;
......
src/views/WorkFlowEdit/index.tsx
View file @ 2cfbf2e2
......@@ -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-05 16:31:28
* @LastEditTime: 2022-07-06 15:21:55
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -14,6 +14,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import ButtonComponent from "@/components/mui/Button";
import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
import OperatorList from "./components/OperatorList";
import styles from './index.module.css'
......@@ -64,7 +65,7 @@ const WorkFlowEdit = () => {
</div>
<div className={styles.swContent}>
<div className={styles.swFormBox}>
左侧
<OperatorList/>
</div>
<div className={styles.swFlowBox}>
右侧
......
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