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