Skip to content

B
bkunyun
Commit 41e296fd authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

Merge branch 'feat-20220801' into 'release' 

Feat 20220801

See merge request !51
parents e3101834 87a6abe5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1335 additions and 563 deletions
config/webpack.config.js
View file @ 41e296fd
This diff is collapsed.
public/index.html
View file @ 41e296fd
<!--
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-08-02 11:43:28
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-10 10:40:49
* @FilePath: /bkunyun/public/index.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="cn"> <html lang="cn">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/facicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
...@@ -24,7 +32,7 @@ ...@@ -24,7 +32,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>云平台</title> <title>北鲲云-工作流平台</title>
<script src="%PUBLIC_URL%/RDKit_minimal.js"></script> <script src="%PUBLIC_URL%/RDKit_minimal.js"></script>
<script> <script>
window window
......
src/api/api_manager.ts
View file @ 41e296fd
...@@ -41,6 +41,8 @@ const RESTAPI = { ...@@ -41,6 +41,8 @@ const RESTAPI = {
API_SAVE_USERSPEC:`${BACKEND_API_URI_PREFIX}/cpp/workflow/saveuserspec`, // 保存用户自定义工作流模板 API_SAVE_USERSPEC:`${BACKEND_API_URI_PREFIX}/cpp/workflow/saveuserspec`, // 保存用户自定义工作流模板
API_OVERVIEW_GET:`${BACKEND_API_URI_PREFIX}/cpp/basicInformation`, // 获取概览基本信息 API_OVERVIEW_GET:`${BACKEND_API_URI_PREFIX}/cpp/basicInformation`, // 获取概览基本信息
API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`, // 查询任务概览 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`, // 保存批算子
}; };
export default RESTAPI; export default RESTAPI;
src/api/fileserver/CloudEController.ts
View file @ 41e296fd
...@@ -30,6 +30,15 @@ type IGetDatasetItemsListParams = { ...@@ -30,6 +30,15 @@ type IGetDatasetItemsListParams = {
sort?: string; // 排序 sort?: string; // 排序
} }
type IGetDatasetSizeParams = {
type?: string; // 产品id
projectId: string;
token: string;
filetoken: string;
path: string; // 数据集路径
name: string; // 数据集名称
}
type ISaveDatasetParams = { type ISaveDatasetParams = {
type?: string; type?: string;
projectId: string; projectId: string;
...@@ -229,6 +238,34 @@ class CloudEController { ...@@ -229,6 +238,34 @@ class CloudEController {
} }
} }
// 获取文件文本内容（字符串）
static JobFileDownloadText(url: any, filetoken: string, projectId: string) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
url = url + urlToken(filetoken, projectId);
headers["Cache-Control"] = "no-cache";
headers["Content-Type"] = "multipart/form-data";
return axios.get(
APIOPTION() + "/download" + url + "&showhidden=false",
{
headers: headers,
}
);
}
}
// 获取dataset条数
static GetDatasetSize(params: IGetDatasetSizeParams) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
let url = getUrlThroughParams(params, ['filetoken','path','token'], '?')
return axios.get(
`${APIOPTION()}:5003/size${url}`,
{
headers: headers,
}
);
}
}
// 获取分子列表 // 获取分子列表
static GetDatasetItemsList(params: IGetDatasetItemsListParams) { static GetDatasetItemsList(params: IGetDatasetItemsListParams) {
......
src/api/project_api.ts
View file @ 41e296fd
...@@ -270,6 +270,44 @@ const getTaskOverview=(params:getTaskOverviewParams)=>{ ...@@ -270,6 +270,44 @@ const getTaskOverview=(params:getTaskOverviewParams)=>{
}) })
} }
// 获取流算子列表，可用于模糊查询，返回所有版本流算子
type getOperatorListParams = {
productId: string;
keyword?: string;
page?: number;
size?: number;
};
const getOperatorList=(params:getOperatorListParams)=>{
return request({
url:Api.API_OPERATOR_LISTSTREAMACTORS,
method:"get",
params,
})
}
type saveBatchQuery = {
productId: string;
batchName: string;
batchVersion: string;
description?: string;
isEdit?: string;
}
type saveBatchBody = Array<any>
type saveBatchParams = {
query: saveBatchQuery;
body: saveBatchBody;
}
// 提交工作流
const saveBatchActor = (params: saveBatchParams) => {
return request({
url: Api.API_SAVE_BATCHACTOR,
method: "post",
params: params.query,
data: params.body,
});
};
export { export {
current, current,
...@@ -292,5 +330,7 @@ export { ...@@ -292,5 +330,7 @@ export {
submitWorkFlow, submitWorkFlow,
getworkFlowTaskInfo, getworkFlowTaskInfo,
getOverviewInfo, getOverviewInfo,
getTaskOverview getTaskOverview,
getOperatorList,
saveBatchActor
}; };
src/api/workbench_api.ts
View file @ 41e296fd
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37 * @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-10 13:54:04 * @LastEditTime: 2022-08-08 16:34:52
* @FilePath: /bkunyun/src/api/workbench_api.ts * @FilePath: /bkunyun/src/api/workbench_api.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import request from "@/utils/axios/service"; import request from "@/utils/axios/service";
import Api from "./api_manager"; import Api from "./api_manager";
import { IGetOperatorListParams, IFetchOperatorListParams } from "./workbenchInterface"; import { IGetOperatorListParams } from "./workbenchInterface";
function current() { function current() {
return request({ return request({
...@@ -139,15 +139,6 @@ const fetchOperatorList = (params: IGetOperatorListParams) => { ...@@ -139,15 +139,6 @@ const fetchOperatorList = (params: IGetOperatorListParams) => {
}; };
// 获取指定版本算子
const fetchVersionOperator = (params: IFetchOperatorListParams) => {
return request({
url: Api.API_VERSION_OPERATOR,
method: "get",
params,
});
};
// 保存用户自定义工作流模板 // 保存用户自定义工作流模板
const saveUserSpec = (params: any) => { const saveUserSpec = (params: any) => {
return request({ return request({
...@@ -168,6 +159,5 @@ export { ...@@ -168,6 +159,5 @@ export {
deleteWorkflowJob, deleteWorkflowJob,
cancelWorkflowJob, cancelWorkflowJob,
fetchOperatorList, fetchOperatorList,
fetchVersionOperator,
saveUserSpec saveUserSpec
}; };
src/components/BusinessComponents/FileSelect/index.module.css
View file @ 41e296fd
.FSBox { .FSBox {
width: 900px; width: 900px;
height: 650px;
position: relative; position: relative;
} }
......
src/components/BusinessComponents/NoProject/NoProject.tsx
View file @ 41e296fd
...@@ -12,16 +12,20 @@ import AddIcon from "@mui/icons-material/Add"; ...@@ -12,16 +12,20 @@ import AddIcon from "@mui/icons-material/Add";
import AddProject from "@/views/Project/components/AddProject"; import AddProject from "@/views/Project/components/AddProject";
import React, { useState } from "react"; import React, { useState } from "react";
import MyButton from "@/components/mui/MyButton"; import MyButton from "@/components/mui/MyButton";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store/index";
const NoProject = () => { const NoProject = observer((props: any) => {
// 新建弹窗显示控制 // 新建弹窗显示控制
const [addOpen, setAddOpen] = useState(false); const [addOpen, setAddOpen] = useState(false);
const { currentProjectStore } = useStores();
let projectList = toJS(currentProjectStore.projectList)
return ( return (
<div className={style.noProject}> <div className={style.noProject}>
<img src={noData} alt="" className={style.noDataImg} /> <img src={noData} alt="" className={style.noDataImg} />
<div className={style.text1}>当前产品暂无项目</div> <div className={style.text1}>{projectList.length > 0 ? "当前未选中任何项目" : "当前产品暂无项目"}</div>
<div className={style.text2}>请先创建项目</div> <div className={style.text2}>{projectList.length > 0 ? "或创建新项目" : "请先创建项目"}</div>
<MyButton <MyButton
text='创建项目' text='创建项目'
variant="contained" variant="contained"
...@@ -30,11 +34,11 @@ const NoProject = () => { ...@@ -30,11 +34,11 @@ const NoProject = () => {
onClick={() => setAddOpen(true)} onClick={() => setAddOpen(true)}
style={{ backgroundColor: "#1370ff", color: "#fff" }} style={{ backgroundColor: "#1370ff", color: "#fff" }}
/> />
<AddProject addOpen={addOpen} setAddOpen={setAddOpen} /> <AddProject addOpen={addOpen} setAddOpen={setAddOpen} />
</div> </div>
); );
}; });
export default NoProject; export default NoProject;
src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css
View file @ 41e296fd
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
align-items: center; align-items: center;
border: 1px solid #e6e8eb; border: 1px solid #e6e8eb;
border-radius: 4px; border-radius: 4px;
background-color: #F0F2F5; background-color: #f0f2f5;
cursor: pointer; cursor: pointer;
height: 32px; height: 32px;
box-sizing: border-box; box-sizing: border-box;
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
} }
.radio { .radio {
position: relative; position: relative;
min-width: 64px; min-width: 63px;
height: 28px; height: 28px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
...@@ -28,18 +28,8 @@ ...@@ -28,18 +28,8 @@
white-space: nowrap; white-space: nowrap;
} }
.radio:not(:last-child)::before {
position: absolute;
width: 1px;
height: 16px;
top: 6px;
right: 0;
content: '';
background-color: #D1D6DE;
}
.radioActive { .radioActive {
color: #1370ff; color: #1370ff;
background-color: #fff; background-color: #fff;
box-shadow: 2px 4px 12px 0px rgba(0,27,63,0.06); box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
} }
src/components/MySnackbar/MySnackbarProvider.tsx
View file @ 41e296fd
...@@ -5,152 +5,149 @@ import snackbarContext from "./snackbarContext"; ...@@ -5,152 +5,149 @@ import snackbarContext from "./snackbarContext";
import { ThemeProvider, createTheme } from "@mui/material/styles"; import { ThemeProvider, createTheme } from "@mui/material/styles";
type MySnackbarProviderProp = { type MySnackbarProviderProp = {
vertical?: "bottom" | "top"; vertical?: "bottom" | "top";
horizontal?: "center" | "left" | "right"; horizontal?: "center" | "left" | "right";
autoHideDuration?: number; autoHideDuration?: number;
snackerClasses?: object; snackerClasses?: object;
ClickAwayListenerProps?: object; ClickAwayListenerProps?: object;
ContentProps?: object; ContentProps?: object;
disableWindowBlurListener?: boolean; disableWindowBlurListener?: boolean;
resumeHideDuration?: number; resumeHideDuration?: number;
snackbarSx?: object; snackbarSx?: object;
transition?: "grow" | "fade"; transition?: "grow" | "fade";
transitionDuration?: number; transitionDuration?: number;
TransitionProps?: object; TransitionProps?: object;
alertClasses?: object; alertClasses?: object;
closeText?: string; closeText?: string;
variant?: "filled" | "outlined" | "standard"; variant?: "filled" | "outlined" | "standard";
errorIcon?: ReactNode; errorIcon?: ReactNode;
infoIcon?: ReactNode; infoIcon?: ReactNode;
successIcon?: ReactNode; successIcon?: ReactNode;
warningIcon?: ReactNode; warningIcon?: ReactNode;
elevation?: number; elevation?: number;
alertSx?: object; alertSx?: object;
children?: ReactNode; children?: ReactNode;
}; };
const getTransitionComponent = (transition: "grow" | "fade") => { const getTransitionComponent = (transition: "grow" | "fade") => {
switch (transition) { switch (transition) {
case "grow": case "grow":
return Grow; return Grow;
case "fade": case "fade":
return Fade; return Fade;
default: default:
return Grow; return Grow;
} }
}; };
const MySnackbarProvider = ({ const MySnackbarProvider = ({
vertical = "top", vertical = "top",
horizontal = "center", horizontal = "center",
autoHideDuration = 890000, autoHideDuration = 3000,
snackerClasses, snackerClasses,
ClickAwayListenerProps, ClickAwayListenerProps,
ContentProps, ContentProps,
disableWindowBlurListener = true, disableWindowBlurListener = true,
resumeHideDuration, resumeHideDuration,
snackbarSx, snackbarSx,
transition = "grow", transition = "grow",
transitionDuration, transitionDuration,
TransitionProps = {}, TransitionProps = {},
alertClasses, alertClasses,
closeText = "Close", closeText = "Close",
variant = "standard", variant = "standard",
errorIcon, errorIcon,
infoIcon, infoIcon,
successIcon, successIcon,
warningIcon, warningIcon,
elevation = 3, elevation = 3,
alertSx, alertSx,
children, children,
}: MySnackbarProviderProp) => { }: MySnackbarProviderProp) => {
const { const {
open, open,
messageInfo, messageInfo,
handleExited, handleExited,
success, success,
error, error,
warning, warning,
info, info,
close, close,
} = useMySnackbar(); } = useMySnackbar();
// .MuiAlert-filledInfo // .MuiAlert-filledInfo
const getColorStyle = useMemo(()=>{ const getColorStyle = useMemo(() => {
if(messageInfo.severity === 'success'){ if (messageInfo.severity === "success") {
return '#02AB83' return "#02AB83";
} }
if(messageInfo.severity === 'info'){ if (messageInfo.severity === "info") {
return '#1370FF' return "#1370FF";
} }
if(messageInfo.severity === 'warning'){ if (messageInfo.severity === "warning") {
return '#FFB919' return "#FFB919";
} }
if(messageInfo.severity === 'error'){ if (messageInfo.severity === "error") {
return '#FF4E4E' return "#FF4E4E";
} }
},[messageInfo.severity]) }, [messageInfo.severity]);
const theme = createTheme({ const theme = createTheme({
components: { components: {
MuiAlert: { MuiAlert: {
styleOverrides: { styleOverrides: {
root: { root: {
color: getColorStyle, color: getColorStyle,
"& .MuiAlert-icon": { "& .MuiAlert-icon": {
color: getColorStyle color: getColorStyle,
}, },
} },
}, },
}, },
}, },
}); });
return (
return ( <Fragment>
<Fragment> <ThemeProvider theme={theme}>
<ThemeProvider theme={theme}> <Snackbar
open={open}
autoHideDuration={autoHideDuration}
<Snackbar onClose={close}
open={open} anchorOrigin={{ vertical: vertical, horizontal: horizontal }}
autoHideDuration={autoHideDuration} classes={snackerClasses}
onClose={close} ClickAwayListenerProps={ClickAwayListenerProps}
anchorOrigin={{ vertical: vertical, horizontal: horizontal }} ContentProps={ContentProps}
classes={snackerClasses} disableWindowBlurListener={disableWindowBlurListener}
ClickAwayListenerProps={ClickAwayListenerProps} resumeHideDuration={resumeHideDuration}
ContentProps={ContentProps} sx={snackbarSx}
disableWindowBlurListener={disableWindowBlurListener} TransitionComponent={getTransitionComponent(transition)}
resumeHideDuration={resumeHideDuration} transitionDuration={transitionDuration}
sx={snackbarSx} TransitionProps={{ onExited: handleExited, ...TransitionProps }}
TransitionComponent={getTransitionComponent(transition)} >
transitionDuration={transitionDuration} <Alert
TransitionProps={{ onExited: handleExited, ...TransitionProps }} id="Alert"
> classes={alertClasses}
<Alert closeText={closeText}
id="Alert" iconMapping={{
classes={alertClasses} error: errorIcon,
closeText={closeText} info: infoIcon,
iconMapping={{ success: successIcon,
error: errorIcon, warning: warningIcon,
info: infoIcon, }}
success: successIcon, severity={messageInfo?.severity}
warning: warningIcon, variant={variant}
}} elevation={elevation}
severity={messageInfo?.severity} sx={{ boxShadow: "unset", ...alertSx }}
variant={variant} >
elevation={elevation} {messageInfo?.content}
sx={{ boxShadow: "unset", ...alertSx }} </Alert>
> </Snackbar>
{messageInfo?.content} </ThemeProvider>
</Alert> <snackbarContext.Provider value={{ success, error, warning, info }}>
</Snackbar> {children}
</ThemeProvider> </snackbarContext.Provider>
<snackbarContext.Provider value={{ success, error, warning, info }}> </Fragment>
{children} );
</snackbarContext.Provider>
</Fragment>
);
}; };
export default MySnackbarProvider; export default MySnackbarProvider;
src/components/mui/MyDialog.tsx
View file @ 41e296fd
...@@ -122,12 +122,16 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -122,12 +122,16 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
"& .MuiPaper-root": { "& .MuiPaper-root": {
// 设置最大宽度， 实际宽度让子元素撑大 // 设置最大宽度， 实际宽度让子元素撑大
maxWidth: "1920px", maxWidth: "1920px",
borderRadius: "8px"
}, },
}, },
}} }}
> >
{isHideHeader ? null : ( {isHideHeader ? null : (
<DialogTitle id="alert-dialog-title"> <DialogTitle
id="alert-dialog-title"
sx={{ padding: "20px 24px" }}
>
<div <div
style={{ style={{
display: "flex", display: "flex",
...@@ -136,10 +140,10 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -136,10 +140,10 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
fontWeight: 600, fontWeight: 600,
}} }}
> >
<span style={{fontSize: 16, lineHeight: '24px', color: '#1E2633'}}>{title}</span> <span style={{ fontSize: 16, lineHeight: '24px', color: '#1E2633' }}>{title}</span>
<CloseIcon <CloseIcon
onClick={onClose} onClick={onClose}
sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius:'2px' } }} sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius: '2px' } }}
/> />
</div> </div>
</DialogTitle> </DialogTitle>
......
src/components/mui/MyPopconfirm.tsx
View file @ 41e296fd
...@@ -68,7 +68,8 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => { ...@@ -68,7 +68,8 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
zIndex: 2000, zIndex: 2000,
bgcolor: "#fff", bgcolor: "#fff",
minWidth: "200px", minWidth: "200px",
borderRadius: "2px", borderRadius: "4px",
fontSize:"14px",
padding: "20px 16px", padding: "20px 16px",
boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)", boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
}} }}
......
src/components/mui/MyRadio.tsx
View file @ 41e296fd
...@@ -11,65 +11,72 @@ import Radio from "@mui/material/Radio"; ...@@ -11,65 +11,72 @@ import Radio from "@mui/material/Radio";
import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup"; import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl"; import FormControl from "@mui/material/FormControl";
import FormHelperText from '@mui/material/FormHelperText'; import FormHelperText from "@mui/material/FormHelperText";
interface IMyRadioProps extends RadioGroupProps { interface IMyRadioProps extends RadioGroupProps {
value: any; value: any;
options: Array<ICheckBoxOption>; options: Array<ICheckBoxOption>;
onChange: any; onChange: any;
variant?: "standard" | "outlined" | "filled"; variant?: "standard" | "outlined" | "filled";
error?: boolean; error?: boolean;
helperText?: string; helperText?: string;
}; }
type ICheckBoxOption = { type ICheckBoxOption = {
value: any; value: any;
label?: string; label?: string;
disabled?: boolean; disabled?: boolean;
}; };
// 如果后端给的options不是 value-label的字段可以用下面的方法转换 // 如果后端给的options不是 value-label的字段可以用下面的方法转换
export const optionsTransform = ( export const optionsTransform = (
arr: Array<any>, arr: Array<any>,
labelKey: string = "label", labelKey: string = "label",
valueKey: string = "value", valueKey: string = "value",
disabledKey: string = "disabled" disabledKey: string = "disabled"
): Array<ICheckBoxOption> => { ): Array<ICheckBoxOption> => {
return arr.map((item: any) => { return arr.map((item: any) => {
return { return {
value: item[valueKey], value: item[valueKey],
label: item[labelKey], label: item[labelKey],
disabled: item[disabledKey] || false, disabled: item[disabledKey] || false,
}; };
}); });
}; };
export default function MyRadio(props: IMyRadioProps) { export default function MyRadio(props: IMyRadioProps) {
const { value, options, onChange , error = false, helperText, variant} = props; const {
value,
options,
onChange,
error = false,
helperText,
variant,
} = props;
return ( return (
<FormControl fullWidth variant={variant} error={error}> <FormControl fullWidth variant={variant} error={error}>
<RadioGroup <RadioGroup
{...props} {...props}
row row
aria-labelledby="demo-row-radio-buttons-group-label" aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group" name="row-radio-buttons-group"
value={value} value={value}
onChange={onChange} onChange={onChange}
> >
{options.map((option) => { {options.map((option) => {
return ( return (
<FormControlLabel <FormControlLabel
key={option.value} key={option.value}
value={option.value} value={option.value}
control={<Radio />} control={<Radio sx={{ color: "rgba(209, 214, 222, 1)" }} />}
label={option.label} label={option.label}
disabled={option.disabled} disabled={option.disabled}
/> />
); );
})} })}
</RadioGroup> </RadioGroup>
{helperText && error && <FormHelperText>{helperText}</FormHelperText>} {helperText && error && <FormHelperText>{helperText}</FormHelperText>}
</FormControl> </FormControl>
); );
} }
src/components/mui/MySelect.tsx
View file @ 41e296fd
...@@ -128,7 +128,7 @@ export default function MySelect(props: IProps) { ...@@ -128,7 +128,7 @@ export default function MySelect(props: IProps) {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<FormControl fullWidth={fullWidth} variant={variant}> <FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? ( {isTitle ? (
<InputLabel id="demo-simple-select-label"> <InputLabel id="demo-simple-select-label">
{title || "请选择"} {title || "请选择"}
......
src/components/mui/MySwitch.tsx
View file @ 41e296fd
...@@ -11,7 +11,8 @@ import Switch, { SwitchProps } from "@mui/material/Switch"; ...@@ -11,7 +11,8 @@ import Switch, { SwitchProps } from "@mui/material/Switch";
import { ThemeProvider, createTheme } from "@mui/material/styles"; import { ThemeProvider, createTheme } from "@mui/material/styles";
interface IMySwitchProps extends SwitchProps { interface IMySwitchProps extends SwitchProps {
value: boolean; value?: boolean;
defaultChecked?: boolean;
onChange?: any; onChange?: any;
disabled?: boolean; disabled?: boolean;
} }
...@@ -52,23 +53,24 @@ const theme = createTheme({ ...@@ -52,23 +53,24 @@ const theme = createTheme({
}); });
const MySwitch = (props: IMySwitchProps) => { const MySwitch = (props: IMySwitchProps) => {
const { value, onChange, disabled = false, size, ...other } = props; const { value, defaultChecked, onChange, disabled = false, size, ...other } = props;
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Switch <Switch
checked={value} checked={value}
disabled={disabled} disabled={disabled}
defaultChecked={defaultChecked}
onChange={onChange} onChange={onChange}
sx={ sx={
size === "medium" size === "medium"
? { ? {
width: 44, width: 44,
height: 24, height: 24,
} }
: { : {
width: 40, width: 40,
height: 22, height: 22,
} }
} }
{...other} {...other}
/> />
......
src/components/mui/Tabs.tsx
View file @ 41e296fd
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-04 20:18:17 * @LastEditTime: 2022-08-10 11:06:12
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -44,6 +44,9 @@ const theme = createTheme({ ...@@ -44,6 +44,9 @@ const theme = createTheme({
minWidth: "20px", minWidth: "20px",
marginRight: "32px", marginRight: "32px",
color: "#8A9099", color: "#8A9099",
":hover": {
color: "#1E2633",
},
selected: { selected: {
color: "#1976d2", color: "#1976d2",
}, },
...@@ -75,8 +78,8 @@ const Tabs = (props: IProps) => { ...@@ -75,8 +78,8 @@ const Tabs = (props: IProps) => {
defaultValue defaultValue
? defaultValue ? defaultValue
: allowNullValue : allowNullValue
? "" ? ""
: tabList.filter((e) => !e.hide)[0].value : tabList.filter((e) => !e.hide)[0].value
); );
const onChange = (val: string) => { const onChange = (val: string) => {
...@@ -95,7 +98,14 @@ const Tabs = (props: IProps) => { ...@@ -95,7 +98,14 @@ const Tabs = (props: IProps) => {
) : ( ) : (
"" ""
)} )}
<Typography sx={{ fontSize: "14px", lineHeight: "22px", height: "22px", fontWeight: "400" }}> <Typography
sx={{
fontSize: "14px",
lineHeight: "22px",
height: "22px",
fontWeight: "400",
}}
>
{item.label} {item.label}
</Typography> </Typography>
</Box> </Box>
...@@ -118,7 +128,7 @@ const Tabs = (props: IProps) => { ...@@ -118,7 +128,7 @@ const Tabs = (props: IProps) => {
<Tab <Tab
key={key} key={key}
label={labelRender(item, key)} label={labelRender(item, key)}
value={item.value} value={item.value || ""}
id={item.value} id={item.value}
disabled={item.disabled} disabled={item.disabled}
/> />
...@@ -130,7 +140,11 @@ const Tabs = (props: IProps) => { ...@@ -130,7 +140,11 @@ const Tabs = (props: IProps) => {
?.filter((item) => !item.hide) ?.filter((item) => !item.hide)
.map((item) => { .map((item) => {
return ( return (
<TabPanel sx={tabPanelSx} value={item.value} key={item.value}> <TabPanel
sx={tabPanelSx}
value={item.value || ""}
key={item.value}
>
{item.component} {item.component}
</TabPanel> </TabPanel>
); );
......
src/views/CustomOperator/components/OperatorList/index.module.css
View file @ 41e296fd
...@@ -38,22 +38,36 @@ ...@@ -38,22 +38,36 @@
} }
.li { .li {
background-color: RGBA(240, 242, 245, 1); background-color: RGBA(240, 242, 245, 1);
padding: 7px 7px 7px 28px; padding: 7px 9px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
position: relative; position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.nameVersion {
flex: 1;
/* text-align: left; */
margin-left: 13px;
word-wrap: break-word;
/* text-overflow: clip; */
max-width: 140px;
} }
.name { .name {
margin-right: 8px; margin-right: 8px;
} }
.version {
white-space: nowrap;
}
.icon { .icon {
width: 6px; width: 6px;
height: 10px; height: 10px;
position: absolute; /* position: absolute;
top: 13px; top: 13px;
left: 9px; left: 9px; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
...@@ -67,3 +81,12 @@ ...@@ -67,3 +81,12 @@
height: 2px; height: 2px;
background-color: rgba(86, 92, 102, 1); background-color: rgba(86, 92, 102, 1);
} }
.loading {
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
font-size: 12px;
color: rgba(86, 92, 102, 1);
padding: 4px;
}
src/views/CustomOperator/components/SaveOperator/index.tsx 0 → 100644
View file @ 41e296fd
import MyDialog from "@/components/mui/MyDialog";
import MyInput from "@/components/mui/MyInput";
import { checkIsNumberLetterChinese } from "@/utils/util";
import _ from "lodash";
import { useState } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { saveBatchActor } from "@/api/project_api";
import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar";
import { toJS } from "mobx";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
interface IProps {
saveFormDialog: boolean;
setSaveFormDialog: (val: boolean) => void;
operatorList: ITask[];
setShowCustomOperator: any;
}
const SaveOperator = (props: IProps) => {
const {
saveFormDialog,
setSaveFormDialog,
operatorList,
setShowCustomOperator,
} = props;
const { currentProjectStore } = useStores();
const Message = useMessage();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const [title, setTitle] = useState("");
const [version, setVersion] = useState("1.0.0");
const [description, setDescription] = useState("");
// 保存批算子
const { run: saveBatchActorRun, loading } = useMyRequest(saveBatchActor, {
onSuccess: (res) => {
Message.success("保存算子成功");
sessionStorage.setItem("operatorList", "[]");
setSaveFormDialog(false);
setShowCustomOperator();
},
});
const [titleHelper, setTitleHelper] = useState({
// 算子名称错误提示
error: false,
helperText: "",
});
const [versionHelper, setVersionHelper] = useState({
// 算子版本错误提示
error: false,
helperText: "",
});
// 关闭表单弹窗
const handleCloseDialog = () => {
setSaveFormDialog(false);
};
// 算子名称
const handleTitleChange = (e: any) => {
const title = e.target.value;
setTitle(title);
checkTitle(title);
};
// 算子版本
const handleVersionChange = (e: any) => {
let version = e.target.value;
setVersion(version);
checkVersion(version);
};
// 算子描述
const handleDescriptionChange = (e: any) => {
let description = e.target.value;
if (description.length < 301) {
setDescription(description);
}
};
// 校验算子名称
const checkTitle = (title: string) => {
if (!title) {
setTitleHelper({
error: true,
helperText: "必须输入算子名称",
});
return false;
} else if (title.length > 15) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else if (!checkIsNumberLetterChinese(title)) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else {
setTitleHelper({
error: false,
helperText: "",
});
return true;
}
};
// 校验版本号格式
const checkVersion = (version: string) => {
if (/^[1-9]\d?(\.(0|[1-9]\d?)){2}$/.test(version)) {
setVersionHelper({
error: false,
helperText: "",
});
return true;
} else {
setVersionHelper({
error: true,
helperText: "格式不正确，必须为X.Y.Z格式，且XYZ必须为0~99的正整数",
});
return false;
}
};
// 坐标转换
const positionTransform = () => {
const copyOperatorList: ITask[] = _.cloneDeep(operatorList);
const positionXArr = copyOperatorList.map((operatorLi) => {
return operatorLi.position.x;
});
const positionYArr = copyOperatorList.map((operatorLi) => {
return operatorLi.position.y;
});
let minPositionX = Math.min(...positionXArr);
let minPositionY = Math.min(...positionYArr);
let startingPointX = minPositionX - 40;
let startingPointY = minPositionY - 10;
return copyOperatorList.map((operatorLi) => {
return {
...operatorLi,
position: {
x: operatorLi.position.x - startingPointX,
y: operatorLi.position.y - startingPointY,
},
};
});
};
// 表单弹窗确定，新建算子
const handleOncofirm = () => {
if (checkTitle(title) && checkVersion(version)) {
saveBatchActorRun({
query: {
productId: productId as string,
batchName: title,
batchVersion: version,
description: description,
},
body: positionTransform(),
});
}
};
return (
<MyDialog
open={saveFormDialog}
title="保存算子"
onClose={handleCloseDialog}
onConfirm={handleOncofirm}
loading={loading}
>
<div style={{ width: "388px" }}>
<MyInput
value={title}
label="算子名称"
onChange={handleTitleChange}
required
error={titleHelper.error}
helperText={titleHelper.helperText}
style={{ margin: "20px 0" }}
></MyInput>
<MyInput
value={version}
label="版本号"
onChange={handleVersionChange}
error={versionHelper.error}
helperText={versionHelper.helperText}
style={{ marginBottom: "20px" }}
></MyInput>
<div style={{ position: "relative" }}>
<MyInput
value={description}
id="desc"
label="模板描述"
placeholder="模板描述"
onChange={handleDescriptionChange}
multiline
rows={4}
/>
<span
style={{
position: "absolute",
bottom: "7px",
right: "12px",
color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",
}}
>
{description.length}/300
</span>
</div>
</div>
</MyDialog>
);
};
export default SaveOperator;
src/views/CustomOperator/index.tsx
View file @ 41e296fd
...@@ -3,33 +3,188 @@ import { observer } from "mobx-react-lite"; ...@@ -3,33 +3,188 @@ import { observer } from "mobx-react-lite";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer"; import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import MyButton from "@/components/mui/MyButton"; import MyButton from "@/components/mui/MyButton";
import OperatorList from "./components/OperatorList"; import OperatorList from "./components/OperatorList";
import Flow from "../Project/components/Flow"; // import Flow from "../Project/components/Flow";
import { useMessage } from "@/components/MySnackbar";
import BatchOperatorFlow from "../Project/components/Flow/components/BatchOperatorFlow";
import SaveOperator from "./components/SaveOperator";
import { ITask } from "../Project/ProjectSubmitWork/interface";
import _ from "lodash";
import styles from "./index.module.css"; import styles from "./index.module.css";
type IProps = { type IProps = {
setShowCustomOperator: any; setShowCustomOperator: any;
initOperatorList: ITask[];
}; };
const CustomOperator = observer((props: IProps) => { const CustomOperator = observer((props: IProps) => {
const { setShowCustomOperator } = props; const { setShowCustomOperator, initOperatorList } = props;
const Message = useMessage();
const [operatorList, setOperatorList] = useState<ITask[]>(initOperatorList);
const [saveFormDialog, setSaveFormDialog] = useState(false);
// const [showCustomOperator, setShowCustomOperator] = useState(false); // const [showCustomOperator, setShowCustomOperator] = useState(false);
/** 设置选中唯一标识符 */
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]);
};
// 判断 每个起始算子（可以有多个起始点）的输入必须为文件的路径输入或数据集的路径输入。
const checkIn = (targetArr: string[]) => {
console.log("checkIn");
const uniqTargetArr = _.uniq(targetArr);
if (uniqTargetArr.length === operatorList.length) {
// 流节点连成一个圈了
return false;
}
let check = true;
operatorList.forEach((flowNode) => {
if (uniqTargetArr.indexOf(flowNode.id) === -1) {
// 该节点的输入没有连线 也就是说这个节点是起点
const inArr = flowNode.parameters.filter(
(parameter) => parameter.parameterGroup === "in"
);
if (inArr.length > 0) {
if (
!inArr.some((inItem) => {
return (
(inItem.domType || "").toLowerCase() === "dataset" ||
(inItem.domType || "").toLowerCase() === "path" ||
(inItem.domType || "").toLowerCase() === "file"
);
})
) {
check = false;
}
} else {
// 起点没有输入
check = false;
}
}
});
return check;
};
// 判断 起码有一个结尾算子（可以有多个结尾点）的输出必须为文件保存或数据集保存。
const checkOut = (sourceArr: string[]) => {
console.log("checkOut");
const uniqSourceArr = _.uniq(sourceArr);
if (uniqSourceArr.length === operatorList.length) {
// 流节点连成一个圈了
return false;
}
let check = true;
operatorList.forEach((flowNode) => {
if (uniqSourceArr.indexOf(flowNode.id) === -1) {
// 该节点的输入没有连线 也就是说这个节点是起点
const outArr = flowNode.parameters.filter(
(parameter) => parameter.parameterGroup === "out"
);
if (outArr.length > 0) {
if (
!outArr.some((outItem) => {
return (
(outItem.domType || "").toLowerCase() === "dataset" ||
(outItem.domType || "").toLowerCase() === "file" ||
(outItem.domType || "").toLowerCase() === "path"
);
})
) {
check = false;
}
} else {
// 起点没有输入
check = false;
}
}
});
return check;
};
useEffect(() => {
sessionStorage.setItem("operatorList", JSON.stringify(operatorList));
}, [operatorList]);
const handleCheck = () => {
if (operatorList.length === 0) {
Message.error("内容不能为空！");
return;
}
let sourceArr: string[] = [];
let targetArr: string[] = [];
operatorList.forEach((flowNode) => {
flowNode.edges.forEach((edge) => {
edge.source && sourceArr.push(edge.source);
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("内容校验未通过，请检查！");
return;
}
if (!checkIn([...targetArr])) {
console.log("checkIn");
Message.error("内容校验未通过，请检查！");
return;
}
if (!checkOut([...sourceArr])) {
console.log("checkOut");
Message.error("内容校验未通过，请检查！");
return;
}
setSaveFormDialog(true);
};
return ( return (
<FullScreenDrawer handleClose={setShowCustomOperator} zIndex={1100}> <FullScreenDrawer handleClose={setShowCustomOperator} zIndex={1100}>
<div className={styles.customOperator}> <div className={styles.customOperator}>
<div className={styles.coTop}> <div className={styles.coTop}>
<div className={styles.coTitle}>添加算子</div> <div className={styles.coTitle}>添加算子</div>
<MyButton text="添加"></MyButton> <MyButton
text="添加"
onClick={() => {
handleCheck();
}}
></MyButton>
<SaveOperator
saveFormDialog={saveFormDialog}
setSaveFormDialog={setSaveFormDialog}
operatorList={operatorList}
setShowCustomOperator={setShowCustomOperator}
></SaveOperator>
</div> </div>
<div className={styles.coContent}> <div className={styles.coContent} id="customOperatorFlow">
<OperatorList /> <OperatorList
<Flow operatorList={operatorList}
showControls={false} setOperatorList={setOperatorList}
// tasks={templateConfigInfo} />
// setTasks={setTemplateConfigInfo} <BatchOperatorFlow
tasks={operatorList}
setTasks={setOperatorList}
type="edit" type="edit"
// onFlowNodeClick={handleNodeClick} onFlowNodeClick={handleNodeClick}
// ListenState={!saveFormDialog} flowNodeDraggable={true}
ListenState={!saveFormDialog}
showVersion={true}
showControls={false}
/> />
</div> </div>
</div> </div>
......
src/views/MenuLayout/index.module.css
View file @ 41e296fd
.container { .container {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
} }
.aside { .aside {
border-right: 1px solid #e6e8eb; border-right: 1px solid #e6e8eb;
width: 10%; width: 10%;
min-width: 220px; min-width: 220px;
height: calc(100vh - 57px); height: calc(100vh - 57px);
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.content { .content {
flex: 1; flex: 1;
height: calc(100vh - 57px); height: calc(100vh - 57px);
overflow: scroll; overflow: scroll;
} }
.listItem { .listItem {
padding: 8px 25px; padding: 8px 25px;
height: 38px; height: 38px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
color: #565c66; color: #565c66;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
border-left: 3px solid #fff;
} }
.listItem:hover { .listItem:hover {
background-color: #EEF1F5; background-color: #eef1f5;
} }
.routerIcon{ .routerIcon {
vertical-align: middle; vertical-align: middle;
margin-right: 12px; margin-right: 12px;
line-height: 22px; line-height: 22px;
} }
.active { .active {
border-left: 3px solid #1370ff; border-left: 3px solid #1370ff;
color: #1370ff; color: #1370ff;
background-color: #ebedf0; background-color: #ebedf0;
} }
src/views/MenuLayout/index.tsx
View file @ 41e296fd
...@@ -41,7 +41,7 @@ const MenuLayout = observer(() => { ...@@ -41,7 +41,7 @@ const MenuLayout = observer(() => {
return ( return (
<Box className={style.container}> <Box className={style.container}>
<Box className={style.aside}> <Box className={style.aside}>
{ {
pathname.indexOf('userCenter') < 0 && <CurrentProject /> pathname.indexOf('userCenter') < 0 && <CurrentProject />
} }
<List <List
...@@ -62,7 +62,7 @@ const MenuLayout = observer(() => { ...@@ -62,7 +62,7 @@ const MenuLayout = observer(() => {
onClick={() => item.type === "page" && navigate(item.path)} onClick={() => item.type === "page" && navigate(item.path)}
> >
<img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' /> <img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' />
<span style={{ verticalAlign: 'middle' }}>{item.name}</span> <span style={{ verticalAlign: 'middle', fontWeight: '500' }}>{item.name}</span>
</li> </li>
); );
} }
......
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ 41e296fd
...@@ -97,7 +97,7 @@ const AddFolder = (props: IAddFolderProps) => { ...@@ -97,7 +97,7 @@ const AddFolder = (props: IAddFolderProps) => {
<MyButton <MyButton
text="新建文件夹" text="新建文件夹"
variant="outlined" variant="outlined"
size="small" size="medium"
onClick={() => setDeleteDialogOpen(true)} onClick={() => setDeleteDialogOpen(true)}
disabled={ disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER") selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
......
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 41e296fd
...@@ -159,7 +159,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -159,7 +159,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
}; };
return ( return (
<FullScreenDrawer handleClose={props.handleClose}> <FullScreenDrawer handleClose={props.handleClose} zIndex={1100}>
<div <div
className={classNames({ className={classNames({
[style.datasetBox]: true, [style.datasetBox]: true,
......
src/views/Project/ProjectData/SeeDataset/save.tsx
View file @ 41e296fd
...@@ -164,12 +164,12 @@ const Save = (props: ISaveProps) => { ...@@ -164,12 +164,12 @@ const Save = (props: ISaveProps) => {
value={showDpath} value={showDpath}
required required
label="保存路径" label="保存路径"
onClick={() => {
setFileSelectOpen(true);
}}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<img <img
onClick={() => {
setFileSelectOpen(true);
}}
src={fileSelectIcon} src={fileSelectIcon}
alt="选择输出路径" alt="选择输出路径"
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
......
src/views/Project/ProjectData/UpLoaderFile/index.module.css
View file @ 41e296fd
.uploderBox { .uploderBox {
width: 900px; width: 900px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.uploderBoxLeft { .uploderBoxLeft {
width: 300px; width: 300px;
} }
.dropTitle { .dropTitle {
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
color: #1e2633; color: #1e2633;
margin-bottom: 14px; margin-bottom: 14px;
font-weight: 600; font-weight: 600;
} }
.dropBox { .dropBox {
height: 300px; cursor: pointer;
display: flex; height: 300px;
flex-direction: column; display: flex;
justify-content: center; flex-direction: column;
align-items: center; justify-content: center;
border: 1px dashed #d1d6de; align-items: center;
border-radius: 4px; border: 1px dashed #d1d6de;
border-radius: 4px;
}
.dropBox:hover {
background-color: #f7f8fa;
} }
.dropBoxDragActive { .dropBoxDragActive {
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.uploaderIcon { .uploaderIcon {
width: 56px; width: 56px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.uploderText1 { .uploderText1 {
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
color: #565c66; color: #565c66;
margin-bottom: 2px; margin-bottom: 2px;
} }
.uploderText2 { .uploderText2 {
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 12px;
color: #8a9099; color: #8a9099;
} }
.fileListBox { .fileListBox {
width: 528px; width: 528px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
/* .tableBox { /* .tableBox {
height: 300px; height: 300px;
overflow: scroll; overflow: scroll;
} */ } */
.fileIconBox { .fileIconBox {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.fileIconBoxText{ .fileIconBoxText {
display: block; display: block;
width: 260px; width: 260px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow:ellipsis; -o-text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.noFile { .noFile {
position: absolute; position: absolute;
top: 92px; top: 92px;
height: 200px; height: 200px;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.noFileIcon { .noFileIcon {
width: 83px; width: 83px;
height: 70px; height: 70px;
height: auto; height: auto;
margin-bottom: 6px; margin-bottom: 6px;
} }
.noFileText { .noFileText {
line-height: 18px; line-height: 18px;
font-size: 12px; font-size: 12px;
color: rgba(34, 34, 34, 0.45); color: rgba(34, 34, 34, 0.45);
} }
.fileIcon { .fileIcon {
margin-right: 12px; margin-right: 12px;
} }
.red { .red {
color: #ff4e4e; color: #ff4e4e;
} }
src/views/Project/ProjectData/index.module.css
View file @ 41e296fd
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
position: relative; position: relative;
} }
.projectDataStickyTop { .projectDataStickyTop {
padding: 28px 24px; padding: 28px 24px 64px;
position: relative; position: relative;
} }
.projectDataTitle { .projectDataTitle {
...@@ -56,9 +56,10 @@ ...@@ -56,9 +56,10 @@
.projectDataStickyBox { .projectDataStickyBox {
height: 64px; height: 64px;
position: sticky; width: calc(100vw - 220px);
bottom: -1px; position: fixed;
border: 1px solid #ebedf0; bottom: 0px;
border-top: 1px solid #ebedf0;
z-index: 100; z-index: 100;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
......
src/views/Project/ProjectData/index.tsx
View file @ 41e296fd
...@@ -515,7 +515,7 @@ const ProjectData = observer(() => { ...@@ -515,7 +515,7 @@ const ProjectData = observer(() => {
<MyButton <MyButton
text="上传文件" text="上传文件"
variant="contained" variant="contained"
size="small" size="medium"
style={{ marginRight: "12px" }} style={{ marginRight: "12px" }}
onClick={() => setUploaderDialogOpen(true)} onClick={() => setUploaderDialogOpen(true)}
disabled={ disabled={
......
src/views/Project/ProjectJobDetail/LogView/index.module.css 0 → 100644
View file @ 41e296fd
.logView {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(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;
}
.close {
position: absolute;
right: 0;
top: -28px;
cursor: pointer;
color: #fff;
}
.logViewTop {
/* height: 30px; */
background-color: #1D2126;
border-radius: 8px 8px 0 0;
display: flex;
font-size: 12px;
color: #8A9099;
overflow: auto;
}
.logViewTop::-webkit-scrollbar-track {
background-color: #282C34;
}
.logTitle {
display: flex;
align-items: center;
height: 30px;
line-height: 20px;
padding: 0 24px;
cursor: pointer;
}
.logTitleSelected {
background: #282C34;
color: #FFFFFF;
}
.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;
word-break: break-word;
overflow: auto;
font-size: 14px;
line-height: 22px;
}
.logViewContentMask{
height: 16px;
width: 852px;
background-color: #282C34;
position: absolute;
top: 30px;
left: 24px;
z-index: 1005;
}
.logViewContent::-webkit-scrollbar-track {
background-color: #282C34;
}
.logViewBottom {
display: flex;
align-items: center;
justify-content: end;
height: 60px;
padding-right: 24px;
}
\ No newline at end of file
src/views/Project/ProjectJobDetail/LogView/index.tsx 0 → 100644
View file @ 41e296fd
import { useState, useCallback, useEffect, useMemo } from "react";
import classnames from "classnames";
import style from "./index.module.css";
import CloseIcon from "@mui/icons-material/Close";
import MyButton from "@/components/mui/MyButton";
import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
import CloudEController from "@/api/fileserver/CloudEController";
import { useStores } from "@/store";
import { toJS } from "mobx";
type LogViewProps = {
isshow: boolean;
handleClose: () => void;
logs: any[];
};
const LogView = (props: LogViewProps) => {
const { isshow, handleClose, logs } = props;
const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
// 当前选择的日志
const [logCurrent, setLogCurrent] = useState<number>(0);
// 当前日志的内容文本
const [logText, setLogText] = useState('')
// 当前日志路径
const [logPath, setLogPath] = useState('')
useEffect(() => {
setLogPath(logs[logCurrent]?.logPath)
}, [logs]);
// 请求日志文本
useEffect(() => {
if (logPath) {
const path = logPath.slice(12)
CloudEController.JobFileDownloadText(
path,
fileToken as string,
projectId as string
)?.then((res) => {
setLogText(res.data)
})
}else{
setLogText("")
}
}, [logPath]);
// 选择日志时改变日志路径
useEffect(() => {
setLogPath(logs[logCurrent]?.logPath)
}, [logCurrent]);
// 下载当前日志
const handleDownLoad=()=>{
const path = logPath.slice(12)
CloudEController.JobFileDownload(
path,
fileToken as string,
projectId as string
);
}
return <div className={style.logView} style={isshow ? {} : { display: "none" }}>
<div className={style.logViewBox}>
<CloseIcon onClick={handleClose} className={style.close} />
<div className={style.logViewContentMask}></div>
<div className={style.logViewTop}>
{logs.map((item: any, index: number) => {
return <div
key={index}
onClick={() => { setLogCurrent(index) }}
className={classnames({
[style.logTitle]: true,
[style.logTitleSelected]: index === logCurrent,
})}>
<InsertDriveFileOutlinedIcon className={style.fileIcon} />
<span>{item.logName}</span>
</div>
})}
</div>
<div className={style.logViewContent}>
{logText}
</div>
<div className={style.logViewBottom}>
<MyButton text='下载当前日志' onClick={handleDownLoad} />
</div>
</div>
</div>
}
export default LogView
\ No newline at end of file
src/views/Project/ProjectJobDetail/index.module.css
View file @ 41e296fd
...@@ -68,6 +68,7 @@ ...@@ -68,6 +68,7 @@
margin: 6px 0; margin: 6px 0;
} }
.outputLiLeft { .outputLiLeft {
cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
......
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 41e296fd
...@@ -50,7 +50,7 @@ const TaskCard = (props: TaskCardProps) => { ...@@ -50,7 +50,7 @@ const TaskCard = (props: TaskCardProps) => {
const goToProjectData = (path: string) => { const goToProjectData = (path: string) => {
const lastIndex = path.lastIndexOf("/"); const lastIndex = path.lastIndexOf("/");
if (lastIndex !== -1) { if (lastIndex !== -1) {
path = path.slice(0, lastIndex + 1); path = path.slice(0, lastIndex);
} }
path = path.slice(12); path = path.slice(12);
if (path) { if (path) {
...@@ -66,7 +66,7 @@ const TaskCard = (props: TaskCardProps) => { ...@@ -66,7 +66,7 @@ const TaskCard = (props: TaskCardProps) => {
// 跳转详情页 // 跳转详情页
const gotoDetail = (id: string) => { const gotoDetail = (id: string) => {
navigate(`/product/cadd/projectJobDetail`, { navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id }, state: { taskId: id, from: 'projectOverview' },
}); });
} }
// 渲染状态图标 // 渲染状态图标
......
src/views/Project/ProjectOverview/index.tsx
View file @ 41e296fd
...@@ -45,6 +45,8 @@ const ProjectOverview = observer(() => { ...@@ -45,6 +45,8 @@ const ProjectOverview = observer(() => {
}); });
useEffect(() => { useEffect(() => {
// 切项目时重置为初始7
setDay("7");
if (currentProjectStore.currentProjectInfo.id) { if (currentProjectStore.currentProjectInfo.id) {
getOverview({ getOverview({
id: currentProjectStore.currentProjectInfo.id as string, id: currentProjectStore.currentProjectInfo.id as string,
......
src/views/Project/ProjectSetting/BaseInfo/index.module.css
View file @ 41e296fd
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
font-weight: 550; font-weight: 550;
margin-bottom: 12px; margin-bottom: 8px;
} }
.projectInfoName::after { .projectInfoName::after {
content: "*"; content: "*";
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: #ff4e4e; color: #ff4e4e;
margin-bottom: 8px; margin-bottom: 20px;
} }
.deleteText2 { .deleteText2 {
color: #1e2633; color: #1e2633;
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 41e296fd
...@@ -276,20 +276,20 @@ const BaseInfo = observer(() => { ...@@ -276,20 +276,20 @@ const BaseInfo = observer(() => {
const projectList = await getProjectList(); const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList); currentProjectStore.setProjectList(projectList);
// 项目删完了 // 项目删完了
if (projectList.length === 0) { // if (projectList.length === 0) {
currentProjectStore.changeProject({}); currentProjectStore.changeProject({});
localStorage.setItem("fileServerEndPoint", ""); localStorage.setItem("fileServerEndPoint", "");
setProjectInfo({}); setProjectInfo({});
} else { // } else {
projectList[0].filetoken = getFiletokenAccordingToId(projectList[0].id); // projectList[0].filetoken = getFiletokenAccordingToId(projectList[0].id);
currentProjectStore.changeProject(projectList[0]); // currentProjectStore.changeProject(projectList[0]);
setFileServerEndPointLocalStorage(projectList[0].zoneId); // setFileServerEndPointLocalStorage(projectList[0].zoneId);
getFiletokenAccordingToId(projectList[0].id).then((res) => { // getFiletokenAccordingToId(projectList[0].id).then((res) => {
projectList[0].filetoken = res; // projectList[0].filetoken = res;
currentProjectStore.changeProject(projectList[0]); // currentProjectStore.changeProject(projectList[0]);
}); // });
setProjectInfo(projectList[0]); // setProjectInfo(projectList[0]);
} // }
}, },
}); });
...@@ -429,6 +429,9 @@ const BaseInfo = observer(() => { ...@@ -429,6 +429,9 @@ const BaseInfo = observer(() => {
className={style.updateButton} className={style.updateButton}
onClick={handleClickUpdate} onClick={handleClickUpdate}
loading={updateLoading} loading={updateLoading}
sx={{
height:"32px"
}}
> >
保存修改 保存修改
</LoadingButton> </LoadingButton>
...@@ -459,10 +462,7 @@ const BaseInfo = observer(() => { ...@@ -459,10 +462,7 @@ const BaseInfo = observer(() => {
> >
<div className={style.deleteBox}> <div className={style.deleteBox}>
<div className={style.deleteText1}> <div className={style.deleteText1}>
您要删除本项目。已删除的项目将无法恢复！您真的确定吗？ 删除项目会导致数据丢失，已删除的项目将无法恢复。
</div>
<div className={style.deleteText2}>
此操作可能会导致数据丢失。为防止意外操作，我们要求您确认您的操作。
</div> </div>
<div className={style.deleteText3}> <div className={style.deleteText3}>
请输入“ 请输入“
......
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ 41e296fd
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-29 11:28:09 * @LastEditTime: 2022-08-11 18:05:06
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -37,15 +37,7 @@ const ChangePermission = observer((props: IProps) => { ...@@ -37,15 +37,7 @@ const ChangePermission = observer((props: IProps) => {
useEffect(() => { useEffect(() => {
if (permissionDialog?.isShow) { if (permissionDialog?.isShow) {
http.get<IResponse<any>>("/cpp/project/listroles").then((res) => { http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
const arr = []; setSelectOptions(res.data);
const { data } = res;
for (const key in data) {
arr.push({
label: String(data[key]),
value: key,
});
}
setSelectOptions(arr);
}); });
} }
}, [http, permissionDialog]); }, [http, permissionDialog]);
......
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ 41e296fd
...@@ -164,7 +164,7 @@ const ProjectMembers = observer(() => { ...@@ -164,7 +164,7 @@ const ProjectMembers = observer(() => {
variant="contained" variant="contained"
onClick={onAddMember} onClick={onAddMember}
startIcon={<Add />} startIcon={<Add />}
size="small" size="medium"
/> />
) : null} ) : null}
</Box> </Box>
......
src/views/Project/ProjectSetting/index.tsx
View file @ 41e296fd
...@@ -39,12 +39,9 @@ const ProjectSetting = observer(() => { ...@@ -39,12 +39,9 @@ const ProjectSetting = observer(() => {
if (currentProjectStore.currentProjectInfo.name) { if (currentProjectStore.currentProjectInfo.name) {
return ( return (
<div style={{ padding: 24 }}> <div style={{ padding:'28px 24px 24px' }}>
<div style={{ display: "flex", alignItems: "center" }}> <div style={{ display: "flex", alignItems: "center" }}>
<img src={projectImg} alt="项目logo" /> <span style={{ fontSize: "18px", lineHeight: "26px", fontWeight: "600", color: "#1E2633" }}>项目设置</span>
<span style={{ marginLeft: 12 }}>
{currentProjectStore.currentProjectInfo.name}
</span>
</div> </div>
<Box sx={{ width: "100%", typography: "body1" }}> <Box sx={{ width: "100%", typography: "body1" }}>
<Tabs tabList={tabList} /> <Tabs tabList={tabList} />
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css
View file @ 41e296fd
.formBox { .formBox {
position: relative; position: relative;
} }
.templateDescBox { .templateDescBox {
margin-bottom: 40px; margin-bottom: 40px;
} }
.templateDescTitle { .templateDescTitle {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-weight: 600; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
} }
.templateDesc { .templateDesc {
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
color: #565c66; color: #565c66;
} }
.formItemBox {
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
border-radius: 4px;
border: 1px solid #ebedf0;
margin-bottom: 24px;
}
/* .taskBox {
margin-bottom: 24px;
} */
.backgroundTitle { .backgroundTitle {
background-color: rgba(245, 246, 247, 1); background-color: rgba(245, 246, 247, 1);
height: 48px; height: 48px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 12px 16px; padding: 12px 24px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
.backgroundTitleTextIcon { .backgroundTitleTextIcon {
visibility: hidden; position: absolute;
top: 16px;
right: 24px;
visibility: hidden;
} }
.backgroundTitleTextIconShow { .backgroundTitleTextIconShow {
visibility: visible; visibility: visible;
} }
.backgroundTitleText { .backgroundTitleText {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 24px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
margin-left: 12px;
} }
.taskDescIcon { .taskDescIcon {
margin-left: 8px; margin-left: 8px;
} }
.flowDescIcon { .flowDescIcon {
margin-left: 8px; margin-left: 8px;
} }
.formItems { .formItems {
padding: 20px 44px 40px 44px; padding: 16px 24px 4px;
} }
.formItem { .formItem {
margin-bottom: 20px; margin-bottom: 20px;
} }
.fileSelectImg { .fileSelectImg {
cursor: pointer; cursor: pointer;
} }
.formItemLable { .formItemLable {
margin-bottom: 12px; margin-bottom: 12px;
font-size: 14px; font-size: 14px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
line-height: 22px; line-height: 22px;
font-weight: 600; font-weight: 600;
} }
.required::after { .required::after {
content: "*"; content: "*";
color: red; color: red;
margin-left: 3px; margin-left: 3px;
} }
.taskConfigBox { .taskConfigBox {
padding: 24px 44px 40px 44px; padding: 16px 24px 4px;
} }
.flowTitle { .flowTitle {
line-height: 16px; line-height: 16px;
margin: 3px 0 27px; margin: 3px 0 27px;
color: rgba(30, 38, 51, 1); color: rgba(19, 112, 255, 1);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
border-left: 3px solid rgba(19, 112, 255, 1); border-left: 3px solid rgba(19, 112, 255, 1);
padding-left: 3px; padding-left: 3px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 8px;
} }
.parameter { .parameter {
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
} }
.parameterTitle { .parameterTitle {
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 22px; line-height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.parameterContent { .parameterContent {
position: relative; position: relative;
} }
.parameterDesc { .parameterDesc {
position: absolute; position: absolute;
top: 12px; top: 12px;
right: -22px; right: -22px;
} }
.parameterDataType { .parameterDataType {
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
margin-left: 16px; margin-left: 16px;
} }
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 41e296fd
...@@ -215,18 +215,17 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -215,18 +215,17 @@ const ConfigForm = (props: ConfigFormProps) => {
</div> </div>
<MyTooltip title={parameter.description} placement="right"> <MyTooltip title={parameter.description} placement="right">
<div className={styles.parameterContent}> <div className={styles.parameterContent}>
{parameter.domType.toLowerCase() === "file" && ( {(parameter.domType || "").toLowerCase() === "file" && (
<MyInput <MyInput
onFocus={() => setSelectedBatchNodeId(batchId || "")} onClick={() => {
onBlur={() => setSelectedBatchNodeId("")} setSelectedBatchNodeId(batchId || "");
setFileSelectType("file");
handleOpenFileSelect(taskId, parameter.name);
}}
value={parameter.value || ""} value={parameter.value || ""}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<img <img
onClick={() => {
setFileSelectType("file");
handleOpenFileSelect(taskId, parameter.name);
}}
src={fileSelectIcon} src={fileSelectIcon}
alt="" alt=""
className={styles.fileSelectImg} className={styles.fileSelectImg}
...@@ -239,18 +238,17 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -239,18 +238,17 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium" size="medium"
></MyInput> ></MyInput>
)} )}
{parameter.domType.toLowerCase() === "path" && ( {(parameter.domType || "").toLowerCase() === "path" && (
<MyInput <MyInput
onFocus={() => setSelectedBatchNodeId(batchId || "")} onClick={() => {
onBlur={() => setSelectedBatchNodeId("")} setSelectedBatchNodeId(batchId || "");
setFileSelectType("path");
handleOpenFileSelect(taskId, parameter.name);
}}
value={parameter.value || ""} value={parameter.value || ""}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<img <img
onClick={() => {
setFileSelectType("path");
handleOpenFileSelect(taskId, parameter.name);
}}
src={fileSelectIcon} src={fileSelectIcon}
alt="" alt=""
className={styles.fileSelectImg} className={styles.fileSelectImg}
...@@ -263,18 +261,17 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -263,18 +261,17 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium" size="medium"
></MyInput> ></MyInput>
)} )}
{parameter.domType.toLowerCase() === "dataset" && ( {(parameter.domType || "").toLowerCase() === "dataset" && (
<MyInput <MyInput
onFocus={() => setSelectedBatchNodeId(taskId)} onClick={() => {
onBlur={() => setSelectedBatchNodeId("")} setSelectedBatchNodeId(taskId);
setFileSelectType("dataset");
handleOpenFileSelect(taskId, parameter.name);
}}
value={parameter.value || ""} value={parameter.value || ""}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<img <img
onClick={() => {
setFileSelectType("dataset");
handleOpenFileSelect(taskId, parameter.name);
}}
src={fileSelectIcon} src={fileSelectIcon}
alt="" alt=""
className={styles.fileSelectImg} className={styles.fileSelectImg}
...@@ -287,7 +284,7 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -287,7 +284,7 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium" size="medium"
></MyInput> ></MyInput>
)} )}
{parameter.domType.toLowerCase() === "input" && ( {(parameter.domType || "").toLowerCase() === "input" && (
<MyInput <MyInput
onFocus={() => { onFocus={() => {
setSelectedBatchNodeId(batchId || ""); setSelectedBatchNodeId(batchId || "");
...@@ -304,7 +301,7 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -304,7 +301,7 @@ const ConfigForm = (props: ConfigFormProps) => {
size="medium" size="medium"
></MyInput> ></MyInput>
)} )}
{parameter.domType.toLowerCase() === "select" && ( {(parameter.domType || "").toLowerCase() === "select" && (
<MySelect <MySelect
onFocus={() => setSelectedBatchNodeId(batchId || "")} onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")} onBlur={() => setSelectedBatchNodeId("")}
...@@ -326,7 +323,8 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -326,7 +323,8 @@ const ConfigForm = (props: ConfigFormProps) => {
fullWidth fullWidth
></MySelect> ></MySelect>
)} )}
{parameter.domType.toLowerCase() === "multipleselect" && ( {(parameter.domType || "").toLowerCase() ===
"multipleselect" && (
<MySelect <MySelect
onFocus={() => setSelectedBatchNodeId(batchId || "")} onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")} onBlur={() => setSelectedBatchNodeId("")}
...@@ -349,7 +347,7 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -349,7 +347,7 @@ const ConfigForm = (props: ConfigFormProps) => {
fullWidth fullWidth
></MySelect> ></MySelect>
)} )}
{parameter.domType.toLowerCase() === "radio" && ( {(parameter.domType || "").toLowerCase() === "radio" && (
<MyRadio <MyRadio
value={parameter.value} value={parameter.value}
onChange={(e: any) => onChange={(e: any) =>
...@@ -362,7 +360,7 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -362,7 +360,7 @@ const ConfigForm = (props: ConfigFormProps) => {
helperText={parameter.helperText} helperText={parameter.helperText}
></MyRadio> ></MyRadio>
)} )}
{parameter.domType.toLowerCase() === "checkbox" && ( {(parameter.domType || "").toLowerCase() === "checkbox" && (
<MyCheckBox <MyCheckBox
value={parameter.value} value={parameter.value}
onChange={(e: any) => onChange={(e: any) =>
...@@ -398,83 +396,83 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -398,83 +396,83 @@ const ConfigForm = (props: ConfigFormProps) => {
{templateConfigInfo?.description || ""} {templateConfigInfo?.description || ""}
</div> </div>
</div> </div>
<div <div className={styles.formItemBox}>
className={classnames({ <div
[styles.backgroundTitle]: true, className={classnames({
[styles.backgroundTitlePass]: true, [styles.backgroundTitle]: true,
})} })}
> >
<img src="" alt="" /> <span className={styles.backgroundTitleText}>基础信息</span>
<span className={styles.backgroundTitleText}>基础信息</span> <img
</div>
<div className={styles.formItems}>
<div className={styles.formItem}>
<div
className={classnames({ className={classnames({
[styles.formItemLable]: true, [styles.backgroundTitleTextIcon]: true,
[styles.required]: true, [styles.backgroundTitleTextIconShow]: !nameHelp.error,
})} })}
> src={jobSueIcon}
任务名称 alt=""
</div> />
<div className={styles.formItem}>
<MyInput
value={name}
onChange={handleNameChange}
placeholder="请输入任务名称"
error={nameHelp.error}
helperText={nameHelp.helperText}
></MyInput>
</div>
</div> </div>
<div className={styles.formItem}> <div className={styles.formItems}>
<div <div className={styles.formItem}>
className={classnames({ <div
[styles.formItemLable]: true, className={classnames({
[styles.required]: true, [styles.formItemLable]: true,
})} [styles.required]: true,
> })}
输出路径 >
任务名称
</div>
<div className={styles.formItem}>
<MyInput
value={name}
onChange={handleNameChange}
placeholder="请输入任务名称"
error={nameHelp.error}
helperText={nameHelp.helperText}
></MyInput>
</div>
</div> </div>
<div className={styles.formItem}> <div className={styles.formItem}>
<MyInput <div
value={outputPath || ""} className={classnames({
InputProps={{ [styles.formItemLable]: true,
endAdornment: ( [styles.required]: true,
<img })}
onClick={() => { >
setFileSelectType("path"); 输出路径
handleOpenFileSelect(); </div>
}} <div className={styles.formItem}>
src={fileSelectIcon} <MyInput
alt="选择输出路径" value={outputPath || ""}
className={styles.fileSelectImg} onClick={() => {
/> setSelectedBatchNodeId("");
), setFileSelectType("path");
}} handleOpenFileSelect();
error={outputPathHelp.error} }}
helperText={outputPathHelp.helperText} InputProps={{
></MyInput> endAdornment: (
<img
src={fileSelectIcon}
alt="选择输出路径"
className={styles.fileSelectImg}
/>
),
}}
error={outputPathHelp.error}
helperText={outputPathHelp.helperText}
></MyInput>
</div>
</div> </div>
</div> </div>
</div> </div>
{renderTasks.map((task, taskIndex) => { {renderTasks.map((task, taskIndex) => {
return ( return (
<div className={styles.taskBox} key={task.id + taskIndex}> <div className={styles.formItemBox} key={task.id + taskIndex}>
<div <div
className={classnames({ className={classnames({
[styles.backgroundTitle]: true, [styles.backgroundTitle]: true,
[styles.backgroundTitlePass]: true,
})} })}
> >
<img
className={classnames({
[styles.backgroundTitleTextIcon]: true,
[styles.backgroundTitleTextIconShow]: task.isCheck,
})}
src={jobSueIcon}
alt=""
/>
<span <span
id={`point${task.id}`} id={`point${task.id}`}
className={styles.backgroundTitleText} className={styles.backgroundTitleText}
...@@ -486,10 +484,25 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -486,10 +484,25 @@ const ConfigForm = (props: ConfigFormProps) => {
<img className={styles.taskDescIcon} src={tipsIcon} alt="" /> <img className={styles.taskDescIcon} src={tipsIcon} alt="" />
</MyTooltip> </MyTooltip>
)} )}
<img
className={classnames({
[styles.backgroundTitleTextIcon]: true,
[styles.backgroundTitleTextIconShow]: task.isCheck,
})}
src={jobSueIcon}
alt=""
/>
</div> </div>
<div className={styles.taskConfigBox}> <div className={styles.taskConfigBox}>
{randerParameters(task.parameters, task.id, task.id)} {randerParameters(task.parameters, task.id, task.id)}
{task.flows.map((flow) => { {task.flows.map((flow) => {
if (
flow.parameters.filter(
(parameter) => parameter.hidden === false
).length === 0
) {
return null;
}
return ( return (
<div className={styles.flowConfigBox} key={flow.id}> <div className={styles.flowConfigBox} key={flow.id}>
<div className={styles.flowTitle}> <div className={styles.flowTitle}>
......
src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
View file @ 41e296fd
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 15:25:25 * @Date: 2022-06-21 15:25:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-12 14:09:20 * @LastEditTime: 2022-08-09 16:07:33
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { useEffect } from "react";
import Flow from "../../components/Flow"; import Flow from "../../components/Flow";
import { ITemplateConfig } from "../interface"; import { ITemplateConfig } from "../interface";
...@@ -17,6 +18,21 @@ interface IProps { ...@@ -17,6 +18,21 @@ interface IProps {
const WorkFlow = (props: IProps) => { const WorkFlow = (props: IProps) => {
const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } = const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } =
props; props;
/** 页面刷新提醒 */
const pageRefreshTips = (e: any) => {
const event: any = window.event || e;
event.returnValue = "是否离开网站？";
};
/** 监听页面刷新事件 */
useEffect(() => {
window.addEventListener("beforeunload", pageRefreshTips, false);
return () => {
window.removeEventListener("beforeunload", pageRefreshTips, false);
};
});
return ( return (
<Flow <Flow
tasks={templateConfigInfo?.tasks} tasks={templateConfigInfo?.tasks}
......
src/views/Project/ProjectSubmitWork/index.module.css
View file @ 41e296fd
...@@ -30,13 +30,14 @@ ...@@ -30,13 +30,14 @@
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-weight: 600; font-weight: 700;
padding-right: 20px; padding-right: 20px;
border-right: 1px solid rgba(235, 237, 240, 1); border-right: 1px solid rgba(209, 214, 222, 1);
} }
.swHeaderLable { .swHeaderLable {
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
font-size: 12px; font-size: 12px;
line-height: 22px;
} }
.swHeaderValue { .swHeaderValue {
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 41e296fd
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-20 15:00:18 * @LastEditTime: 2022-08-08 16:41:20
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -70,16 +70,16 @@ const ProjectSubmitWork = observer(() => { ...@@ -70,16 +70,16 @@ const ProjectSubmitWork = observer(() => {
let value: any = undefined; let value: any = undefined;
if (parameter.defaultValue) { if (parameter.defaultValue) {
if ( if (
parameter.domType.toLowerCase() === "multipleselect" || (parameter.domType || "").toLowerCase() === "multipleselect" ||
parameter.domType.toLowerCase() === "checkbox" (parameter.domType || "").toLowerCase() === "checkbox"
) { ) {
value = parameter.defaultValue.split(","); value = parameter.defaultValue.split(",");
} else { } else {
value = parameter.defaultValue; value = parameter.defaultValue;
} }
} else if ( } else if (
parameter.domType.toLowerCase() === "multipleselect" || (parameter.domType || "").toLowerCase() === "multipleselect" ||
parameter.domType.toLowerCase() === "checkbox" (parameter.domType || "").toLowerCase() === "checkbox"
) { ) {
value = []; value = [];
} else { } else {
...@@ -179,9 +179,9 @@ const ProjectSubmitWork = observer(() => { ...@@ -179,9 +179,9 @@ const ProjectSubmitWork = observer(() => {
value = parameter.value; value = parameter.value;
} }
if ( if (
parameter.domType.toLowerCase() === "path" || (parameter.domType || "").toLowerCase() === "path" ||
parameter.domType.toLowerCase() === "dataset" || (parameter.domType || "").toLowerCase() === "dataset" ||
parameter.domType.toLowerCase() === "file" (parameter.domType || "").toLowerCase() === "file"
) { ) {
value = `/${value}`; value = `/${value}`;
} }
...@@ -240,8 +240,8 @@ const ProjectSubmitWork = observer(() => { ...@@ -240,8 +240,8 @@ const ProjectSubmitWork = observer(() => {
<ArrowBackIosNewIcon <ArrowBackIosNewIcon
sx={{ sx={{
color: "rgba(194, 198, 204, 1)", color: "rgba(194, 198, 204, 1)",
width: "12px", width: "14px",
height: "12px", height: "14px",
}} }}
/> />
</IconButton> </IconButton>
...@@ -258,8 +258,8 @@ const ProjectSubmitWork = observer(() => { ...@@ -258,8 +258,8 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.swTemplateUpdateTimeBox}> <div className={styles.swTemplateUpdateTimeBox}>
<span className={styles.swHeaderLable}>更新时间：</span> <span className={styles.swHeaderLable}>更新时间：</span>
<span className={styles.swHeaderValue}> <span className={styles.swHeaderValue}>
{templateConfigInfo?.updateTime {templateConfigInfo?.updatedTime
? moment(templateConfigInfo?.updateTime).format( ? moment(templateConfigInfo?.updatedTime).format(
"YYYY-MM-DD HH:mm:ss" "YYYY-MM-DD HH:mm:ss"
) )
: "-"} : "-"}
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 41e296fd
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-12 11:51:17 * @LastEditTime: 2022-08-08 15:55:45
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -56,7 +56,7 @@ export interface ITask { ...@@ -56,7 +56,7 @@ export interface ITask {
export interface ITemplateConfig { // 模板信息 export interface ITemplateConfig { // 模板信息
title: string; // 标题 title: string; // 标题
version: string; // 版本 version: string; // 版本
updateTime?: string; // 更新时间 updatedTime?: string; // 更新时间
description: string; // 模板描述 description: string; // 模板描述
language: string; language: string;
languageVersion: string; languageVersion: string;
......
src/views/Project/ProjectWorkbench/workbenchList/index.module.css
View file @ 41e296fd
...@@ -60,9 +60,10 @@ ...@@ -60,9 +60,10 @@
.tabBoxTime { .tabBoxTime {
font-size: 12px; font-size: 12px;
line-height: 20px;
font-weight: 400; font-weight: 400;
color: #565C66; color: #565C66;
margin-left: 4px; margin-left: 8px;
} }
.tabBoxMiddle { .tabBoxMiddle {
...@@ -82,9 +83,10 @@ ...@@ -82,9 +83,10 @@
.tabBoxStatusText { .tabBoxStatusText {
font-size: 12px; font-size: 12px;
line-height: 20px;
font-weight: 400; font-weight: 400;
color: #1E2633; color: #1E2633;
margin: 0px 16px 0px 6px; margin: 0px 16px 0px 8px;
white-space: nowrap; white-space: nowrap;
} }
......
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 41e296fd
...@@ -69,7 +69,7 @@ const currencies = [ ...@@ -69,7 +69,7 @@ const currencies = [
let timer: string | number | NodeJS.Timeout | null | undefined = null; let timer: string | number | NodeJS.Timeout | null | undefined = null;
const ProjectMembers = observer(() => { const ProjectMembers = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id); const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const isPass = usePass(); const isPass = usePass();
const [jobName, setJobName] = useState(""); const [jobName, setJobName] = useState("");
...@@ -79,7 +79,7 @@ const ProjectMembers = observer(() => { ...@@ -79,7 +79,7 @@ const ProjectMembers = observer(() => {
const [size, setSize] = useState(10); const [size, setSize] = useState(10);
const [rowsPerPage, setRowsPerPage] = useState(10); const [rowsPerPage, setRowsPerPage] = useState(10);
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
const [loading,setLoading]=useState(false) const [loading, setLoading] = useState(false)
/** 简单弹窗 */ /** 简单弹窗 */
const [jobData, setJobData] = useState(""); const [jobData, setJobData] = useState("");
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false);
...@@ -209,6 +209,8 @@ const ProjectMembers = observer(() => { ...@@ -209,6 +209,8 @@ const ProjectMembers = observer(() => {
const renderStatusIcon = (data: string) => { const renderStatusIcon = (data: string) => {
switch (data) { switch (data) {
case "SUBMITTED":
return jobRun;
case "RUNNING": case "RUNNING":
return jobRun; return jobRun;
case "ABORTED": case "ABORTED":
...@@ -224,6 +226,8 @@ const ProjectMembers = observer(() => { ...@@ -224,6 +226,8 @@ const ProjectMembers = observer(() => {
const renderStatusText = (data: string) => { const renderStatusText = (data: string) => {
switch (data) { switch (data) {
case "SUBMITTED":
return "正在启动";
case "RUNNING": case "RUNNING":
return "正在运行"; return "正在运行";
case "ABORTED": case "ABORTED":
...@@ -240,6 +244,8 @@ const ProjectMembers = observer(() => { ...@@ -240,6 +244,8 @@ const ProjectMembers = observer(() => {
/** 渲染字体颜色 */ /** 渲染字体颜色 */
const renderTextColor = (data: any) => { const renderTextColor = (data: any) => {
switch (data) { switch (data) {
case "SUBMITTED":
return "#1370FF";
case "RUNNING": case "RUNNING":
return "#1370FF"; return "#1370FF";
case "ABORTED": case "ABORTED":
...@@ -256,6 +262,8 @@ const ProjectMembers = observer(() => { ...@@ -256,6 +262,8 @@ const ProjectMembers = observer(() => {
/** 渲染进度条颜色 */ /** 渲染进度条颜色 */
const renderProgressColor = useCallback((data: any) => { const renderProgressColor = useCallback((data: any) => {
switch (data) { switch (data) {
case "SUBMITTED":
return "info";
case "RUNNING": case "RUNNING":
return "info"; return "info";
case "ABORTED": case "ABORTED":
...@@ -273,7 +281,7 @@ const ProjectMembers = observer(() => { ...@@ -273,7 +281,7 @@ const ProjectMembers = observer(() => {
const rowClick = useCallback( const rowClick = useCallback(
(id: string) => { (id: string) => {
navigate(`/product/cadd/projectJobDetail`, { navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id }, state: { taskId: id, from: 'workbenchList' },
}); });
}, },
[navigate] [navigate]
...@@ -419,7 +427,7 @@ const ProjectMembers = observer(() => { ...@@ -419,7 +427,7 @@ const ProjectMembers = observer(() => {
/> />
</Box> </Box>
<div <div
style={{ color: renderTextColor(item.state) }} style={{ color: renderTextColor(item.state), margin: '0px' }}
className={styles.tabBoxStatusText} className={styles.tabBoxStatusText}
> >
{item.completeNum + "/" + item.totalNum} {item.completeNum + "/" + item.totalNum}
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css
View file @ 41e296fd
...@@ -2,21 +2,36 @@ ...@@ -2,21 +2,36 @@
flex: 1; flex: 1;
background-color: #fff; background-color: #fff;
border-radius: 16px 0 0 0; border-radius: 16px 0 0 0;
padding: 24px 32px; padding-top: 24px;
box-sizing: border-box; box-sizing: border-box;
}
.headerBox {
padding: 0 32px;
}
.headerBoxShadow {
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, .15);
}
.templateBox {
padding: 0 32px;
height: calc(100vh - 168px);
overflow: auto; overflow: auto;
} }
.templateList { .templateList {
/* height: 2000px; */ /* height: 2000px; */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.templateLi { .templateLi {
height: 146px; height: 170px;
box-sizing: border-box; box-sizing: border-box;
padding: 16px 20px; padding: 16px 20px;
cursor: pointer; /* cursor: pointer; */
border: 1px solid rgba(235, 237, 240, 1); border: 1px solid rgba(235, 237, 240, 1);
border-radius: 4px; border-radius: 4px;
min-width: 20%; min-width: 20%;
...@@ -24,37 +39,45 @@ ...@@ -24,37 +39,45 @@
margin-right: 16px; margin-right: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.templateLiCustom { .templateLiCustom {
height: 194px; height: 170px;
} }
.templateLiHidden { .templateLiHidden {
visibility: hidden; visibility: hidden;
} }
.addCustomTemplate { .addCustomTemplate {
height: 194px; height: 170px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.addCustomTemplateText { .addCustomTemplateText {
margin-top: 12px; margin-top: 12px;
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
} }
.templateLi:hover { .templateLi:hover {
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08); box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
} }
.templateLi:nth-child(4n) { .templateLi:nth-child(4n) {
margin-right: 0; margin-right: 0;
} }
.templateLiTop { .templateLiTop {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.templateTitle { .templateTitle {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
...@@ -64,14 +87,17 @@ ...@@ -64,14 +87,17 @@
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 22px; line-height: 22px;
} }
.templateLiInfo { .templateLiInfo {
margin-bottom: 8px; margin-bottom: 8px;
} }
.templateLiInfoText { .templateLiInfoText {
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 12px;
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
} }
.templateLiDesc { .templateLiDesc {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -82,8 +108,9 @@ ...@@ -82,8 +108,9 @@
font-size: 12px; font-size: 12px;
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
} }
.templateLiEditBox { .templateLiEditBox {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: 16px; /* margin-top: 16px; */
} }
src/views/Project/components/Flow/components/BatchNode/index.module.css
View file @ 41e296fd
...@@ -39,3 +39,12 @@ ...@@ -39,3 +39,12 @@
.batchRotate { .batchRotate {
transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg);
} }
.handleBox::before{
content: "";
position: absolute;
left: -4px;
top: -4px;
width: 14px;
height: 14px;
}
src/views/Project/components/Flow/index.tsx
View file @ 41e296fd
This diff is collapsed.
src/views/WorkFlowEdit/index.tsx
View file @ 41e296fd
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