feat: 详情任务结果修改

src/views/Project/ProjectJobDetail/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-06 10:54:40
+ * @LastEditTime: 2022-12-12 18:11:38
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -46,6 +46,8 @@ import {
 	getSameBatch,
 } from "./utils";
 import MyTooltip from "@/components/mui/MyTooltip";
+import taskResultsFileIcon from "@/assets/project/taskResultsFileIcon.svg";
+import taskResultsDatasetIcon from "@/assets/project/taskResultsDatasetIcon.svg";
 
 import styles from "./index.module.css";
 
@@ -57,7 +59,7 @@ const statusMap = {
 };
 
 type IStatus = "Done" | "Running" | "Failed" | "Pending";
-let randerOutputs: Array<any> = [];
+let renderOutputs: Array<any> = [];
 
 const ProjectSubmitWork = observer(() => {
 	const { currentProjectStore } = useStores();
@@ -72,7 +74,7 @@ const ProjectSubmitWork = observer(() => {
 	/** 选中的node Id */
 	const [activeFlowIndex, setActiveFlowIndex] = useState<string>("");
 	// const [showOptions, setShowOptions] = useState<boolean>(false);
-	const [randerOutputs1, setRanderOutputs] = useState<Array<any>>([]);
+	const [renderOutputs1, setRenderOutputs] = useState<Array<any>>([]);
 	const locationInfo: any = useLocation()?.state;
 	// const locationInfo: any = location?.state;
 	const navigate = useNavigate();
@@ -97,7 +99,7 @@ const ProjectSubmitWork = observer(() => {
 		pollingInterval: 1000 * 20,
 		pollingWhenHidden: false,
 		onSuccess: (res: IResponse<ITaskInfo>) => {
-			getOutouts(res.data.outputs);
+			getOutputs(res.data.outputs);
 			getLogs(res.data);
 			setWorkFlowJobInfo(res.data);
 			const newWorkflowId = locationInfo?.taskId?.replaceAll("-", "");
@@ -180,6 +182,7 @@ const ProjectSubmitWork = observer(() => {
 	const { run: getworkFlowTaskInfoRun } = useMyRequest(getworkFlowTaskInfo, {
 		onSuccess: (res) => {
 			setPatchInfo(res.data);
+			getOutputs(res.data.outputs)
 		},
 	});
 
@@ -225,7 +228,7 @@ const ProjectSubmitWork = observer(() => {
 		}
 	}, [navigate, locationInfo.from, productId]);
 
-	const getOutouts = (outputs: any) => {
+	const getOutputs = (outputs: any) => {
 		if (outputs) {
 			let result = Object.keys(outputs);
 			let arr = result.map((item) => {
@@ -233,8 +236,9 @@ const ProjectSubmitWork = observer(() => {
 				if (outputs[item].indexOf("dataset") !== -1) {
 					type = "dataset";
 				}
+				const nameArr = outputs[item]?.split('/') || []
 				return {
-					name: item,
+					name: nameArr.length ? nameArr[nameArr.length - 1] : '',
 					type,
 					path: outputs[item],
 					size: 0,
@@ -247,11 +251,11 @@ const ProjectSubmitWork = observer(() => {
 					await getFileSize(item, index);
 				}
 			});
-			randerOutputs = arr;
-			setRanderOutputs([...randerOutputs]);
+			renderOutputs = arr;
+			setRenderOutputs(renderOutputs);
 		} else {
-			randerOutputs = [];
-			setRanderOutputs([]);
+			renderOutputs = [];
+			setRenderOutputs([]);
 		}
 	};
 
@@ -265,8 +269,8 @@ const ProjectSubmitWork = observer(() => {
 			name: getDatasetName(item.path),
 		})
 			?.then((res) => {
-				randerOutputs[index].size = `${res.data}条`;
-				setRanderOutputs([...randerOutputs]);
+				renderOutputs[index].size = `${res.data}条`;
+				setRenderOutputs(renderOutputs);
 			})
 			?.catch(() => {
 				message.error("获取数据集大小失败");
@@ -290,10 +294,10 @@ const ProjectSubmitWork = observer(() => {
 			if (Array.isArray(res.data)) {
 				res.data.forEach((item1) => {
 					if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
-						randerOutputs[index].size = `${
+						renderOutputs[index].size = `${
 							item1.size ? storageUnitFromB(Number(item1.size)) : "-"
 						}`;
-						setRanderOutputs([...randerOutputs]);
+						setRenderOutputs(renderOutputs);
 					}
 				});
 			}
@@ -466,7 +470,7 @@ const ProjectSubmitWork = observer(() => {
 						{!activeFlowIndex && (
 							<TaskInfo
 								workFlowJobInfo={workFlowJobInfo as ITaskInfo}
-								randerOutputs1={randerOutputs1}
+								randerOutputs1={renderOutputs1}
 								handleDownLoadOutput={handleDownLoadOutput}
 								handleShowPopper={handleShowPopper}
 								setGoToProjectDataPath={setGoToProjectDataPath}
@@ -547,6 +551,48 @@ const ProjectSubmitWork = observer(() => {
 												{statusMap[overviewInfo?.status as IStatus]}
 											</div>
 										</div>
+										{workFlowJobInfo?.outputs &&
+											Object.keys(workFlowJobInfo?.outputs).length > 0 && (
+												<div className={styles.taskResults}>
+													{renderOutputs1.map((item, index) => {
+														return (
+															<div key={index} className={styles.outputLi}>
+																<div className={styles.outputLiLeft}>
+																	<img
+																		className={classNames({
+																			[styles.outputLiLeftImg]: true,
+																			[styles.outputLiLeftImgBoxShadow2]:
+																				item.type === "file",
+																		})}
+																		src={
+																			item.type === "file"
+																				? taskResultsFileIcon
+																				: taskResultsDatasetIcon
+																		}
+																		alt=""
+																	/>
+																	<div className={styles.outputLiLeftContent}>
+																		<div className={styles.outputItemName}>{item.name}</div>
+																		<div className={styles.outputLiSize}>{item.size}</div>
+																	</div>
+																</div>
+																<div
+																	onClick={(e: any) => {
+																		handleDownLoadOutput(item);
+																	}}
+																	className={classNames({
+																		[styles.outputLiRight]: true,
+																		[styles.seeDataset]: item.type !== "file",
+																		[styles.downloadFile]: item.type === "file",
+																	})}
+																></div>
+															</div>
+														);
+													})}
+												</div>
+										)}
+
+				
 									</div>
 								)}
 								{!overviewActive && (

src/views/Project/ProjectJobDetail/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-08-15 14:44:24
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-15 14:46:02
+ * @LastEditTime: 2022-12-12 18:05:01
  * @FilePath: /bkunyun/src/views/Project/ProjectJobDetail/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,5 +10,6 @@ export interface IFlowNodeTransmissionNum {
   target: string,
   value: number,
   batchId: string,
-  source: string
+  source: string,
+  outputs: any
 }
\ No newline at end of file

src/views/Project/ProjectOverview/TaskCard/index.tsx

@@ -53,8 +53,9 @@ const TaskCard = observer((props: TaskCardProps) => {
 				if (outputs[item].indexOf("dataset") !== -1) {
 					type = "dataset";
 				}
+				const nameArr = outputs[item]?.split('/') || []
 				return {
-					name: item,
+					name: nameArr.length ? nameArr[nameArr.length - 1] : '',
 					type,
 					path: outputs[item],
 				};