Skip to content

B
bkunyun
Commit 5f1d13aa authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 增加算子列表、参数设置切换

parent 24b9ce7c
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 101 deletions
src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css
View file @ 5f1d13aa
.RadiosBox {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #e6e8eb;
border-radius: 4px;
background-color: #e6e8eb;
cursor: pointer;
height: 32px;
box-sizing: border-box;
padding: 2px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #e6e8eb;
border-radius: 4px;
background-color: #e6e8eb;
cursor: pointer;
height: 32px;
box-sizing: border-box;
padding: 2px;
}
.radio {
height: 28px;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
border-radius: 4px;
line-height: 20px;
padding: 3px 18px;
background-color: #e6e8eb;
display: flex;
align-items: center;
height: 28px;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
border-radius: 4px;
line-height: 20px;
padding: 3px 18px;
background-color: #e6e8eb;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.radioActive {
color: #1370ff;
background-color: #fff;
border: 1px solid #e6e8eb;
color: #1370ff;
background-color: #fff;
border: 1px solid #e6e8eb;
}
src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
View file @ 5f1d13aa
......@@ -3,37 +3,41 @@ import classnames from "classnames";
import style from "./index.module.css";
type radioOption = {
value: string;
label: string;
value: string;
label: string;
};
type IRadioGroupOfButtonStyleProps = {
radioOptions: Array<radioOption>;
value: string;
handleRadio: any;
radioOptions: Array<radioOption>;
value: string;
handleRadio: any;
RadiosBoxStyle?: object;
radioStyle?: object;
};
const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
const { radioOptions, value, handleRadio } = props;
const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
props;
return (
<div className={style.RadiosBox}>
{radioOptions.map((options) => {
return (
<div
key={options.value}
className={classnames({
[style.radio]: true,
[style.radioActive]: value === options.value,
})}
onClick={() => handleRadio(options.value)}
>
{options.label}
</div>
);
})}
</div>
);
return (
<div className={style.RadiosBox} style={RadiosBoxStyle}>
{radioOptions.map((options) => {
return (
<div
key={options.value}
className={classnames({
[style.radio]: true,
[style.radioActive]: value === options.value,
})}
onClick={() => handleRadio(options.value)}
style={radioStyle}
>
{options.label}
</div>
);
})}
</div>
);
};
export default RadioGroupOfButtonStyle;
src/views/Project/ProjectJobDetail/index.tsx
View file @ 5f1d13aa
......@@ -73,22 +73,22 @@ const ProjectSubmitWork = observer(() => {
const { name, state } = workFlowJobInfo || {};
/** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, {
pollingInterval: 1000 * 60,
pollingWhenHidden: false,
onSuccess: (res: IResponse<ITaskInfo>) => {
getOutouts(res.data.outputs);
setWorkFlowJobInfo(res.data);
},
});
/** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, {
pollingInterval: 1000 * 60,
pollingWhenHidden: false,
onSuccess: (res: IResponse<ITaskInfo>) => {
getOutouts(res.data.outputs);
setWorkFlowJobInfo(res.data);
},
});
useEffect(() => {
const locationInfo: any = location?.state;
run({
id: locationInfo.taskId,
});
}, [location?.state, run]);
useEffect(() => {
const locationInfo: any = location?.state;
run({
id: locationInfo.taskId,
});
}, [location?.state, run]);
const { run: getworkFlowTaskInfoRun } = useMyRequest(getworkFlowTaskInfo, {
onSuccess: (res) => {
......@@ -96,34 +96,35 @@ const ProjectSubmitWork = observer(() => {
},
});
const goToProjectData = (path: string) => {
path = path.slice(13);
if (path) {
navigate(`/product/cadd/projectData`, {
state: { pathName: path },
});
} else {
navigate(`/product/cadd/projectData`, {
state: { pathName: "/" },
});
}
};
// 前往数据管理页面
const goToProjectData = (path: string) => {
path = path.slice(13);
if (path) {
navigate(`/product/cadd/projectData`, {
state: { pathName: path },
});
} else {
navigate(`/product/cadd/projectData`, {
state: { pathName: "/" },
});
}
};
// 通过文件路径获取文件所在文件夹路径 如 输入 /home/cloudam/task_a.out 输出/home/cloudam/
const getFolderPath = (path: string) => {
const lastIndex = path.lastIndexOf("/");
if (lastIndex !== -1) {
path = path.slice(0, lastIndex + 1);
}
return path;
};
// 通过文件路径获取文件所在文件夹路径 如 输入 /home/cloudam/task_a.out 输出/home/cloudam/
const getFolderPath = (path: string) => {
const lastIndex = path.lastIndexOf("/");
if (lastIndex !== -1) {
path = path.slice(0, lastIndex + 1);
}
return path;
};
/** 返回事件 */
const onBack = useCallback(() => {
navigate("/product/cadd/projectWorkbench", {
state: { type: "workbenchList" },
});
}, [navigate]);
/** 返回事件 */
const onBack = useCallback(() => {
navigate("/product/cadd/projectWorkbench", {
state: { type: "workbenchList" },
});
}, [navigate]);
const outputPathTransform = (path: string) => {
path = path.slice(13);
......@@ -339,7 +340,9 @@ const ProjectSubmitWork = observer(() => {
<div key={index} className={styles.outputLi}>
<MyPopconfirm
title="即将跳转至项目数据内该任务的结果目录，确认继续吗？"
onConfirm={() => goToProjectData(getFolderPath(item.path))}
onConfirm={() =>
goToProjectData(getFolderPath(item.path))
}
>
<div className={styles.outputLiLeft}>
<img
......@@ -510,16 +513,16 @@ const ProjectSubmitWork = observer(() => {
{patchInfo?.children.map((item: any, index: number) => {
return (
<div
key={index}
className={classNames({
[styles.option]: true,
[styles.optionActive]:
activeFlowIndex === index,
})}
onClick={() => setActiveFlowIndex(index)}
>
{item.title}
</div>
key={index}
className={classNames({
[styles.option]: true,
[styles.optionActive]:
activeFlowIndex === index,
})}
onClick={() => setActiveFlowIndex(index)}
>
{item.title}
</div>
);
})}
</div>
......
src/views/WorkFlowEdit/index.module.css
View file @ 5f1d13aa
......@@ -40,3 +40,7 @@
flex: 1;
height: calc(100vh - 56px);
}
.radiosBox {
background-color: #fff;
padding: 24px;
}
src/views/WorkFlowEdit/index.tsx
View file @ 5f1d13aa
......@@ -12,11 +12,24 @@ import IconButton from "@mui/material/IconButton";
import { useLocation, useNavigate } from "react-router-dom";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import ButtonComponent from "@/components/mui/Button";
import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
import OperatorList from "./components/OperatorList";
import styles from "./index.module.css";
import { style } from "@mui/system";
const radioOptions = [
{
value: "list",
label: "算子列表",
},
{
value: "setting",
label: "参数设置",
},
];
const WorkFlowEdit = () => {
const [templateConfigInfo, setTemplateConfigInfo] =
......@@ -24,6 +37,8 @@ const WorkFlowEdit = () => {
const location: any = useLocation();
const navigate = useNavigate();
const [leftContentType, setLeftContentType] = useState("list");
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
......@@ -62,8 +77,30 @@ const WorkFlowEdit = () => {
</div>
</div>
<div className={styles.swContent}>
<div className={styles.swFormBox}>
<OperatorList />
<div>
<div className={styles.radiosBox}>
<RadioGroupOfButtonStyle
radioOptions={radioOptions}
value={leftContentType}
handleRadio={setLeftContentType}
RadiosBoxStyle={{
height: "36px",
padding: "3px",
}}
radioStyle={{
fontSize: "16px",
height: "30px",
}}
></RadioGroupOfButtonStyle>
</div>
{leftContentType === "list" && (
<div className={styles.swFormBox}>
<OperatorList />
</div>
)}
{leftContentType !== "list" && (
<div className={styles.swFormBox}>123</div>
)}
</div>
<div className={styles.swFlowBox}>右侧</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