feat: 任务结果联调

src/views/Project/ProjectJobDetail/index.module.css

@@ -61,6 +61,25 @@
   background-color: rgba(247, 248, 250, 1);
   margin-bottom: 24px;
 }
+.outputLi {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 6px 0;
+}
+.outputLiLeft {
+  display: flex;
+  align-items: center;
+  color: rgba(19, 112, 255, 1);
+  font-size: 14px;
+}
+.outputLiLeftImg {
+  margin-right: 15px;
+}
+.outputLiRight {
+  color: rgba(138, 144, 153, 1);
+  font-size: 12px;
+}
 .notResults {
   background-color: rgba(247, 248, 250, 1);
   padding: 54px 0;

src/views/Project/ProjectJobDetail/index.tsx

@@ -19,6 +19,8 @@ import jobStop from "@/assets/project/jobStop.svg";
 import jobRun from "@/assets/project/jobRun.svg";
 import CloudEController from "@/api/fileserver/CloudEController";
 import jobFail from "@/assets/project/jobFail.svg";
+import fileIcon from "@/assets/project/fileIcon.svg";
+import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 import { useStores } from "@/store";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
@@ -44,6 +46,7 @@ const statusMap = {
 };
 
 type IStatus = "Done" | "Running" | "Failed" | "Pending";
+let randerOutputs: Array<any> = [];
 
 const ProjectSubmitWork = observer(() => {
   const { currentProjectStore } = useStores();
@@ -55,12 +58,14 @@ const ProjectSubmitWork = observer(() => {
   const [overviewActive, setOverviewActive] = useState(true);
   const [activeFlowIndex, setActiveFlowIndex] = useState<number>(0);
   const [showOptions, setShowOptions] = useState<boolean>(false);
+  const [randerOutputs1, setRanderOutputs] = useState<Array<any>>([]);
   const location: any = useLocation();
   const navigate = useNavigate();
 
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchWorkFlowJob, {
     onSuccess: (res: IResponse<ITaskInfo>) => {
+      getOutouts(res.data.outputs);
       setWorkFlowJobInfo(res.data);
     },
   });
@@ -68,14 +73,12 @@ const ProjectSubmitWork = observer(() => {
   useEffect(() => {
     const locationInfo: any = location?.state;
     run({
-      // id: locationInfo.taskId,
-      id: "89a00e93-8bba-45ee-85b0-63c5cd42c570",
+      id: locationInfo.taskId,
     });
   }, [location?.state, run]);
 
   const { run: getworkFlowTaskInfoRun } = useMyRequest(getworkFlowTaskInfo, {
     onSuccess: (res) => {
-      console.log(res);
       setPatchInfo(res.data);
     },
   });
@@ -86,52 +89,81 @@ const ProjectSubmitWork = observer(() => {
     });
   };
 
-  // const outputs = useMemo(() => {
-  //   if (workFlowJobInfo?.outputs) {
-  //     let result = Object.keys(workFlowJobInfo?.outputs);
-  //     let arr = result.map((item) => {
-  //       let type = "file";
-  //       if (workFlowJobInfo?.outputs[item].indexOf("dataset") !== -1) {
-  //         type = "dataset";
-  //       }
-  //       return {
-  //         name: item,
-  //         type,
-  //         path: workFlowJobInfo?.outputs[item],
-  //       };
-  //     });
-  //     arr.forEach(async (item) => {
-  //       if (item.type === "dataset") {
-  //         await getDataSetSize(item);
-  //       } else {
-  //         await getFileSize(item);
-  //       }
-  //     });
-  //   } else {
-  //     return [];
-  //   }
-  // }, [workFlowJobInfo]);
+  const getOutouts = (outputs: any) => {
+    if (outputs) {
+      let result = Object.keys(outputs);
+      let arr = result.map((item) => {
+        let type = "file";
+        if (outputs[item].indexOf("dataset") !== -1) {
+          type = "dataset";
+        }
+        return {
+          name: item,
+          type,
+          path: outputs[item],
+          size: 0,
+        };
+      });
+      arr.forEach(async (item, index) => {
+        if (item.type === "dataset") {
+          await getDataSetSize(item, index);
+        } else {
+          await getFileSize(item, index);
+        }
+      });
+      randerOutputs = arr;
+      setRanderOutputs([...randerOutputs]);
+    } else {
+      randerOutputs = [];
+      setRanderOutputs([]);
+    }
+  };
 
-  // const getDataSetSize = async (item: any) => {
-  //   const res = await getDataFind({
-  //     projectId: projectId as string,
-  //     path: item.path,
-  //   });
-  //   item.size = res.data[0].size;
-  // };
+  const getDataSetSize = async (item: any, index: number) => {
+    let path = item.path.slice(13);
+    const lastIndex = path.lastIndexOf("/");
+    if (lastIndex === -1) {
+      path = "/";
+    } else {
+      path = path.slice(0, lastIndex + 1);
+    }
+    const res = await getDataFind({
+      projectId: projectId as string,
+      path: path,
+    });
+    res.data.forEach((item1: any) => {
+      if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
+        randerOutputs[index].size = `${item1.size}条`;
+        setRanderOutputs([...randerOutputs]);
+      }
+    });
+  };
 
-  // const getFileSize = (item: any) => {
-  //   CloudEController.JobOutFileList(
-  //     item.path,
-  //     fileToken as string,
-  //     projectId as string,
-  //     false
-  //   )?.then((res) => {
-  //     if (Array.isArray(res.data)) {
-  //       item.size = res.data[0].size;
-  //     }
-  //   });
-  // };
+  const getFileSize = (item: any, index: number) => {
+    let path = item.path.slice(13);
+    const lastIndex = path.lastIndexOf("/");
+    if (lastIndex === -1) {
+      path = "/";
+    } else {
+      path = path.slice(0, lastIndex + 1);
+    }
+    CloudEController.JobOutFileList(
+      path,
+      fileToken as string,
+      projectId as string,
+      false
+    )?.then((res) => {
+      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]);
+          }
+        });
+      }
+    });
+  };
 
   const handleBatch = (id: string) => {
     setActivePatchId(id);
@@ -208,7 +240,25 @@ const ProjectSubmitWork = observer(() => {
             <div className={styles.taskInfo}>
               <div className={styles.title}>任务结果</div>
               {workFlowJobInfo?.outputs && (
-                <div className={styles.taskResults}>任务结果</div>
+                <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}
+                        </div>
+                        <span className={styles.outputLiRight}>
+                          {item.size}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
               )}
               {!workFlowJobInfo?.outputs && (
                 <div className={styles.notResults}>暂无结果文件</div>