feat：查看日志

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

+.logView {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .5);
+    z-index: 1002;
+}
+
+.logViewBox {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 900px;
+    height: 600px;
+    background: #282C34;
+    box-shadow: 2px 4px 20px 0px rgba(0, 15, 45, 0.1200);
+    border-radius: 8px;
+}
+
+.close {
+    position: absolute;
+    right: 0;
+    top: -28px;
+    cursor: pointer;
+    color: #fff;
+}
+
+.logViewTop {
+    /* height: 30px; */
+    background-color: #1D2126;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    font-size: 12px;
+    color: #8A9099;
+    overflow: auto;
+}
+
+.logViewTop::-webkit-scrollbar-track {
+    background-color: #282C34;
+  }
+
+.logTitle {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    line-height: 20px;
+    padding: 0 24px;
+    cursor: pointer;
+}
+
+.logTitleSelected {
+    background: #282C34;
+    color: #FFFFFF;
+}
+
+.fileIcon{
+    width: 14px!important;
+    margin-right: 4px;
+}
+
+.logViewContent {
+    position: relative;
+    box-sizing: border-box;
+    height: 510px;
+    padding: 16px 24px 0;
+    color: #D1D6DE;
+    white-space:pre-wrap;
+    word-break: break-word;
+    overflow: auto;
+    font-size: 14px;
+    line-height: 22px;
+}
+
+.logViewContentMask{
+    height: 16px;
+    width: 852px;
+    background-color: #282C34;
+    position: absolute;
+    top: 30px;
+    left: 24px;
+    z-index: 1005;
+}
+
+.logViewContent::-webkit-scrollbar-track {
+  background-color: #282C34;
+}
+
+.logViewBottom {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    height: 60px;
+    padding-right: 24px;
+}
\ No newline at end of file

src/views/Project/ProjectJobDetail/LogView/index.tsx

+import { useState, useCallback, useEffect, useMemo } from "react";
+import classnames from "classnames";
+import style from "./index.module.css";
+import CloseIcon from "@mui/icons-material/Close";
+import MyButton from "@/components/mui/MyButton";
+import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
+import CloudEController from "@/api/fileserver/CloudEController";
+import { useStores } from "@/store";
+import { toJS } from "mobx";
+
+
+type LogViewProps = {
+    isshow: boolean;
+    handleClose: () => void;
+    logs: any[];
+};
+
+const LogView = (props: LogViewProps) => {
+    const { isshow, handleClose, logs } = props;
+    const { currentProjectStore } = useStores();
+    const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
+    const projectId = toJS(currentProjectStore.currentProjectInfo.id);
+    // 当前选择的日志
+    const [logCurrent, setLogCurrent] = useState<number>(0);
+    // 当前日志的内容文本
+    const [logText, setLogText] = useState('')
+    // 当前日志路径
+    const [logPath, setLogPath] = useState('')
+
+    useEffect(() => {
+        setLogPath(logs[logCurrent]?.logPath)
+    }, [logs]);
+
+    // 请求日志文本
+    useEffect(() => {
+        if (logPath) {
+            const path = logPath.slice(12)
+            CloudEController.JobFileDownloadText(
+                path,
+                fileToken as string,
+                projectId as string
+            )?.then((res) => {
+                setLogText(res.data)
+            })
+        }else{
+            setLogText("")
+        }
+    }, [logPath]);
+
+    // 选择日志时改变日志路径
+    useEffect(() => {
+        setLogPath(logs[logCurrent]?.logPath)
+    }, [logCurrent]);
+
+    // 下载当前日志
+    const handleDownLoad=()=>{
+        const path = logPath.slice(12)
+        CloudEController.JobFileDownload(
+			path,
+			fileToken as string,
+			projectId as string
+		);
+    }
+
+    return <div className={style.logView} style={isshow ? {} : { display: "none" }}>
+        <div className={style.logViewBox}>
+            <CloseIcon onClick={handleClose} className={style.close} />
+            <div className={style.logViewContentMask}></div>
+            <div className={style.logViewTop}>
+                {logs.map((item: any, index: number) => {
+                    return <div
+                        key={index}
+                        onClick={() => { setLogCurrent(index) }}
+                        className={classnames({
+                            [style.logTitle]: true,
+                            [style.logTitleSelected]: index === logCurrent,
+                        })}>
+                        <InsertDriveFileOutlinedIcon className={style.fileIcon} />
+                        <span>{item.logName}</span>
+                    </div>
+                })}
+            </div>
+            <div className={style.logViewContent}>
+                {logText}
+            </div>
+            <div className={style.logViewBottom}>
+                <MyButton text='下载当前日志' onClick={handleDownLoad} />
+            </div>
+        </div>
+    </div>
+}
+
+export default LogView
\ No newline at end of file

