Skip to content

B
bkunyun
Commit 7f637d6c authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

Merge branch 'feat-20220801' into 'release' 

Feat 20220801

See merge request !83
parents 03e84843 6191c175
Hide whitespace changes
Inline Side-by-side
Showing with 597 additions and 391 deletions
src/assets/project/goback.svg 0 → 100644
View file @ 7f637d6c
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="点击算子" transform="translate(-24.000000, -133.000000)">
<g id="编组-12" transform="translate(24.000000, 133.000000)">
<g id="编组-16" transform="translate(11.000000, 11.000000) scale(-1, 1) rotate(-90.000000) translate(-11.000000, -11.000000) ">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
<g id="编组-14" transform="translate(5.500000, 8.250000)" stroke="#8A9099" stroke-linejoin="round" stroke-width="2">
<polyline id="路径-7备份" transform="translate(5.500000, 2.750000) scale(1, -1) translate(-5.500000, -2.750000) " points="0 5.5 5.5 2.98949133e-16 11 5.5"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/BusinessComponents/SearchInput/index.tsx
View file @ 7f637d6c
......@@ -38,6 +38,9 @@ const SearchInput = (props: SearchInputProps) => {
height: "32px",
fontSize: "14px",
paddingRight: "8px",
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: '#DDE1E6',
},
......
src/components/mui/MyButton.tsx
View file @ 7f637d6c
......@@ -46,7 +46,7 @@ const theme = createTheme({
MuiButton: {
styleOverrides: {
root: {
minWidth: "48px",
minWidth: "68px",
boxShadow: "none !important",
"&.MuiButton-textError": {
color: "rgba(255, 78, 78, 1)",
......@@ -54,7 +54,7 @@ const theme = createTheme({
"&.MuiButton-outlinedError": {
color: "rgba(255, 78, 78, 1)",
border: "1px solid rgba(255, 78, 78, 1)",
"&:hover": { backgroundColor: 'transparent' },
"&:hover": { backgroundColor: "transparent" },
},
"& .MuiLoadingButton-loadingIndicator": {
color: "#fff",
......@@ -110,16 +110,19 @@ const theme = createTheme({
"& p": { fontSize: "12px" },
height: "28px",
padding: "0 12px",
minWidth: "60px",
},
sizeMedium: {
"& p": { fontSize: "14px" },
height: "32px",
padding: "0 16px",
minWidth: "68px",
},
sizeLarge: {
"& p": { fontSize: "16px" },
height: "36px",
padding: "0 16px",
minWidth: "80px",
},
},
},
......
src/components/mui/MySelect.tsx
View file @ 7f637d6c
......@@ -12,6 +12,7 @@ import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
import { createTheme, ThemeProvider } from "@mui/material";
import selectActive from "@/assets/project/selectActive.svg";
export interface IOption {
label: string;
......@@ -80,10 +81,26 @@ export default function MySelect(props: IProps) {
},
},
input: {
fontSize: "14px",
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
},
img: {
display: "none",
},
},
},
},
MuiList: {
styleOverrides: {
root: {
"& .MuiButtonBase-root": {
"&.Mui-selected": {
backgroundColor: "#fff",
color: "#1370FF",
},
},
},
},
},
......@@ -91,9 +108,12 @@ export default function MySelect(props: IProps) {
MuiMenuItem: {
styleOverrides: {
root: {
paddingRight: "46px",
fontSize: "14px",
lineHeight: "24px",
":hover": {
backgroundColor: "#ECF4FF ",
color: "#1370FF",
backgroundColor: "#F0F2F5 ",
color: "#1E2633",
},
},
},
......@@ -152,6 +172,14 @@ export default function MySelect(props: IProps) {
},
},
},
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
},
},
},
},
});
......@@ -186,6 +214,19 @@ export default function MySelect(props: IProps) {
key={index}
>
{item.label}
{value === item.value && (
<img
style={{
width: "16px",
height: "16px",
position: "absolute",
top: "10px",
right: "12px",
}}
src={selectActive}
alt=""
/>
)}
</MenuItem>
);
})
......
src/views/ConsoleLayout/components/FileItem/index.module.css
View file @ 7f637d6c
.itemBox {
height: 50px;
padding: 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f0f2f5;
height: 50px;
padding: 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f0f2f5;
}
.fileNameBox {
white-space: nowrap;
display: inline-block;
vertical-align: middle;
color: #1e2633;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
color: #1e2633;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.contentBox {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.speedBox {
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.rightBox {
cursor: pointer;
font-size: 12px;
color: #1370ff;
cursor: pointer;
font-size: 12px;
color: #1370ff;
}
.leftBox {
display: flex;
display: flex;
}
.span {
color: #8a9099;
font-size: 12px;
color: #8a9099;
font-size: 12px;
}
src/views/ConsoleLayout/components/FileItem/index.tsx
View file @ 7f637d6c
......@@ -98,7 +98,7 @@ const FileItem = observer((props: IProps) => {
<div className={styles.itemBox}>
<div className={styles.leftBox}>
<img src={bkunyunFile} alt="" style={{ marginRight: 16 }} />
<div>
<div className={styles.contentBox}>
<div>
<b className={styles.fileNameBox} title={itemInfo?.name || ""}>
{itemInfo?.name || ""}
......
src/views/ConsoleLayout/components/TransferList/index.tsx
View file @ 7f637d6c
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-10 18:05:21
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 15:54:33
* @LastEditTime: 2022-09-02 10:47:33
* @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -20,16 +20,19 @@ const TranSferList = observer(() => {
const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
return (
<Box style={{ width: 520, padding: 20 }}>
<MyTitle title="传输列表" />
<Box style={{ width: 520 }}>
<MyTitle style={{ padding: "12px 16px" }} title="传输列表" />
<Box
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0 16px",
}}
>
<Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
<Box style={{ color: "#8A9099", fontSize: 14 }}>
请勿在上传过程中刷新页面！
</Box>
<MySelect
variant="standard"
value={"default"}
......@@ -43,7 +46,7 @@ const TranSferList = observer(() => {
size="small"
/>
</Box>
<div style={{ height: 400, overflow: "overlay" }}>
<div style={{ height: 400, overflow: "overlay", padding: "0 16px" }}>
{uploadInfoStore?.fileList.map((item) => {
return <FileItem fileItemInfo={item} key={item.id} />;
})}
......
src/views/MenuLayout/index.tsx
View file @ 7f637d6c
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-08-02 11:43:28
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-03 19:05:48
* @LastEditTime: 2022-09-02 12:01:12
* @FilePath: /bkunyun/src/views/MenuLayout/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -17,64 +17,80 @@ import classnames from "classnames";
import { toJS } from "mobx";
const MenuLayout = observer(() => {
const { permissionStore, currentProjectStore } = useStores();
let pathname = new URL(window.location.href).pathname;
const { permissionStore, currentProjectStore } = useStores();
let pathname = new URL(window.location.href).pathname;
const navigate = useNavigate();
const navigate = useNavigate();
const productInfo = toJS(currentProjectStore.currentProductInfo);
const productInfo = toJS(currentProjectStore.currentProductInfo);
// 未选择产品时 直接跳转home页面
if (!productInfo.name) {
navigate("/home");
}
// 未选择产品时 直接跳转home页面
if (!productInfo.name) {
navigate("/home");
}
const routerIcon = (id: string, isSelect: boolean) => {
try {
const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
return result || ''
} catch (error) {
console.log(error)
}
}
const routerIcon = (id: string, isSelect: boolean) => {
try {
const result = require(`../../assets/project/${id}${
isSelect ? "_BLUE" : ""
}.svg`);
return result || "";
} catch (error) {
console.log(error);
}
};
return (
<Box className={style.container}>
<Box className={style.aside}>
{
pathname.indexOf('userCenter') < 0 && <CurrentProject />
}
<List
sx={{
paddingTop: 0,
paddingBottom: 0,
}}
>
{permissionStore.sidebarRouters.map((item, index) => {
if (item.show) {
return (
<li
key={"sidebar" + index}
className={classnames({
[style.listItem]: true,
[style.active]: `/v3${item.path}` === pathname,
})}
onClick={() => item.type === "page" && navigate(item.path)}
>
<img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' />
<span style={{ verticalAlign: 'middle', fontWeight: '500' }}>{item.name}</span>
</li>
);
}
return null;
})}
</List>
</Box>
<Box className={style.content}>
<Outlet></Outlet>
</Box>
</Box>
);
return (
<Box className={style.container}>
<Box className={style.aside}>
{pathname.indexOf("userCenter") < 0 && <CurrentProject />}
<List
sx={{
paddingTop: 0,
paddingBottom: 0,
}}
>
{permissionStore.sidebarRouters.map((item, index) => {
if (item.show) {
return (
<li
key={"sidebar" + index}
className={classnames({
[style.listItem]: true,
[style.active]: `/v3${item.path}` === pathname,
})}
style={
`/v3${item.path}` === pathname
? { borderLeft: "3px solid #1370ff" }
: undefined
}
onClick={() => item.type === "page" && navigate(item.path)}
>
<img
className={style.routerIcon}
src={
routerIcon(
item.id || "",
`/v3${item.path}` === pathname
) || undefined
}
alt=""
/>
<span style={{ verticalAlign: "middle", fontWeight: "500" }}>
{item.name}
</span>
</li>
);
}
return null;
})}
</List>
</Box>
<Box className={style.content}>
<Outlet></Outlet>
</Box>
</Box>
);
});
export default MenuLayout;
src/views/Project/ProjectData/MoveFile/index.module.css
View file @ 7f637d6c
.rootTitle {
border-radius: 4px 4px 0 0;
background-color: rgba(25, 118, 210, 0.08);
/* background-color: rgba(25, 118, 210, 0.5); */
line-height: 44px;
color: rgba(30, 38, 51, 1);
font-size: 14px;
font-weight: 600;
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 4px 4px 0 0;
background-color: rgba(25, 118, 210, 0.08);
line-height: 44px;
color: rgba(30, 38, 51, 1);
font-size: 14px;
font-weight: 600;
display: flex;
justify-content: flex-start;
align-items: center;
}
.rootTitleActive {
background-color: rgba(25, 118, 210, 0.2);
background-color: rgba(25, 118, 210, 0.2);
}
.bigFolderIcon {
margin: 0 9px;
margin: 0 9px;
}
.treeLabel {
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
align-items: center;
}
.treeLabelText{
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
white-space: nowrap;
width: 320px;
.treeLabelText {
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 320px;
}
.labelFolderIcon {
margin-right: 9px;
margin-right: 9px;
}
src/views/Project/ProjectJobDetail/index.module.css
View file @ 7f637d6c
......@@ -14,7 +14,7 @@
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
......@@ -25,6 +25,9 @@
justify-content: flex-start;
align-items: center;
}
.goBackIcon {
cursor: pointer;
}
.swTemplateTitle {
margin: 0 19px 0 8px;
line-height: 22px;
......@@ -39,7 +42,7 @@
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
border-right: 1px solid #ebedf0;
width: 360px;
overflow-y: overlay;
box-sizing: border-box;
......
src/views/Project/ProjectJobDetail/index.tsx
View file @ 7f637d6c
......@@ -11,8 +11,6 @@ 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 MyButton from "@/components/mui/MyButton";
import useMyRequest from "@/hooks/useMyRequest";
......@@ -27,6 +25,7 @@ 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 goback from "@/assets/project/goback.svg";
import CloudEController from "@/api/fileserver/CloudEController";
import jobFail from "@/assets/project/jobFail.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
......@@ -422,36 +421,17 @@ const ProjectSubmitWork = observer(() => {
{fullScreenShow ? null : (
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<IconButton
color="primary"
<img
onClick={onBack}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
className={styles.goBackIcon}
src={goback}
alt=""
/>
<div className={styles.swTemplateTitle}>{name}</div>
</div>
{returnPermission && (
<div className={styles.swHeaderRight}>
{/* <MyPopconfirm
title={
state === "RUNNING"
? "正在运行的任务终止后将无法重新运行，确认继续吗？"
: "任务被删除后将无法恢复，确认继续吗？"
}
onConfirm={() => {
state === "RUNNING" ? onStopJob() : onDeleteJob();
}}
> */}
<MyButton
text={
["SUBMITTED", "RUNNING"].includes(state || "")
......@@ -459,7 +439,7 @@ const ProjectSubmitWork = observer(() => {
: "删除"
}
variant="outlined"
color="secondary"
color="error"
onClick={(e: any) =>
handleShowPopper(
e,
......@@ -468,9 +448,7 @@ const ProjectSubmitWork = observer(() => {
: "任务被删除后将无法恢复，确认继续吗？"
)
}
// click={onStopJob}
></MyButton>
{/* </MyPopconfirm> */}
</div>
)}
</div>
......
src/views/Project/ProjectOverview/TaskCard/index.module.css
View file @ 7f637d6c
......@@ -27,6 +27,7 @@
.cardLeft {
flex: 1;
cursor: pointer;
padding: 16px 24px;
}
......
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 7f637d6c
......@@ -3,200 +3,245 @@ import { useNavigate } from "react-router-dom";
import MyProgress from "@/components/mui/MyProgress";
import style from "./index.module.css";
import runTime from '../../../../assets/project/runTime.svg'
import jobCostImg from '../../../../assets/project/jobCost.svg'
import jobSue from '../../../../assets/project/jobSue.svg'
import jobFail from '../../../../assets/project/jobFail.svg'
import jobRun from '../../../../assets/project/jobRun.svg'
import jobCadence from '../../../../assets/project/jobCadence.svg'
import runTime from "../../../../assets/project/runTime.svg";
import jobCostImg from "../../../../assets/project/jobCost.svg";
import jobSue from "../../../../assets/project/jobSue.svg";
import jobFail from "../../../../assets/project/jobFail.svg";
import jobRun from "../../../../assets/project/jobRun.svg";
import jobCadence from "../../../../assets/project/jobCadence.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
type TaskCardProps = {
id: string;
name: string;
creator: string;
state: string;
completeNum: number;
totalNum: number;
costTime: string;
jobCost: number;
outputs: Array<any>;
id: string;
name: string;
creator: string;
state: string;
completeNum: number;
totalNum: number;
costTime: string;
jobCost: number;
outputs: Array<any>;
};
const TaskCard = (props: TaskCardProps) => {
const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
const navigate = useNavigate();
const randerOutputs = useMemo(() => {
if (outputs) {
let result = Object.keys(outputs);
let arr = result.map((item: any) => {
let type = "file";
if (outputs[item].indexOf("dataset") !== -1) {
type = "dataset";
}
return {
name: item,
type,
path: outputs[item],
};
});
return arr;
} else {
return [];
}
}, [outputs])
// 结果文件跳转
const goToProjectData = (info: any) => {
let { path = '', type = '' } = info
const lastIndex = path.lastIndexOf("/");
// /projectData
// dataType
if (lastIndex !== -1) {
path = path.slice(0, lastIndex);
}
path = path.slice(12);
navigate(`/product/cadd/projectData`, {
state: { pathName: path || '/', dataType: type },
});
}
// 跳转详情页
const gotoDetail = (id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id, from: 'projectOverview' },
});
}
// 渲染状态图标
const renderStatusIcon = (data: string) => {
switch (data) {
case "SUBMITTED":
return jobRun
case "RUNNING":
return jobRun
case "ABORTED":
return jobCadence
case "FAILED":
return jobFail
case "SUCCEEDED":
return jobSue
default:
return jobCadence
}
}
// 渲染状态
const renderStatusText = (data: string) => {
switch (data) {
case "SUBMITTED":
return "正在启动";
case "RUNNING":
return '正在运行'
case "ABORTED":
return '运行终止'
case "FAILED":
return '运行失败'
case "SUCCEEDED":
return '运行成功'
default:
return '未知'
}
}
// 渲染字体颜色
const renderTextColor = (data: string) => {
switch (data) {
case "SUBMITTED":
return "#1370FF";
case "RUNNING":
return "#1370FF";
case "ABORTED":
return "#C2C6CC";
case "FAILED":
return "#FF4E4E";
case "SUCCEEDED":
return "#0DD09B";
default:
return "#C2C6CC";
}
};
// 渲染状态框背景颜色
const renderBackgroundColor = (data: string) => {
switch (data) {
case "SUBMITTED":
return "#EBF3FF";
case "RUNNING":
return "#EBF3FF";
case "ABORTED":
return "#F5F6F7";
case "FAILED":
return "#FFECE8";
case "SUCCEEDED":
return "#E8FFF1";
default:
return "#C2C6CC";
}
};
//渲染进度条颜色
const renderProgressColor = useCallback((data: any) => {
switch (data) {
case "SUBMITTED":
return "info";
case "RUNNING":
return "info";
case "ABORTED":
return "disable";
case "FAILED":
return "error";
case "SUCCEEDED":
return "success";
default:
return "disable";
}
}, []);
return <div className={style.cardBox}>
<div className={style.cardLeft}>
<div className={style.topLine}>
<div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
<div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
<img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
<span>{renderStatusText(state)}</span>
</div>
</div>
<div className={style.taskCreator}>{creator}</div>
<div className={style.taskProgress}>
<div className={style.progressInfo}>
<div>Progress</div>
<div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
</div>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
<div className={style.bottomInfo}>{costTime}</div>
<img alt="" src={jobCostImg} />
<div className={style.bottomInfo}>{jobCost?.toFixed(2)}元</div>
</div>
</div>
<div className={style.dividingLine}>
<div className={style.arrow}></div>
</div>
<div className={style.cardRight}>
{randerOutputs.length === 0 ? <div className={style.noResult}>暂无结果文件</div> :
<div className={style.resultBox}>
{randerOutputs.map((item, index) => {
return <div key={index} className={style.result} onClick={() => goToProjectData(item)}>
<img
className={style.outputLeftImg}
src={
item?.type === "file" ? fileIcon : dataSetIcon
}
alt=""
/>
<span className={style.outputTitle}>{item?.name}</span>
</div>
})}
</div>
}
</div>
</div>
}
const {
id,
name,
creator,
state,
completeNum,
totalNum,
costTime,
jobCost,
outputs,
} = props;
const navigate = useNavigate();
const [displayTitleBlue, setDisplayTitleBlue] = useState<boolean>(false);
export default TaskCard
\ No newline at end of file
const randerOutputs = useMemo(() => {
if (outputs) {
let result = Object.keys(outputs);
let arr = result.map((item: any) => {
let type = "file";
if (outputs[item].indexOf("dataset") !== -1) {
type = "dataset";
}
return {
name: item,
type,
path: outputs[item],
};
});
return arr;
} else {
return [];
}
}, [outputs]);
// 结果文件跳转
const goToProjectData = (info: any) => {
let { path = "", type = "" } = info;
const lastIndex = path.lastIndexOf("/");
// /projectData
// dataType
if (lastIndex !== -1) {
path = path.slice(0, lastIndex);
}
path = path.slice(12);
navigate(`/product/cadd/projectData`, {
state: { pathName: path || "/", dataType: type },
});
};
// 跳转详情页
const gotoDetail = (id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id, from: "projectOverview" },
});
};
// 渲染状态图标
const renderStatusIcon = (data: string) => {
switch (data) {
case "SUBMITTED":
return jobRun;
case "RUNNING":
return jobRun;
case "ABORTED":
return jobCadence;
case "FAILED":
return jobFail;
case "SUCCEEDED":
return jobSue;
default:
return jobCadence;
}
};
// 渲染状态
const renderStatusText = (data: string) => {
switch (data) {
case "SUBMITTED":
return "正在启动";
case "RUNNING":
return "正在运行";
case "ABORTED":
return "运行终止";
case "FAILED":
return "运行失败";
case "SUCCEEDED":
return "运行成功";
default:
return "未知";
}
};
// 渲染字体颜色
const renderTextColor = (data: string) => {
switch (data) {
case "SUBMITTED":
return "#1370FF";
case "RUNNING":
return "#1370FF";
case "ABORTED":
return "#C2C6CC";
case "FAILED":
return "#FF4E4E";
case "SUCCEEDED":
return "#0DD09B";
default:
return "#C2C6CC";
}
};
// 渲染状态框背景颜色
const renderBackgroundColor = (data: string) => {
switch (data) {
case "SUBMITTED":
return "#EBF3FF";
case "RUNNING":
return "#EBF3FF";
case "ABORTED":
return "#F5F6F7";
case "FAILED":
return "#FFECE8";
case "SUCCEEDED":
return "#E8FFF1";
default:
return "#C2C6CC";
}
};
//渲染进度条颜色
const renderProgressColor = useCallback((data: any) => {
switch (data) {
case "SUBMITTED":
return "info";
case "RUNNING":
return "info";
case "ABORTED":
return "disable";
case "FAILED":
return "error";
case "SUCCEEDED":
return "success";
default:
return "disable";
}
}, []);
return (
<div className={style.cardBox}>
<div
className={style.cardLeft}
onClick={() => gotoDetail(id)}
onMouseOver={() => setDisplayTitleBlue(true)}
onMouseOut={() => setDisplayTitleBlue(false)}
>
<div className={style.topLine}>
<div
className={style.taskName}
style={displayTitleBlue ? { color: "#1370ff" } : undefined}
>
{name}
</div>
<div
className={style.taskStatus}
style={{
color: renderTextColor(state),
background: renderBackgroundColor(state),
}}
>
<img
src={renderStatusIcon(state)}
alt=""
className={style.statusImg}
/>
<span>{renderStatusText(state)}</span>
</div>
</div>
<div className={style.taskCreator}>{creator}</div>
<div className={style.taskProgress}>
<div className={style.progressInfo}>
<div>Progress</div>
<div style={{ color: renderTextColor(state) }}>
{completeNum + "/" + totalNum}
</div>
</div>
<MyProgress
color={renderProgressColor(state)}
value={(completeNum / totalNum) * 100}
/>
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
<div className={style.bottomInfo}>{costTime}</div>
<img alt="" src={jobCostImg} />
<div className={style.bottomInfo}>{jobCost?.toFixed(2)}元</div>
</div>
</div>
<div className={style.dividingLine}>
<div className={style.arrow}></div>
</div>
<div className={style.cardRight}>
{randerOutputs.length === 0 ? (
<div className={style.noResult}>暂无结果文件</div>
) : (
<div className={style.resultBox}>
{randerOutputs.map((item, index) => {
return (
<div
key={index}
className={style.result}
onClick={() => goToProjectData(item)}
>
<img
className={style.outputLeftImg}
src={item?.type === "file" ? fileIcon : dataSetIcon}
alt=""
/>
<span className={style.outputTitle}>{item?.name}</span>
</div>
);
})}
</div>
)}
</div>
</div>
);
};
export default TaskCard;
src/views/Project/ProjectOverview/index.module.css
View file @ 7f637d6c
.box {
height: calc(100vh - 57px);
overflow: overlay;
}
.topFixed {
position: sticky;
top: 0;
......@@ -5,6 +10,10 @@
background-color: #fff;
}
.topFixedShadow {
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
}
.basicInformation {
display: flex;
justify-content: space-between;
......@@ -125,4 +134,4 @@
justify-content: center;
align-items: center;
height: calc(100vh - 100px);
}
}
\ No newline at end of file
src/views/Project/ProjectOverview/index.tsx
View file @ 7f637d6c
......@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import { observer } from "mobx-react-lite";
import _ from "lodash";
import moment from "moment";
import classNames from "classnames";
import useMyRequest from "@/hooks/useMyRequest";
import { getOverviewInfo, getTaskOverview } from "@/api/project_api";
......@@ -27,6 +28,16 @@ const ProjectOverview = observer(() => {
const [size, setSize] = useState(999);
// 选择近7天or近15天or近30天
const [day, setDay] = useState("7");
// 滚轮是否到顶,判断是否显示阴影
const [isTop, setIsTop] = useState(true)
// 滚动滚轮时监听是否到顶
const onscroll = (e: any) => {
if (e.target.scrollTop <= 0) {
setIsTop(true)
} else {
setIsTop(false)
}
}
// 获取概览基本信息
const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
onSuccess: (result: any) => {
......@@ -100,8 +111,13 @@ const ProjectOverview = observer(() => {
);
} else {
return (
<>
<div className={style.topFixed}>
<div className={style.box} onScroll={onscroll}>
<div
className={classNames({
[style.topFixed]: true,
[style.topFixedShadow]: !isTop,
})}
>
<div className={style.basicInformation}>
<div>
<div className={style.titleBox}>
......@@ -227,7 +243,7 @@ const ProjectOverview = observer(() => {
);
})}
</div>
</>
</div>
);
}
} else {
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ 7f637d6c
......@@ -58,6 +58,7 @@ const ProjectWorkbench = observer(() => {
lineHeight: "26px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "3px",
}}
>
工作台
......
src/views/Project/ProjectWorkbench/workbenchList/index.module.css
View file @ 7f637d6c
......@@ -22,6 +22,7 @@
.tabBox {
padding: 16px 0px 16px 24px;
cursor: pointer;
display: flex;
align-items: center;
width: 100%;
......@@ -95,6 +96,12 @@
justify-content: center;
}
.jobOperateImgBox:hover {
padding: 8px;
border-radius: 4px;
background-color: #ebedf0;
}
.tabUpdate {
cursor: pointer;
width: 32px;
......@@ -109,7 +116,8 @@
border-radius: 4px;
}
.pagination {
padding: 19px 0;
padding: 19px 0 0px;
display: flex;
justify-content: end;
align-items: center;
}
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 7f637d6c
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 16:35:02
* @LastEditTime: 2022-09-02 14:45:04
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -480,6 +480,7 @@ const ProjectMembers = observer(() => {
<img
alt=""
src={jobDel}
className={styles.jobOperateImgBox}
style={{ cursor: "pointer" }}
onClick={(event) => {
event.stopPropagation();
......@@ -495,14 +496,14 @@ const ProjectMembers = observer(() => {
);
})}
</MyCircularProgress>
<div className={styles.pagination}>
<MyPagination
page={page}
pageChange={handleChangePage}
count={count || jobList.length}
/>
</div>
</Box>
<div className={styles.pagination}>
<MyPagination
page={page}
pageChange={handleChangePage}
count={count || jobList.length}
/>
</div>
{/* <TablePagination
rowsPerPageOptions={[5, 10, 20, 50]}
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css
View file @ 7f637d6c
......@@ -11,7 +11,7 @@
}
.headerBoxShadow {
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.15);
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
}
.templateBox {
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css
View file @ 7f637d6c
......@@ -41,6 +41,7 @@
margin-bottom: 16px;
position: relative;
box-sizing: border-box;
transition: box-shadow .2s cubic-bezier(0, 0, 1, 1);
}
.templateBlock:hover {
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 7f637d6c
......@@ -10,7 +10,8 @@ import { memo, useEffect, useState } from "react";
import { Box, Typography } from "@mui/material";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import Add from "@mui/icons-material/Add";
import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
import MyButton from "@/components/mui/MyButton";
import SearchInput from "@/components/BusinessComponents/SearchInput";
......@@ -115,7 +116,7 @@ const ProjectMembers = observer(() => {
{isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
<MyButton
text={"管理工作流模板"}
img={<Add />}
startIcon={<FormatListBulletedRoundedIcon fontSize="small"/>}
onClick={addTemplateBlock}
size={"medium"}
/>
......
src/views/Project/components/Flow/components/BatchNode/index.module.css
View file @ 7f637d6c
.batchNode {
background-color: #fff;
border-radius: 4px;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
/* padding: 12px 20px; */
border: 1px solid #e6e8eb;
/* border: 1px solid #e6e8eb; */
border-left: 4px solid #e6e8eb;
/* display: flex; */
align-items: center;
}
.batchNode:hover {
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
}
.doneBatchNode {
border-left: 4px solid #0dd09b;
}
......@@ -45,7 +50,7 @@
/* transform: translateX(-50%) rotate(-90deg); */
}
.handleBox::before{
.handleBox::before {
content: "";
position: absolute;
left: -4px;
......
src/views/Project/components/Flow/components/FlowNode/index.module.css
View file @ 7f637d6c
......@@ -44,3 +44,9 @@
width: 14px;
height: 14px;
}
.handleBox {
background: #fff;
width: 6px;
height: 6px;
}
src/views/Project/components/Flow/components/FlowNode/index.tsx
View file @ 7f637d6c
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:29:46
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-31 17:09:31
* @LastEditTime: 2022-09-02 14:23:07
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -86,8 +86,6 @@ const FlowNode = (props: any) => {
className={styles.handleBox}
id={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
...inStyle,
left: index * 24 + 16,
}}
......@@ -98,8 +96,10 @@ const FlowNode = (props: any) => {
);
})
: null}
<div style={{display: 'flex', alignItems: 'center'}}>
<span style={{fontSize: '12px', lineHeight: '24px'}}>{title || ""} {showVersion && version}</span>
<div style={{ display: "flex", alignItems: "center" }}>
<span style={{ fontSize: "12px", lineHeight: "20px" }}>
{title || ""} {showVersion && version}
</span>
{flowType !== "edit" && isCheck ? (
<span className={styles.successDot}></span>
) : null}
......@@ -108,7 +108,7 @@ const FlowNode = (props: any) => {
) : null}
{getImgUrl(executionStatus) && (
<img
style={{ marginLeft: "6px" }}
style={{ marginLeft: "6px", width: "12px", height: "12px" }}
src={getImgUrl(executionStatus)}
alt=""
/>
......@@ -122,8 +122,6 @@ const FlowNode = (props: any) => {
className={styles.handleBox}
id={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
...outStyle,
left: index * 24 + 16,
}}
......
src/views/Project/components/Flow/index.tsx
View file @ 7f637d6c
......@@ -11,7 +11,7 @@ import ReactFlow, {
import { useCallback, useEffect, useMemo, useState } from "react";
import { uuid } from "@/utils/util";
import { IParameter, ITask } from "../../ProjectSubmitWork/interface";
import { IParameter, ITask } from "../../ProjectSubmitWork/interface";
import { ILine } from "./interface";
import BatchNode from "./components/BatchNode";
import FlowNode from "./components/FlowNode";
......@@ -61,7 +61,7 @@ const Flow = (props: IProps) => {
showControls = true,
...other
} = props;
/** 自定义的节点类型 */
const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode };
......@@ -311,22 +311,25 @@ const Flow = (props: IProps) => {
/** tasks 数据 */
tasks: tasks,
}
: { selectedStatus: externalSelectedNodeId
? externalSelectedNodeId.includes(item.id)
: inSideFlowNodeId === item.id,}),
: {
selectedStatus: externalSelectedNodeId
? externalSelectedNodeId.includes(item.id)
: inSideFlowNodeId === item.id,
}),
/** 输入输出圆点状态 */
// dotStatus: nodesInputAndOutputStatus(item.id),
/** 样式 */
style: {
...getBatchStyle(item),
marginTop: '-44px',
padding: "12px 20px",
marginTop: "-44px",
padding: "12px 20px 20px 20px",
},
},
/** 坐标 */
position: {
x: Number(item.position?.x) || 0,
/** 流算子生成的时候多加了15 兼容历史模版数据 直接这边减去15 */
x: Number(item.position?.x - 15) || 0,
y: Number(item.position?.y) || 0,
},
/**
......@@ -379,11 +382,11 @@ const Flow = (props: IProps) => {
style: { stroke: "#1370FF", strokeWidth: 2 },
animated: true,
}
: {}),
: { stroke: "#D1D6DE" }),
/** 点击batch节点选中 */
...(item?.batchId === newSelectId
? { style: { stroke: "#1370FF" }, animated: true }
: {}),
: { stroke: "#D1D6DE" }),
labelStyle: { fill: "#8A9099" },
labelBgStyle: { fill: "#F7F8FA " },
label: item.label ? `(${item.label})` : "",
......@@ -641,7 +644,7 @@ const Flow = (props: IProps) => {
// const onNodesChange = (val: any)=>{
// // 自定义change事件 不允许react flow组件本身删除事件
// // return
// // return
// }
// const onEdgesChange = (val: any) =>{
......
src/views/Project/components/ProjectListPopper/index.module.css
View file @ 7f637d6c
......@@ -56,7 +56,8 @@
border-top: 1px solid #f0f2f5;
}
.noProjectBox {
color: #edeff2;
color: #8a9099;
font-size: 14px;
height: 48px;
line-height: 48px;
text-align: center;
......
src/views/WorkFlowEdit/components/OperatorList/index.module.css
View file @ 7f637d6c
......@@ -3,6 +3,17 @@
border-radius: 4px;
cursor: grab;
padding: 16px 16px 0 24px;
background-color: #fff;
}
.operatorItemBox:hover {
position: relative;
z-index: 1;
top: -1px;
left: 24px;
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
}
.operatorItemBox:hover .footerBox {
border-bottom: none;
}
.dragBox {
......@@ -34,15 +45,17 @@
.versionBox {
display: inline-block;
background: #f0f2f5;
color: #1e2633;
cursor: pointer;
padding: 1px 9px;
border-radius: 2px;
font-size: 12px;
padding: 2px 8px;
background-color: #f0f2f5;
line-height: 20px;
}
.searchBox {
padding: 0 24px 16px 24px;
padding: 0 24px 8px 24px;
}
.footerBox {
......@@ -60,16 +73,8 @@
overflow-y: overlay;
height: calc(100% - 48px);
position: relative;
overflow-x: visible;
}
.versionBox {
background: #e6e8eb;
color: #1e2633;
cursor: pointer;
padding: 0 8px;
border-radius: 2px;
}
.noData {
display: flex;
justify-content: center;
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 7f637d6c
......@@ -13,6 +13,7 @@ import { IResponse } from "@/api/http";
import { fetchOperatorList } from "@/api/workbench_api";
import { useStores } from "@/store";
import noTemplate from "@/assets/project/noTemplate.svg";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import styles from "./index.module.css";
......@@ -198,7 +199,18 @@ const OperatorList = observer((props: IOperatorListProps) => {
return (
<div className={styles.operatorListBox}>
<div className={styles.searchBox}>
<OutlinedInput
<SearchInput
onChange={(e) => {
if (e.target.value?.length > 30) return;
setKeyword(e.target.value);
}}
value={keyword}
placeholder="输入关键词搜索"
onKeyUp={handleEnterCode}
size="medium"
sx={{ height: 32, width: "100%" }}
/>
{/* <OutlinedInput
onChange={(e) => {
if (e.target.value?.length > 30) return;
setKeyword(e.target.value);
......@@ -209,7 +221,7 @@ const OperatorList = observer((props: IOperatorListProps) => {
size="small"
sx={{ height: 32, width: "100%" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
/> */}
</div>
<div className={styles.listBox}>
{operatorListData.filter((item) => item.type === "BATCH")?.length ? (
......
src/views/WorkFlowEdit/index.module.css
View file @ 7f637d6c
......@@ -25,6 +25,19 @@
justify-content: flex-start;
align-items: center;
}
.goBackIcon {
margin-right: 8px;
cursor: pointer;
}
/* .goBackIcon:hover:{
color: ;
} */
.goBack {
cursor: pointer;
color: #1e2633;
font-size: 14px;
font-weight: 600;
}
.swContent {
display: flex;
height: calc(100vh - 56px);
......@@ -53,8 +66,8 @@
color: RGBA(66, 141, 255, 1);
cursor: pointer;
background-color: #fff;
transition: width 1s;
-webkit-transition: width 1s;
transition: width 0.4s;
-webkit-transition: width 0.4s;
overflow: hidden;
display: flex;
justify-content: start;
......@@ -74,5 +87,5 @@
}
.radiosBox {
background-color: #fff;
padding: 24px;
padding: 24px 24px 20px;
}
src/views/WorkFlowEdit/index.tsx
View file @ 7f637d6c
......@@ -7,8 +7,6 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { useCallback, useEffect, useState, useMemo } from "react";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import _ from "lodash";
import { observer } from "mobx-react-lite";
......@@ -26,6 +24,7 @@ import useMyRequest from "@/hooks/useMyRequest";
import CustomOperator from "../CustomOperator";
import SaveCustomTemplate from "./components/SaveCustomTemplate";
import AddIcon from "@mui/icons-material/Add";
import goback from "@/assets/project/goback.svg";
import styles from "./index.module.css";
......@@ -189,8 +188,18 @@ const WorkFlowEdit = observer((props: IProps) => {
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<IconButton
<div
className={styles.swHeaderLeft}
onClick={(e: any) =>
handleShowPopper(
e,
"返回后，当前页面已填写内容将不保存，确认返回吗？"
)
}
>
<img className={styles.goBackIcon} src={goback} alt="" />
<span className={styles.goBack}>返回</span>
{/* <IconButton
color="primary"
aria-label="upload picture"
component="span"
......@@ -209,7 +218,8 @@ const WorkFlowEdit = observer((props: IProps) => {
height: "12px",
}}
/>
</IconButton>
返回
</IconButton> */}
</div>
<div className={styles.swHeaderRight}>
<MyButton text="保存" onClick={() => handlePreserve()}></MyButton>
......
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