Skip to content

B
bkunyun
Commit 8c034058 authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20220718' into 'release' 

Feat 20220718

See merge request !35
parents 0a94454b 55e5598b
Hide whitespace changes
Inline Side-by-side
Showing with 744 additions and 616 deletions
src/components/BusinessComponents/NoData/index.module.css 0 → 100644
View file @ 8c034058
.noDataBox {
background-color: #fff;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.noDataText {
margin-top: 8px;
font-size: 14px;
line-height: 22px;
color: #8a9099;
}
src/components/BusinessComponents/NoData/index.tsx 0 → 100644
View file @ 8c034058
import noFile from "@/assets/project/noFile.svg";
import style from "./index.module.css";
type INoDataProps = {
text?: string;
noDataBoxStyle?: any;
};
const NoData = (props: INoDataProps) => {
return (
<div className={style.noDataBox} style={{ ...props.noDataBoxStyle }}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>
{props.text ? props.text : "暂无数据"}
</span>
</div>
);
};
export default NoData;
src/components/mui/MyCircularProgress.tsx 0 → 100644
View file @ 8c034058
// 局部loading组件 挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
import CircularProgress from "@mui/material/CircularProgress";
type IMyCircularProgressProps = {
loading: boolean;
minHeight?: string;
maxHeight?: string;
zIndex?: number;
};
const MyCircularProgress = (props: IMyCircularProgressProps) => {
const {
loading,
minHeight = "none",
maxHeight = "100vh",
zIndex = "100",
} = props;
if (loading) {
return (
<div
style={{
minHeight: minHeight,
width: "100%",
height: "100%",
position: "absolute",
top: 0,
zIndex: zIndex,
}}
>
<div
style={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
opacity: 0.6,
background: "#fff",
}}
></div>
<div
style={{
width: "100%",
height: "100%",
maxHeight: maxHeight,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<CircularProgress></CircularProgress>
</div>
</div>
);
} else {
return null;
}
};
export default MyCircularProgress;
src/components/mui/MyPopover.tsx
View file @ 8c034058
...@@ -11,75 +11,75 @@ import Popover, { PopoverProps } from "@mui/material/Popover"; ...@@ -11,75 +11,75 @@ import Popover, { PopoverProps } from "@mui/material/Popover";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
interface IProps extends Omit<PopoverProps, "open"> { interface IProps extends Omit<PopoverProps, "open"> {
/** 触发行为 */ /** 触发行为 */
trigger?: "hover" | "click"; trigger?: "hover" | "click";
/** 触发dom */ /** 触发dom */
children: React.ReactNode; children: React.ReactNode;
/** 显示内容 */ /** 显示内容 */
content: React.ReactNode; content: React.ReactNode;
} }
const MyPopover = (props: IProps) => { const MyPopover = (props: IProps) => {
const [anchorEl, setAnchorEl] = React.useState<any | null>(null); const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
const { const {
trigger = "click", trigger = "click",
children, children,
content, content,
anchorOrigin, anchorOrigin,
transformOrigin, transformOrigin,
} = props; } = props;
const handlePopoverOpen = (event: any) => { const handlePopoverOpen = (event: any) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const handelClick = (event: any) => { const handelClick = (event: any) => {
setAnchorEl(event?.currentTarget); setAnchorEl(event?.currentTarget);
}; };
const handlePopoverClose = () => { const handlePopoverClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined; const id = open ? "simple-popover" : undefined;
return ( return (
<div> <div>
<Typography <Typography
aria-owns={id} aria-owns={id}
onClick={trigger === "click" ? handelClick : undefined} onClick={trigger === "click" ? handelClick : undefined}
onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined} onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined} onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
> >
{children} {children}
</Typography> </Typography>
<Popover <Popover
id={id} id={id}
open={open} open={open}
anchorEl={anchorEl} anchorEl={anchorEl}
onClose={handlePopoverClose} onClose={handlePopoverClose}
sx={{ sx={{
pointerEvents: trigger === "hover" ? "none" : undefined, pointerEvents: trigger === "hover" ? "none" : undefined,
}} }}
anchorOrigin={ anchorOrigin={
anchorOrigin || { anchorOrigin || {
vertical: "bottom", vertical: "bottom",
horizontal: "center", horizontal: "center",
} }
} }
transformOrigin={ transformOrigin={
transformOrigin || { transformOrigin || {
vertical: "top", vertical: "top",
horizontal: "center", horizontal: "center",
} }
} }
> >
<Typography sx={{ p: 1 }}>{content}</Typography> <Typography sx={{ p: 1 }}>{content}</Typography>
</Popover> </Popover>
</div> </div>
); );
}; };
export default MyPopover; export default MyPopover;
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 8c034058
...@@ -17,6 +17,7 @@ import { useStores } from "@/store"; ...@@ -17,6 +17,7 @@ import { useStores } from "@/store";
import { toJS } from "mobx"; import { toJS } from "mobx";
import classNames from "classnames"; import classNames from "classnames";
import Save from "./save"; import Save from "./save";
import NoData from "@/components/BusinessComponents/NoData";
import Download from "./download"; import Download from "./download";
import style from "./index.module.css"; import style from "./index.module.css";
...@@ -62,7 +63,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -62,7 +63,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
setSort(e); setSort(e);
}; };
const handleKeywordChange = (e: any) => { const handleKeywordChange = (e: any) => {
setKeyword(e.target.value); if (e.target.value.length <= 30) {
setKeyword(e.target.value);
}
}; };
const pageChange = (value: number) => { const pageChange = (value: number) => {
...@@ -248,102 +251,117 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -248,102 +251,117 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</div> </div>
</div> </div>
<div className={style.table}> <div className={style.table}>
<div className={style.list}> {list.length !== 0 && (
{list.map((item, index) => { <>
return ( <div className={style.list}>
<div {list.map((item, index) => {
className={style.datasetLi} return (
key={item.id} <div
onClick={() => { className={style.datasetLi}
handleSelectItem(item.id); key={item.id}
}} onClick={() => {
> handleSelectItem(item.id);
{isCadd && ( }}
<div className={style.datasetLiTop}> >
{isCadd && (
<div className={style.datasetLiTop}>
{graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} />
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
)}
</div>
)}
<div className={style.datasetLiBottom}>
<div
className={style.datasetLiTitle}
title={item.smiles}
>
{item.smiles}
</div>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item.meta)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span className={style.datasetLiDataLiKey}>
{key}
</span>
<span
className={style.datasetLiDataLiValue}
>
{item.meta[key]}
</span>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>请选择显示数据</div>
)}
</div>
{graphicDimension === "2D" && ( {graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} /> <Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)} )}
{graphicDimension === "3D" && ( {graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} /> <Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
background: "RGBA(30, 38, 51, 1)",
border: "1px solid #565C66",
borderRadius: "2px",
}}
checked={selectItems.includes(item.id)}
/>
)} )}
</div> </div>
)} );
<div className={style.datasetLiBottom}> })}
<div className={style.datasetLiTitle} title={item.smiles}> {nullBox.map((item, index) => {
{item.smiles} return (
</div> <div
{showData.length !== 0 && ( className={classNames({
<div className={style.datasetLiDataList}> [style.datasetLi]: true,
{Object.keys(item.meta) [style.nullBox]: true,
.filter((key) => showData.indexOf(key) !== -1) })}
.map((key, index) => { key={index + "null"}
return ( ></div>
<div );
className={style.datasetLiDataLi} })}
key={index} </div>
>
<span className={style.datasetLiDataLiKey}> <div className={style.pagination}>
{key} <MyPagination
</span> page={page}
<span className={style.datasetLiDataLiValue}> pageChange={pageChange}
{item.meta[key]} count={count}
</span> />
</div> </div>
); </>
})} )}
</div> {list.length === 0 && <NoData></NoData>}
)}
{showData.length === 0 && (
<div className={style.noDataList}>请选择显示数据</div>
)}
</div>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
background: "RGBA(30, 38, 51, 1)",
border: "1px solid #565C66",
borderRadius: "2px",
}}
checked={selectItems.includes(item.id)}
/>
)}
</div>
);
})}
{nullBox.map((item, index) => {
return (
<div
className={classNames({
[style.datasetLi]: true,
[style.nullBox]: true,
})}
key={index + "null"}
></div>
);
})}
</div>
<div className={style.pagination}>
<MyPagination page={page} pageChange={pageChange} count={count} />
</div>
</div> </div>
</div> </div>
<div className={style.foot}> <div className={style.foot}>
......
src/views/Project/ProjectData/index.module.css
View file @ 8c034058
...@@ -12,6 +12,9 @@ ...@@ -12,6 +12,9 @@
font-weight: 600; font-weight: 600;
margin-bottom: 24px; margin-bottom: 24px;
} }
.projectDataHeader {
position: relative;
}
.projectDataButtonAndSearch { .projectDataButtonAndSearch {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
src/views/Project/ProjectData/index.tsx
View file @ 8c034058
...@@ -2,7 +2,6 @@ import React, { useState, useCallback, useEffect, useMemo } from "react"; ...@@ -2,7 +2,6 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
import classnames from "classnames"; import classnames from "classnames";
import { IconButton } from "@mui/material"; import { IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import RefreshIcon from "@mui/icons-material/Refresh"; import RefreshIcon from "@mui/icons-material/Refresh";
import MyTable from "@/components/mui/MyTable"; import MyTable from "@/components/mui/MyTable";
import dataSetIcon from "@/assets/project/dataSetIcon.svg"; import dataSetIcon from "@/assets/project/dataSetIcon.svg";
...@@ -26,7 +25,6 @@ import { useLocation } from "react-router-dom"; ...@@ -26,7 +25,6 @@ import { useLocation } from "react-router-dom";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle"; import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SeeDataset from "./SeeDataset"; import SeeDataset from "./SeeDataset";
import { getDataFind, getDataFileSearch } from "@/api/project_api"; import { getDataFind, getDataFileSearch } from "@/api/project_api";
import MyInput from "@/components/mui/MyInput";
import MyButton from "@/components/mui/MyButton"; import MyButton from "@/components/mui/MyButton";
import SearchInput from "@/components/BusinessComponents/SearchInput"; import SearchInput from "@/components/BusinessComponents/SearchInput";
...@@ -491,10 +489,10 @@ const ProjectData = observer(() => { ...@@ -491,10 +489,10 @@ const ProjectData = observer(() => {
{index === 0 {index === 0
? "ProjectData" ? "ProjectData"
: index > pathArr.length - 4 : index > pathArr.length - 4
? item ? item
: ""} : ""}
{index === pathArr.length - 1 || {index === pathArr.length - 1 ||
(index <= pathArr.length - 4 && index > 0) ? null : ( (index <= pathArr.length - 4 && index > 0) ? null : (
<i className={style.showPathI}>{">"}</i> <i className={style.showPathI}>{">"}</i>
)} )}
{index === 1 && "..."} {index === 1 && "..."}
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 8c034058
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 20:39:32 * @LastEditTime: 2022-07-28 18:32:03
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/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
*/ */
...@@ -318,7 +318,8 @@ const BaseInfo = observer(() => { ...@@ -318,7 +318,8 @@ const BaseInfo = observer(() => {
> >
项目名称 项目名称
</div> </div>
<TextField
<MyInput
required required
error={nameCheck.error} error={nameCheck.error}
id="name" id="name"
...@@ -326,21 +327,8 @@ const BaseInfo = observer(() => { ...@@ -326,21 +327,8 @@ const BaseInfo = observer(() => {
value={projectInfo.name} value={projectInfo.name}
onChange={nameChange} onChange={nameChange}
helperText={nameCheck.help} helperText={nameCheck.help}
size="small" style={{ width: "560px" }}
sx={{
width: "560px",
"& .MuiOutlinedInput-root": {
height: "36px",
},
}}
/> />
{/* <input
value={projectInfo.name}
className={style.projectInfoListLiValue}
onChange={nameChange}
maxLength={30}
placeholder="请输入项目名称"
></input> */}
</div> </div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>项目描述</div> <div className={style.projectInfoListLiLabel}>项目描述</div>
...@@ -354,6 +342,13 @@ const BaseInfo = observer(() => { ...@@ -354,6 +342,13 @@ const BaseInfo = observer(() => {
placeholder="项目描述限制100字以内" placeholder="项目描述限制100字以内"
maxLength={100} maxLength={100}
></textarea> ></textarea>
{/* <MyInput
value={projectInfo.desc}
multiline
rows={4}
placeholder="项目描述限制100字以内"
onChange={descChange}
/> */}
</div> </div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>计算区</div> <div className={style.projectInfoListLiLabel}>计算区</div>
...@@ -375,42 +370,26 @@ const BaseInfo = observer(() => { ...@@ -375,42 +370,26 @@ const BaseInfo = observer(() => {
</div> </div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>创建人</div> <div className={style.projectInfoListLiLabel}>创建人</div>
<input <MyInput
value={projectInfo.owner} value={projectInfo.owner}
disabled disabled
className={classnames({ style={{ width: "560px" }}
[style.projectInfoListLiValue]: true, />
[style.disable]: true,
})}
></input>
</div> </div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>项目预算</div> <div className={style.projectInfoListLiLabel}>项目预算</div>
{/* <MyInput <MyInput
sx={{
width: "560px",
'& .MuiOutlinedInput-root': {
height: '36px'
}
}}
/> */}
<TextField
required required
error={budgetCheck.error} error={budgetCheck.error}
disabled={currentUserName !== projectInfo.tenantUser} disabled={currentUserName !== projectInfo.tenantUser}
id="projectBudget" // id="projectBudget"
variant="outlined" variant="outlined"
value={projectInfo.projectBudget} value={projectInfo.projectBudget}
onChange={budgetChange} onChange={budgetChange}
onBlur={budgetBlur} onBlur={budgetBlur}
helperText={budgetCheck.help} helperText={budgetCheck.help}
size="small" // size="small"
sx={{ style={{ width: "560px" }}
width: "560px",
"& .MuiOutlinedInput-root": {
height: "36px",
},
}}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start">¥</InputAdornment> <InputAdornment position="start">¥</InputAdornment>
...@@ -420,14 +399,11 @@ const BaseInfo = observer(() => { ...@@ -420,14 +399,11 @@ const BaseInfo = observer(() => {
</div> </div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>扣费账号</div> <div className={style.projectInfoListLiLabel}>扣费账号</div>
<input <MyInput
value={projectInfo.tenantUser} value={projectInfo.tenantUser}
disabled disabled
className={classnames({ style={{ width: "560px" }}
[style.projectInfoListLiValue]: true, />
[style.disable]: true,
})}
></input>
</div> </div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<LoadingButton <LoadingButton
......
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ 8c034058
...@@ -2,23 +2,24 @@ ...@@ -2,23 +2,24 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 11:13:10 * @LastEditTime: 2022-07-28 18:10:42
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/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 { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import _ from "lodash"; import _ from "lodash";
import Dialog from "@/components/mui/MyDialog";
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { Box, OutlinedInput } from "@mui/material"; import { Box, OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Dialog from "@/components/mui/MyDialog";
import { IResponse, useHttp } from "@/api/http"; import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import MySelect, { IOption } from "@/components/mui/MySelect"; import MySelect, { IOption } from "@/components/mui/MySelect";
import MyTable from "@/components/mui/MyTable"; import MyTable from "@/components/mui/MyTable";
import SearchInput from "@/components/BusinessComponents/SearchInput";
interface IProps { interface IProps {
setAddMemberDialog: (val: boolean) => void; setAddMemberDialog: (val: boolean) => void;
addMemberDialog: boolean; addMemberDialog: boolean;
...@@ -158,19 +159,15 @@ const AddMember = observer((props: IProps) => { ...@@ -158,19 +159,15 @@ const AddMember = observer((props: IProps) => {
title="添加成员" title="添加成员"
> >
<Box> <Box>
<Box sx={{ mb: 2 }}> <SearchInput
<OutlinedInput onKeyUp={(e: any) => {
onChange={(e: any) => { if (e.keyCode === 13) {
_.debounce(() => { setProjectMember(e.target.value);
setProjectMember(e.target.value); }
}, 200)(); }}
}} placeholder="搜索项目成员"
placeholder="搜索项目成员" sx={{ mb: 2 }}
size="small" />
sx={{ width: "100%", height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
</Box>
<div style={{ overflowY: "scroll", maxHeight: 400 }}> <div style={{ overflowY: "scroll", maxHeight: 400 }}>
<MyTable <MyTable
checkboxData={(val: string[]) => setCheckData(val)} checkboxData={(val: string[]) => setCheckData(val)}
......
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 8c034058
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-22 16:20:26 * @LastEditTime: 2022-07-28 19:02:19
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/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
*/ */
...@@ -11,29 +11,27 @@ import _ from "lodash"; ...@@ -11,29 +11,27 @@ import _ from "lodash";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput"; import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search"; import { TablePagination } from "@mui/material";
import { TablePagination } from '@mui/material';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import SimpleDialog from "./components/simpleDialog" import MySelect from "@/components/mui/MySelect";
import SimpleDialog from "./components/simpleDialog";
import { useStores } from "@/store"; import { useStores } from "@/store";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent" import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent";
import runTime from '../../../../assets/project/runTime.svg' import runTime from "../../../../assets/project/runTime.svg";
import jobCost from '../../../../assets/project/jobCost.svg' import jobCost from "../../../../assets/project/jobCost.svg";
import jobSue from '../../../../assets/project/jobSue.svg' import jobSue from "../../../../assets/project/jobSue.svg";
import jobFail from '../../../../assets/project/jobFail.svg' import jobFail from "../../../../assets/project/jobFail.svg";
import jobRun from '../../../../assets/project/jobRun.svg' import jobRun from "../../../../assets/project/jobRun.svg";
import jobCadence from '../../../../assets/project/jobCadence.svg' import jobCadence from "../../../../assets/project/jobCadence.svg";
import jobStop from '../../../../assets/project/jobStop.svg' import jobStop from "../../../../assets/project/jobStop.svg";
import jobDel from '../../../../assets/project/jobDel.svg' import jobDel from "../../../../assets/project/jobDel.svg";
import noData from '../../../../assets/project/noTemplate.svg' import noData from "../../../../assets/project/noTemplate.svg";
import onload from '../../../../assets/project/onload.svg' import onload from "../../../../assets/project/onload.svg";
import { import {
getWorkflowJobList, getWorkflowJobList,
deleteWorkflowJob, deleteWorkflowJob,
cancelWorkflowJob cancelWorkflowJob,
} from "@/api/workbench_api"; } from "@/api/workbench_api";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
...@@ -43,262 +41,252 @@ import SearchInput from "@/components/BusinessComponents/SearchInput"; ...@@ -43,262 +41,252 @@ import SearchInput from "@/components/BusinessComponents/SearchInput";
import styles from "./index.module.css"; import styles from "./index.module.css";
const currencies = [ const currencies = [
{ {
value: 'ALL', value: "ALL",
label: '全部', label: "全部",
}, },
{ {
value: 'RUNNING', value: "RUNNING",
label: '正在运行', label: "正在运行",
}, },
{ {
value: 'SUCCEEDED', value: "SUCCEEDED",
label: '运行成功', label: "运行成功",
}, },
{ {
value: 'FAILED', value: "FAILED",
label: '运行失败', label: "运行失败",
}, },
{ {
value: 'ABORTED', value: "ABORTED",
label: '运行终止', label: "运行终止",
}, },
]; ];
let timer: string | number | NodeJS.Timeout | null | undefined = null let timer: string | number | NodeJS.Timeout | null | undefined = null;
const ProjectMembers = observer(() => { const ProjectMembers = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id); const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const isPass = usePass(); const isPass = usePass();
const [jobName, setJobName] = useState('') const [jobName, setJobName] = useState("");
const [jobList, setJobList] = useState([]) const [jobList, setJobList] = useState([]);
const [currency, setCurrency] = useState('ALL'); const [currency, setCurrency] = useState("ALL");
const [page, setPage] = useState(0) const [page, setPage] = useState(0);
const [size, setSize] = useState(10) const [size, setSize] = useState(10);
const [rowsPerPage, setRowsPerPage] = useState(10) const [rowsPerPage, setRowsPerPage] = useState(10);
const [count, setCount] = useState(0) const [count, setCount] = useState(0);
/** 简单弹窗 */ /** 简单弹窗 */
const [jobData, setJobData] = useState(''); const [jobData, setJobData] = useState("");
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false);
const [dialogType, setDialogType] = useState('del'); const [dialogType, setDialogType] = useState("del");
// 获取作业列表 // 获取作业列表
const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, { const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
onSuccess: (result: any) => { onSuccess: (result: any) => {
setJobList(result.data.content); setJobList(result.data.content);
setCount(result.data.totalElements) setCount(result.data.totalElements);
timer && clearTimeout(timer as number) timer && clearTimeout(timer as number);
timer = null; timer = null;
timer = setTimeout(() => { timer = setTimeout(() => {
getWorkflowJobInfo({ getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: currentProjectStore.currentProjectInfo.id as string,
page: page, page: page,
size: size, size: size,
name: jobName, name: jobName,
state: currency === 'ALL' ? "" : currency state: currency === "ALL" ? "" : currency,
}); });
}, 60000); }, 60000);
}, },
}); });
useEffect(() => { useEffect(() => {
return () => { return () => {
clearTimeout(timer as number) clearTimeout(timer as number);
} };
}, []) }, []);
const navigate = useNavigate() const navigate = useNavigate();
// 删除作业 // 删除作业
const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, { const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
onSuccess: (result: any) => { onSuccess: (result: any) => {
setOpenDialog(false) setOpenDialog(false);
getWorkflowJobInfo({ getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: currentProjectStore.currentProjectInfo.id as string,
page: page, page: page,
size: size, size: size,
name: jobName, name: jobName,
state: currency === 'ALL' ? "" : currency state: currency === "ALL" ? "" : currency,
}); });
}, },
}); });
// 删除作业 // 删除作业
const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, { const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
onSuccess: (result: any) => { onSuccess: (result: any) => {
setOpenDialog(false) setOpenDialog(false);
getWorkflowJobInfo({ getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: currentProjectStore.currentProjectInfo.id as string,
page: page, page: page,
size: size, size: size,
name: jobName, name: jobName,
state: currency === 'ALL' ? "" : currency state: currency === "ALL" ? "" : currency,
}); });
}, },
}); });
const searchChange = (data: any) => { const handleChange = (val: string) => {
setJobName(data.length > 30 ? data.slice(0, 30) : data); setCurrency(val);
} };
const handleChange = (event: any) => { /** 关闭弹窗 */
setCurrency(event.target.value); const closeDialog = () => {
}; setOpenDialog(false);
};
/** 关闭弹窗 */
const closeDialog = () => { /** 弹窗确认 */
setOpenDialog(false); const onConfirm = () => {
}; if (dialogType === "del") {
delWorkflowJob({
/** 弹窗确认 */ id: jobData,
const onConfirm = () => { });
if (dialogType === "del") { } else {
delWorkflowJob({ cancelWorkflowJobInfo({
id: jobData jobid: jobData,
}) });
} else { }
cancelWorkflowJobInfo({ };
jobid: jobData
}) useEffect(() => {
} getWorkflowJobInfo({
}; projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
useEffect(() => { size: size,
getWorkflowJobInfo({ name: jobName,
projectId: currentProjectStore.currentProjectInfo.id as string, state: currency === "ALL" ? "" : currency,
page: page, });
size: size, }, [projectId, getWorkflowJobInfo]);
name: jobName,
state: currency === 'ALL' ? "" : currency const handleChangePage = (event: any, newPage: any) => {
}); setPage(newPage);
}, [projectId, getWorkflowJobInfo]); getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
const handleChangePage = (event: any, newPage: any) => { page: newPage,
setPage(newPage) size: size,
getWorkflowJobInfo({ name: jobName,
projectId: currentProjectStore.currentProjectInfo.id as string, state: currency === "ALL" ? "" : currency,
page: newPage, });
size: size, };
name: jobName,
state: currency === 'ALL' ? "" : currency const handleChangeRowsPerPage = (event: any) => {
}); setRowsPerPage(event.target.value);
} setSize(event.target.value);
getWorkflowJobInfo({
const handleChangeRowsPerPage = (event: any) => { projectId: currentProjectStore.currentProjectInfo.id as string,
setRowsPerPage(event.target.value) page: page,
setSize(event.target.value) size: event.target.value,
getWorkflowJobInfo({ name: jobName,
projectId: currentProjectStore.currentProjectInfo.id as string, state: currency === "ALL" ? "" : currency,
page: page, });
size: event.target.value, };
name: jobName,
state: currency === 'ALL' ? "" : currency useEffect(() => {
}); setTimeout(() => {
} getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
useEffect(() => { page: page,
setTimeout(() => { size: size,
getWorkflowJobInfo({ name: jobName,
projectId: currentProjectStore.currentProjectInfo.id as string, state: currency === "ALL" ? "" : currency,
page: page, });
size: size, }, 300);
name: jobName, }, [jobName, currency]);
state: currency === 'ALL' ? "" : currency
}); const renderStatusIcon = (data: string) => {
}, 300) switch (data) {
}, [jobName, currency]); case "RUNNING":
return jobRun;
const renderStatusIcon = (data: string) => { case "ABORTED":
switch (data) { return jobCadence;
case "RUNNING": case "FAILED":
return jobRun return jobFail;
case "ABORTED": case "SUCCEEDED":
return jobCadence return jobSue;
case "FAILED": default:
return jobFail return jobCadence;
case "SUCCEEDED": }
return jobSue };
default:
return jobCadence const renderStatusText = (data: string) => {
} switch (data) {
} case "RUNNING":
return "正在运行";
const renderStatusText = (data: string) => { case "ABORTED":
switch (data) { return "运行终止";
case "RUNNING": case "FAILED":
return '正在运行' return "运行失败";
case "ABORTED": case "SUCCEEDED":
return '运行终止' return "运行成功";
case "FAILED": default:
return '运行失败' return "未知";
case "SUCCEEDED": }
return '运行成功' };
default:
return '未知' /** 渲染字体颜色 */
} const renderTextColor = (data: any) => {
} switch (data) {
case "RUNNING":
/** 渲染字体颜色 */ return "#1370FF";
const renderTextColor = (data: any) => { case "ABORTED":
switch (data) { return "#C2C6CC";
case "RUNNING": case "FAILED":
return "#1370FF"; return "#FF4E4E";
case "ABORTED": case "SUCCEEDED":
return "#C2C6CC"; return "#0DD09B";
case "FAILED": default:
return "#FF4E4E"; return "#C2C6CC";
case "SUCCEEDED": }
return "#0DD09B"; };
default:
return "#C2C6CC"; /** 渲染进度条颜色 */
} const renderProgressColor = useCallback((data: any) => {
}; switch (data) {
case "RUNNING":
/** 渲染进度条颜色 */ return "info";
const renderProgressColor = useCallback((data: any) => { case "ABORTED":
switch (data) { return "disable";
case "RUNNING": case "FAILED":
return "info"; return "error";
case "ABORTED": case "SUCCEEDED":
return "disable"; return "success";
case "FAILED": default:
return "error"; return "disable";
case "SUCCEEDED": }
return "success"; }, []);
default:
return "disable"; /** 点击每一行 */
} const rowClick = useCallback(
}, []); (id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
/** 点击每一行 */ state: { taskId: id },
const rowClick = useCallback( });
(id: string) => { },
navigate(`/product/cadd/projectJobDetail`, { [navigate]
state: { taskId: id }, );
});
}, // 回车搜索
[navigate], const handleKeyWordChangeKeyUp = (e: any) => {
); if (e.keyCode === 13) {
setJobName(e.target.value);
// 回车搜索 }
const handleKeyWordChangeKeyUp = (e: any) => { };
if (e.keyCode === 13) {
setJobName(e.target.value); return (
} <Box className={styles.headerBox}>
} <Box className={styles.tabHeader}>
<Box sx={{ display: "flex" }}>
return ( <SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
<Box className={styles.headerBox}> {/* <Box className={styles.tabHeaderSelect}>
<Box className={styles.tabHeader}>
<Box sx={{ display: 'flex' }}>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
sx={{ width: 340 }}
/>
<Box className={styles.tabHeaderSelect}>
<TextField <TextField
select select
label="运行状态" label="运行状态"
...@@ -319,131 +307,183 @@ const ProjectMembers = observer(() => { ...@@ -319,131 +307,183 @@ const ProjectMembers = observer(() => {
}} }}
> >
{currencies.map((option) => ( {currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label} {option.label}
</MenuItem>
))} ))}
</TextField> </TextField>
</Box> </Box> */}
</Box>
<Box className={styles.tabHeaderSelect}>
<Box className={styles.tabUpdate} onClick={() => { <MySelect
getWorkflowJobInfo({ input={<OutlinedInput />}
projectId: currentProjectStore.currentProjectInfo.id as string, value={currency}
page: page, onChange={handleChange}
size: size, options={currencies}
name: jobName, size="small"
state: currency === 'ALL' ? "" : currency sx={{
}) width: 180,
}} > height: 32,
<img alt="" src={onload} /> "& .MuiOutlinedInput-root": {
</Box> height: "32px",
color: "#1E2633",
</Box> fontSize: "14px",
},
<Box className={styles.body}> "& .MuiInputLabel-root": {
{ color: "#8A9099",
jobList.length === 0 && fontSize: "14px",
<Box sx={{ },
display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)', }}
justifyContent: 'center' />
}}> </Box>
<img alt="" src={noData} /> </Box>
<Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂无任务</Typography>
</Box> <Box
} className={styles.tabUpdate}
{ onClick={() => {
jobList.length > 0 && jobList.map((item: any, key) => { getWorkflowJobInfo({
return ( projectId: currentProjectStore.currentProjectInfo.id as string,
<Box className={styles.tabBox} onClick={() => rowClick(item.id)}> page: page,
<Box className={styles.tabBoxInfo}> size: size,
<div className={styles.tabBoxTitle}>{item.name}</div> name: jobName,
<Box className={styles.tabBoxDescInfo}> state: currency === "ALL" ? "" : currency,
<div className={styles.tabBoxDesc} style={{ marginRight: "24px" }} >创建时间：{item.createTime}</div> });
<div className={styles.tabBoxDesc}>创建人：{item.creator}</div> }}
</Box> >
</Box> <img alt="" src={onload} />
<Box className={styles.tabBoxMiddle}> </Box>
<img alt="" src={runTime} /> </Box>
<div className={styles.tabBoxTime}>{item.costTime}</div>
</Box> <Box className={styles.body}>
<Box className={styles.tabBoxMiddle}> {jobList.length === 0 && (
<img alt="" src={jobCost} /> <Box
<div className={styles.tabBoxTime}>{item.jobCost}</div> sx={{
</Box> display: "flex",
<Box className={styles.tabBoxJobStatus}> alignItems: "center",
<img alt="" src={renderStatusIcon(item.state)} /> flexDirection: "column",
<div className={styles.tabBoxStatusText}>{renderStatusText(item.state)}</div> minHeight: "calc(100vh - 376px)",
<Box sx={{ width: '100%' }}> justifyContent: "center",
<MyProgress color={renderProgressColor(item.state)} value={(item.completeNum / item.totalNum) * 100} }}
sx={{ >
marginRight: '16px', <img alt="" src={noData} />
}} <Typography
/> sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
</Box> >
<div style={{ color: renderTextColor(item.state) }} className={styles.tabBoxStatusText}>{item.completeNum + "/" + item.totalNum}</div> 暂无任务
</Box> </Typography>
</Box>
{ )}
item.state === "RUNNING" && isPass("PROJECT_WORKBENCH_JOBS_STOP", 'USER') && <Box className={styles.tabBoxJobOperate}> {jobList.length > 0 &&
<img alt="" jobList.map((item: any, key) => {
src={jobStop} return (
style={{ cursor: "pointer" }} <Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
onClick={(event) => { <Box className={styles.tabBoxInfo}>
event.stopPropagation(); <div className={styles.tabBoxTitle}>{item.name}</div>
event.nativeEvent.stopImmediatePropagation(); <Box className={styles.tabBoxDescInfo}>
setJobData(item.id) <div
setOpenDialog(true) className={styles.tabBoxDesc}
setDialogType('stop') style={{ marginRight: "24px" }}
}} >
/> 创建时间：{item.createTime}
</Box> </div>
} <div className={styles.tabBoxDesc}>
创建人：{item.creator}
{ </div>
item.state !== "RUNNING" && isPass("PROJECT_WORKBENCH_JOBS_DELETE", 'MANAGER') && <Box className={styles.tabBoxJobOperate}> </Box>
<img alt="" </Box>
src={jobDel} <Box className={styles.tabBoxMiddle}>
style={{ cursor: "pointer" }} <img alt="" src={runTime} />
onClick={(event) => { <div className={styles.tabBoxTime}>{item.costTime}</div>
event.stopPropagation(); </Box>
event.nativeEvent.stopImmediatePropagation(); <Box className={styles.tabBoxMiddle}>
setJobData(item.id) <img alt="" src={jobCost} />
setOpenDialog(true) <div className={styles.tabBoxTime}>{item.jobCost}</div>
setDialogType('del') </Box>
}} <Box className={styles.tabBoxJobStatus}>
/> <img alt="" src={renderStatusIcon(item.state)} />
</Box> <div className={styles.tabBoxStatusText}>
} {renderStatusText(item.state)}
</div>
</Box> <Box sx={{ width: "100%" }}>
) <MyProgress
}) color={renderProgressColor(item.state)}
} value={(item.completeNum / item.totalNum) * 100}
</Box> sx={{
marginRight: "16px",
<TablePagination }}
rowsPerPageOptions={[5, 10, 20, 50]} />
labelRowsPerPage={'每页行数：'} </Box>
ActionsComponent={ActionsComponent} <div
component="div" style={{ color: renderTextColor(item.state) }}
count={count || jobList.length} className={styles.tabBoxStatusText}
rowsPerPage={rowsPerPage || 10} >
page={page} {item.completeNum + "/" + item.totalNum}
onPageChange={handleChangePage}// </div>
onRowsPerPageChange={handleChangeRowsPerPage}// </Box>
/>
{item.state === "RUNNING" &&
<SimpleDialog isPass("PROJECT_WORKBENCH_JOBS_STOP", "USER") && (
text={dialogType === "del" ? '任务被删除后将无法恢复，确认继续吗？' : '正在运行的任务终止后将无法重新运行，确认继续吗？'} <Box className={styles.tabBoxJobOperate}>
title={dialogType === "del" ? '删除任务' : '终止任务'} <img
openDialog={openDialog} alt=""
closeDialog={closeDialog} src={jobStop}
onConfirm={onConfirm} style={{ cursor: "pointer" }}
/> onClick={(event) => {
event.stopPropagation();
</Box > event.nativeEvent.stopImmediatePropagation();
); setJobData(item.id);
setOpenDialog(true);
setDialogType("stop");
}}
/>
</Box>
)}
{item.state !== "RUNNING" &&
isPass("PROJECT_WORKBENCH_JOBS_DELETE", "MANAGER") && (
<Box className={styles.tabBoxJobOperate}>
<img
alt=""
src={jobDel}
style={{ cursor: "pointer" }}
onClick={(event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
setJobData(item.id);
setOpenDialog(true);
setDialogType("del");
}}
/>
</Box>
)}
</Box>
);
})}
</Box>
<TablePagination
rowsPerPageOptions={[5, 10, 20, 50]}
labelRowsPerPage={"每页行数："}
ActionsComponent={ActionsComponent}
component="div"
count={count || jobList.length}
rowsPerPage={rowsPerPage || 10}
page={page}
onPageChange={handleChangePage} //
onRowsPerPageChange={handleChangeRowsPerPage} //
/>
<SimpleDialog
text={
dialogType === "del"
? "任务被删除后将无法恢复，确认继续吗？"
: "正在运行的任务终止后将无法重新运行，确认继续吗？"
}
title={dialogType === "del" ? "删除任务" : "终止任务"}
openDialog={openDialog}
closeDialog={closeDialog}
onConfirm={onConfirm}
/>
</Box>
);
}); });
export default memo(ProjectMembers); export default memo(ProjectMembers);
src/views/Project/components/AddProject/index.tsx
View file @ 8c034058
import style from "./index.module.css";
import { MenuItem } from "@mui/material"; import { MenuItem } from "@mui/material";
import React, { useState, useEffect } from "react";
import MyInput from "@/components/mui/MyInput"; import MyInput from "@/components/mui/MyInput";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import React, { useState, useEffect } from "react";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { hpczone, addProject } from "@/api/project_api"; import { hpczone, addProject } from "@/api/project_api";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
...@@ -14,6 +14,8 @@ import { ...@@ -14,6 +14,8 @@ import {
getFiletokenAccordingToId, getFiletokenAccordingToId,
} from "@/views/Project/project"; } from "@/views/Project/project";
import style from "./index.module.css";
type zoneIdOption = { type zoneIdOption = {
id: string; id: string;
name: string; name: string;
......
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