Skip to content

B
bkunyun
Commit a45eb469 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

feat: 全屏开发

parent 1e253dc3
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 33 deletions
src/assets/project/fullScreen.svg 0 → 100644
View file @ a45eb469
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/全屏</title>
<defs>
<rect id="path-1" x="0" y="0" width="16" height="16"></rect>
<filter color-interpolation-filters="auto" id="filter-3">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.337255 0 0 0 0 0.362353 0 0 0 0 0.400000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="工作台（使用模版）" transform="translate(-1393.000000, -1979.000000)">
<g id="编组备份-2" transform="translate(1384.000000, 1970.000000)">
<g id="1.Base基础/Icon图标/全屏" transform="translate(8.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<g filter="url(#filter-3)" id="编组">
<g mask="url(#mask-2)">
<g transform="translate(-1.000000, -1.000000)">
<g id="编组-63" transform="translate(12.706359, 5.236359) rotate(-315.000000) translate(-12.706359, -5.236359) translate(9.176029, 1.361359)">
<path d="M3.97654174,0.147051761 L4.06066017,0.219669914 L7.06066017,3.21966991 L6,4.28033009 L4.28,2.561 L4.28033009,7.75 L2.78033009,7.75 L2.78,2.561 L1.06066017,4.28033009 L6.61983662e-13,3.21966991 L3,0.219669914 C3.26626656,-0.0465966484 3.68293025,-0.0708026996 3.97654174,0.147051761 Z" id="形状结合" fill="#565C66" fill-rule="nonzero"></path>
</g>
<g id="编组-63备份" transform="translate(5.236359, 12.706359) scale(-1, -1) rotate(-315.000000) translate(-5.236359, -12.706359) translate(1.706029, 8.831359)">
<path d="M3.97654174,0.147051761 L4.06066017,0.219669914 L7.06066017,3.21966991 L6,4.28033009 L4.28,2.561 L4.28033009,7.75 L2.78033009,7.75 L2.78,2.561 L1.06066017,4.28033009 L2.55455517e-12,3.21966991 L3,0.219669914 C3.26626656,-0.0465966484 3.68293025,-0.0708026996 3.97654174,0.147051761 Z" id="形状结合" fill="#565C66" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/partialScreen.svg 0 → 100644
View file @ a45eb469
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/全屏</title>
<defs>
<rect id="path-1" x="0" y="0" width="16" height="16"></rect>
<filter color-interpolation-filters="auto" id="filter-3">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.337255 0 0 0 0 0.362353 0 0 0 0 0.400000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="全屏" transform="translate(-1393.000000, -873.000000)">
<g id="编组备份" transform="translate(1384.000000, 864.000000)">
<g id="1.Base基础/Icon图标/全屏" transform="translate(8.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<g filter="url(#filter-3)" id="编组">
<g mask="url(#mask-2)">
<g transform="translate(-1.000000, -1.000000)">
<g id="编组-63" transform="translate(12.706359, 5.236359) rotate(-315.000000) translate(-12.706359, -5.236359) translate(9.176029, 1.361359)">
<path d="M3.97654174,0.147051761 L4.06066017,0.219669914 L7.06066017,3.21966991 L6,4.28033009 L4.28,2.561 L4.28033009,7.75 L2.78033009,7.75 L2.78,2.561 L1.06066017,4.28033009 L-5.89740035e-13,3.21966991 L3,0.219669914 C3.26626656,-0.0465966484 3.68293025,-0.0708026996 3.97654174,0.147051761 Z" id="形状结合" fill="#565C66" fill-rule="nonzero" transform="translate(3.530330, 3.875000) rotate(-180.000000) translate(-3.530330, -3.875000) "></path>
</g>
<g id="编组-63备份" transform="translate(5.236359, 12.706359) scale(-1, -1) rotate(-135.000000) translate(-5.236359, -12.706359) translate(1.706029, 8.831359)">
<path d="M3.97654174,0.147051761 L4.06066017,0.219669914 L7.06066017,3.21966991 L6,4.28033009 L4.28,2.561 L4.28033009,7.75 L2.78033009,7.75 L2.78,2.561 L1.06066017,4.28033009 L2.55455517e-12,3.21966991 L3,0.219669914 C3.26626656,-0.0465966484 3.68293025,-0.0708026996 3.97654174,0.147051761 Z" id="形状结合" fill="#565C66" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/views/Project/ProjectJobDetail/index.module.css
View file @ a45eb469
...@@ -150,3 +150,16 @@ ...@@ -150,3 +150,16 @@
.optionActive { .optionActive {
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
} }
.fullScreenBox{
position: absolute;
background-color: #fff;
cursor: pointer;
z-index: 1000;
right: 24px;
bottom: 24px;
padding: 8px;
}
.fullScreenBox:hover{
opacity: 0.6;
}
\ No newline at end of file
src/views/Project/ProjectJobDetail/index.tsx
View file @ a45eb469
...@@ -2,32 +2,39 @@ ...@@ -2,32 +2,39 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-28 17:19:15 * @LastEditTime: 2022-06-29 17:07:49
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { useEffect, useState, useMemo } from "react"; import { useEffect, useState, useMemo, useCallback } from "react";
import ButtonComponent from "@/components/mui/Button"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import classNames from "classnames";
import { useLocation, useNavigate } from "react-router-dom";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew"; import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import ButtonComponent from "@/components/mui/Button";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { fetchWorkFlowJob, getworkFlowTaskInfo } from "@/api/project_api"; import { fetchWorkFlowJob, getworkFlowTaskInfo } from "@/api/project_api";
import { useLocation, useNavigate } from "react-router-dom";
import { IResponse } from "@/api/http"; 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 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 { useStores } from "@/store"; import { useStores } from "@/store";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { getDataFind } from "@/api/project_api"; import { getDataFind } from "@/api/project_api";
import classNames from "classnames";
import styles from "./index.module.css";
import { ITaskInfo } from "../ProjectSubmitWork/interface"; import { ITaskInfo } from "../ProjectSubmitWork/interface";
import Flow from "../components/Flow"; import Flow from "../components/Flow";
import { cancelWorkflowJob, deleteWorkflowJob } from "@/api/workbench_api";
import { useMessage } from "@/components/MySnackbar";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import styles from "./index.module.css";
const stateMap = { const stateMap = {
RUNNING: "正在运行", RUNNING: "正在运行",
...@@ -57,6 +64,10 @@ const ProjectSubmitWork = observer(() => { ...@@ -57,6 +64,10 @@ const ProjectSubmitWork = observer(() => {
const [showOptions, setShowOptions] = useState<boolean>(false); const [showOptions, setShowOptions] = useState<boolean>(false);
const location: any = useLocation(); const location: any = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const message = useMessage()
const [fullScreenShow, setFullScreenShow] = useState<boolean>(false)
const {name, state, } = workFlowJobInfo || {}
/** 获取模版数据 */ /** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, { const { run } = useMyRequest(fetchWorkFlowJob, {
...@@ -68,18 +79,17 @@ const ProjectSubmitWork = observer(() => { ...@@ -68,18 +79,17 @@ const ProjectSubmitWork = observer(() => {
useEffect(() => { useEffect(() => {
const locationInfo: any = location?.state; const locationInfo: any = location?.state;
run({ run({
// id: locationInfo.taskId, id: locationInfo.taskId,
id: "89a00e93-8bba-45ee-85b0-63c5cd42c570",
}); });
}, [location?.state, run]); }, [location?.state, run]);
const { run: getworkFlowTaskInfoRun } = useMyRequest(getworkFlowTaskInfo, { const { run: getworkFlowTaskInfoRun } = useMyRequest(getworkFlowTaskInfo, {
onSuccess: (res) => { onSuccess: (res) => {
console.log(res);
setPatchInfo(res.data); setPatchInfo(res.data);
}, },
}); });
const goToProjectData = (path: string) => { const goToProjectData = (path: string) => {
navigate(`/product/cadd/projectData`, { navigate(`/product/cadd/projectData`, {
state: { pathName: "path" }, state: { pathName: "path" },
...@@ -133,6 +143,28 @@ const ProjectSubmitWork = observer(() => { ...@@ -133,6 +143,28 @@ const ProjectSubmitWork = observer(() => {
// }); // });
// }; // };
// 取消作业
const { run: cancelWorkJob } = useMyRequest(cancelWorkflowJob, {
onSuccess: (res: IResponse<boolean>) => {
const {errorCode} = res;
if(errorCode === 0) {
message.success('操作成功！')
}
navigate(-1)
},
});
// 取消作业
const { run: deleteWorkJob } = useMyRequest(deleteWorkflowJob, {
onSuccess: (res: IResponse<boolean>) => {
const {errorCode} = res;
if(errorCode === 0) {
message.success('操作成功！')
}
navigate(-1)
},
});
const handleBatch = (id: string) => { const handleBatch = (id: string) => {
setActivePatchId(id); setActivePatchId(id);
if (id) { if (id) {
...@@ -172,9 +204,23 @@ const ProjectSubmitWork = observer(() => { ...@@ -172,9 +204,23 @@ const ProjectSubmitWork = observer(() => {
); );
}; };
/** 终止任务 */
const onStopJob = useCallback(() => {
cancelWorkJob({
jobid: workFlowJobInfo?.id || ''
})
},[cancelWorkJob, workFlowJobInfo?.id])
/** 删除任务 */
const onDeleteJob = useCallback(() => {
deleteWorkJob({
id: workFlowJobInfo?.id || ''
})
},[deleteWorkJob, workFlowJobInfo?.id])
return ( return (
<div className={styles.swBox}> <div className={styles.swBox}>
<div className={styles.swHeader}> {fullScreenShow ? null : <div className={styles.swHeader}>
<div className={styles.swHeaderLeft}> <div className={styles.swHeaderLeft}>
<IconButton <IconButton
color="primary" color="primary"
...@@ -192,18 +238,28 @@ const ProjectSubmitWork = observer(() => { ...@@ -192,18 +238,28 @@ const ProjectSubmitWork = observer(() => {
/> />
</IconButton> </IconButton>
<div className={styles.swTemplateTitle}>{workFlowJobInfo?.name}</div> <div className={styles.swTemplateTitle}>{name}</div>
</div> </div>
<div className={styles.swHeaderRight}> <div className={styles.swHeaderRight}>
<ButtonComponent <MyPopconfirm
text="终止" title={ state === "RUNNING" ? "正在运行的任务终止后将无法重新运行，确认继续吗？" : "任务被删除后将无法恢复，确认继续吗？"}
variant="outlined" onConfirm={()=>{
color="secondary" state === "RUNNING" ? onStopJob() : onDeleteJob()
></ButtonComponent> }}
>
<ButtonComponent
text={state === "RUNNING" ? "终止" : '删除'}
variant="outlined"
color="secondary"
// click={onStopJob}
></ButtonComponent>
</MyPopconfirm>
</div> </div>
</div> </div>}
<div className={styles.swContent}> <div className={styles.swContent}>
<div className={styles.swFormBox}> {fullScreenShow ? null : <div className={styles.swFormBox}>
{!activePatchId && ( {!activePatchId && (
<div className={styles.taskInfo}> <div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div> <div className={styles.title}>任务结果</div>
...@@ -218,9 +274,9 @@ const ProjectSubmitWork = observer(() => { ...@@ -218,9 +274,9 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.taskInfoParams}>任务名称</div> <div className={styles.taskInfoParams}>任务名称</div>
<div <div
className={styles.taskInfoValue} className={styles.taskInfoValue}
title={workFlowJobInfo?.name} title={name}
> >
{workFlowJobInfo?.name || "-"} {name || "-"}
</div> </div>
</div> </div>
<div className={styles.taskInfoLi}> <div className={styles.taskInfoLi}>
...@@ -241,36 +297,36 @@ const ProjectSubmitWork = observer(() => { ...@@ -241,36 +297,36 @@ const ProjectSubmitWork = observer(() => {
<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?.state === "SUCCEEDED" && ( {state === "SUCCEEDED" && (
<img <img
className={styles.taskInfoValueIcon} className={styles.taskInfoValueIcon}
src={jobSue} src={jobSue}
alt="" alt=""
/> />
)} )}
{workFlowJobInfo?.state === "RUNNING" && ( {state === "RUNNING" && (
<img <img
className={styles.taskInfoValueIcon} className={styles.taskInfoValueIcon}
src={jobRun} src={jobRun}
alt="" alt=""
/> />
)} )}
{workFlowJobInfo?.state === "ABORTED" && ( {state === "ABORTED" && (
<img <img
className={styles.taskInfoValueIcon} className={styles.taskInfoValueIcon}
src={jobStop} src={jobStop}
alt="" alt=""
/> />
)} )}
{workFlowJobInfo?.state === "FAILED" && ( {state === "FAILED" && (
<img <img
className={styles.taskInfoValueIcon} className={styles.taskInfoValueIcon}
src={jobFail} src={jobFail}
alt="" alt=""
/> />
)} )}
{workFlowJobInfo?.state {state
? stateMap[workFlowJobInfo?.state] ? stateMap[state]
: "-"} : "-"}
</div> </div>
</div> </div>
...@@ -433,11 +489,12 @@ const ProjectSubmitWork = observer(() => { ...@@ -433,11 +489,12 @@ const ProjectSubmitWork = observer(() => {
)} )}
</div> </div>
)} )}
</div> </div>}
<div className={styles.swFlowBox}> <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='全屏'/>
</div> </div>
); );
}); });
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ a45eb469
...@@ -449,11 +449,11 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -449,11 +449,11 @@ const ConfigForm = (props: ConfigFormProps) => {
</div> </div>
); );
})} })}
<FileSelect {fileSelectOpen && <FileSelect
onClose={handleFileSelectOnClose} onClose={handleFileSelectOnClose}
open={fileSelectOpen} open={fileSelectOpen}
onConfirm={onFileSelectConfirm} onConfirm={onFileSelectConfirm}
/> />}
</div> </div>
); );
}; };
......
src/views/Project/components/Flow/index.tsx
View file @ a45eb469
...@@ -119,6 +119,7 @@ const FlowNode = (props: any) => { ...@@ -119,6 +119,7 @@ const FlowNode = (props: any) => {
const Flow = (props: IProps) => { const Flow = (props: IProps) => {
const { tasks, onBatchClick } = props; const { tasks, onBatchClick } = props;
console.log(tasks,'tasks')
const [selectedNodeId, setSelectedNodeId] = useState<string>(""); const [selectedNodeId, setSelectedNodeId] = useState<string>("");
/** 自定义的节点类型 */ /** 自定义的节点类型 */
const nodeTypes = useMemo(() => { const nodeTypes = useMemo(() => {
......
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