Skip to content

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

feat: 全屏开发

parent 1e253dc3
Show whitespace changes
Inline Side-by-side
Showing with 171 additions and 29 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 @@
.optionActive {
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 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @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
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { useEffect, useState, useMemo } from "react";
import ButtonComponent from "@/components/mui/Button";
import { useEffect, useState, useMemo, useCallback } from "react";
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 IconButton from "@mui/material/IconButton";
import ButtonComponent from "@/components/mui/Button";
import useMyRequest from "@/hooks/useMyRequest";
import { fetchWorkFlowJob, getworkFlowTaskInfo } from "@/api/project_api";
import { useLocation, useNavigate } from "react-router-dom";
import { IResponse } from "@/api/http";
import jobSue from "@/assets/project/jobSue.svg";
import jobStop from "@/assets/project/jobStop.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 jobFail from "@/assets/project/jobFail.svg";
import { useStores } from "@/store";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { getDataFind } from "@/api/project_api";
import classNames from "classnames";
import styles from "./index.module.css";
import { ITaskInfo } from "../ProjectSubmitWork/interface";
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 = {
RUNNING: "正在运行",
......@@ -57,6 +64,10 @@ const ProjectSubmitWork = observer(() => {
const [showOptions, setShowOptions] = useState<boolean>(false);
const location: any = useLocation();
const navigate = useNavigate();
const message = useMessage()
const [fullScreenShow, setFullScreenShow] = useState<boolean>(false)
const {name, state, } = workFlowJobInfo || {}
/** 获取模版数据 */
const { run } = useMyRequest(fetchWorkFlowJob, {
......@@ -68,18 +79,17 @@ 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);
},
});
const goToProjectData = (path: string) => {
navigate(`/product/cadd/projectData`, {
state: { pathName: "path" },
......@@ -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) => {
setActivePatchId(id);
if (id) {
......@@ -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 (
<div className={styles.swBox}>
<div className={styles.swHeader}>
{fullScreenShow ? null : <div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<IconButton
color="primary"
......@@ -192,18 +238,28 @@ const ProjectSubmitWork = observer(() => {
/>
</IconButton>
<div className={styles.swTemplateTitle}>{workFlowJobInfo?.name}</div>
<div className={styles.swTemplateTitle}>{name}</div>
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
title={ state === "RUNNING" ? "正在运行的任务终止后将无法重新运行，确认继续吗？" : "任务被删除后将无法恢复，确认继续吗？"}
onConfirm={()=>{
state === "RUNNING" ? onStopJob() : onDeleteJob()
}}
>
<ButtonComponent
text="终止"
text={state === "RUNNING" ? "终止" : '删除'}
variant="outlined"
color="secondary"
// click={onStopJob}
></ButtonComponent>
</MyPopconfirm>
</div>
</div>
</div>}
<div className={styles.swContent}>
<div className={styles.swFormBox}>
{fullScreenShow ? null : <div className={styles.swFormBox}>
{!activePatchId && (
<div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div>
......@@ -218,9 +274,9 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.taskInfoParams}>任务名称</div>
<div
className={styles.taskInfoValue}
title={workFlowJobInfo?.name}
title={name}
>
{workFlowJobInfo?.name || "-"}
{name || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
......@@ -241,36 +297,36 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行状态</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.state === "SUCCEEDED" && (
{state === "SUCCEEDED" && (
<img
className={styles.taskInfoValueIcon}
src={jobSue}
alt=""
/>
)}
{workFlowJobInfo?.state === "RUNNING" && (
{state === "RUNNING" && (
<img
className={styles.taskInfoValueIcon}
src={jobRun}
alt=""
/>
)}
{workFlowJobInfo?.state === "ABORTED" && (
{state === "ABORTED" && (
<img
className={styles.taskInfoValueIcon}
src={jobStop}
alt=""
/>
)}
{workFlowJobInfo?.state === "FAILED" && (
{state === "FAILED" && (
<img
className={styles.taskInfoValueIcon}
src={jobFail}
alt=""
/>
)}
{workFlowJobInfo?.state
? stateMap[workFlowJobInfo?.state]
{state
? stateMap[state]
: "-"}
</div>
</div>
......@@ -433,11 +489,12 @@ const ProjectSubmitWork = observer(() => {
)}
</div>
)}
</div>
<div className={styles.swFlowBox}>
</div>}
<div className={styles.swFlowBox} style={ fullScreenShow ? {height: '100vh'} : undefined}>
<Flow tasks={workFlowJobInfo?.tasks} onBatchClick={handleBatch} />
</div>
</div>
<img className={styles.fullScreenBox} src={fullScreenShow ? partialScreen : fullScreen } onClick={()=>setFullScreenShow(!fullScreenShow)} alt='全屏'/>
</div>
);
});
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ a45eb469
......@@ -449,11 +449,11 @@ const ConfigForm = (props: ConfigFormProps) => {
</div>
);
})}
<FileSelect
{fileSelectOpen && <FileSelect
onClose={handleFileSelectOnClose}
open={fileSelectOpen}
onConfirm={onFileSelectConfirm}
/>
/>}
</div>
);
};
......
src/views/Project/components/Flow/index.tsx
View file @ a45eb469
......@@ -119,6 +119,7 @@ const FlowNode = (props: any) => {
const Flow = (props: IProps) => {
const { tasks, onBatchClick } = props;
console.log(tasks,'tasks')
const [selectedNodeId, setSelectedNodeId] = useState<string>("");
/** 自定义的节点类型 */
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