Skip to content

B
bkunyun
Commit 41c6abca authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20220801' into 'release' 

Feat 20220801

See merge request !45
parents b4521080 a426fddc
Hide whitespace changes
Inline Side-by-side
Showing with 659 additions and 335 deletions
src/components/CommonComponents/FullScreenDrawer/index.module.css
View file @ 41c6abca
......@@ -8,13 +8,10 @@
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
animation: showBG 0.31s ease;
-webkit-animation: showBG 0.31s ease;
}
.drawerBoxHidden {
animation: hiddenBG 0.31s ease;
-webkit-animation: hiddenBG 0.31s ease;
}
.closeBox {
display: flex;
justify-content: flex-end;
......@@ -23,13 +20,6 @@
position: fixed;
top: 0;
left: 0;
align-items: center;
animation: showClose 0.31s ease;
-webkit-animation: showClose 0.31s ease;
}
.closeBoxHidden {
animation: hiddenClose 0.31s ease;
-webkit-animation: hiddenClose 0.31s ease;
}
.closeiIcon {
position: absolute;
......@@ -44,17 +34,14 @@
position: fixed;
top: 40px;
left: 0;
right: 0;
background-color: #fff;
border-radius: 16px 0 0 0;
/* padding: 24px 32px; */
box-sizing: border-box;
overflow: scroll;
animation: showDrawer 0.31s ease;
-webkit-animation: showDrawer 0.31s ease;
}
.contentBoxHidden {
animation: hiddenDrawer 0.31s ease;
-webkit-animation: hiddenDrawer 0.31s ease;
margin: 0 auto;
}
@keyframes showBG {
......@@ -66,47 +53,15 @@
}
}
@keyframes hiddenBG {
from {
background-color: rgba(0, 0, 0, 0.78);
}
to {
background-color: rgba(0, 0, 0, 0);
}
}
@keyframes showClose {
from {
top: calc(100% - 40px);
}
to {
top: 0px;
}
}
@keyframes hiddenClose {
from {
top: 0px;
}
to {
top: calc(100% - 40px);
}
}
@keyframes showDrawer {
from {
top: 100%;
top: 160px;
width: calc(100vw - 28px);
opacity: 0;
}
to {
top: 40px;
}
}
@keyframes hiddenDrawer {
from {
top: 40px;
}
to {
top: 100%;
width: 100vw;
opacity: 1;
}
}
src/components/CommonComponents/FullScreenDrawer/index.tsx
View file @ 41c6abca
// 从下往上弹的全屏抽屉
import { useState } from "react";
// import { useState } from "react";
import style from "./index.module.css";
import classNames from "classnames";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
......@@ -7,30 +7,25 @@ import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
type IFullScreenDrawerProps = {
children: React.ReactNode;
handleClose: any;
zIndex?: any;
};
const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
const { children, handleClose } = props;
const [closeing, setCloseing] = useState(false);
const handleReadyToClose = () => {
setCloseing(true);
setTimeout(() => {
setCloseing(false);
handleClose();
}, 300);
handleClose();
};
return (
<div
className={classNames({
[style.drawerBox]: true,
[style.drawerBoxHidden]: closeing,
})}
style={{ zIndex: props.zIndex }}
>
<div
className={classNames({
[style.closeBox]: true,
[style.closeBoxHidden]: closeing,
})}
>
<CloseOutlinedIcon
......@@ -41,7 +36,6 @@ const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
<div
className={classNames({
[style.contentBox]: true,
[style.contentBoxHidden]: closeing,
})}
>
{children}
......
src/utils/util.ts
View file @ 41c6abca
......@@ -113,3 +113,16 @@ export const getUrlThroughParams = (params: any, encodeArr: Array<string> = [],
})
return url
}
// 判断上拉滚动是否需要加载 scrollLoaderThreshold 加载阈值 如0.25表示 离底部四分之一高度（包裹盒子的高）触发加载
export const getScrollLoader = (e: any, scrollLoaderThreshold: number = 0.25) => {
const clientHeight = e.target.clientHeight; // 滚动的外层盒子高度
const scrollHeight = e.target.scrollHeight; // 列表总高度
const scrollTop = e.target.scrollTop; // 滚动的高度
if (scrollTop + clientHeight * (1+scrollLoaderThreshold)> scrollHeight) {
return true
} else {
return false
}
}
\ No newline at end of file
src/views/CustomOperator/components/OperatorList/index.module.css 0 → 100644
View file @ 41c6abca
.operatorList {
width: 226px;
height: calc(100% - 40px);
position: absolute;
top: 16px;
left: 16px;
background-color: #fff;
z-index: 10;
}
.searchBox {
height: 54px;
border-bottom: 1px solid rgba(240, 242, 245, 1);
box-sizing: border-box;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.searchButton {
width: 22px;
height: 22px;
}
.searchIcon {
color: #999999;
}
.searchInput {
margin: 0 6px;
flex: 1;
color: #1e2633;
font-size: 14px;
line-height: 22px;
}
.list {
height: calc(100% - 55px);
overflow-y: auto;
padding: 15px 20px;
box-sizing: border-box;
}
.li {
background-color: RGBA(240, 242, 245, 1);
padding: 7px 7px 7px 28px;
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
margin-bottom: 12px;
position: relative;
}
.name {
margin-right: 8px;
}
.icon {
width: 6px;
height: 10px;
position: absolute;
top: 13px;
left: 9px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.iconLi {
display: flex;
justify-content: space-between;
}
.iconItem {
width: 2px;
height: 2px;
background-color: rgba(86, 92, 102, 1);
}
src/views/CustomOperator/components/OperatorList/index.tsx 0 → 100644
View file @ 41c6abca
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import styles from "./index.module.css";
import { getScrollLoader } from "@/utils/util";
import { useState } from "react";
const OperatorList = () => {
const [name, setName] = useState("");
const nameChange = (e: any) => {
setName(e.target.value);
};
const list = [
{
name: "这是中文",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
{
name: "asdf",
version: "1.0.0",
},
];
window.onscroll = (e) => {
console.log(e);
};
const handleScroll = (e: any) => {
console.log(e);
if (getScrollLoader(e)) {
console.log("加载");
}
};
const randerIcon = () => {
return (
<div className={styles.icon}>
<div className={styles.iconLi}>
<div className={styles.iconItem}></div>
<div className={styles.iconItem}></div>
</div>
<div className={styles.iconLi}>
<div className={styles.iconItem}></div>
<div className={styles.iconItem}></div>
</div>
<div className={styles.iconLi}>
<div className={styles.iconItem}></div>
<div className={styles.iconItem}></div>
</div>
</div>
);
};
return (
<div className={styles.operatorList}>
<div className={styles.searchBox}>
<IconButton
type="submit"
className={styles.searchButton}
aria-label="search"
>
<SearchIcon
className={styles.searchIcon}
style={{ color: "rgba(153, 153, 153, 1)" }}
/>
</IconButton>
<InputBase
className={styles.searchInput}
placeholder="请输入算子名称"
value={name}
onChange={nameChange}
/>
</div>
<div className={styles.list} onScroll={(e) => handleScroll(e)}>
{list.map((item, index) => {
return (
<div key={index} className={styles.li}>
{randerIcon()}
<span className={styles.name}>{item.name}</span>
<span className={styles.version}>{item.version}</span>
</div>
);
})}
</div>
</div>
);
};
export default OperatorList;
src/views/CustomOperator/index.module.css 0 → 100644
View file @ 41c6abca
.customOperator {
padding: 4px 32px 24px;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.coTop {
display: flex;
justify-content: space-between;
padding: 17px 0;
}
.coTitle {
color: rgba(30, 38, 51, 1);
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
.coContent {
flex: 1;
background-color: RGBA(247, 248, 250, 1);
position: relative;
}
src/views/CustomOperator/index.tsx 0 → 100644
View file @ 41c6abca
import React, { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import MyButton from "@/components/mui/MyButton";
import OperatorList from "./components/OperatorList";
import Flow from "../Project/components/Flow";
import styles from "./index.module.css";
type IProps = {
setShowCustomOperator: any;
};
const CustomOperator = observer((props: IProps) => {
const { setShowCustomOperator } = props;
// const [showCustomOperator, setShowCustomOperator] = useState(false);
return (
<FullScreenDrawer handleClose={setShowCustomOperator} zIndex={1100}>
<div className={styles.customOperator}>
<div className={styles.coTop}>
<div className={styles.coTitle}>添加算子</div>
<MyButton text="添加"></MyButton>
</div>
<div className={styles.coContent}>
<OperatorList />
<Flow
showControls={false}
// tasks={templateConfigInfo}
// setTasks={setTemplateConfigInfo}
type="edit"
// onFlowNodeClick={handleNodeClick}
// ListenState={!saveFormDialog}
/>
</div>
</div>
</FullScreenDrawer>
);
});
export default CustomOperator;
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 41c6abca
......@@ -53,7 +53,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
useEffect(() => {
setTimeout(() => {
setShowAnimation(false);
}, 1000);
}, 300);
}, []);
const isCadd = useMemo(() => {
......
src/views/Project/ProjectJobDetail/index.module.css
View file @ 41c6abca
......@@ -6,7 +6,7 @@
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
overflow-y: auto;
}
.swHeader {
z-index: 1001;
......
src/views/Project/ProjectSubmitWork/index.module.css
View file @ 41c6abca
.swBox {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: auto;
}
.swHeader {
z-index: 1001;
position: sticky;
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 1001;
position: sticky;
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.swHeaderLeft {
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
align-items: center;
}
.swTemplateTitle {
margin: 0 19px 0 8px;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 600;
padding-right: 20px;
border-right: 1px solid rgba(235, 237, 240, 1);
margin: 0 19px 0 8px;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 600;
padding-right: 20px;
border-right: 1px solid rgba(235, 237, 240, 1);
}
.swHeaderLable {
color: rgba(138, 144, 153, 1);
font-size: 12px;
color: rgba(138, 144, 153, 1);
font-size: 12px;
}
.swHeaderValue {
color: rgba(30, 38, 51, 1);
font-size: 12px;
margin-right: 24px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
margin-right: 24px;
}
.swContent {
display: flex;
height: calc(100vh - 56px);
display: flex;
height: calc(100vh - 56px);
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 608px;
overflow-y: scroll;
box-sizing: border-box;
padding: 36px;
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 608px;
overflow-y: scroll;
box-sizing: border-box;
padding: 36px;
}
.swFlowBox {
flex: 1;
height: calc(100vh - 56px);
flex: 1;
height: calc(100vh - 56px);
}
.fullScreenBox {
position: absolute;
background-color: #fff;
cursor: pointer;
z-index: 1000;
right: 24px;
bottom: 24px;
padding: 8px;
position: absolute;
background-color: #fff;
cursor: pointer;
z-index: 1000;
right: 24px;
bottom: 24px;
padding: 8px;
}
.fullScreenBox:hover {
opacity: 0.6;
}
\ No newline at end of file
opacity: 0.6;
}
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 41c6abca
......@@ -11,7 +11,6 @@ import Checkbox from "@mui/material/Checkbox";
import useMyRequest from "@/hooks/useMyRequest";
import AddIcon from "@mui/icons-material/Add";
import WorkFlowEdit from "@/views/WorkFlowEdit";
import _ from "lodash";
import noData from "../../../../../../assets/project/noTemplate.svg";
import { ICustomTemplate } from "../../interface";
import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx deleted 100644 → 0
View file @ b4521080
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import MyButton from "@/components/mui/MyButton";
import OutlinedInput from "@mui/material/OutlinedInput";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SearchIcon from "@mui/icons-material/Search";
import Checkbox from "@mui/material/Checkbox";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
import noData from "../../../../../assets/project/noTemplate.svg";
import _ from "lodash";
const AddTemplate = (props: any) => {
const {
openAddTemplate,
closeAddTemplateBlock,
addTemplateList,
templateSelectCallback,
selectTemplateData,
addTemplateCallback,
searchTemplateNameCallback,
} = props;
const [templateType, setTemplateType] = useState("public");
const radioOptions = [
{
value: "public",
label: "公共",
},
{
value: "custom",
label: "自定义",
},
];
const handleRadio = (value: string) => {
setTemplateType(value);
};
return (
<Box
className={styles.addTemplateMask}
sx={{ display: openAddTemplate ? "flex" : "none" }}
>
<Box sx={{ height: "50px", display: "flex", alignItems: "center" }}>
<CloseOutlinedIcon
sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
onClick={() => {
closeAddTemplateBlock();
}}
/>
</Box>
<Box className={styles.addTemplateBlock}>
<Box sx={{ padding: "24px 32px" }}>
<Typography
sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
>
添加工作流模版
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
}}
>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
searchTemplateNameCallback(e.target.value);
}, 200)();
}}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32, marginTop: "20px" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
}}
>
<RadioGroupOfButtonStyle
value={templateType}
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<MyButton
onClick={addTemplateCallback}
size={"small"}
style={{
marginLeft: "12px",
}}
text={
"添加模版" +
(selectTemplateData.length === 0
? ""
: `(${selectTemplateData.length})`)
}
/>
</Box>
</Box>
{addTemplateList.length === 0 && (
<Box
sx={{
display: "flex",
alignItems: "center",
flexDirection: "column",
minHeight: "calc(100vh - 376px)",
justifyContent: "center",
}}
>
<img alt="" src={noData} />
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
>
暂无相关模版
</Typography>
</Box>
)}
<Box
sx={{
display: "flex",
flexWrap: "wrap",
overflowX: "hidden",
overflowY: "overlay",
marginLeft: "-8px",
}}
>
{addTemplateList.map((item: any, key: any) => {
return (
<Box
className={styles.addTemplateBox}
onClick={() => {
templateSelectCallback(item.id);
}}
sx={{
border: selectTemplateData.includes(item.id)
? "1px solid #1370FF"
: "1px solid #EBEDF0;",
}}
key={item.id}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography
sx={{
fontSize: "14px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "4px",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{item.title}
</Typography>
<Checkbox
size="small"
sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)}
/>
</Box>
<Box sx={{ display: "flex", marginBottom: "8px" }}>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
marginRight: "24px",
}}
>
版本：{item.version}
</Typography>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
}}
>
更新时间：{item.updateTime}
</Typography>
</Box>
<Typography className={styles.templateDescText}>
{item.description}
</Typography>
</Box>
);
})}
</Box>
</Box>
</Box>
</Box>
);
};
export default memo(AddTemplate);
src/views/Project/components/AddProject/index.tsx
View file @ 41c6abca
......@@ -42,6 +42,7 @@ const AddProject = (props: IAddProjectProps) => {
});
const [zoneId, setZoneId] = useState("");
const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
const [loading, setLoading] = useState(false);
// 设置计算区
const { run } = useMyRequest(hpczone, {
......@@ -51,9 +52,13 @@ const AddProject = (props: IAddProjectProps) => {
},
});
const { run: addProjectRun } = useMyRequest(addProject, {
onBefore: () => {
setLoading(true);
},
onSuccess: async (result: any) => {
if (result.data) {
setAddOpen(false);
setLoading(false);
message.success("新建项目成功");
const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList);
......@@ -72,7 +77,7 @@ const AddProject = (props: IAddProjectProps) => {
}
},
onError: () => {
setAddOpen(false);
setLoading(false);
},
});
......@@ -84,6 +89,7 @@ const AddProject = (props: IAddProjectProps) => {
if (addOpen) {
setName("");
setDesc("");
setLoading(false);
if (zoneIdOptions.length > 0) {
setZoneId(zoneIdOptions[0].id);
}
......@@ -166,6 +172,7 @@ const AddProject = (props: IAddProjectProps) => {
onConfirm={handleSubmit}
onClose={() => setAddOpen(false)}
title="新建项目"
loading={loading}
>
<div className={style.formBox} onClick={handleFromBox}>
<MyInput
......
src/views/Project/components/Flow/index.tsx
View file @ 41c6abca
......@@ -42,6 +42,8 @@ interface IProps extends ReactFlowProps {
onFlowNodeClick?: (val: string) => void;
/** 监听事件的状态 */
ListenState?: boolean;
// 是否显示Controls（放大缩小全屏等按钮）
showControls?: boolean;
}
const Flow = (props: IProps) => {
......@@ -54,6 +56,7 @@ const Flow = (props: IProps) => {
setTasks,
onFlowNodeClick,
ListenState = true,
showControls = true,
...other
} = props;
/** 自定义的节点类型 */
......@@ -535,7 +538,7 @@ const Flow = (props: IProps) => {
onNodeClick={onNodeClick}
{...other}
>
<Controls />
{showControls && <Controls />}
<Background color="#aaa" gap={16} />
</ReactFlow>
);
......
src/views/Project/components/ProjectListPopper/index.tsx
View file @ 41c6abca
......@@ -14,7 +14,7 @@ const ProjectListPopper = observer((props: any) => {
const { handleChangeCurrentProject, handleClickOpen } = props;
const { currentProjectStore } = useStores();
const projectList = toJS(currentProjectStore.projectList);
const currentProjectName = toJS(currentProjectStore.currentProjectInfo.name);
const currentProjectId = toJS(currentProjectStore.currentProjectInfo.id);
// 通过名称本地搜索
const [name, setName] = useState("");
const nameChange = (e: any) => {
......@@ -66,7 +66,7 @@ const ProjectListPopper = observer((props: any) => {
<div
className={classNames({
[style.projectli]: true,
[style.projectliActive]: item.name === currentProjectName,
[style.projectliActive]: item.id === currentProjectId,
})}
key={item.id}
onClick={() => handleChangeCurrentProject(item)}
......
src/views/WorkFlowEdit/components/OperatorList/index.module.css
View file @ 41c6abca
......@@ -50,6 +50,7 @@
.listBox {
overflow-y: scroll;
height: calc(100% - 48px);
position: relative;
}
.versionBox {
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 41c6abca
......@@ -211,9 +211,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
const OperatorList = observer((props: IOperatorListProps) => {
const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const { templateConfigInfo, setTemplateConfigInfo } = props;
const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
const [keyword, setKeyword] = useState<string>("");
......
src/views/WorkFlowEdit/index.module.css
View file @ 41c6abca
......@@ -6,7 +6,7 @@
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
overflow-y: auto;
}
.swHeader {
z-index: 1001;
......@@ -36,6 +36,23 @@
height: 100%;
/* overflow-y: scroll; */
box-sizing: border-box;
position: relative;
}
.addOperator {
position: absolute;
right: 24px;
bottom: 20px;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
font-size: 30px;
line-height: 36px;
text-align: center;
color: RGBA(66, 141, 255, 1);
cursor: pointer;
background-color: #fff;
}
.swFlowBox {
flex: 1;
......
src/views/WorkFlowEdit/index.tsx
View file @ 41c6abca
......@@ -23,6 +23,7 @@ import { ITask } from "../Project/ProjectSubmitWork/interface";
import { fetchTemplateConfigInfo } from "@/api/project_api";
import { getCustomTemplateParameterCheckResult } from "./util";
import useMyRequest from "@/hooks/useMyRequest";
import CustomOperator from "../CustomOperator";
import SaveCustomTemplate from "./components/SaveCustomTemplate";
import styles from "./index.module.css";
......@@ -47,7 +48,7 @@ const WorkFlowEdit = observer((props: IProps) => {
const { onBack, id } = props;
const Message = useMessage();
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组
const [showCustomOperator, setShowCustomOperator] = useState(false); // 是否显示自定义算子
const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
const [title, setTitle] = useState(""); // 自定义模板名称
const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
......@@ -214,6 +215,12 @@ const WorkFlowEdit = observer((props: IProps) => {
taskId={selectTaskId || ""}
/>
)}
<div
className={styles.addOperator}
onClick={() => setShowCustomOperator(true)}
>
+
</div>
</div>
<div className={styles.swFlowBox} id="workFlowEditRight">
<Flow
......@@ -248,6 +255,11 @@ const WorkFlowEdit = observer((props: IProps) => {
oldversion={oldversion}
/>
)}
{showCustomOperator && (
<CustomOperator
setShowCustomOperator={() => setShowCustomOperator(false)}
/>
)}
</div>
);
});
......
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