Skip to content

B
bkunyun
Commit 12c2f227 authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

feat: 批流算子页面联调

parent e4483cae
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 41 deletions
src/api/resourceCenter.ts
View file @ 12c2f227
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 17:09:23
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:14:35
* @LastEditTime: 2022-10-20 09:26:12
* @FilePath: /bkunyun/src/api/resourceCenter.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -76,11 +76,11 @@ const deleteActorenv = (params: {id: string}) => {
};
// 获取算子列表
const getOperatorList = (data: IOperatorListParams) => {
const getOperatorList = (params: IOperatorListParams) => {
return request({
url: Api.API_OPERATOR_LIST,
method: "get",
data
params
});
}
......
src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
View file @ 12c2f227
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-18 16:12:55
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:27:03
* @LastEditTime: 2022-10-20 11:59:34
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -25,13 +25,14 @@ import FormItemBox from "@/components/mui/FormItemBox";
import { useStores } from "@/store";
interface IAddOperator {
setAddOpen: (val: boolean) => void;
pageType: string;
setPageType: (val: string) => void;
}
type IBuildType = "ENVIRONMENT" | "OPERATOR";
const AddOperator = observer((props: IAddOperator) => {
const { setAddOpen } = props;
const { setPageType } = props;
/** 创建类型 BATCH - 批算子; FLOW - 流算子*/
const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
......@@ -70,14 +71,18 @@ const AddOperator = observer((props: IAddOperator) => {
<SwitchBatchFolw
active={taskType}
setActive={setTaskType}
goBack={() => setAddOpen(false)}
goBack={() => setPageType("")}
></SwitchBatchFolw>
</div>
<div className={style.right}>
<div className={style.title}>
{taskType === "BATCH" ? "批式算子信息" : "流式算子信息"}
</div>
<div style={{ paddingBottom: "20px" }}>
<div
style={{
paddingBottom: batchBuildType === "ENVIRONMENT" ? "20px" : "2px",
}}
>
<RadioGroupOfButtonStyle
RadiosBoxStyle={{ width: 236 }}
value={batchBuildType}
......@@ -95,7 +100,6 @@ const AddOperator = observer((props: IAddOperator) => {
<FormItemBox
label="算子名称"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
require
>
......@@ -116,7 +120,9 @@ const AddOperator = observer((props: IAddOperator) => {
<FormItemBox
label="所属产品"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
className={classNames({
[style.operatorFormItem]: batchBuildType === "ENVIRONMENT",
})}
itemFlex="column"
require
>
......@@ -143,7 +149,6 @@ const AddOperator = observer((props: IAddOperator) => {
<FormItemBox
label="描述"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
>
<MyInput multiline rows={4} placeholder="请输入算子描述" />
......
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.module.css
View file @ 12c2f227
......@@ -15,10 +15,20 @@
.itemHeaderBox {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.startTitleBox {
width: 36px;
height: 36px;
border-radius: 4px;
background: #a657f4;
color: #fff;
font-size: 18px;
font-weight: 600;
text-align: center;
line-height: 36px;
}
.itemContentBox {
display: flex;
flex-wrap: wrap;
......@@ -30,17 +40,26 @@
color: #1e2633;
}
.titleBox {
display: block;
font-size: 16px;
color: #1e2633;
}
.operatorTypeBox {
display: block;
color: #8a9099;
font-size: 12px;
}
.operationBox {
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
cursor: pointer;
}
.operationBox:hover {
background-color: #ebedf0;
border-radius: 2px;
}
.infoBox {
width: 50%;
font-weight: 400;
......
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.tsx
View file @ 12c2f227
......@@ -2,45 +2,79 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:08:31
* @LastEditTime: 2022-10-20 11:39:55
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import styles from "./index.module.css";
import { IOperatorInfo } from "../../interface";
import { IOperatorInfo, operatorType } from "../../interface";
import { observer } from "mobx-react";
import { useStores } from "@/store";
import { useMemo } from "react";
import MyMenu from "@/components/mui/MyMenu";
interface IProps {
operatorInfo: IOperatorInfo;
setPageType: (val: string) => void;
}
const OperatorCard = (props: IProps) => {
const OperatorCard = observer((props: IProps) => {
const {
operatorInfo: { title = "", type, version },
operatorInfo: { title = "", type, version, productId, createTime },
setPageType,
} = props;
/** 产品store */
const { productListStore } = useStores();
const productText = useMemo(() => {
const result = productListStore.productList?.filter((item) => {
return item.value === productId;
});
return result?.length ? result[0].label : "";
}, [productListStore.productList, productId]);
const onClickOperation = (val: string) => {
if (val === "upgrade") {
setPageType("edit");
}
};
return (
<div className={styles.itemBox}>
<div className={styles.itemHeaderBox}>
<img alt="" style={{ width: 36, height: 36 }} />
<div>
<div className={styles.startTitleBox}>{title?.slice(0, 1)}</div>
<div style={{ flex: 1, marginLeft: 12 }}>
<b className={styles.titleBox}>{title}</b>
<span className={styles.operatorTypeBox}>批算子</span>
<span className={styles.operatorTypeBox}>
{operatorType[type] || ""}
</span>
</div>
<MyMenu
value=""
options={[{ label: "升级", value: "upgrade" }]}
hasTriangle={false}
setValue={onClickOperation}
sx={{
zIndex: 1601,
}}
>
<span className={styles.operationBox}>d</span>
</MyMenu>
</div>
<div className={styles.itemContentBox}>
<p className={styles.infoBox}>
所属产品：<span>{type}</span>
所属产品：<span>{productText}</span>
</p>
<p className={styles.infoBox}>
算子版本：<span>{`V${version}`}</span>
</p>
<p className={styles.infoBox}>
创建时间：<span>2022-10-11</span>
创建时间：<span>{createTime}</span>
</p>
</div>
</div>
);
};
});
export default OperatorCard;
src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
View file @ 12c2f227
......@@ -2,13 +2,14 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:11:50
* @LastEditTime: 2022-10-20 11:30:10
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// 应用环境
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import _ from "lodash";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MySelect from "@/components/mui/MySelect";
......@@ -23,28 +24,47 @@ import useMyRequest from "@/hooks/useMyRequest";
import { IOperatorInfo } from "./interface";
const WorkflowOperator = observer(() => {
const [addOpen, setAddOpen] = useState<boolean>(false);
const [pageType, setPageType] = useState<string>("");
/** 产品store */
const { productListStore } = useStores();
/** 算子列表参数 */
const [searchParams, setSearchParams] = useState<IOperatorListParams>({
keyword: "",
productId: "",
type: "",
productId: "all",
type: "all",
});
const [list, setList] = useState<IOperatorInfo[]>();
const { run: getList } = useMyRequest(getOperatorList, {
// refreshDeps: [],
onSuccess: (res) => {
console.log(res);
setList(res?.data);
},
});
const newGetList = useCallback(() => {
const params = _.cloneDeep(searchParams);
if (params.productId === "all") {
params.productId = "";
}
if (params.type === "all") {
params.type = "";
}
getList(params);
}, [getList, searchParams]);
// 按回车搜索
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
newGetList();
}
};
useEffect(() => {
getList();
}, []);
newGetList();
}, [searchParams.productId, searchParams.type]);
return (
<>
......@@ -55,6 +75,7 @@ const WorkflowOperator = observer(() => {
sx={{ width: 340, marginRight: "16px" }}
placeholder="输入关键词搜索"
value={searchParams.keyword}
onKeyUp={handleKeyWordChangeKeyUp}
onChange={(e) => {
setSearchParams({ ...searchParams, keyword: e.target.value });
}}
......@@ -62,8 +83,13 @@ const WorkflowOperator = observer(() => {
<MySelect
title="所属产品"
isTitle={true}
options={productListStore?.productList || []}
value={searchParams.keyword}
options={
[
{ label: "全部", value: "all" },
...productListStore?.productList,
] || []
}
value={searchParams.productId}
onChange={(e) => {
setSearchParams({ ...searchParams, productId: e });
}}
......@@ -73,11 +99,12 @@ const WorkflowOperator = observer(() => {
<MySelect
title="环境类型"
isTitle={true}
value={searchParams.keyword}
value={searchParams.type}
onChange={(e) => {
setSearchParams({ ...searchParams, type: e });
}}
options={[
{ label: "全部", value: "all" },
{
label: "批式",
value: "BATCH",
......@@ -98,16 +125,20 @@ const WorkflowOperator = observer(() => {
className="iconfont icon-dianzan"
></span>
}
onClick={() => setAddOpen(true)}
onClick={() => setPageType("add")}
></MyButton>
</div>
<div className={styles.contentBox}>
{list?.map((item) => {
return <OperatorCard operatorInfo={item} />;
return (
<OperatorCard operatorInfo={item} setPageType={setPageType} />
);
})}
</div>
</div>
{addOpen && <AddOperator setAddOpen={setAddOpen} />}
{pageType && (
<AddOperator setPageType={setPageType} pageType={pageType} />
)}
</>
);
});
......
src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
View file @ 12c2f227
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 20:50:18
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:09:14
* @LastEditTime: 2022-10-20 11:03:29
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -13,4 +13,10 @@ export interface IOperatorInfo{
type: IOperatorType;
version: string;
productId: string;
createTime: string;
}
export enum operatorType {
'FLOW' = '流算子',
'BATCH' = '批算子',
}
\ No newline at end of file
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