Skip to content

B
bkunyun
Commit 95d8fd24 authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

Merge branch 'feat-20220801' into 'master' 

Feat 20220801

See merge request !99
parents c7f631b9 3e773173
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1631 additions and 530 deletions
src/api/api_manager.ts
View file @ 95d8fd24
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 09:56:57
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-15 17:10:49
* @LastEditTime: 2022-09-01 15:30:28
* @FilePath: /bkunyun/src/api/api_manager.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -45,6 +45,9 @@ const RESTAPI = {
API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`, // 查询任务概览
API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`, // 获取流算子列表，可用于模糊查询，返回所有版本流算子
API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`, // 保存批算子
API_PROJECT_USERS_LIST:`${BACKEND_API_URI_PREFIX}/cpp/project/listusers`, // 获取项目成员
API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`, // 添加项目成员
API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`, // 获取项目权限
};
export default RESTAPI;
src/api/project_api.ts
View file @ 95d8fd24
......@@ -318,6 +318,34 @@ const saveBatchActor = (params: saveBatchParams) => {
});
};
// 获取项目成员
const fetchProjectUsersList = (params: {id: string}) => {
return request({
url: Api.API_PROJECT_USERS_LIST,
method: "get",
params,
});
};
// 修改项目成员信息
const addProjectUser = (id: string, params: any) => {
return request({
url: `${Api.API_ADD_PROJECT_USER}?id=${id}`,
method: "put",
data: params,
});
};
// 获取项目权限
const fetchProjectPower = (params: {id: string}) => {
return request({
url: Api.API_GET_PROJECT_POWER,
method: "get",
params,
});
};
export {
current,
menu,
......@@ -342,5 +370,8 @@ export {
getTaskOverview,
getOperatorList,
saveBatchActor,
fetchFlowOutputNumber
fetchFlowOutputNumber,
fetchProjectUsersList,
addProjectUser,
fetchProjectPower
};
src/assets/project/goback.svg 0 → 100644
View file @ 95d8fd24
<?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/assets/project/selectActive.svg 0 → 100644
View file @ 95d8fd24
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 4</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="切换产品" transform="translate(-337.000000, -190.000000)">
<g id="编组-37" transform="translate(223.000000, 172.000000)">
<g id="编组-34" transform="translate(0.000000, 8.000000)">
<g id="编组-4" transform="translate(114.000000, 10.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<polyline id="路径-26" stroke="#1370FF" stroke-width="1.5" stroke-linejoin="round" points="4 8.33740166 7.27434245 11 12 5"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/successIcon.svg 0 → 100644
View file @ 95d8fd24
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>check-circle-outline备份</title>
<g id="云平台视觉规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="check-circle-outline备份" fill="#0DD09B" fill-rule="nonzero">
<path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 M8,14.4 C4.472,14.4 1.6,11.528 1.6,8 C1.6,4.472 4.472,1.6 8,1.6 C11.528,1.6 14.4,4.472 14.4,8 C14.4,11.528 11.528,14.4 8,14.4 M11.672,4.464 L6.4,9.736 L4.328,7.672 L3.2,8.8 L6.4,12 L12.8,5.6 L11.672,4.464 Z" id="形状"></path>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/triangle.svg 0 → 100644
View file @ 95d8fd24
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 12备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-12备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<polygon id="路径-53备份-2" fill="#8A9099" points="4.5 6 11.5 6 8 11"></polygon>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/style/public.css
View file @ 95d8fd24
/* 修改滚动条样式 */
div::-webkit-scrollbar,
main::-webkit-scrollbar {
width: 4px;
width: 6px;
height: 5px !important;
}
div::-webkit-scrollbar-track,
main::-webkit-scrollbar-track {
background-color: #fff;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background-color: transparent;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
}
div::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb {
background-color: #C2C6CC;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: rgba(138, 144, 153, 0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height: 5px !important;
width: 4px!important;
width: 6px !important;
}
div::-webkit-scrollbar-thumb:hover {
background-color: rgba(138, 144, 153, 0.8);
}
main::-webkit-scrollbar-thumb:hover {
background-color: rgba(138, 144, 153, 0.8);
}
body,
......
src/components/BusinessComponents/SearchInput/index.tsx
View file @ 95d8fd24
......@@ -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/CommonComponents/FullScreenDrawer/index.module.css
View file @ 95d8fd24
......@@ -38,7 +38,7 @@
background-color: #fff;
border-radius: 16px 0 0 0;
box-sizing: border-box;
overflow: scroll;
overflow: overlay;
animation: showDrawer 0.31s ease;
-webkit-animation: showDrawer 0.31s ease;
margin: 0 auto;
......
src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css
View file @ 95d8fd24
.RadiosBox {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -20,7 +21,6 @@
border-radius: 2px;
line-height: 20px;
padding: 6px 16px;
/* background-color: #e6e8eb; */
flex: 1;
display: flex;
align-items: center;
......@@ -30,8 +30,7 @@
.radioActive {
color: #1370ff;
background-color: #fff;
box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
position: relative;
}
.border {
width: 1px;
......@@ -41,3 +40,19 @@
.borderHidden {
visibility: hidden;
}
.radioActiveBgBox {
width: calc(100% - 2px);
position: absolute;
left: 1px;
top: 1px;
height: 28px;
}
.radioActiveBg {
box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
height: 100%;
background-color: #fff;
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
border-radius: 2px;
width: 50%;
transform: translateX(0px);
}
src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
View file @ 95d8fd24
......@@ -22,11 +22,26 @@ type IRadioGroupOfButtonStyleProps = {
handleRadio: any;
RadiosBoxStyle?: object;
radioStyle?: object;
radioActiveBgBoxStyle?: object;
};
const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
props;
const {
radioOptions,
value,
handleRadio,
RadiosBoxStyle,
radioStyle,
radioActiveBgBoxStyle,
} = props;
const radioWidth = useMemo(() => {
if (radioOptions.length) {
return Number((100 / radioOptions.length).toFixed(2));
} else {
return 100;
}
}, [radioOptions]);
const activeIndex: any = useMemo(() => {
let res = 0;
......@@ -40,6 +55,16 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
return (
<div className={style.RadiosBox} style={RadiosBoxStyle}>
<div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}>
<div
className={style.radioActiveBg}
style={{
width: `${radioWidth}%`,
transform: `translateX(${activeIndex * 100}%)`,
}}
></div>
</div>
{radioOptions.map((options, index) => {
return (
<>
......
src/components/Material.Ui/SearchSelectCheckBox.jsx
View file @ 95d8fd24
......@@ -38,7 +38,7 @@ const useStyles = makeStyles({
contentWrap: {
padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
overflowY: "scroll",
overflowY: "overlay",
maxHeight: "398px"
},
contentWrapOpenPosition:{top:"-400px"},
......
src/components/Material.Ui/Select.jsx
View file @ 95d8fd24
......@@ -32,7 +32,7 @@ const useStyles = makeStyles({
contentWrap: {
padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
overflowY: "auto",
overflowY: "overlay",
maxHeight: "400px"
},
contentWrapOpen: { height: "auto" },
......
src/components/Material.Ui/SelectCheckBox.jsx
View file @ 95d8fd24
......@@ -42,7 +42,7 @@ const useStyles = makeStyles({
contentWrap: {
padding: "8px 0", transition: "all 1s", position: "fixed", zIndex: 9, width: "552px",
backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
overflowY: "scroll",
overflowY: "overlay",
maxHeight: "398px",
// position: "fixed",
// width: "552px"
......
src/components/MySnackbar/MySnackbarProvider.tsx
View file @ 95d8fd24
import React, { Fragment, ReactNode, useMemo } from "react";
import React, { Fragment, ReactNode } from "react";
import { Snackbar, Alert, Fade, Grow } from "@mui/material";
import useMySnackbar from "./useMySnackbar";
import snackbarContext from "./snackbarContext";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import successIconSrc from "../../assets/project/successIcon.svg";
type MySnackbarProviderProp = {
vertical?: "bottom" | "top";
......@@ -22,7 +23,6 @@ type MySnackbarProviderProp = {
variant?: "filled" | "outlined" | "standard";
errorIcon?: ReactNode;
infoIcon?: ReactNode;
successIcon?: ReactNode;
warningIcon?: ReactNode;
elevation?: number;
alertSx?: object;
......@@ -58,7 +58,6 @@ const MySnackbarProvider = ({
variant = "standard",
errorIcon,
infoIcon,
successIcon,
warningIcon,
elevation = 3,
alertSx,
......@@ -86,7 +85,7 @@ const MySnackbarProvider = ({
minHeight: "38px",
boxShadow: "none",
"& .MuiAlert-action": {
paddingLeft: "60px",
paddingLeft: "32px",
},
"&.MuiAlert-standardError": {
color: "#FF4E4E",
......@@ -122,6 +121,14 @@ const MySnackbarProvider = ({
},
});
const successIcon = (
<img
src={successIconSrc}
style={{ width: "16px", height: "16px", margin: "3px 0" }}
alt=""
/>
);
return (
<Fragment>
<ThemeProvider theme={theme}>
......
src/components/mui/MyBorderlessSelect.tsx 0 → 100644
View file @ 95d8fd24
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2021-12-04 15:46:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-21 18:00:58
* @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
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;
value: string;
disabled?: boolean;
}
export const optionsTransform = (
arr: Array<any>,
labelKey: string = "label",
valueKey: string = "value",
disabledKey: string = "disabled"
): Array<IOption> => {
return arr.map((item: any) => {
return {
label: item[labelKey],
value: item[valueKey],
disabled: item[disabledKey],
};
});
};
interface IProps
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: string;
options: IOption[];
onChange?: (val: string) => void;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
/** 是否显示提示文案 */
error?: boolean;
/** 提示文案 */
helpertext?: string;
}
export default function MyBorderlessSelect(props: IProps) {
const {
value,
options,
title,
isTitle = false,
variant = "outlined",
multiple = false,
onChange,
fullWidth,
error = false,
helpertext,
...other
} = props;
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
height: "36px",
"& .Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderWidth: '0px'
},
},
},
input: {
fontSize: "14px",
"&.Mui-focused":{
color:"#1370FF",
},
"&.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",
},
},
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
paddingRight: "46px",
fontSize: "14px",
lineHeight: "24px",
":hover": {
backgroundColor: "#F0F2F5 ",
color: "#1E2633",
},
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "0px",
color: '#1370FF'
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
borderWidth: "0px",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#1370ff",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
fontSize: "14px",
// 下拉框未选择时的label定位
top: "-9px",
},
shrink: {
// 下拉框已经选择时的label定位
top: 0,
},
},
},
MuiSelect: {
styleOverrides: {
select: {
padding: "6.5px 14px",
fontSize: "14px",
},
},
},
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
},
},
},
},
});
const handleChange = (e: SelectChangeEvent<unknown>) => {
onChange && onChange(e.target.value as string);
};
return (
<ThemeProvider theme={theme}>
<FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || ""}
size="small"
multiple={multiple}
{...other}
value={value || ""}
onChange={handleChange}
>
{options.length
? options?.map((item: IOption, index) => {
return (
<MenuItem
value={item.value}
disabled={item?.disabled}
key={index}
>
{item.label}
{value === item.value && (
<img
style={{
width: "16px",
height: "16px",
position: "absolute",
top: "10px",
right: "12px",
}}
src={selectActive}
alt=""
/>
)}
</MenuItem>
);
})
: null}
</Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl>
</ThemeProvider>
);
}
src/components/mui/MyButton.tsx
View file @ 95d8fd24
......@@ -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,11 +54,17 @@ const theme = createTheme({
"&.MuiButton-outlinedError": {
color: "rgba(255, 78, 78, 1)",
border: "1px solid rgba(255, 78, 78, 1)",
"&:hover": { backgroundColor: 'transparent' },
"&:hover": { backgroundColor: "#FFEDED" },
},
"& .MuiLoadingButton-loadingIndicator": {
color: "#fff",
},
"&.MuiButton-containedError": {
backgroundColor: "#FF4E4E",
"&:hover": {
backgroundColor: "rgba(217, 54, 54, 1)",
},
},
},
contained: {
backgroundColor: "#1370FF",
......@@ -101,6 +107,9 @@ const theme = createTheme({
border: "1px solid rgba(221, 225, 230, 1)",
},
},
// outlinedError: {
// "&:hover": { backgroundColor: "#FFEDED " },
// },
textSecondary: {
backgroundColor: "transparent",
color: "#FF4E4E",
......@@ -110,16 +119,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/MyCheckBox.tsx
View file @ 95d8fd24
......@@ -12,6 +12,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import _ from "lodash";
interface IMyCheckBoxProps extends FormGroupProps {
......@@ -44,6 +45,34 @@ export const optionsTransform = (
});
};
const theme = createTheme({
components: {
MuiFormControlLabel: {
styleOverrides: {
label: {
fontSize: "14px",
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
fontSize: "19px",
},
},
},
MuiCheckbox: {
styleOverrides: {
root: {
"&.Mui-checked .MuiSvgIcon-root": {
color: "rgba(19, 110, 250, 1)",
},
},
},
},
},
});
export default function MyCheckBox(props: IMyCheckBoxProps) {
const {
value,
......@@ -76,6 +105,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
};
return (
<ThemeProvider theme={theme}>
<FormControl fullWidth variant={variant} error={error}>
<FormGroup {...props} row>
{options.map((option) => {
......@@ -98,5 +128,6 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
</FormGroup>
{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
</FormControl>
</ThemeProvider>
);
}
src/components/mui/MyDialog.tsx
View file @ 95d8fd24
import React from "react";
import React, { useMemo } from "react";
import {
Dialog,
......@@ -42,7 +42,14 @@ export interface IDialogProps {
/** 点击遮罩是否关闭 默认为false*/
clickMaskClose?: boolean;
/** 确认按钮样式*/
okSx?: any;
okColor?:
| "inherit"
| "primary"
| "secondary"
| "success"
| "error"
| "info"
| "warning"; //按钮颜色风格
loading?: boolean; // 确认按钮是否处于loading状态
}
......@@ -66,7 +73,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
disabledConfirm,
clickMaskClose = false,
loading = false,
okSx = {},
okColor = "primary",
} = props;
const handelClose = (
......@@ -79,7 +86,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
onClose && onClose();
};
const Footer = () => {
const Footer = useMemo(() => {
if (isHideFooter) return null;
return footerRender ? (
footerRender()
......@@ -90,7 +97,6 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
text={cancelText || "取消"}
onClick={onClose}
variant="outlined"
// size="small"
color="secondary"
/>
) : null}
......@@ -99,16 +105,28 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
text={okText || "确定"}
onClick={onConfirm}
variant="contained"
// size="small"
color={okColor}
disabled={disabledConfirm}
isLoadingButton={true}
loading={loading}
style={{ marginLeft: '12px', ...okSx }}
style={{ marginLeft: "12px" }}
/>
) : null}
</DialogActions>
);
};
}, [
disabledConfirm,
okColor,
okText,
onConfirm,
onClose,
cancelText,
showCancel,
footerRender,
isHideFooter,
loading,
showConfirm,
]);
return (
<Dialog
open={open}
......@@ -122,16 +140,13 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
"& .MuiPaper-root": {
// 设置最大宽度， 实际宽度让子元素撑大
maxWidth: "1920px",
borderRadius: "8px"
borderRadius: "8px",
},
},
}}
>
{isHideHeader ? null : (
<DialogTitle
id="alert-dialog-title"
sx={{ padding: "20px 24px" }}
>
<DialogTitle id="alert-dialog-title" sx={{ padding: "20px 24px" }}>
<div
style={{
display: "flex",
......@@ -140,16 +155,25 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
fontWeight: 600,
}}
>
<span style={{ fontSize: 16, lineHeight: '24px', color: '#1E2633' }}>{title}</span>
<span
style={{ fontSize: 16, lineHeight: "24px", color: "#1E2633" }}
>
{title}
</span>
<CloseIcon
onClick={onClose}
sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius: '2px' } }}
sx={{
fontSize: "18px",
color: "#C2C6CC",
cursor: "pointer",
":hover": { background: "#f0f2f5", borderRadius: "2px" },
}}
/>
</div>
</DialogTitle>
)}
<DialogContent style={{ minWidth: 388 }}>{children}</DialogContent>
{Footer()}
{Footer}
</Dialog>
);
};
......
src/components/mui/MyInput.tsx
View file @ 95d8fd24
......@@ -36,11 +36,16 @@ const MyInput = (props: MyInputProps) => {
height: "36px",
fontSize: "14px",
border: "rgba(221, 225, 230, 1)",
padding: "7px 12px",
"&.MuiInputBase-sizeSmall": {
height: "32px",
},
"& .Mui-disabled": {
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
},
multiline: {
......@@ -49,13 +54,19 @@ const MyInput = (props: MyInputProps) => {
padding: 0,
},
},
input: {},
input: {
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
top: "-9px",
fontSize: "14px",
},
shrink: {
top: 0,
......@@ -68,26 +79,48 @@ const MyInput = (props: MyInputProps) => {
MuiOutlinedInput: {
styleOverrides: {
root: {
padding: "7px 12px",
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": error
? {}
: {
borderColor: "#1370ff",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
},
},
input: {
padding: "6.5px 12px",
padding: "0",
verticalAlign: "middle",
},
},
},
MuiTypography: {
styleOverrides: {
root: {
marginRight: "-5px",
},
},
},
},
});
......
src/components/mui/MyMenu.tsx
View file @ 95d8fd24
......@@ -23,7 +23,7 @@ const theme = createTheme({
MuiMenu: {
styleOverrides: {
root: {
overflowY: "scroll",
overflow: "overlay",
},
},
},
......
src/components/mui/MyMultipleMenu.tsx
View file @ 95d8fd24
......@@ -14,7 +14,7 @@ const theme = createTheme({
MuiMenu: {
styleOverrides: {
root: {
overflowY: "scroll",
overflow: "overlay",
},
},
},
......
src/components/mui/MyPopconfirm.tsx
View file @ 95d8fd24
......@@ -68,11 +68,19 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
placement={placement}
sx={{
zIndex: 2000,
bgcolor: "transparent",
minWidth: "200px",
fontSize: "14px",
padding: "8px 0px",
}}
>
<Box
sx={{
bgcolor: "#fff",
minWidth: "200px",
borderRadius: "4px",
fontSize: "14px",
padding: "20px 16px",
padding: "16px 20px",
boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
}}
>
......@@ -106,6 +114,7 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
isLoadingButton={true}
/>
</Box>
</Box>
</Popper>
);
};
......
src/components/mui/MyPopover.tsx
View file @ 95d8fd24
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-11 09:33:46
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-16 14:21:00
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 19:34:26
* @FilePath: /bkunyun/src/components/mui/MyPopover.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import * as React from "react";
import { useRef, useEffect, useState } from "react";
import Popover, { PopoverProps } from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
......@@ -17,10 +17,15 @@ interface IProps extends Omit<PopoverProps, "open"> {
children: React.ReactNode;
/** 显示内容 */
content: React.ReactNode;
/** 是否打开 */
open?: boolean;
/** open 修改 */
changeOpen: (val: boolean) => void;
}
const MyPopover = (props: IProps) => {
const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
const [anchorEl, setAnchorEl] = useState<any | null>(null);
const ref = useRef(null);
const {
trigger = "click",
......@@ -28,26 +33,37 @@ const MyPopover = (props: IProps) => {
content,
anchorOrigin,
transformOrigin,
open = false,
changeOpen,
} = props;
const handlePopoverOpen = (event: any) => {
changeOpen(true);
setAnchorEl(event.currentTarget);
};
const handelClick = (event: any) => {
changeOpen(true);
setAnchorEl(event?.currentTarget);
};
const handlePopoverClose = () => {
changeOpen(false);
setAnchorEl(null);
};
const open = Boolean(anchorEl);
useEffect(() => {
if (open) {
setAnchorEl(ref.current);
}
}, [open]);
const id = open ? "simple-popover" : undefined;
return (
<div>
<Typography
ref={ref}
aria-owns={id}
onClick={trigger === "click" ? handelClick : undefined}
onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
......
src/components/mui/MyRadio.tsx
View file @ 95d8fd24
......@@ -12,6 +12,7 @@ import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import { ThemeProvider, createTheme } from "@mui/material/styles";
interface IMyRadioProps extends RadioGroupProps {
value: any;
......@@ -44,6 +45,34 @@ export const optionsTransform = (
});
};
const theme = createTheme({
components: {
MuiFormControlLabel: {
styleOverrides: {
label: {
fontSize: "14px",
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
fontSize: "19px",
},
},
},
MuiRadio: {
styleOverrides: {
root: {
"&.Mui-checked span": {
color: "rgba(19, 110, 250, 1)",
},
},
},
},
},
});
export default function MyRadio(props: IMyRadioProps) {
const {
value,
......@@ -55,6 +84,7 @@ export default function MyRadio(props: IMyRadioProps) {
} = props;
return (
<ThemeProvider theme={theme}>
<FormControl fullWidth variant={variant} error={error}>
<RadioGroup
{...props}
......@@ -78,5 +108,6 @@ export default function MyRadio(props: IMyRadioProps) {
</RadioGroup>
{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
</FormControl>
</ThemeProvider>
);
}
src/components/mui/MySelect.tsx
View file @ 95d8fd24
......@@ -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;
......@@ -73,22 +74,46 @@ export default function MySelect(props: IProps) {
height: "36px",
"& .Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
},
"& .MuiSelect-icon": {
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",
},
},
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
paddingRight: "46px",
fontSize: "14px",
lineHeight: "24px",
":hover": {
backgroundColor: "#ECF4FF ",
color: "#1370FF",
backgroundColor: "#F0F2F5 ",
color: "#1E2633",
},
},
},
......@@ -97,10 +122,30 @@ export default function MySelect(props: IProps) {
MuiOutlinedInput: {
styleOverrides: {
root: {
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#1370ff",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
},
},
},
......@@ -109,6 +154,7 @@ export default function MySelect(props: IProps) {
MuiInputLabel: {
styleOverrides: {
root: {
fontSize: "14px",
// 下拉框未选择时的label定位
top: "-9px",
},
......@@ -127,6 +173,22 @@ export default function MySelect(props: IProps) {
},
},
},
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
},
},
},
// MuiFormControl: {
// styleOverrides: {
// root: {
// width: fullWidth ? "100%" : "auto",
// },
// },
// },
},
});
......@@ -161,6 +223,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/components/mui/MySwitch.tsx
View file @ 95d8fd24
......@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/components/mui/MySwitch.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import * as React from "react";
import React, { useMemo } from "react";
import Switch, { SwitchProps } from "@mui/material/Switch";
import { ThemeProvider, createTheme } from "@mui/material/styles";
......@@ -17,7 +17,18 @@ interface IMySwitchProps extends SwitchProps {
disabled?: boolean;
}
const theme = createTheme({
const MySwitch = (props: IMySwitchProps) => {
const {
value,
defaultChecked,
onChange,
disabled = false,
size,
...other
} = props;
const theme = useMemo(() => {
return createTheme({
components: {
MuiSwitch: {
styleOverrides: {
......@@ -32,7 +43,9 @@ const theme = createTheme({
"&.Mui-checked": {
left: "2px",
"& + .MuiSwitch-track": {
backgroundColor: "#1370ff",
backgroundColor: disabled
? "rgba(166, 211, 255, 1)"
: "rgba(19, 112, 255, 1)",
opacity: 1,
},
},
......@@ -44,16 +57,17 @@ const theme = createTheme({
},
track: {
borderRadius: "11px",
backgroundColor: "#E6E8EB",
backgroundColor: disabled
? "RGBA(240, 242, 245, 1)"
: "RGBA(221, 225, 230, 1)",
opacity: 1,
},
},
},
},
});
});
}, [disabled]);
const MySwitch = (props: IMySwitchProps) => {
const { value, defaultChecked, onChange, disabled = false, size, ...other } = props;
return (
<ThemeProvider theme={theme}>
<Switch
......
src/components/mui/MyTable/components/EnhancedTableHead.tsx
View file @ 95d8fd24
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-01 16:53:15
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-25 12:04:49
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-06 16:30:56
* @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableHead.jsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -54,7 +54,7 @@ const EnhancedTableHead = (props: any) => {
classes={{ head: (k && headTableCell) || classes.headTableCell }}
>
{
headCell.sort && <TableSortLabel active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
headCell.sort && <TableSortLabel style={{fontSize: "16px", fontWeight: '400', color: 'rgba(0, 0, 0, 0.87)', fontFamily: 'Roboto,Helvetica,Tahoma,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}} active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
{headCell.label}
</TableSortLabel>
}
......
src/components/mui/MyTable/index.tsx
View file @ 95d8fd24
This diff is collapsed.
src/components/mui/MyTable/interface.ts
View file @ 95d8fd24
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-07-26 10:23:43
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 11:53:00
* @LastEditTime: 2022-09-01 16:00:34
* @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts
* @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -32,7 +32,7 @@ export interface ITableProps {
/** 每行双击事件 */
onDoubleClick?: any,
/** 是否loading */
load?: boolean,
loading?: boolean,
/** table size */
size?: any,
/** 选中的checkbox数据 */
......@@ -71,4 +71,6 @@ export interface ITableProps {
onRef?: any;
/** 手型 */
cursor?: string
/** 没有数据文案 */
noDataText?: string
}
\ No newline at end of file
src/components/mui/MyTooltip.tsx
View file @ 95d8fd24
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-11 11:56:58
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-22 10:51:10
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-08 13:55:20
* @FilePath: /bkunyun/src/components/mui/MyTooltip.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -39,7 +39,7 @@ const MyTooltip = (props: IMyTooltipProps) => {
<Tooltip
// interactive={true}
arrow
title={title}
title={title || ''}
placement={placement}
{...other}
>
......
src/components/mui/Tabs.tsx
View file @ 95d8fd24
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-31 20:25:56
* @LastEditTime: 2022-09-01 19:34:35
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -28,7 +28,7 @@ interface ITabList {
interface IProps {
value?: string;
onChange?: (val: string)=> void;
onChange?: (val: string) => void;
tabList: ITabList[];
defaultValue?: string;
tabPanelSx?: any;
......@@ -88,27 +88,34 @@ const Tabs = (props: IProps) => {
: tabList.filter((e) => !e.hide)[0].value
);
const [hoverValue, setHoverValue] = useState('')
const [hoverValue, setHoverValue] = useState("");
const onTabChange = (val: string) => {
setTabValue(val)
setTabValue(val);
onChange && onChange(val);
};
const getImgSrc = useCallback((item: ITabList)=>{
let result = item.icon
if(value === item.value){
result = item.iconed
const getImgSrc = useCallback(
(item: ITabList) => {
let result = item.icon;
if (value === item.value || tabValue === item.value) {
result = item.iconed;
}
if(hoverValue === item.value){
result = item.iconHover
if (hoverValue === item.value) {
result = item.iconHover;
}
return result
},[hoverValue, value])
return result;
},
[hoverValue, value, tabValue]
);
const labelRender = (item: ITabList, key: number) => {
return (
<div style={{ display: "flex", alignItems: "center" }} onMouseOver={()=>setHoverValue(item.value)} onMouseOut={()=>setHoverValue('')}>
<div
style={{ display: "flex", alignItems: "center" }}
onMouseOver={() => setHoverValue(item.value)}
onMouseOut={() => setHoverValue("")}
>
{item.icon ? (
<img
style={{ width: "16px", marginRight: "8px" }}
......
src/hooks/useMyRequest.ts
View file @ 95d8fd24
......@@ -21,7 +21,7 @@ const useMyRequest = <TData, TParams>(
defaultParams?: TParams[];
onBefore?: (params: TParams[]) => void;
onSuccess?: (data: TData, params: TParams[]) => void;
onError?: (e: Error, params: TParams[]) => void;
onError?: (e: any, params: TParams[]) => void;
onFinally?: (params: TParams[], data?: TData, e?: Error) => void;
loadingDelay?: number;
pollingInterval?: number;
......@@ -51,9 +51,16 @@ const useMyRequest = <TData, TParams>(
const request = useRequest(api, {
...defaultOptions,
onSuccess: () => {},
onError: (data) => {
onSuccess: () => { },
onError: (data: any) => {
Message.error(data.message);
if (data.errorCode === '100003') {
setTimeout(() => {
localStorage.removeItem('token_key');
if (window.location.href && !window.location.href.includes("/login-page"))
window.location.href = '/v2/pages/login-page'
}, 4000);
}
},
...options,
});
......
src/hooks/usePass.ts
View file @ 95d8fd24
......@@ -9,6 +9,13 @@ const roleList: any[] = [
{ OWNER: 4 }
]
export const roleMap = {
VIEWER: '查看者',
USER: '研究员',
MANAGER: '管理员',
OWNER: '所有者',
}
const usePass = () => {
const { permissionStore } = useStores();
const { currentProjectStore } = useStores();
......
src/store/modules/currentProject.ts
View file @ 95d8fd24
......@@ -18,6 +18,7 @@ type projectInfo = {
type productInfo = {
id?: string;
name?: string;
path?: string;
};
/** 用户信息 */
......
src/store/modules/fileList.ts
View file @ 95d8fd24
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 17:00:19
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-16 09:43:42
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 19:34:46
* @FilePath: /bkunyun/src/store/modules/upload.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -25,6 +25,8 @@ class FileList {
/** 文件上传列表 */
fileList: IUploadInfo[] = [];
/** 是否打开传输列表 */
openFileList: boolean = false
// setFileList (val: IUploadInfo[]) {
// this.fileList = val
......@@ -39,6 +41,10 @@ class FileList {
this.newFileList = val
}
/** 打开关闭文件列表 */
setOpenFileList = (val: boolean) => {
this.openFileList = val
}
/** 设置文件上传信息 */
setUploadInfo = (id: string, val: IUploadInfo) => {
......
src/views/ConsoleLayout/components/FileItem/index.module.css
View file @ 95d8fd24
......@@ -17,6 +17,13 @@
text-overflow: ellipsis;
font-size: 14px;
}
.contentBox {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.speedBox {
display: flex;
justify-content: space-between;
......
src/views/ConsoleLayout/components/FileItem/index.tsx
View file @ 95d8fd24
......@@ -88,17 +88,17 @@ const FileItem = observer((props: IProps) => {
const speed = useMemo(() => {
let val = 0;
const time = Math.floor((itemInfo?.endTime - itemInfo.startTime) / 1000);
const time = Math.floor((itemInfo?.endTime - itemInfo?.startTime) / 1000);
if (time > 0) {
val = Math.floor(itemInfo?.bytesUploaded / time);
}
return val;
}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo.startTime]);
}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo?.startTime]);
return (
<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 @ 95d8fd24
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-10 18:05:21
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-21 11:28:21
* @LastEditors: 吴永生 15770852798@163.com
* @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,11 +46,11 @@ const TranSferList = observer(() => {
size="small"
/>
</Box>
<Box style={{ height: 400, overflowY: "auto" }}>
<div style={{ height: 400, overflow: "overlay", padding: "0 16px" }}>
{uploadInfoStore?.fileList.map((item) => {
return <FileItem fileItemInfo={item} key={item.id} />;
})}
</Box>
</div>
</Box>
);
});
......
src/views/ConsoleLayout/index.module.css
View file @ 95d8fd24
......@@ -13,10 +13,70 @@
}
.logo {
padding: 0px 16px 0px 20px;
padding: 0px 32px 0px 20px;
margin-top: -10px;
}
.menuBox {
line-height: 57px;
height: 57px;
font-size: 14px;
color: rgba(86, 92, 102, 1);
margin-right: 24px;
cursor: pointer;
position: relative;
}
.menuTitle:hover {
color: #1e2633;
}
.menuBox:hover .productList {
display: block;
}
.triangle {
width: 16px;
height: 16px;
position: relative;
top: 4px;
transition: width 1s;
-webkit-transition: width 1s;
}
.menuBox:hover .triangle {
transform: rotateX(180deg);
}
.productList {
position: absolute;
top: 57px;
left: -16px;
padding: 8px 0;
display: none;
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
border-radius: 4px;
z-index: 1002;
}
.productLi {
min-width: 142px;
height: 36px;
padding: 7px 50px 7px 16px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
line-height: 22px;
cursor: pointer;
position: relative;
box-sizing: border-box;
}
.productLi:hover {
color: rgba(19, 112, 255, 1);
}
.productLiActive {
color: rgba(19, 112, 255, 1);
}
.selectActive {
width: 16px;
height: 16px;
position: absolute;
top: 10px;
right: 12px;
}
.uploadIconBox {
width: 32px;
height: 32px;
......@@ -39,16 +99,14 @@
}
.topRightItem {
margin-right: 20px;
margin-right: 24px;
}
.ArrowDropDownIconRoot {
.topRightTriangle {
color: #8a9099;
transition: all 0.2s !important;
transform: rotate(0);
}
.ArrowDropDownIconRootOpen {
.topRightTriangleOpen {
color: #8a9099;
transform: rotate(180deg);
}
......
src/views/ConsoleLayout/index.tsx
View file @ 95d8fd24
import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import cx from "classnames";
import { observer } from "mobx-react-lite";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import Avatar from "@mui/material/Avatar";
import { Box, Menu, MenuItem } from "@mui/material";
import classNames from "classnames";
import uploadIcon from "@/assets/img/uploadIcon.svg";
import triangle from "@/assets/project/triangle.svg";
import selectActive from "@/assets/project/selectActive.svg";
import globalText from "@/utils/globalText_CN";
import useIndex from "./useIndex";
import { useStores } from "@/store/index";
import MyButton from "@/components/mui/MyButton";
import logo from "@/assets/img/logo.svg";
import MyPopover from "@/components/mui/MyPopover";
import TranSferList from "./components/TransferList";
import { getProjectList } from "@/api/project_api";
import useMyRequest from "@/hooks/useMyRequest";
import { toJS } from "mobx";
import {
setFileServerEndPointLocalStorage,
getFiletokenAccordingToId,
......@@ -25,29 +25,19 @@ import {
import style from "./index.module.css";
const ConsoleLayout = observer(() => {
const {
productAnchorEl,
utilityAnchorEl,
productOpen,
utilityOpen,
handleProductClick,
handleUtilityClick,
handleClose,
} = useIndex();
const { utilityAnchorEl, utilityOpen, handleUtilityClick, handleClose } =
useIndex();
const [currentProduct, setCurrentProduct] = useState<{
path: string;
name: string;
}>();
const { currentProjectStore } = useStores();
const { currentProjectStore, fileListStore } = useStores();
const { openFileList, setOpenFileList } = fileListStore;
const productInfo = toJS(currentProjectStore.currentProductInfo);
const { run: runGetProjectList } = useMyRequest(getProjectList, {
onSuccess: (res) => {
let list = res.data;
if (list.length === 0) {
currentProjectStore.setProjectList([]);
currentProjectStore.changeProject({});
navigate(currentProduct?.path as string);
navigate(productInfo?.path as string);
} else {
currentProjectStore.setProjectList(list);
currentProjectStore.changeProject(list[0]);
......@@ -56,15 +46,18 @@ const ConsoleLayout = observer(() => {
list[0].filetoken = res;
currentProjectStore.changeProject(list[0]);
});
navigate(currentProduct?.path as string);
navigate(productInfo?.path as string);
}
},
});
// 切换产品
const getProduct = (item: any) => {
currentProjectStore.changeProductInfo({ id: item.id, name: item.name });
setCurrentProduct(item);
currentProjectStore.changeProductInfo({
id: item.id,
name: item.name,
path: item.path,
});
runGetProjectList({
product: item.id,
});
......@@ -74,6 +67,15 @@ const ConsoleLayout = observer(() => {
const location = useLocation();
const { permissionStore, menuStore } = useStores();
// 不在产品页面下的时候清空当前产品
useEffect(() => {
if (location.pathname.slice(0, 8) !== "/product") {
currentProjectStore.setProjectList([]);
currentProjectStore.changeProject({});
currentProjectStore.changeProductInfo({});
}
}, [location, currentProjectStore]);
useEffect(() => {
permissionStore.setSidebarRouters(location.pathname);
}, [location, permissionStore]);
......@@ -83,62 +85,48 @@ const ConsoleLayout = observer(() => {
<Box className={style.topApp}>
<Box className={style.topLeftBox}>
<img src={logo} alt="" className={style.logo} />
<MyButton
text={globalText.console}
variant={"text"}
style={{ color: "#565C66" }}
onClick={() => navigate("/home")}
/>
<div className={style.menuBox} onClick={() => navigate("/home")}>
<div className={style.menuTitle}>{globalText.console}</div>
</div>
<Box sx={{ display: "flex", alignItems: "center" }}>
<MyButton
text={globalText.product}
variant={"text"}
style={{ color: "#565C66", paddingLeft: '8px' }}
onClick={handleProductClick}
dropValue={productOpen}
drop={true}
/>
{/* <ArrowDropDownIcon classes={{
root: cx({
[style.ArrowDropDownIconRoot]: true,
[style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
})
}} /> */}
<Menu
id="product-menu"
anchorEl={productAnchorEl}
open={productOpen}
onClose={handleClose}
classes={{
paper: style.menuPaper,
}}
MenuListProps={{
"aria-labelledby": "product-button",
}}
>
<div className={style.menuBox}>
<div className={style.menuTitle}>
<span>{globalText.product}</span>
<img className={style.triangle} src={triangle} alt="" />
</div>
<div className={style.productList}>
{menuStore.productList.map((item) => {
return (
<MenuItem
<div
key={item.path}
classes={{
root: style.menuItemRoot,
}}
className={classNames({
[style.productLi]: true,
[style.productLiActive]: productInfo.path === item.path,
})}
onClick={() => {
getProduct(item);
handleClose();
}}
>
{item.name}
</MenuItem>
{productInfo.path === item.path && (
<img
className={style.selectActive}
src={selectActive}
alt=""
/>
)}
</div>
);
})}
</Menu>
</Box>
</div>
</div>
</Box>
<Box className={style.topRightBox}>
<MyPopover
open={openFileList}
changeOpen={(val) => setOpenFileList(val)}
content={<TranSferList />}
transformOrigin={{
vertical: "top",
......@@ -152,7 +140,6 @@ const ConsoleLayout = observer(() => {
style={{ verticalAlign: "middle" }}
/>
</div>
</MyPopover>
<Box className={style.topRightItem}>
<Box
......@@ -170,13 +157,13 @@ const ConsoleLayout = observer(() => {
>
H
</Avatar>
<ArrowDropDownIcon
classes={{
root: cx({
[style.ArrowDropDownIconRoot]: true,
[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
}),
}}
<img
className={classNames({
[style.topRightTriangle]: true,
[style.topRightTriangleOpen]: Boolean(utilityOpen),
})}
src={triangle}
alt=""
/>
</Box>
......
src/views/CustomOperator/components/OperatorList/index.module.css
View file @ 95d8fd24
......@@ -32,7 +32,7 @@
}
.list {
height: calc(100% - 55px);
overflow-y: auto;
overflow-y: overlay;
padding: 15px 20px;
box-sizing: border-box;
}
......
src/views/CustomOperator/components/SaveOperator/index.tsx
View file @ 95d8fd24
......@@ -202,6 +202,7 @@ const SaveOperator = (props: IProps) => {
<span
style={{
position: "absolute",
fontSize: "14px",
bottom: "7px",
right: "12px",
color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",
......
src/views/CustomOperator/index.tsx
View file @ 95d8fd24
......@@ -27,18 +27,14 @@ const CustomOperator = observer((props: IProps) => {
/** 设置选中唯一标识符 */
const handleNodeClick = useCallback((val: string) => {
// setSelectTaskId(val);
// console.log(val);
}, []);
// 判断 每个流算子必须至少有一条连接线。
const checkHasOneLine = (sourceArr: string[], targetArr: string[]) => {
console.log("checkHasOneLine");
const all = _.uniq([...sourceArr, ...targetArr]);
if (all.length === operatorList.length) {
console.log("checkHasOneLine1");
return true;
} else {
console.log("checkHasOneLine2");
return false;
}
// _.uniq([2, 1, 2]);
......@@ -46,7 +42,6 @@ const CustomOperator = observer((props: IProps) => {
// 判断 每个起始算子（可以有多个起始点）的输入必须为文件的路径输入或数据集的路径输入。
const checkIn = (targetArr: string[]) => {
console.log("checkIn");
const uniqTargetArr = _.uniq(targetArr);
if (uniqTargetArr.length === operatorList.length) {
// 流节点连成一个圈了
......@@ -82,7 +77,6 @@ const CustomOperator = observer((props: IProps) => {
// 判断 起码有一个结尾算子（可以有多个结尾点）的输出必须为文件保存或数据集保存。
const checkOut = (sourceArr: string[]) => {
console.log("checkOut");
const uniqSourceArr = _.uniq(sourceArr);
if (uniqSourceArr.length === operatorList.length) {
// 流节点连成一个圈了
......@@ -134,22 +128,18 @@ const CustomOperator = observer((props: IProps) => {
edge.target && targetArr.push(edge.target);
});
});
console.log("operatorList", operatorList);
console.log("sourceArr", sourceArr);
console.log("targetArr", targetArr);
if (!checkHasOneLine([...sourceArr], [...targetArr])) {
console.log("checkHasOneLine");
Message.error("内容校验未通过，请检查！");
Message.error("部分算子没有流程线，请检查流程！");
return;
}
if (!checkIn([...targetArr])) {
console.log("checkIn");
Message.error("内容校验未通过，请检查！");
Message.error("每个流程第一步需读取文件/数据集，请检查流程！");
return;
}
if (!checkOut([...sourceArr])) {
console.log("checkOut");
Message.error("内容校验未通过，请检查！");
Message.error(
"每个流程最后一步必须将数据写入为文件/数据集，请检查流程！"
);
return;
}
setSaveFormDialog(true);
......
src/views/Home/index.module.css 0 → 100644
View file @ 95d8fd24
.parentBox {
height: calc(100vh - 57px);
position: relative;
}
.centerBox {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.centerImg{
width: 186px;
height: 114px;
}
.centerText {
font-size: 14px;
color: #565C66;
line-height: 22px;
margin-top: 20px;
text-align: center;
}
.bottomText {
font-size: 14px;
color: #8A9099;
line-height: 22px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
\ No newline at end of file
src/views/Home/index.tsx
View file @ 95d8fd24
import React from "react";
import style from "./index.module.css";
import building from "@/assets/img/building.png";
const Home = () => {
return <div>Home</div>;
return <div className={style.parentBox}>
<div className={style.centerBox}>
<img src={building} className={style.centerImg} />
<div className={style.centerText}>平台正在努力建设中…</div>
</div>
<div className={style.bottomText}>平台当前为beta版本，非最终品质</div>
</div>
};
export default Home;
src/views/MenuLayout/index.module.css
View file @ 95d8fd24
......@@ -13,7 +13,7 @@
.content {
flex: 1;
height: calc(100vh - 57px);
overflow: scroll;
overflow: overlay;
}
.listItem {
padding: 8px 25px;
......@@ -27,6 +27,7 @@
}
.listItem:hover {
background-color: #eef1f5;
border-left: 3px solid #eef1f5;
}
.routerIcon {
vertical-align: middle;
......
src/views/MenuLayout/index.tsx
View file @ 95d8fd24
......@@ -2,14 +2,14 @@
* @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
*/
import { Box, List } from "@mui/material";
import CurrentProject from "../Project/components/CurrentProject";
import React from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import style from "./index.module.css";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store/index";
......@@ -23,27 +23,28 @@ const MenuLayout = observer(() => {
const navigate = useNavigate();
const productInfo = toJS(currentProjectStore.currentProductInfo);
const location = useLocation();
// 未选择产品时 直接跳转home页面
if (!productInfo.name) {
// 在产品页面下且未选择产品时 直接跳转home页面
if (!productInfo.name && location.pathname.slice(0, 8) === "/product") {
navigate("/home");
}
const routerIcon = (id: string, isSelect: boolean) => {
try {
const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
return result || ''
const result = require(`../../assets/project/${id}${
isSelect ? "_BLUE" : ""
}.svg`);
return result || "";
} catch (error) {
console.log(error)
}
console.log(error);
}
};
return (
<Box className={style.container}>
<Box className={style.aside}>
{
pathname.indexOf('userCenter') < 0 && <CurrentProject />
}
{pathname.indexOf("userCenter") < 0 && <CurrentProject />}
<List
sx={{
paddingTop: 0,
......@@ -59,10 +60,26 @@ const MenuLayout = observer(() => {
[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>
<img
className={style.routerIcon}
src={
routerIcon(
item.id || "",
`/v3${item.path}` === pathname
) || undefined
}
alt=""
/>
<span style={{ verticalAlign: "middle", fontWeight: "500" }}>
{item.name}
</span>
</li>
);
}
......
src/views/Project/ProjectData/DeleteDialog/index.tsx
View file @ 95d8fd24
......@@ -89,6 +89,7 @@ const DeleteDialog = (props: IDeleteFileProps) => {
open={deleteDialogOpen}
onClose={() => setDeleteDialogOpen(false)}
onConfirm={handleSubmit}
okColor="error"
>
{currentOperateFile
? "确认删除该数据吗？"
......
src/views/Project/ProjectData/MoveFile/index.module.css
View file @ 95d8fd24
.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;
......@@ -21,11 +20,11 @@
justify-content: flex-start;
align-items: center;
}
.treeLabelText{
.treeLabelText {
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 320px;
}
......
src/views/Project/ProjectData/SeeDataset/index.module.css
View file @ 95d8fd24
......@@ -42,7 +42,7 @@
}
.table {
flex: 1;
overflow-y: auto;
overflow-y: overlay;
display: flex;
flex-direction: column;
}
......@@ -101,7 +101,7 @@
}
.datasetLiDataList {
flex: 1;
overflow: auto;
overflow: overlay;
}
.noDataList {
flex: 1;
......
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 95d8fd24
......@@ -158,6 +158,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
searchDataType,
sort,
keyword,
firstGetList,
// Message,
]
);
......@@ -205,7 +206,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
},
]}
RadiosBoxStyle={{ width: "132px" }}
></RadioGroupOfButtonStyle>
/>
)}
<MyMultipleMenu
value={showData}
......@@ -221,11 +222,12 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
<div className={style.screensRight}>
<MySelect
options={dataTypes}
title="选择属性"
title={dataTypes.length === 0 ? "暂无属性" : "选择属性"}
isTitle={true}
value={searchDataType}
onChange={handleSearchDataTypeChange}
fullWidth={false}
disabled={dataTypes.length === 0}
sx={{
width: "160px",
marginRight: "16px",
......@@ -269,8 +271,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
sx={{
width: "340px",
marginRight: "16px",
height: "32px",
}}
size="small"
></MyInput>
<MyButton
text="确认"
......
src/views/Project/ProjectData/UpLoaderFile/index.module.css
View file @ 95d8fd24
......@@ -50,10 +50,6 @@
box-sizing: border-box;
position: relative;
}
/* .tableBox {
height: 300px;
overflow: scroll;
} */
.fileIconBox {
display: flex;
justify-content: flex-start;
......
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ 95d8fd24
......@@ -135,6 +135,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
};
}) || [];
toJS(fileListStore?.setNewFileList)(newFileList);
fileListStore?.setOpenFileList(true);
if (newFileList?.length) {
getFileToken(newFileList);
}
......@@ -173,7 +174,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
const renderButtons = (item: any, index: number) => {
return (
<MyButton
text='删除'
text="删除"
style={{ position: "relative", left: "-18px" }}
variant="text"
size="small"
......
src/views/Project/ProjectData/index.module.css
View file @ 95d8fd24
......@@ -32,6 +32,9 @@
color: #1e2633;
line-height: 22px;
font-weight: 600;
display: flex;
justify-content: flex-start;
align-items: center;
}
.projectDataTabsAndBtton {
......@@ -77,8 +80,9 @@
line-height: 22px;
font-size: 14px;
color: #1e2633;
/* display: flex;
align-items: center; */
display: flex;
justify-content: flex-start;
align-items: center;
}
.showPathI {
......
src/views/Project/ProjectData/index.tsx
View file @ 95d8fd24
......@@ -27,6 +27,7 @@ import SeeDataset from "./SeeDataset";
import { getDataFind, getDataFileSearch } from "@/api/project_api";
import MyButton from "@/components/mui/MyButton";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
const ProjectData = observer(() => {
const isPass = usePass();
......@@ -462,7 +463,13 @@ const ProjectData = observer(() => {
>
{index === 0 ? "ProjectData" : item}{" "}
{index === pathArr.length - 1 ? null : (
<i className={style.showPathI}>{">"}</i>
<ChevronRightIcon
sx={{
fontSize: "16px",
color: "rgba(194, 198, 204, 1)",
margin: "0px 4px",
}}
/>
)}
</span>
);
......@@ -494,10 +501,24 @@ const ProjectData = observer(() => {
: ""}
{index === pathArr.length - 1 ||
(index <= pathArr.length - 4 && index > 0) ? null : (
<i className={style.showPathI}>{">"}</i>
<ChevronRightIcon
sx={{
fontSize: "16px",
color: "rgba(194, 198, 204, 1)",
margin: "0px 4px",
}}
/>
)}
{index === 1 && "..."}
{index === 1 && <i className={style.showPathI}>{">"}</i>}
{index === 1 && (
<ChevronRightIcon
sx={{
fontSize: "16px",
color: "rgba(194, 198, 204, 1)",
margin: "0px 4px",
}}
/>
)}
</span>
);
});
......@@ -551,7 +572,7 @@ const ProjectData = observer(() => {
{ value: "dataset", label: "数据集" },
]}
handleRadio={setActiveTab}
></RadioGroupOfButtonStyle>
/>
<IconButton
aria-label="refreshIcon"
size="small"
......@@ -602,10 +623,9 @@ const ProjectData = observer(() => {
{selectIds.length > 0 && (
<div className={style.projectDataStickyBox}>
<MyButton
text={`批量删除（${selectIds.length}）`}
text={`批量删除 (${selectIds.length})`}
color="error"
variant="outlined"
size="small"
style={{ marginRight: "12px" }}
onClick={() => {
setCurrentOperateFile(null);
......@@ -614,10 +634,9 @@ const ProjectData = observer(() => {
disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
/>
<MyButton
text={`批量移动（${selectIds.length}）`}
text={`批量移动 (${selectIds.length})`}
// color="neutral"
variant="contained"
size="small"
style={{ marginRight: "24px" }}
onClick={() => {
setCurrentOperateFile(null);
......
src/views/Project/ProjectJobDetail/LogView/index.module.css
View file @ 95d8fd24
......@@ -3,20 +3,12 @@
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.5);
z-index: 1002;
}
.logViewBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 600px;
background: #282C34;
box-shadow: 2px 4px 20px 0px rgba(0, 15, 45, 0.1200);
border-radius: 8px;
background: #282c34;
}
.close {
......@@ -28,69 +20,112 @@
}
.logViewTop {
/* height: 30px; */
background-color: #1D2126;
border-radius: 8px 8px 0 0;
position: relative;
width: 100vw;
background-color: #1d2126;
display: flex;
font-size: 12px;
color: #8A9099;
overflow: auto;
color: #8a9099;
overflow: hidden;
}
.leftButton {
width: 48px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-right: 1px solid #10141A;
background-color: #1d2126;
}
.rightButton {
width: 48px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-left: 1px solid #10141A;
background-color: #1d2126;
}
.middleFixed {
width: calc(100vw - 98px);
position: relative;
overflow: hidden;
}
.logViewTop::-webkit-scrollbar-track {
background-color: #282C34;
}
.middleDynamic{
display: flex;
position: absolute;
left: 0;
}
.logTitle {
display: flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex-shrink: 0;
align-items: center;
height: 30px;
height: 32px;
line-height: 20px;
padding: 0 24px;
padding: 0 20px;
cursor: pointer;
border-right: 1px solid #10141A;
}
.logName {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.logTitleSelected {
background: #282C34;
color: #FFFFFF;
background: #282c34;
color: #ffffff;
}
.fileIcon{
width: 14px!important;
.fileIcon {
width: 14px !important;
margin-right: 4px;
}
.logViewContent {
position: relative;
box-sizing: border-box;
height: 510px;
padding: 16px 24px 0;
color: #D1D6DE;
white-space:pre-wrap;
height: calc(100vh - 148px);
padding: 24px 32px 0;
color: #d1d6de;
white-space: pre-wrap;
word-break: break-word;
overflow: auto;
overflow: overlay;
font-size: 14px;
line-height: 22px;
}
.logViewContentMask{
height: 16px;
width: 852px;
background-color: #282C34;
.logViewContentMask {
height: 24px;
width: calc(100vw - 64px);
background-color: #282c34;
position: absolute;
top: 30px;
left: 24px;
top: 32px;
left: 32px;
z-index: 1005;
}
.logViewContent::-webkit-scrollbar-track {
background-color: #282C34;
background-color: #282c34;
}
.logViewBottom {
display: flex;
align-items: center;
justify-content: end;
height: 60px;
height: 76px;
padding-right: 24px;
}
\ No newline at end of file
src/views/Project/ProjectJobDetail/LogView/index.tsx
View file @ 95d8fd24
......@@ -7,16 +7,18 @@ import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutl
import CloudEController from "@/api/fileserver/CloudEController";
import { useStores } from "@/store";
import { toJS } from "mobx";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
type LogViewProps = {
isshow: boolean;
handleClose: () => void;
logs: any[];
setShowLogView: any;
};
const LogView = (props: LogViewProps) => {
const { isshow, handleClose, logs } = props;
const { logs, setShowLogView } = props;
const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
......@@ -42,7 +44,7 @@ const LogView = (props: LogViewProps) => {
)?.then((res) => {
setLogText(res.data)
})
}else{
} else {
setLogText("")
}
}, [logPath]);
......@@ -53,7 +55,7 @@ const LogView = (props: LogViewProps) => {
}, [logCurrent]);
// 下载当前日志
const handleDownLoad=()=>{
const handleDownLoad = () => {
const path = logPath.slice(12)
CloudEController.JobFileDownload(
path,
......@@ -62,11 +64,14 @@ const LogView = (props: LogViewProps) => {
);
}
return <div className={style.logView} style={isshow ? {} : { display: "none" }}>
return (
<FullScreenDrawer handleClose={setShowLogView} zIndex={1002}>
<div className={style.logViewBox}>
<CloseIcon onClick={handleClose} className={style.close} />
<div className={style.logViewContentMask}></div>
<div className={style.logViewTop}>
<div className={style.leftButton}><ChevronLeftIcon /></div>
<div className={style.middleFixed}>
<div className={style.middleDynamic}>
{logs.map((item: any, index: number) => {
return <div
key={index}
......@@ -76,10 +81,13 @@ const LogView = (props: LogViewProps) => {
[style.logTitleSelected]: index === logCurrent,
})}>
<InsertDriveFileOutlinedIcon className={style.fileIcon} />
<span>{item.logName}</span>
<span className={style.logName}>{item.logName}</span>
</div>
})}
</div>
</div>
<div className={style.rightButton}><ChevronRightIcon /></div>
</div>
<div className={style.logViewContent}>
{logText}
</div>
......@@ -87,7 +95,8 @@ const LogView = (props: LogViewProps) => {
<MyButton text='下载当前日志' onClick={handleDownLoad} />
</div>
</div>
</div>
</FullScreenDrawer>
)
}
export default LogView
\ No newline at end of file
src/views/Project/ProjectJobDetail/index.module.css
View file @ 95d8fd24
......@@ -6,7 +6,7 @@
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: auto;
overflow-y: overlay;
}
.swHeader {
z-index: 1001;
......@@ -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,9 +25,23 @@
justify-content: flex-start;
align-items: center;
}
.goBackIcon {
cursor: pointer;
}
.goBackIconBox {
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.goBackIconBox:hover {
background-color: rgb(240, 242, 245);
}
.swTemplateTitle {
margin: 0 19px 0 8px;
line-height: 22px;
margin: 0 19px 0 3px;
line-height: 20px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 700;
......@@ -39,9 +53,9 @@
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
border-right: 1px solid #ebedf0;
width: 360px;
overflow-y: scroll;
overflow-y: overlay;
box-sizing: border-box;
padding: 24px;
}
......@@ -74,7 +88,7 @@
color: rgba(19, 112, 255, 1);
font-size: 14px;
}
.outputItemName{
.outputItemName {
max-width: 172px;
white-space: nowrap;
display: block;
......@@ -107,8 +121,9 @@
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
width: 72px;
width: 80px;
margin-right: 44px;
word-wrap: break-word;
}
.taskInfoValue {
color: rgba(30, 38, 51, 1);
......@@ -121,6 +136,7 @@
word-break: break-all;
flex: 1;
justify-content: flex-end;
word-wrap: break-word;
}
.taskInfoValueClick {
cursor: pointer;
......@@ -164,7 +180,7 @@
position: absolute;
top: 33px;
max-height: 230px;
overflow-y: scroll;
overflow-y: overlay;
padding: 8px 0px;
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
......@@ -193,6 +209,7 @@
right: 24px;
bottom: 24px;
padding: 8px;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
}
.fullScreenBox:hover {
opacity: 0.6;
......
src/views/Project/ProjectOverview/TaskCard/index.module.css
View file @ 95d8fd24
......@@ -2,14 +2,14 @@
display: flex;
margin: 16px 16px 0;
height: 156px;
background: #FFFFFF;
box-shadow: 2px 2px 6px 0px rgba(0, 25, 57, 0.0300);
background: #ffffff;
box-shadow: 2px 2px 6px 0px rgba(0, 25, 57, 0.03);
border-radius: 4px;
}
.dividingLine {
height: 156px;
border-left: 1px solid #EBEDF0;
border-left: 1px solid #ebedf0;
position: relative;
}
......@@ -20,14 +20,16 @@
width: 26px;
height: 26px;
background-color: #fff;
border-top: 1px solid #EBEDF0;
border-right: 1px solid #EBEDF0;
border-top: 1px solid #ebedf0;
border-right: 1px solid #ebedf0;
transform: rotate(45deg);
}
.cardLeft {
flex: 1;
cursor: pointer;
padding: 16px 24px;
}
.topLine {
......@@ -43,8 +45,8 @@
cursor: pointer;
}
.taskName:hover{
color: #1370FF;
.taskName:hover {
color: #1370ff;
}
.taskStatus {
......@@ -66,13 +68,13 @@
.taskCreator {
font-size: 12px;
line-height: 20px;
color: #1E2633;
color: #1e2633;
margin-top: 4px;
}
.taskProgress {
height: 32px;
margin: 12px 0;
margin: 12px 0 16px;
}
.progressInfo {
......@@ -80,13 +82,13 @@
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
color: #565C66;
color: #565c66;
}
.bottomLine {
display: flex;
font-size: 12px;
color: #565C66;
color: #565c66;
}
.bottomInfo {
......@@ -97,7 +99,8 @@
flex: 1;
display: flex;
position: relative;
overflow: auto;
overflow: overlay;
padding: 16px 24px 16px 42px;
}
.noResult {
......@@ -106,52 +109,66 @@
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: #8A9099;
color: #8a9099;
}
.resultBox {
padding: 16px 24px 16px 42px;
/* padding: 16px 24px 16px 42px; */
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
box-sizing: border-box;
}
.result {
box-sizing: border-box;
font-size: 12px;
color: #1E2633;
align-items: center;
color: #1e2633;
cursor: pointer;
height: 30px;
height: 31px;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 8px;
}
@media screen and (max-width:1220px) {
@media screen and (max-width: 1220px) {
.result {
width: 100%;
}
}
@media screen and (min-width:1220px) and (max-width:1600px) {
@media screen and (min-width: 1220px) and (max-width: 1600px) {
.result {
width: 50%;
}
}
@media screen and (min-width:1600px) {
@media screen and (min-width: 1600px) {
.result {
width: 33.33%;
}
}
.result:hover {
color: #1370FF;
color: #1370ff;
}
.outputLeftImg {
vertical-align: middle;
vertical-align: top;
margin-right: 8px;
}
.outputTitle {
display: inline-block;
height: 22px;
line-height: 22px;
width: calc(100% - 30px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 95d8fd24
......@@ -3,12 +3,12 @@ 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";
......@@ -25,8 +25,20 @@ type TaskCardProps = {
};
const TaskCard = (props: TaskCardProps) => {
const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
const {
id,
name,
creator,
state,
completeNum,
totalNum,
costTime,
jobCost,
outputs,
} = props;
const navigate = useNavigate();
const [displayTitleBlue, setDisplayTitleBlue] = useState<boolean>(false);
const randerOutputs = useMemo(() => {
if (outputs) {
let result = Object.keys(outputs);
......@@ -45,10 +57,10 @@ const TaskCard = (props: TaskCardProps) => {
} else {
return [];
}
}, [outputs])
}, [outputs]);
// 结果文件跳转
const goToProjectData = (info: any) => {
let { path = '' , type = '' } = info
let { path = "", type = "" } = info;
const lastIndex = path.lastIndexOf("/");
// /projectData
// dataType
......@@ -57,50 +69,54 @@ const TaskCard = (props: TaskCardProps) => {
}
path = path.slice(12);
navigate(`/product/cadd/projectData`, {
state: { pathName: path || '/', dataType: type },
state: { pathName: path || "/", dataType: type },
});
}
};
// 跳转详情页
const gotoDetail = (id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id, from: 'projectOverview' },
state: { taskId: id, from: "projectOverview" },
});
}
};
// 渲染状态图标
const renderStatusIcon = (data: string) => {
switch (data) {
case "SUBMITTED":
return jobRun;
case "RUNNING":
return jobRun
return jobRun;
case "ABORTED":
return jobCadence
return jobCadence;
case "FAILED":
return jobFail
return jobFail;
case "SUCCEEDED":
return jobSue
return jobSue;
default:
return jobCadence
}
return jobCadence;
}
};
// 渲染状态
const renderStatusText = (data: string) => {
switch (data) {
case "SUBMITTED":
return "正在启动";
case "RUNNING":
return '正在运行'
return "正在运行";
case "ABORTED":
return '运行终止'
return "运行终止";
case "FAILED":
return '运行失败'
return "运行失败";
case "SUCCEEDED":
return '运行成功'
return "运行成功";
default:
return '未知'
}
return "未知";
}
};
// 渲染字体颜色
const renderTextColor = (data: string) => {
switch (data) {
case "SUBMITTED":
return "#1370FF";
case "RUNNING":
return "#1370FF";
case "ABORTED":
......@@ -116,6 +132,8 @@ const TaskCard = (props: TaskCardProps) => {
// 渲染状态框背景颜色
const renderBackgroundColor = (data: string) => {
switch (data) {
case "SUBMITTED":
return "#EBF3FF";
case "RUNNING":
return "#EBF3FF";
case "ABORTED":
......@@ -131,6 +149,8 @@ const TaskCard = (props: TaskCardProps) => {
//渲染进度条颜色
const renderProgressColor = useCallback((data: any) => {
switch (data) {
case "SUBMITTED":
return "info";
case "RUNNING":
return "info";
case "ABORTED":
......@@ -143,12 +163,33 @@ const TaskCard = (props: TaskCardProps) => {
return "disable";
}
}, []);
return <div className={style.cardBox}>
<div className={style.cardLeft}>
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} onClick={() => gotoDetail(id)}>{name}</div>
<div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
<img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
<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>
......@@ -156,9 +197,14 @@ const TaskCard = (props: TaskCardProps) => {
<div className={style.taskProgress}>
<div className={style.progressInfo}>
<div>Progress</div>
<div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
<div style={{ color: renderTextColor(state) }}>
{completeNum + "/" + totalNum}
</div>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
</div>
<MyProgress
color={renderProgressColor(state)}
value={(completeNum / totalNum) * 100}
/>
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
......@@ -171,23 +217,31 @@ const TaskCard = (props: TaskCardProps) => {
<div className={style.arrow}></div>
</div>
<div className={style.cardRight}>
{randerOutputs.length === 0 ? <div className={style.noResult}>暂无结果文件</div> :
{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)}>
return (
<div
key={index}
className={style.result}
onClick={() => goToProjectData(item)}
>
<img
className={style.outputLeftImg}
src={
item?.type === "file" ? fileIcon : dataSetIcon
}
src={item?.type === "file" ? fileIcon : dataSetIcon}
alt=""
/>
{item?.name}</div>
<span className={style.outputTitle}>{item?.name}</span>
</div>
);
})}
</div>
}
)}
</div>
</div>
}
);
};
export default TaskCard
\ No newline at end of file
export default TaskCard;
src/views/Project/ProjectOverview/index.module.css
View file @ 95d8fd24
.box {
height: calc(100vh - 57px);
overflow: overlay;
}
.topFixed {
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
}
.topFixedShadow {
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
}
.basicInformation {
display: flex;
justify-content: space-between;
margin: 24px 24px 0 24px;
padding-bottom: 20px;
border-bottom: 1px solid #EDEFF2;
margin: 0 24px;
padding: 24px 0 20px;
border-bottom: 1px solid #edeff2;
}
.basicInformationRight {
......@@ -31,30 +47,30 @@
}
.informationcolor {
color: #8A9099;
color: #8a9099;
}
.otherInformationBox {
margin-right: 24px;
color: #565C66;
color: #565c66;
}
.otherInformationBoxRight{
.otherInformationBoxRight {
line-height: 22px;
margin-bottom: 4px;
color: #565C66;
color: #565c66;
}
.numberDisplay {
font-size: 20px;
font-weight: 600;
color: #1E2633;
color: #1e2633;
margin-right: 8px;
}
.verticalLine {
height: 32px;
border-right: 1px solid #EBEDF0;
border-right: 1px solid #ebedf0;
margin-left: 28px;
margin-right: 28px;
}
......@@ -63,6 +79,7 @@
display: flex;
justify-content: space-between;
margin: 24px 24px 0 24px;
padding-bottom: 20px;
}
.searchLineLeft {
......@@ -85,10 +102,10 @@
.taskDisplay {
position: relative;
margin: 20px 24px;
margin: 0 24px 20px;
padding-bottom: 16px;
overflow: hidden;
background: #F7F8FA;
background: #f7f8fa;
border-radius: 8px;
min-height: calc(100vh - 291px);
}
......
src/views/Project/ProjectOverview/index.tsx
View file @ 95d8fd24
import React, { useState, useCallback, useEffect, useMemo } from "react";
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";
import { getOverviewInfo, getTaskOverview } from "@/api/project_api";
import { useStores } from "@/store/index";
import NoProject from "@/components/BusinessComponents/NoProject";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import Loading from "@/views/Loading";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import TaskCard from './TaskCard'
import TaskCard from "./TaskCard";
import projectImg from "@/assets/project/projectIconSmall.svg";
import noFile from "@/assets/project/noFile.svg";
import style from "./index.module.css";
const ProjectOverview = observer(() => {
const { currentProjectStore } = useStores();
// 概览基本信息
const [overviewInfo, setOverviewInfo] = useState<any>({});
// 任务概览列表
const [taskList, setTaskList] = useState([])
const [jobName, setJobName] = useState('')
const [page, setPage] = useState(0)
const [size, setSize] = useState(999)
const [taskList, setTaskList] = useState([]);
const [jobName, setJobName] = useState("");
const [page, setPage] = useState(0);
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) => {
......@@ -64,29 +71,34 @@ const ProjectOverview = observer(() => {
size: size,
});
}
}, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
}, [
currentProjectStore.currentProjectInfo.id,
getTaskOverviewList,
day,
jobName,
]);
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
setJobName(e.target.value);
}
}
};
const handleKeyWordChangeBlur=(e:any)=>{
const handleKeyWordChangeBlur = (e: any) => {
setJobName(e.target.value);
}
};
const storageUnitFromB = (b: number) => {
if (b <= 0) {
return { data: '0.00', unit: 'KB' };
return { data: "0.00", unit: "KB" };
} else if (b < 1024 * 1024) {
return { data: (b / 1024).toFixed(2), unit: 'KB' };
return { data: (b / 1024).toFixed(2), unit: "KB" };
} else if (b < 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024)).toFixed(2), unit: 'MB' };
return { data: (b / (1024 * 1024)).toFixed(2), unit: "MB" };
} else if (b < 1024 * 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: 'G' };
return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: "G" };
} else {
return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: 'T' };
return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: "T" };
}
};
......@@ -99,37 +111,87 @@ const ProjectOverview = observer(() => {
);
} else {
return (
<>
<div className={style.box} onScroll={onscroll}>
<div
className={classNames({
[style.topFixed]: true,
[style.topFixedShadow]: !isTop,
})}
>
<div className={style.basicInformation}>
<div>
<div className={style.titleBox}>
<img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} />
<img
src={projectImg}
alt="项目logo"
style={{ width: 30, height: 30 }}
/>
<span className={style.projectName}>
{currentProjectStore.currentProjectInfo.name}
</span>
</div>
<div className={style.otherInformation}>
<div className={style.otherInformationBox}><span>角色：</span><span className={style.informationcolor}>{overviewInfo.projectRoleExhibit}</span></div>
<div className={style.otherInformationBox}><span>计算区：</span><span className={style.informationcolor}>{overviewInfo.zoneIdExhibit}</span></div>
<div className={style.otherInformationBox}><span>创建日期：</span><span className={style.informationcolor}>{moment(overviewInfo.createdAt).format('yyyy-MM-DD')}</span></div>
<div className={style.otherInformationBox}>
<span>角色：</span>
<span className={style.informationcolor}>
{overviewInfo.projectRoleExhibit}
</span>
</div>
<div className={style.otherInformationBox}>
<span>计算区：</span>
<span className={style.informationcolor}>
{overviewInfo.zoneIdExhibit}
</span>
</div>
<div className={style.otherInformationBox}>
<span>创建日期：</span>
<span className={style.informationcolor}>
{moment(overviewInfo.createdAt).format("yyyy-MM-DD")}
</span>
</div>
</div>
</div>
<div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBoxRight}>项目总消费</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
<div className={style.otherInformationBoxRight}>
项目总消费
</div>
<div>
<span className={style.numberDisplay}>
{overviewInfo.projectCost?.toFixed(2)}
</span>
元
</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBoxRight}>项目剩余预算</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
<div className={style.otherInformationBoxRight}>
项目剩余预算
</div>
<div>
<span className={style.numberDisplay}>
{overviewInfo.projectRemainingBudget?.toFixed(2)}
</span>
元
</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
<div
className={style.otherInformationBoxRight}
style={{ marginRight: "20px" }}
>
项目存储大小
</div>
<div>
<span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span>
{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''}
<span className={style.numberDisplay}>
{overviewInfo.projectStorage !== undefined
? storageUnitFromB(overviewInfo.projectStorage).data
: ""}
</span>
{overviewInfo.projectStorage !== undefined
? storageUnitFromB(overviewInfo.projectStorage).unit
: ""}
</div>
</div>
</div>
......@@ -145,7 +207,7 @@ const ProjectOverview = observer(() => {
{ value: "30", label: "近30天" },
]}
handleRadio={setDay}
></RadioGroupOfButtonStyle>
/>
</div>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
......@@ -153,6 +215,7 @@ const ProjectOverview = observer(() => {
sx={{ width: 340 }}
/>
</div>
</div>
<div className={style.taskDisplay}>
{/* 任务列表为空展示 */}
{taskList.length === 0 && (
......@@ -162,8 +225,10 @@ const ProjectOverview = observer(() => {
</div>
)}
{/* 任务列表卡片渲染 */}
{taskList.length > 0 && taskList.map((item: any) => {
return <TaskCard
{taskList.length > 0 &&
taskList.map((item: any) => {
return (
<TaskCard
id={item.id}
name={item.name}
creator={item.creator}
......@@ -175,14 +240,14 @@ const ProjectOverview = observer(() => {
outputs={item.outputs}
key={item.id}
/>
);
})}
</div>
</>
</div>
);
}
} else {
return <NoProject />;
}
})
export default ProjectOverview
\ No newline at end of file
});
export default ProjectOverview;
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 95d8fd24
......@@ -21,7 +21,6 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import InformationDisplay from "@/components/CommonComponents/InformationDisplay";
import classnames from "classnames";
import LoadingButton from "@mui/lab/LoadingButton";
import InputAdornment from "@mui/material/InputAdornment";
import { useMessage } from "@/components/MySnackbar";
import Loading from "@/views/Loading";
......@@ -40,6 +39,7 @@ type zoneIdOption = {
const BaseInfo = observer(() => {
const message = useMessage();
const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const [projectInfo, setProjectInfo] = useState<any>({});
const [deleteProjectName, setDeleteProjectName] = useState("");
const [nameCheck, setNameCheck] = useState({
......@@ -260,6 +260,7 @@ const BaseInfo = observer(() => {
message.success("修改成功");
const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList);
projectInfo.filetoken = fileToken;
currentProjectStore.changeProject(projectInfo);
},
}
......@@ -354,6 +355,7 @@ const BaseInfo = observer(() => {
/>
<span
style={{
fontSize: "14px",
position: "absolute",
bottom: "7px",
right: "12px",
......@@ -387,13 +389,11 @@ const BaseInfo = observer(() => {
required
error={budgetCheck.error}
disabled={currentUserName !== projectInfo.tenantUser}
// id="projectBudget"
variant="outlined"
value={projectInfo.projectBudget}
placeholder={projectInfo.projectBudget}
onChange={budgetChange}
onBlur={budgetBlur}
helperText={budgetCheck.help}
// size="small"
style={{ width: "560px" }}
InputProps={{
startAdornment: (
......@@ -419,17 +419,12 @@ const BaseInfo = observer(() => {
/>
</div>
<div className={style.projectInfoListLi}>
<LoadingButton
<MyButton
variant="contained"
className={style.updateButton}
onClick={handleClickUpdate}
loading={updateLoading}
sx={{
height: "32px",
}}
>
保存修改
</LoadingButton>
text="保存修改"
/>
</div>
<div className={style.projectInfoListLi}>
<div
......@@ -453,7 +448,7 @@ const BaseInfo = observer(() => {
onConfirm={handleSubmitDelete}
onClose={() => setDialogOpen(false)}
title="删除项目"
okSx={{ background: "#FF4E4E", color: "#fff" }}
okColor="error"
>
<div className={style.deleteBox}>
<div className={style.deleteText1}>
......
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ 95d8fd24
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-31 18:27:26
* @LastEditTime: 2022-09-01 16:14:10
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -13,12 +13,17 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { Box, OutlinedInput } from "@mui/material";
import Dialog from "@/components/mui/MyDialog";
import { IResponse, useHttp } from "@/api/http";
import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar";
import MySelect, { IOption } from "@/components/mui/MySelect";
import MyBorderlessSelect, { IOption } from "@/components/mui/MyBorderlessSelect";
import MyTable from "@/components/mui/MyTable";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import {
addProjectUser,
fetchProjectPower,
fetchProjectUsersList,
} from "@/api/project_api";
interface IProps {
setAddMemberDialog: (val: boolean) => void;
......@@ -29,7 +34,6 @@ interface IProps {
const AddMember = observer((props: IProps) => {
const { addMemberDialog, setAddMemberDialog, getTableList } = props;
const http = useHttp();
const { currentProjectStore } = useStores();
const [tableData, setTableData] = useState([]);
......@@ -63,8 +67,7 @@ const AddMember = observer((props: IProps) => {
(every) => every.value === item
);
return (
<MySelect
input={<OutlinedInput />}
<MyBorderlessSelect
value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
onChange={(val) => changePermission(val, index)}
options={selectOptions}
......@@ -76,14 +79,6 @@ const AddMember = observer((props: IProps) => {
];
}, [changePermission, selectOptions]);
useEffect(() => {
if (addMemberDialog) {
http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
setSelectOptions(res.data);
});
}
}, [addMemberDialog, http]);
/** 过滤表格数据 */
useEffect(() => {
if (!!projectMember) {
......@@ -97,18 +92,48 @@ const AddMember = observer((props: IProps) => {
}
}, [projectMember, tableData]);
// 获取表格数据接口
const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
onSuccess: (res: any) => {
setTableData(res?.data);
},
});
// 获取项目权限
const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
onSuccess: (res: any) => {
setSelectOptions(res.data);
},
});
// 添加项目成员
const { run: saveProjectUser } = useMyRequest(addProjectUser, {
onSuccess: (res: any) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("新增成功！");
getTableList();
setAddMemberDialog(false);
}
},
});
useEffect(() => {
if (addMemberDialog) {
getProjectPower();
}
}, [addMemberDialog, getProjectPower]);
/** 获取表格数据 */
useEffect(() => {
if (!addMemberDialog) return;
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http
.get<IResponse<any>>("/cpp/project/listusers", {
params: { id: projectInfo?.id || "" },
})
.then((res) => {
setTableData(res?.data);
});
}, [currentProjectStore?.currentProjectInfo, http, addMemberDialog]);
getProjectUsersList({ id: projectInfo?.id || "" });
}, [
currentProjectStore?.currentProjectInfo,
addMemberDialog,
getProjectUsersList,
]);
const onClose = (event: any = {}, reason: any = "other") => {
// 点击弹窗外不关闭弹窗
......@@ -124,19 +149,7 @@ const AddMember = observer((props: IProps) => {
return checkData.includes(item?.username);
});
if (params.length) {
http
.put<IResponse<any>>(
`/cpp/project/updatemember?id=${projectInfo?.id || ""}`,
params
)
.then((res) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("新增成功！");
getTableList();
setAddMemberDialog(false);
}
});
saveProjectUser(projectInfo?.id || "", params);
} else {
Message.info("请先选择项目成员！");
}
......@@ -160,9 +173,12 @@ const AddMember = observer((props: IProps) => {
placeholder="搜索项目成员"
sx={{ mb: 2 }}
/>
<div style={{ overflowY: "scroll", maxHeight: 400 }}>
<div style={{ overflow: "overlay", maxHeight: 400 }}>
<MyTable
tableContainerStyle={{height: 346}}
noDataText={
projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
}
tableContainerStyle={{ height: 346 }}
checkboxData={(val: string[]) => setCheckData(val)}
param="username"
disabledParam={"enabled"}
......
src/views/Project/ProjectSetting/index.tsx
View file @ 95d8fd24
......@@ -39,7 +39,9 @@ const ProjectSetting = observer(() => {
if (currentProjectStore.currentProjectInfo.name) {
return (
<div style={{ padding: "28px 24px 24px" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<div
style={{ display: "flex", alignItems: "center", marginBottom: "3px" }}
>
<span
style={{
fontSize: "18px",
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css
View file @ 95d8fd24
......@@ -2,7 +2,7 @@
position: relative;
}
.templateDescBox {
margin-bottom: 40px;
margin-bottom: 24px;
}
.templateDescTitle {
font-size: 16px;
......@@ -81,11 +81,10 @@
}
.taskConfigBox {
padding: 16px 24px 4px;
}
.flowTitle {
line-height: 16px;
margin: 3px 0 27px;
margin: 3px 0 25px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
font-weight: 600;
......@@ -118,3 +117,13 @@
color: rgba(138, 144, 153, 1);
margin-left: 16px;
}
.bacthConfigBox {
padding: 16px 24px 4px;
}
.flowConfigBox {
border-bottom: 1px solid rgba(235, 237, 240, 1);
padding: 24px 24px 12px;
}
.flowConfigBox:nth-last-child(1) {
border-bottom: none;
}
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 95d8fd24
......@@ -189,10 +189,7 @@ const ConfigForm = (props: ConfigFormProps) => {
setParameter(e.target.value, taskId, parameterName);
};
const randerParameters = (
parameters: Array<IParameter>,
taskId: string,
) => {
const randerParameters = (parameters: Array<IParameter>, taskId: string) => {
return parameters
.filter((parameter) => parameter.hidden === false)
.map((parameter, parameterIndex) => {
......@@ -213,7 +210,7 @@ const ConfigForm = (props: ConfigFormProps) => {
</span>
</div>
<MyTooltip
title={parameter.description || parameter.name}
title={parameter.description}
placement="right"
>
<div className={styles.parameterContent}>
......@@ -495,9 +492,15 @@ const ConfigForm = (props: ConfigFormProps) => {
/>
</div>
<div className={styles.taskConfigBox}>
{task.parameters.filter(
(parameter) => !parameter?.thrown && !parameter.hidden
).length !== 0 && (
<div className={styles.bacthConfigBox}>
{randerParameters(
task.parameters.filter((parameter) => !parameter?.thrown),
task.id,
task.id
)}
</div>
)}
{task.flows.map((flow) => {
if (
......@@ -508,7 +511,11 @@ const ConfigForm = (props: ConfigFormProps) => {
return null;
}
return (
<div className={styles.flowConfigBox} key={flow.id} id={`point${flow.id}`}>
<div
className={styles.flowConfigBox}
key={flow.id}
id={`point${flow.id}`}
>
<div className={styles.flowTitle}>
{flow.title}
{flow.description && (
......@@ -521,10 +528,7 @@ const ConfigForm = (props: ConfigFormProps) => {
</MyTooltip>
)}
</div>
{randerParameters(
flow.parameters,
flow.id,
)}
{randerParameters(flow.parameters, flow.id)}
</div>
);
})}
......
src/views/Project/ProjectSubmitWork/index.module.css
View file @ 95d8fd24
......@@ -6,7 +6,7 @@
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: auto;
overflow-y: overlay;
}
.swHeader {
z-index: 1001;
......@@ -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,9 +25,23 @@
justify-content: flex-start;
align-items: center;
}
.goBackIcon {
cursor: pointer;
}
.goBackIconBox {
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.goBackIconBox:hover {
background-color: rgb(240, 242, 245);
}
.swTemplateTitle {
margin: 0 19px 0 8px;
line-height: 22px;
margin: 0 19px 0 3px;
line-height: 20px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 700;
......@@ -51,11 +65,11 @@
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
border-right: 1px solid rgba(235, 237, 240, 1);
width: 608px;
overflow-y: scroll;
overflow-y: overlay;
box-sizing: border-box;
padding: 36px;
padding: 32px 32px 16px;
}
.swFlowBox {
flex: 1;
......@@ -70,6 +84,7 @@
right: 24px;
bottom: 24px;
padding: 8px;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
}
.fullScreenBox:hover {
opacity: 0.6;
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 95d8fd24
......@@ -2,14 +2,12 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-17 10:58:02
* @LastEditTime: 2022-09-01 14:39:36
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { toJS } from "mobx";
import React, { useEffect, useState } from "react";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import _ from "lodash";
import { useLocation, useNavigate } from "react-router-dom";
import moment from "moment";
......@@ -28,6 +26,7 @@ import { useMessage } from "@/components/MySnackbar";
import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import goback from "@/assets/project/goback.svg";
import styles from "./index.module.css";
......@@ -223,6 +222,7 @@ const ProjectSubmitWork = observer(() => {
promotedParameters,
});
} else {
handleCancel();
Message.error("请完善算子信息后提交任务");
}
};
......@@ -230,12 +230,20 @@ const ProjectSubmitWork = observer(() => {
const [popperTitle, setPopperTitle] = useState(
"提交前请先确认参数填写无误，确认提交吗？"
);
const [placement, setPlacement] = useState<
"bottom" | "bottom-start" | "bottom-end"
>("bottom");
const [anchorEl, setAnchorEl] = useState<any>(null);
const handleCancel = () => {
setAnchorEl(null);
};
const handleShowPopper = (e: any, title: string) => {
const handleShowPopper = (
e: any,
title: string,
placementParams: "bottom" | "bottom-start" | "bottom-end"
) => {
setPlacement(placementParams);
setPopperTitle(title);
setAnchorEl(anchorEl ? null : e.currentTarget);
};
......@@ -253,24 +261,20 @@ const ProjectSubmitWork = observer(() => {
{fullScreenShow ? null : (
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<IconButton
color="primary"
<div className={styles.goBackIconBox}>
<img
className={styles.goBackIcon}
src={goback}
alt=""
onClick={(e: any) =>
handleShowPopper(e, "返回将放弃当前页面所有操作，确认返回吗？")
handleShowPopper(
e,
"返回将放弃当前页面所有操作，确认返回吗？",
"bottom-end"
)
}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "14px",
height: "14px",
}}
/>
</IconButton>
</div>
<div className={styles.swTemplateTitle}>
{templateConfigInfo?.title}
</div>
......@@ -293,17 +297,16 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.swHeaderGoback}></div>
</div>
<div className={styles.swHeaderRight}>
{/* <MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={handleSubmitForm}
> */}
<MyButton
text="提交任务"
onClick={(e: any) =>
handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
handleShowPopper(
e,
"提交前请先确认参数填写无误，确认提交吗？",
"bottom-start"
)
}
></MyButton>
{/* </MyPopconfirm> */}
</div>
</div>
)}
......@@ -341,6 +344,7 @@ const ProjectSubmitWork = observer(() => {
onCancel={handleCancel}
onConfirm={handleConfirm}
loading={loading}
placement={placement}
/>
</div>
);
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ 95d8fd24
......@@ -2,7 +2,7 @@
* @Author: rocosen
* @Date: 2022-06-12 10:05:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-30 18:21:04
* @LastEditTime: 2022-09-01 11:51:16
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -35,7 +35,7 @@ const ProjectWorkbench = observer(() => {
hide: !isPass("PROJECT_WORKBENCH_FLOES"),
icon: Template,
iconed: TemplateSelect,
iconHover: TemplateHover
iconHover: TemplateHover,
},
{
label: "任务列表",
......@@ -50,9 +50,19 @@ const ProjectWorkbench = observer(() => {
}, [isPass]);
return (
<div style={{ padding:'28px 24px 24px' }}>
<div style={{ padding: "28px 24px 24px" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<span style={{ fontSize: "18px", lineHeight: "26px", fontWeight: "600", color: "#1E2633" }}>工作台</span>
<span
style={{
fontSize: "18px",
lineHeight: "26px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "3px",
}}
>
工作台
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs
......
src/views/Project/ProjectWorkbench/workbenchList/index.module.css
View file @ 95d8fd24
/* .headerBox { */
/* margin-bottom: 20px; */
/* margin-bottom: 20px; */
/* } */
.tabHeader {
......@@ -14,22 +14,23 @@
.body {
margin-top: 24px;
border-top: 1px solid #F0F2F5;
border-top: 1px solid #f0f2f5;
overflow: hidden;
overflow-y: auto;
overflow-y: overlay;
height: calc(100vh - 325px);
}
.tabBox {
padding: 16px 0px 16px 24px;
cursor: pointer;
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #F0F2F5;
border-bottom: 1px solid #f0f2f5;
}
.tabBox:hover {
background-color: #F5F6F7;
background-color: #f5f6f7;
}
.tabBoxInfo {
......@@ -41,13 +42,16 @@
display: flex;
}
.tabBoxTitle {
font-size: 14px;
line-height: 22px;
font-weight: 600;
color: #1E2633;
color: #1e2633;
margin-bottom: 8px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-right: 20px;
}
.tabBoxDesc {
......@@ -55,14 +59,14 @@
line-height: 20px;
white-space: nowrap;
font-weight: 400;
color: #8A9099;
color: #8a9099;
}
.tabBoxTime {
font-size: 12px;
line-height: 20px;
font-weight: 400;
color: #565C66;
color: #565c66;
margin-left: 8px;
}
......@@ -85,7 +89,7 @@
font-size: 12px;
line-height: 20px;
font-weight: 400;
color: #1E2633;
color: #1e2633;
margin: 0px 16px 0px 8px;
white-space: nowrap;
}
......@@ -96,6 +100,12 @@
justify-content: center;
}
.jobOperateImgBox:hover {
padding: 8px;
border-radius: 4px;
background-color: #ebedf0;
}
.tabUpdate {
cursor: pointer;
width: 32px;
......@@ -106,6 +116,12 @@
}
.tabUpdate:hover {
background: #F0F2F5;
background: #f0f2f5;
border-radius: 4px;
}
.pagination {
padding: 19px 0 0px;
display: flex;
justify-content: end;
align-items: center;
}
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 95d8fd24
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-22 15:33:02
* @LastEditTime: 2022-09-06 10:17:18
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -12,6 +12,7 @@ import { useNavigate } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput";
import { TablePagination } from "@mui/material";
import MyPagination from "@/components/mui/MyPagination";
import MySelect from "@/components/mui/MySelect";
import SimpleDialog from "./components/simpleDialog";
......@@ -40,6 +41,7 @@ import MyProgress from "@/components/mui/MyProgress";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import moment from "moment";
import MyTooltip from "@/components/mui/MyTooltip";
import styles from "./index.module.css";
......@@ -87,13 +89,13 @@ const ProjectMembers = observer(() => {
const [jobData, setJobData] = useState("");
const [openDialog, setOpenDialog] = useState(false);
const [dialogType, setDialogType] = useState("del");
const [loading, setLoading] = useState(false);
// 获取作业列表
const { run: getWorkflowJobInfo, loading } = useMyRequest(
getWorkflowJobList,
{
const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
onSuccess: (result: any) => {
setLoading(false);
setJobList(result.data.content);
setCount(result.data.totalElements);
setCount(result.data.totalPages - 1);
timer && clearTimeout(timer as number);
timer = null;
timer = setTimeout(() => {
......@@ -106,8 +108,7 @@ const ProjectMembers = observer(() => {
});
}, 60000);
},
}
);
});
useEffect(() => {
return () => {
......@@ -177,11 +178,11 @@ const ProjectMembers = observer(() => {
});
}, [projectId, getWorkflowJobInfo]);
const handleChangePage = (event: any, newPage: any) => {
setPage(newPage);
const handleChangePage = (newPage: any) => {
setPage(newPage - 1);
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: newPage,
page: newPage - 1,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
......@@ -201,6 +202,7 @@ const ProjectMembers = observer(() => {
};
useEffect(() => {
setLoading(true);
setTimeout(() => {
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
......@@ -299,11 +301,18 @@ const ProjectMembers = observer(() => {
}
};
const handleKeyWordChangeBlur = (e: any) => {
setJobName(e.target.value);
};
return (
<Box className={styles.headerBox}>
<Box className={styles.tabHeader}>
<Box sx={{ display: "flex" }}>
<SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
onBlur={handleKeyWordChangeBlur}
sx={{ width: 340 }} />
{/* <Box className={styles.tabHeaderSelect}>
<TextField
select
......@@ -364,6 +373,7 @@ const ProjectMembers = observer(() => {
name: jobName,
state: currency === "ALL" ? "" : currency,
});
setLoading(true);
}}
>
<img alt="" src={onload} />
......@@ -371,8 +381,8 @@ const ProjectMembers = observer(() => {
</Box>
<Box className={styles.body} style={{ position: "relative" }}>
<MyCircularProgress loading={loading} />
{jobList.length === 0 && !loading && (
<MyCircularProgress loading={loading}>
{jobList.length === 0 && (
<Box
sx={{
display: "flex",
......@@ -393,9 +403,14 @@ const ProjectMembers = observer(() => {
{jobList.length > 0 &&
jobList.map((item: any, key) => {
return (
<Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
<Box
className={styles.tabBox}
onClick={() => rowClick(item.id)}
>
<Box className={styles.tabBoxInfo}>
<MyTooltip title={item.name}>
<div className={styles.tabBoxTitle}>{item.name}</div>
</MyTooltip>
<Box className={styles.tabBoxDescInfo}>
<div
className={styles.tabBoxDesc}
......@@ -415,7 +430,7 @@ const ProjectMembers = observer(() => {
<Box className={styles.tabBoxMiddle}>
<img alt="" src={jobCost} />
<div className={styles.tabBoxTime}>
{item.jobCost ? item.jobCost.toFixed(2) : "--"}
{item.jobCost?.toFixed(2)}元
</div>
</Box>
<Box className={styles.tabBoxJobStatus}>
......@@ -475,6 +490,7 @@ const ProjectMembers = observer(() => {
<img
alt=""
src={jobDel}
className={styles.jobOperateImgBox}
style={{ cursor: "pointer" }}
onClick={(event) => {
event.stopPropagation();
......@@ -489,9 +505,13 @@ const ProjectMembers = observer(() => {
</Box>
);
})}
</MyCircularProgress>
</Box>
<div className={styles.pagination}>
<MyPagination page={page} pageChange={handleChangePage} count={count} />
</div>
<TablePagination
{/* <TablePagination
rowsPerPageOptions={[5, 10, 20, 50]}
labelRowsPerPage={"每页行数："}
ActionsComponent={ActionsComponent}
......@@ -501,7 +521,7 @@ const ProjectMembers = observer(() => {
page={page}
onPageChange={handleChangePage} //
onRowsPerPageChange={handleChangeRowsPerPage} //
/>
/> */}
<SimpleDialog
text={
......
src/views/Project/components/Flow/index.tsx
View file @ 95d8fd24
This diff is collapsed.
src/views/WorkFlowEdit/index.module.css
View file @ 95d8fd24
This diff is collapsed.
src/views/WorkFlowEdit/index.tsx
View file @ 95d8fd24
This diff is collapsed.
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