src/views/Project/ProjectJobDetail/index.tsx

@@ -35,9 +35,9 @@ import { useMessage } from "@/components/MySnackbar";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
 import SeeDataset from "../ProjectData/SeeDataset";
 import { getToken, storageUnitFromB } from "@/utils/util";
-
-import styles from "./index.module.css";
+import LogView from "./LogView"
 import usePass from "@/hooks/usePass";
+import styles from "./index.module.css";
 
 const stateMap = {
 	RUNNING: "正在运行",
@@ -73,6 +73,11 @@ const ProjectSubmitWork = observer(() => {
 	const message = useMessage();
 	const isPass = usePass();
 	const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
+	// 查看日志弹框显示
+	const [showLogView, setShowLogView] = useState<boolean>(false);
+	// 日志信息
+	const [logs, setLogs] = useState<Array<any>>([])
+
 	const { name, state } = workFlowJobInfo || {};
 	// 查看数据集（数据集详情）显示控制
 	const [showSeeDataset, setShowSeeDataset] = useState(false);
@@ -87,10 +92,22 @@ const ProjectSubmitWork = observer(() => {
 		pollingWhenHidden: false,
 		onSuccess: (res: IResponse<ITaskInfo>) => {
 			getOutouts(res.data.outputs);
+			getLogs(res.data);
 			setWorkFlowJobInfo(res.data);
 		},
 	});
 
+	// 处理日志数据
+	const getLogs = (data: any) => {
+		let logs = [{ logName: "workflow.log", logPath: data.logPath }]
+		data.tasks.forEach((i: any) => {
+			if (i.outLog) {
+				logs.push({ logName: `${i.title}.log`, logPath: i.outLog })
+			}
+		});
+		setLogs(logs)
+	}
+
 	useEffect(() => {
 		const locationInfo: any = location?.state;
 		run({
@@ -245,9 +262,8 @@ 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 = `${
-							item1.size ? storageUnitFromB(Number(item1.size)) : "-"
-						}`;
+						randerOutputs[index].size = `${item1.size ? storageUnitFromB(Number(item1.size)) : "-"
+							}`;
 						setRanderOutputs([...randerOutputs]);
 					}
 				});
@@ -362,6 +378,10 @@ const ProjectSubmitWork = observer(() => {
 		}
 	};
 
+	const handleClose = () => {
+		setShowLogView(false)
+	}
+
 	return (
 		<div className={styles.swBox}>
 			{fullScreenShow ? null : (
@@ -409,7 +429,7 @@ const ProjectSubmitWork = observer(() => {
 											: "任务被删除后将无法恢复，确认继续吗？"
 									)
 								}
-								// click={onStopJob}
+							// click={onStopJob}
 							></MyButton>
 							{/* </MyPopconfirm> */}
 						</div>
@@ -455,8 +475,8 @@ const ProjectSubmitWork = observer(() => {
 									)}
 								{(!workFlowJobInfo?.outputs ||
 									Object.keys(workFlowJobInfo?.outputs).length === 0) && (
-									<div className={styles.notResults}>暂无结果文件</div>
-								)}
+										<div className={styles.notResults}>暂无结果文件</div>
+									)}
 								<div className={styles.title}>任务信息</div>
 								<div className={styles.taskInfoLi}>
 									<div className={styles.taskInfoParams}>任务名称</div>
@@ -567,12 +587,20 @@ const ProjectSubmitWork = observer(() => {
 									<div className={styles.taskInfoParams}>日志文件</div>
 									<div className={styles.taskInfoValue}>
 										{workFlowJobInfo?.logPath && (
-											<span
+											<>
+												{/* <span
 												className={styles.taskInfoDownload}
 												onClick={() => handleDownLoad(workFlowJobInfo?.logPath)}
 											>
 												下载
-											</span>
+											</span> */}
+												<span
+													className={styles.taskInfoDownload}
+													onClick={() => setShowLogView(true)}
+												>
+													查看
+												</span>
+											</>
 										)}
 										{!workFlowJobInfo?.logPath && "-"}
 									</div>
@@ -720,6 +748,11 @@ const ProjectSubmitWork = observer(() => {
 					projectId={projectId as string}
 				></SeeDataset>
 			)}
+			<LogView
+				isshow={showLogView}
+				handleClose={handleClose}
+				logs={logs}
+			/>
 		</div>
 	);
 });