Skip to content

B
bkunyun
Commit 16d0cb96 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 详情页增加跳转数据管理页面

parent ef1dd17a
Hide whitespace changes
Inline Side-by-side
Showing with 316 additions and 295 deletions
src/views/Project/ProjectJobDetail/index.tsx
View file @ 16d0cb96
......@@ -21,8 +21,8 @@ import { IResponse } from "@/api/http";
import jobSue from "@/assets/project/jobSue.svg";
import jobStop from "@/assets/project/jobStop.svg";
import jobRun from "@/assets/project/jobRun.svg";
import fullScreen from '@/assets/project/fullScreen.svg'
import partialScreen from '@/assets/project/partialScreen.svg'
import fullScreen from "@/assets/project/fullScreen.svg";
import partialScreen from "@/assets/project/partialScreen.svg";
import CloudEController from "@/api/fileserver/CloudEController";
import jobFail from "@/assets/project/jobFail.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
......@@ -37,7 +37,6 @@ import MyPopconfirm from "@/components/mui/MyPopconfirm";
import styles from "./index.module.css";
const stateMap = {
RUNNING: "正在运行",
ABORTED: "运行终止",
......@@ -68,10 +67,10 @@ const ProjectSubmitWork = observer(() => {
const [randerOutputs1, setRanderOutputs] = useState<Array<any>>([]);
const location: any = useLocation();
const navigate = useNavigate();
const message = useMessage()
const [fullScreenShow, setFullScreenShow] = useState<boolean>(false)
const message = useMessage();
const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
const {name, state, } = workFlowJobInfo || {}
const { name, state } = workFlowJobInfo || {};
/** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, {
......@@ -94,11 +93,13 @@ const ProjectSubmitWork = observer(() => {
},
});
const goToProjectData = (path: string) => {
navigate(`/product/cadd/projectData`, {
state: { pathName: "path" },
});
path = path.slice(13);
if (path) {
navigate(`/product/cadd/projectData`, {
state: { pathName: "path" },
});
}
};
const getOutouts = (outputs: any) => {
......@@ -168,7 +169,6 @@ const ProjectSubmitWork = observer(() => {
if (Array.isArray(res.data)) {
res.data.forEach((item1) => {
if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
console.log(9999);
randerOutputs[index].size = item1.size;
setRanderOutputs([...randerOutputs]);
}
......@@ -180,22 +180,22 @@ const ProjectSubmitWork = observer(() => {
// 取消作业
const { run: cancelWorkJob } = useMyRequest(cancelWorkflowJob, {
onSuccess: (res: IResponse<boolean>) => {
const {errorCode} = res;
if(errorCode === 0) {
message.success('操作成功！')
const { errorCode } = res;
if (errorCode === 0) {
message.success("操作成功！");
}
navigate(-1)
navigate(-1);
},
});
// 取消作业
const { run: deleteWorkJob } = useMyRequest(deleteWorkflowJob, {
onSuccess: (res: IResponse<boolean>) => {
const {errorCode} = res;
if(errorCode === 0) {
message.success('操作成功！')
const { errorCode } = res;
if (errorCode === 0) {
message.success("操作成功！");
}
navigate(-1)
navigate(-1);
},
});
......@@ -241,312 +241,333 @@ const ProjectSubmitWork = observer(() => {
/** 终止任务 */
const onStopJob = useCallback(() => {
cancelWorkJob({
jobid: workFlowJobInfo?.id || ''
})
},[cancelWorkJob, workFlowJobInfo?.id])
jobid: workFlowJobInfo?.id || "",
});
}, [cancelWorkJob, workFlowJobInfo?.id]);
/** 删除任务 */
const onDeleteJob = useCallback(() => {
/** 删除任务 */
const onDeleteJob = useCallback(() => {
deleteWorkJob({
id: workFlowJobInfo?.id || ''
})
},[deleteWorkJob, workFlowJobInfo?.id])
id: workFlowJobInfo?.id || "",
});
}, [deleteWorkJob, workFlowJobInfo?.id]);
return (
<div className={styles.swBox}>
{fullScreenShow ? null : <div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<IconButton
color="primary"
onClick={() => navigate(-1)}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
<div className={styles.swTemplateTitle}>{name}</div>
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
title={ state === "RUNNING" ? "正在运行的任务终止后将无法重新运行，确认继续吗？" : "任务被删除后将无法恢复，确认继续吗？"}
onConfirm={()=>{
state === "RUNNING" ? onStopJob() : onDeleteJob()
}}
>
<ButtonComponent
text={state === "RUNNING" ? "终止" : '删除'}
variant="outlined"
color="secondary"
// click={onStopJob}
></ButtonComponent>
</MyPopconfirm>
{fullScreenShow ? null : (
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<IconButton
color="primary"
onClick={() => navigate(-1)}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
<div className={styles.swTemplateTitle}>{name}</div>
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
title={
state === "RUNNING"
? "正在运行的任务终止后将无法重新运行，确认继续吗？"
: "任务被删除后将无法恢复，确认继续吗？"
}
onConfirm={() => {
state === "RUNNING" ? onStopJob() : onDeleteJob();
}}
>
<ButtonComponent
text={state === "RUNNING" ? "终止" : "删除"}
variant="outlined"
color="secondary"
// click={onStopJob}
></ButtonComponent>
</MyPopconfirm>
</div>
</div>
</div>}
)}
<div className={styles.swContent}>
{fullScreenShow ? null : <div className={styles.swFormBox}>
{!activePatchId && (
<div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div>
{workFlowJobInfo?.outputs && (
<div className={styles.taskResults}>
{randerOutputs1.map((item, index) => {
return (
<div key={index} className={styles.outputLi}>
<div className={styles.outputLiLeft}>
<img
className={styles.outputLiLeftImg}
src={item.type === "file" ? fileIcon : dataSetIcon}
alt=""
/>
{item.name}
{fullScreenShow ? null : (
<div className={styles.swFormBox}>
{!activePatchId && (
<div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div>
{workFlowJobInfo?.outputs && (
<div className={styles.taskResults}>
{randerOutputs1.map((item, index) => {
return (
<div key={index} className={styles.outputLi}>
<MyPopconfirm
title="即将跳转至项目数据内该任务的结果目录，确认继续吗？"
onConfirm={() => goToProjectData(item.path)}
>
<div className={styles.outputLiLeft}>
<img
className={styles.outputLiLeftImg}
src={
item.type === "file" ? fileIcon : dataSetIcon
}
alt=""
/>
{item.name}
</div>
</MyPopconfirm>
<span className={styles.outputLiRight}>
{item.size}
</span>
</div>
<span className={styles.outputLiRight}>
{item.size}
</span>
</div>
);
})}
</div>
)}
{!workFlowJobInfo?.outputs && (
<div className={styles.notResults}>暂无结果文件</div>
)}
<div className={styles.title}>任务信息</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务名称</div>
<div
className={styles.taskInfoValue}
title={name}
>
{name || "-"}
);
})}
</div>
)}
{!workFlowJobInfo?.outputs && (
<div className={styles.notResults}>暂无结果文件</div>
)}
<div className={styles.title}>任务信息</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务名称</div>
<div className={styles.taskInfoValue} title={name}>
{name || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务ID</div>
<div
className={styles.taskInfoValue}
title={workFlowJobInfo?.id}
>
{workFlowJobInfo?.id || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务ID</div>
<div
className={styles.taskInfoValue}
title={workFlowJobInfo?.id}
>
{workFlowJobInfo?.id || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>输出路径</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.outputPath || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>输出路径</div>
<div
className={styles.taskInfoValue}
onClick={() =>
goToProjectData(workFlowJobInfo?.outputPath as string)
}
>
{workFlowJobInfo?.outputPath || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行状态</div>
<div className={styles.taskInfoValue}>
{state === "SUCCEEDED" && (
<img
className={styles.taskInfoValueIcon}
src={jobSue}
alt=""
/>
)}
{state === "RUNNING" && (
<img
className={styles.taskInfoValueIcon}
src={jobRun}
alt=""
/>
)}
{state === "ABORTED" && (
<img
className={styles.taskInfoValueIcon}
src={jobStop}
alt=""
/>
)}
{state === "FAILED" && (
<img
className={styles.taskInfoValueIcon}
src={jobFail}
alt=""
/>
)}
{state
? stateMap[state]
: "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行状态</div>
<div className={styles.taskInfoValue}>
{state === "SUCCEEDED" && (
<img
className={styles.taskInfoValueIcon}
src={jobSue}
alt=""
/>
)}
{state === "RUNNING" && (
<img
className={styles.taskInfoValueIcon}
src={jobRun}
alt=""
/>
)}
{state === "ABORTED" && (
<img
className={styles.taskInfoValueIcon}
src={jobStop}
alt=""
/>
)}
{state === "FAILED" && (
<img
className={styles.taskInfoValueIcon}
src={jobFail}
alt=""
/>
)}
{state ? stateMap[state] : "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specTitle || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specTitle || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板版本</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specVersion || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板版本</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specVersion || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>花费（元）</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.jobCost || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>花费（元）</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.jobCost || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建人</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.creator || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建人</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.creator || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.createTime || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.createTime || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.costTime || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.costTime || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>日志文件</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.logPath && (
<span
className={styles.taskInfoDownload}
onClick={() => handleDownLoad(workFlowJobInfo?.logPath)}
>
下载
</span>
)}
{!workFlowJobInfo?.logPath && "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>日志文件</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.logPath && (
<span
className={styles.taskInfoDownload}
onClick={() => handleDownLoad(workFlowJobInfo?.logPath)}
>
下载
</span>
)}
{!workFlowJobInfo?.logPath && "-"}
</div>
</div>
</div>
</div>
)}
{activePatchId && (
<div className={styles.suanziInfo}>
<div className={styles.title}>{patchInfo?.title}</div>
<div className={styles.tabs}>
<div
className={classNames({
[styles.tabLi]: true,
[styles.tabLiAcitve]: overviewActive,
})}
onClick={() => setOverviewActive(true)}
>
概览
</div>
<div
className={classNames({
[styles.tabLi]: true,
[styles.tabLiAcitve]: !overviewActive,
})}
// onClick={() => setOverviewActive(false)}
onClick={() => handleParams()}
>
{patchInfo?.children.length > 0
? patchInfo?.children[activeFlowIndex].title
: patchInfo?.title}
{showOptions && patchInfo?.children.length > 0 && (
<div className={styles.options}>
{patchInfo?.children.map((item: any, index: number) => {
return (
<div
key={index}
className={styles.option}
onClick={() => setActiveFlowIndex(index)}
>
{item.title}
</div>
);
})}
</div>
)}
)}
{activePatchId && (
<div className={styles.suanziInfo}>
<div className={styles.title}>{patchInfo?.title}</div>
<div className={styles.tabs}>
<div
className={classNames({
[styles.tabLi]: true,
[styles.tabLiAcitve]: overviewActive,
})}
onClick={() => setOverviewActive(true)}
>
概览
</div>
<div
className={classNames({
[styles.tabLi]: true,
[styles.tabLiAcitve]: !overviewActive,
})}
// onClick={() => setOverviewActive(false)}
onClick={() => handleParams()}
>
{patchInfo?.children.length > 0
? patchInfo?.children[activeFlowIndex].title
: patchInfo?.title}
{showOptions && patchInfo?.children.length > 0 && (
<div className={styles.options}>
{patchInfo?.children.map((item: any, index: number) => {
return (
<div
key={index}
className={styles.option}
onClick={() => setActiveFlowIndex(index)}
>
{item.title}
</div>
);
})}
</div>
)}
</div>
</div>
</div>
{overviewActive && (
<div className={styles.overview}>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>描述</div>
<div
className={classNames({
[styles.taskInfoValue]: true,
[styles.taskInfoValueShowAll]: true,
})}
>
{patchInfo?.description}
{overviewActive && (
<div className={styles.overview}>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>描述</div>
<div
className={classNames({
[styles.taskInfoValue]: true,
[styles.taskInfoValueShowAll]: true,
})}
>
{patchInfo?.description}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>算子版本</div>
<div className={styles.taskInfoValue}>
{patchInfo?.creator || "-"}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>算子版本</div>
<div className={styles.taskInfoValue}>
{patchInfo?.creator || "-"}
</div>
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>算子状态</div>
<div className={styles.taskInfoValue}>
{patchInfo?.status === "Done" && (
<img
className={styles.taskInfoValueIcon}
src={jobSue}
alt=""
/>
)}
{patchInfo?.status === "Running" && (
<img
className={styles.taskInfoValueIcon}
src={jobRun}
alt=""
/>
)}
{patchInfo?.status === "Failed" && (
<img
className={styles.taskInfoValueIcon}
src={jobFail}
alt=""
/>
)}
{statusMap[patchInfo?.status as IStatus]}
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>算子状态</div>
<div className={styles.taskInfoValue}>
{patchInfo?.status === "Done" && (
<img
className={styles.taskInfoValueIcon}
src={jobSue}
alt=""
/>
)}
{patchInfo?.status === "Running" && (
<img
className={styles.taskInfoValueIcon}
src={jobRun}
alt=""
/>
)}
{patchInfo?.status === "Failed" && (
<img
className={styles.taskInfoValueIcon}
src={jobFail}
alt=""
/>
)}
{statusMap[patchInfo?.status as IStatus]}
</div>
</div>
</div>
</div>
)}
{!overviewActive && (
<div className={styles.params}>
{randerParameters.map((parameter: any) => {
return (
<div className={styles.taskInfoLi} key={parameter.name}>
<div className={styles.taskInfoParams}>
{parameter.name}
</div>
<div className={styles.taskInfoValue}>
{parameter.value || "-"}
)}
{!overviewActive && (
<div className={styles.params}>
{randerParameters.map((parameter: any) => {
return (
<div className={styles.taskInfoLi} key={parameter.name}>
<div className={styles.taskInfoParams}>
{parameter.name}
</div>
<div className={styles.taskInfoValue}>
{parameter.value || "-"}
</div>
</div>
</div>
);
})}
</div>
)}
</div>
)}
</div>}
<div className={styles.swFlowBox} style={ fullScreenShow ? {height: '100vh'} : undefined}>
);
})}
</div>
)}
</div>
)}
</div>
)}
<div
className={styles.swFlowBox}
style={fullScreenShow ? { height: "100vh" } : undefined}
>
<Flow tasks={workFlowJobInfo?.tasks} onBatchClick={handleBatch} />
</div>
</div>
<img className={styles.fullScreenBox} src={fullScreenShow ? partialScreen : fullScreen } onClick={()=>setFullScreenShow(!fullScreenShow)} alt='全屏'/>
<img
className={styles.fullScreenBox}
src={fullScreenShow ? partialScreen : fullScreen}
onClick={() => setFullScreenShow(!fullScreenShow)}
alt="全屏"
/>
</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