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 @@ ...@@ -8,13 +8,10 @@
z-index: 100; z-index: 100;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
animation: showBG 0.31s ease; animation: showBG 0.31s ease;
-webkit-animation: showBG 0.31s ease; -webkit-animation: showBG 0.31s ease;
} }
.drawerBoxHidden {
animation: hiddenBG 0.31s ease;
-webkit-animation: hiddenBG 0.31s ease;
}
.closeBox { .closeBox {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
...@@ -23,13 +20,6 @@ ...@@ -23,13 +20,6 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 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 { .closeiIcon {
position: absolute; position: absolute;
...@@ -44,17 +34,14 @@ ...@@ -44,17 +34,14 @@
position: fixed; position: fixed;
top: 40px; top: 40px;
left: 0; left: 0;
right: 0;
background-color: #fff; background-color: #fff;
border-radius: 16px 0 0 0; border-radius: 16px 0 0 0;
/* padding: 24px 32px; */
box-sizing: border-box; box-sizing: border-box;
overflow: scroll; overflow: scroll;
animation: showDrawer 0.31s ease; animation: showDrawer 0.31s ease;
-webkit-animation: showDrawer 0.31s ease; -webkit-animation: showDrawer 0.31s ease;
} margin: 0 auto;
.contentBoxHidden {
animation: hiddenDrawer 0.31s ease;
-webkit-animation: hiddenDrawer 0.31s ease;
} }
@keyframes showBG { @keyframes showBG {
...@@ -66,47 +53,15 @@ ...@@ -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 { @keyframes showDrawer {
from { from {
top: 100%; top: 160px;
width: calc(100vw - 28px);
opacity: 0;
} }
to { to {
top: 40px; top: 40px;
} width: 100vw;
} opacity: 1;
@keyframes hiddenDrawer {
from {
top: 40px;
}
to {
top: 100%;
} }
} }
src/components/CommonComponents/FullScreenDrawer/index.tsx
View file @ 41c6abca
// 从下往上弹的全屏抽屉 // 从下往上弹的全屏抽屉
import { useState } from "react"; // import { useState } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
import classNames from "classnames"; import classNames from "classnames";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined"; import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
...@@ -7,30 +7,25 @@ import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined"; ...@@ -7,30 +7,25 @@ import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
type IFullScreenDrawerProps = { type IFullScreenDrawerProps = {
children: React.ReactNode; children: React.ReactNode;
handleClose: any; handleClose: any;
zIndex?: any;
}; };
const FullScreenDrawer = (props: IFullScreenDrawerProps) => { const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
const { children, handleClose } = props; const { children, handleClose } = props;
const [closeing, setCloseing] = useState(false);
const handleReadyToClose = () => { const handleReadyToClose = () => {
setCloseing(true); handleClose();
setTimeout(() => {
setCloseing(false);
handleClose();
}, 300);
}; };
return ( return (
<div <div
className={classNames({ className={classNames({
[style.drawerBox]: true, [style.drawerBox]: true,
[style.drawerBoxHidden]: closeing,
})} })}
style={{ zIndex: props.zIndex }}
> >
<div <div
className={classNames({ className={classNames({
[style.closeBox]: true, [style.closeBox]: true,
[style.closeBoxHidden]: closeing,
})} })}
> >
<CloseOutlinedIcon <CloseOutlinedIcon
...@@ -41,7 +36,6 @@ const FullScreenDrawer = (props: IFullScreenDrawerProps) => { ...@@ -41,7 +36,6 @@ const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
<div <div
className={classNames({ className={classNames({
[style.contentBox]: true, [style.contentBox]: true,
[style.contentBoxHidden]: closeing,
})} })}
> >
{children} {children}
......
src/utils/util.ts
View file @ 41c6abca
...@@ -113,3 +113,16 @@ export const getUrlThroughParams = (params: any, encodeArr: Array<string> = [], ...@@ -113,3 +113,16 @@ export const getUrlThroughParams = (params: any, encodeArr: Array<string> = [],
}) })
return url 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) => { ...@@ -53,7 +53,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setShowAnimation(false); setShowAnimation(false);
}, 1000); }, 300);
}, []); }, []);
const isCadd = useMemo(() => { const isCadd = useMemo(() => {
......
src/views/Project/ProjectJobDetail/index.module.css
View file @ 41c6abca
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: RGBA(247, 248, 250, 1); background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll; overflow-y: auto;
} }
.swHeader { .swHeader {
z-index: 1001; z-index: 1001;
......
src/views/Project/ProjectSubmitWork/index.module.css
View file @ 41c6abca
.swBox { .swBox {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: RGBA(247, 248, 250, 1); background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll; overflow-y: auto;
} }
.swHeader { .swHeader {
z-index: 1001; z-index: 1001;
position: sticky; position: sticky;
top: 0; top: 0;
height: 56px; height: 56px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04); box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 24px; padding: 0 24px;
} }
.swHeaderLeft { .swHeaderLeft {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.swTemplateTitle { .swTemplateTitle {
margin: 0 19px 0 8px; margin: 0 19px 0 8px;
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: 600;
padding-right: 20px; padding-right: 20px;
border-right: 1px solid rgba(235, 237, 240, 1); border-right: 1px solid rgba(235, 237, 240, 1);
} }
.swHeaderLable { .swHeaderLable {
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
font-size: 12px; font-size: 12px;
} }
.swHeaderValue { .swHeaderValue {
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 12px; font-size: 12px;
margin-right: 24px; margin-right: 24px;
} }
.swContent { .swContent {
display: flex; display: flex;
height: calc(100vh - 56px); height: calc(100vh - 56px);
} }
.swFormBox { .swFormBox {
background-color: #fff; background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1); border-right: 1xp solid rgba(235, 237, 240, 1);
width: 608px; width: 608px;
overflow-y: scroll; overflow-y: scroll;
box-sizing: border-box; box-sizing: border-box;
padding: 36px; padding: 36px;
} }
.swFlowBox { .swFlowBox {
flex: 1; flex: 1;
height: calc(100vh - 56px); height: calc(100vh - 56px);
} }
.fullScreenBox { .fullScreenBox {
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
z-index: 1000; z-index: 1000;
right: 24px; right: 24px;
bottom: 24px; bottom: 24px;
padding: 8px; padding: 8px;
} }
.fullScreenBox:hover { .fullScreenBox:hover {
opacity: 0.6; opacity: 0.6;
} }
\ No newline at end of file
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 41c6abca
...@@ -11,7 +11,6 @@ import Checkbox from "@mui/material/Checkbox"; ...@@ -11,7 +11,6 @@ import Checkbox from "@mui/material/Checkbox";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import AddIcon from "@mui/icons-material/Add"; import AddIcon from "@mui/icons-material/Add";
import WorkFlowEdit from "@/views/WorkFlowEdit"; import WorkFlowEdit from "@/views/WorkFlowEdit";
import _ from "lodash";
import noData from "../../../../../../assets/project/noTemplate.svg"; import noData from "../../../../../../assets/project/noTemplate.svg";
import { ICustomTemplate } from "../../interface"; import { ICustomTemplate } from "../../interface";
import { useMessage } from "@/components/MySnackbar"; 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) => { ...@@ -42,6 +42,7 @@ const AddProject = (props: IAddProjectProps) => {
}); });
const [zoneId, setZoneId] = useState(""); const [zoneId, setZoneId] = useState("");
const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]); const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
const [loading, setLoading] = useState(false);
// 设置计算区 // 设置计算区
const { run } = useMyRequest(hpczone, { const { run } = useMyRequest(hpczone, {
...@@ -51,9 +52,13 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -51,9 +52,13 @@ const AddProject = (props: IAddProjectProps) => {
}, },
}); });
const { run: addProjectRun } = useMyRequest(addProject, { const { run: addProjectRun } = useMyRequest(addProject, {
onBefore: () => {
setLoading(true);
},
onSuccess: async (result: any) => { onSuccess: async (result: any) => {
if (result.data) { if (result.data) {
setAddOpen(false); setAddOpen(false);
setLoading(false);
message.success("新建项目成功"); message.success("新建项目成功");
const projectList = await getProjectList(); const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList); currentProjectStore.setProjectList(projectList);
...@@ -72,7 +77,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -72,7 +77,7 @@ const AddProject = (props: IAddProjectProps) => {
} }
}, },
onError: () => { onError: () => {
setAddOpen(false); setLoading(false);
}, },
}); });
...@@ -84,6 +89,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -84,6 +89,7 @@ const AddProject = (props: IAddProjectProps) => {
if (addOpen) { if (addOpen) {
setName(""); setName("");
setDesc(""); setDesc("");
setLoading(false);
if (zoneIdOptions.length > 0) { if (zoneIdOptions.length > 0) {
setZoneId(zoneIdOptions[0].id); setZoneId(zoneIdOptions[0].id);
} }
...@@ -166,6 +172,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -166,6 +172,7 @@ const AddProject = (props: IAddProjectProps) => {
onConfirm={handleSubmit} onConfirm={handleSubmit}
onClose={() => setAddOpen(false)} onClose={() => setAddOpen(false)}
title="新建项目" title="新建项目"
loading={loading}
> >
<div className={style.formBox} onClick={handleFromBox}> <div className={style.formBox} onClick={handleFromBox}>
<MyInput <MyInput
......
src/views/Project/components/Flow/index.tsx
View file @ 41c6abca
...@@ -42,6 +42,8 @@ interface IProps extends ReactFlowProps { ...@@ -42,6 +42,8 @@ interface IProps extends ReactFlowProps {
onFlowNodeClick?: (val: string) => void; onFlowNodeClick?: (val: string) => void;
/** 监听事件的状态 */ /** 监听事件的状态 */
ListenState?: boolean; ListenState?: boolean;
// 是否显示Controls（放大缩小全屏等按钮）
showControls?: boolean;
} }
const Flow = (props: IProps) => { const Flow = (props: IProps) => {
...@@ -54,6 +56,7 @@ const Flow = (props: IProps) => { ...@@ -54,6 +56,7 @@ const Flow = (props: IProps) => {
setTasks, setTasks,
onFlowNodeClick, onFlowNodeClick,
ListenState = true, ListenState = true,
showControls = true,
...other ...other
} = props; } = props;
/** 自定义的节点类型 */ /** 自定义的节点类型 */
...@@ -535,7 +538,7 @@ const Flow = (props: IProps) => { ...@@ -535,7 +538,7 @@ const Flow = (props: IProps) => {
onNodeClick={onNodeClick} onNodeClick={onNodeClick}
{...other} {...other}
> >
<Controls /> {showControls && <Controls />}
<Background color="#aaa" gap={16} /> <Background color="#aaa" gap={16} />
</ReactFlow> </ReactFlow>
); );
......
src/views/Project/components/ProjectListPopper/index.tsx
View file @ 41c6abca
...@@ -14,7 +14,7 @@ const ProjectListPopper = observer((props: any) => { ...@@ -14,7 +14,7 @@ const ProjectListPopper = observer((props: any) => {
const { handleChangeCurrentProject, handleClickOpen } = props; const { handleChangeCurrentProject, handleClickOpen } = props;
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const projectList = toJS(currentProjectStore.projectList); const projectList = toJS(currentProjectStore.projectList);
const currentProjectName = toJS(currentProjectStore.currentProjectInfo.name); const currentProjectId = toJS(currentProjectStore.currentProjectInfo.id);
// 通过名称本地搜索 // 通过名称本地搜索
const [name, setName] = useState(""); const [name, setName] = useState("");
const nameChange = (e: any) => { const nameChange = (e: any) => {
...@@ -66,7 +66,7 @@ const ProjectListPopper = observer((props: any) => { ...@@ -66,7 +66,7 @@ const ProjectListPopper = observer((props: any) => {
<div <div
className={classNames({ className={classNames({
[style.projectli]: true, [style.projectli]: true,
[style.projectliActive]: item.name === currentProjectName, [style.projectliActive]: item.id === currentProjectId,
})} })}
key={item.id} key={item.id}
onClick={() => handleChangeCurrentProject(item)} onClick={() => handleChangeCurrentProject(item)}
......
src/views/WorkFlowEdit/components/OperatorList/index.module.css
View file @ 41c6abca
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
.listBox { .listBox {
overflow-y: scroll; overflow-y: scroll;
height: calc(100% - 48px); height: calc(100% - 48px);
position: relative;
} }
.versionBox { .versionBox {
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 41c6abca
...@@ -211,9 +211,7 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -211,9 +211,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
const OperatorList = observer((props: IOperatorListProps) => { const OperatorList = observer((props: IOperatorListProps) => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id); const productId = toJS(currentProjectStore.currentProductInfo.id);
const { templateConfigInfo, setTemplateConfigInfo } = props; const { templateConfigInfo, setTemplateConfigInfo } = props;
const [operatorListData, setOperatorListData] = useState<ITask[]>([]); const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
const [keyword, setKeyword] = useState<string>(""); const [keyword, setKeyword] = useState<string>("");
......
src/views/WorkFlowEdit/index.module.css
View file @ 41c6abca
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: RGBA(247, 248, 250, 1); background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll; overflow-y: auto;
} }
.swHeader { .swHeader {
z-index: 1001; z-index: 1001;
...@@ -36,6 +36,23 @@ ...@@ -36,6 +36,23 @@
height: 100%; height: 100%;
/* overflow-y: scroll; */ /* overflow-y: scroll; */
box-sizing: border-box; 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 { .swFlowBox {
flex: 1; flex: 1;
......
src/views/WorkFlowEdit/index.tsx
View file @ 41c6abca
...@@ -23,6 +23,7 @@ import { ITask } from "../Project/ProjectSubmitWork/interface"; ...@@ -23,6 +23,7 @@ import { ITask } from "../Project/ProjectSubmitWork/interface";
import { fetchTemplateConfigInfo } from "@/api/project_api"; import { fetchTemplateConfigInfo } from "@/api/project_api";
import { getCustomTemplateParameterCheckResult } from "./util"; import { getCustomTemplateParameterCheckResult } from "./util";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import CustomOperator from "../CustomOperator";
import SaveCustomTemplate from "./components/SaveCustomTemplate"; import SaveCustomTemplate from "./components/SaveCustomTemplate";
import styles from "./index.module.css"; import styles from "./index.module.css";
...@@ -47,7 +48,7 @@ const WorkFlowEdit = observer((props: IProps) => { ...@@ -47,7 +48,7 @@ const WorkFlowEdit = observer((props: IProps) => {
const { onBack, id } = props; const { onBack, id } = props;
const Message = useMessage(); const Message = useMessage();
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组 const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组
const [showCustomOperator, setShowCustomOperator] = useState(false); // 是否显示自定义算子
const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制 const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
const [title, setTitle] = useState(""); // 自定义模板名称 const [title, setTitle] = useState(""); // 自定义模板名称
const [version, setVersion] = useState("1.0.0"); // 自定义模板版本 const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
...@@ -214,6 +215,12 @@ const WorkFlowEdit = observer((props: IProps) => { ...@@ -214,6 +215,12 @@ const WorkFlowEdit = observer((props: IProps) => {
taskId={selectTaskId || ""} taskId={selectTaskId || ""}
/> />
)} )}
<div
className={styles.addOperator}
onClick={() => setShowCustomOperator(true)}
>
+
</div>
</div> </div>
<div className={styles.swFlowBox} id="workFlowEditRight"> <div className={styles.swFlowBox} id="workFlowEditRight">
<Flow <Flow
...@@ -248,6 +255,11 @@ const WorkFlowEdit = observer((props: IProps) => { ...@@ -248,6 +255,11 @@ const WorkFlowEdit = observer((props: IProps) => {
oldversion={oldversion} oldversion={oldversion}
/> />
)} )}
{showCustomOperator && (
<CustomOperator
setShowCustomOperator={() => setShowCustomOperator(false)}
/>
)}
</div> </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