Skip to content

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

feat: 自定义批算子中流算子拼接id的count计算方式优化

parent bf2eb6ce
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 107 deletions
config/webpack.config.js
View file @ e20a8772
This diff is collapsed.
src/views/CustomOperator/components/OperatorList/index.tsx
View file @ e20a8772
......@@ -3,7 +3,7 @@ import SearchIcon from "@mui/icons-material/Search";
import styles from "./index.module.css";
import cloneDeep from "lodash/cloneDeep";
import { getScrollLoader } from "@/utils/util";
import { useState, useCallback, useEffect } from "react";
import { useState, useCallback, useEffect, useMemo } from "react";
import { getOperatorList } from "@/api/project_api";
import CircularProgress from "@mui/material/CircularProgress";
import useMyRequest from "@/hooks/useMyRequest";
......@@ -11,10 +11,8 @@ import { useStores } from "@/store";
import { toJS } from "mobx";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
let count = 1;
type IProps = {
operatorList: any;
operatorList: ITask[];
setOperatorList: any;
};
......@@ -22,16 +20,36 @@ const OperatorList = (props: IProps) => {
const { operatorList, setOperatorList } = props; // 流程图中流算子列表
const { currentProjectStore } = useStores();
const [list, setList] = useState<ITask[]>([]); // 算子列表
const productId = toJS(currentProjectStore.currentProductInfo.id);
const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品ID
const [keyword, setKeyword] = useState(""); // 搜索算子列表时的关键词
const [dragItem, setDragItem] = useState<any>({}); // 拖拽的算子
const [page, setPage] = useState(0); //
const [isLastPage, setIsLastPage] = useState(false);
// todo 加载中 没有更多了样式
const [page, setPage] = useState(0); // 算子列表页码
const [isLastPage, setIsLastPage] = useState(false); // 是否是最后一页
// 应该一个批算子里可以有多个流算子 流算子也可以重复 所以需要在流算子后加一个_${count} 加上operatorList可能有缓存数据， 所以不一定是1开头
const count = useMemo(() => {
if (operatorList.length === 0) {
return 1;
} else {
const countArr = operatorList.map((operatorLi) => {
const _index = operatorLi.id.indexOf("_");
if (_index === -1) {
return 1;
} else {
return Number(operatorLi.id.slice(_index + 1));
}
});
const maxCount = Math.max(...countArr);
return maxCount + 1;
}
}, [operatorList]);
// 获取算子列表
const { run: getOperatorListRun, loading } = useMyRequest(getOperatorList, {
onSuccess: (res) => {
let arr = res?.data?.content;
setIsLastPage(res?.data?.last);
// todo 去掉parameters添加
arr.forEach((item: any, index: number) => {
item.edges = [];
item.parameters.push({
......@@ -80,10 +98,10 @@ const OperatorList = (props: IProps) => {
});
});
setList([...list, ...arr]);
// setList(res?.data?.content || []);
},
});
// 获取算子列表方法
const getOperatorListFun = useCallback(
(keyword: string = "", page = 0) => {
getOperatorListRun({
......@@ -97,16 +115,19 @@ const OperatorList = (props: IProps) => {
[productId, getOperatorListRun]
);
// 打开弹窗时获取算子列表
useEffect(() => {
getOperatorListFun();
}, [getOperatorListFun]);
// 算子列表搜索关键词变化
const keywordChange = (e: any) => {
if (e.target.value.length <= 30) {
setKeyword(e.target.value);
}
};
// 回车搜索
const handleKeywordKeyUp = (e: any) => {
if (e.keyCode === 13) {
setList([]);
......@@ -115,70 +136,21 @@ const OperatorList = (props: IProps) => {
getOperatorListFun(e.target.value, 0);
}
};
// const list = [
// {
// title: "这是中文",
// version: "1.0.0",
// },
// {
// allVersions: ["1.0.0", "2.0.0"],
// creator: "root",
// description: "这是一段Hitlist算子的描述",
// edges: [
// {
// id: "fdd26229-3a1f-46e7-a14a-dd55bcce55e4",
// label: null,
// source: "62c7965c9bf7ba39f2dcefcc",
// sourceHandle: null,
// target: "62c7965c9bf7ba39f2dcefce",
// targetHandle: null,
// },
// ],
// id: "62c7965c9bf7ba39f2dcefcc",
// parameters: [
// {
// name: "cpus",
// classType: "INT",
// classTypeName: "Int",
// required: false,
// defaultValue: "1",
// },
// ],
// // parentNode: "62c7965c9bf7ba39f2dcefc8",
// position: { x: 40, y: 200 },
// productId: "cadd",
// status: null,
// title: "Hitlist",
// type: "FLOW",
// version: "2.0.0",
// },
// {
// title: "asdf",
// version: "1.0.0",
// },
// {
// title: "asdf",
// version: "1.0.0",
// },
// {
// title: "asdf",
// version: "1.0.0",
// },
// ];
// 滚动触发
const handleScroll = (e: any) => {
// 满足快滚动到底部时开始加载
if (getScrollLoader(e)) {
console.log("加载1");
if (loading || isLastPage) {
return;
} else {
console.log("加载2");
getOperatorListFun(keyword, page + 1);
setPage(page + 1);
}
}
};
// 渲染六个小点样式
const randerIcon = () => {
return (
<div className={styles.icon}>
......@@ -201,9 +173,6 @@ const OperatorList = (props: IProps) => {
/** 拖拽开始 */
const onDragStart = (item: any) => {
setDragItem(item);
console.log("onDragStart");
// setIsDragStyle(true);
count++;
};
/** 生成批流副本 */
......@@ -227,38 +196,14 @@ const OperatorList = (props: IProps) => {
},
edges: newEdges.length ? newEdges : task?.edges,
};
// const newVal = arr.map((item) => {
// const newEdges =
// item?.edges &&
// item?.edges.map((every) => {
// return {
// ...every,
// source: `${every.source}_${count}`,
// target: `${every.target}_${count}`,
// };
// });
// return {
// ...item,
// id: `${item.id}_${count}`,
// parentNode: item.parentNode ? `${item.parentNode}_${count}` : "",
// position: {
// x: item.position?.x,
// y: item.position?.y,
// },
// edges: newEdges.length ? newEdges : item?.edges,
// };
// });
// return newVal;
},
[]
[count]
);
/** 拖拽结束 */
const onDragEnd = useCallback(
(e: React.DragEvent<HTMLDivElement>) => {
const dom = document.getElementById("customOperatorFlow");
console.log(e);
console.log(dom);
const clientX = e.clientX;
const clientY = e.clientY;
const upperLeftPointX = Number(dom?.offsetLeft);
......@@ -271,30 +216,16 @@ const OperatorList = (props: IProps) => {
clientX < lowerRightX &&
clientY < lowerRightY
) {
// const batchFlowArr = getBatchFlowArr(info.id);
const newDragItem = cloneDeep(dragItem);
const newOperatorItem = getNewOperatorItem(
newDragItem,
clientX - upperLeftPointX,
clientY - upperLeftPointY - 42
);
// const newOperatorItem = {
// ...newDragItem,
// id: `${newDragItem.id}_${count}`,
// source: `${newDragItem.source}_${count}`,
// target: `${newDragItem.target}_${count}`,
// position: {
// x: clientX - upperLeftPointX,
// y: clientY - upperLeftPointY,
// },
// };
const newVal = cloneDeep(operatorList);
newVal.push(newOperatorItem);
console.log(newVal);
setOperatorList(newVal);
// setTemplateConfigInfo(newVal);
}
// setIsDragStyle(false);
},
[dragItem, operatorList, setOperatorList, getNewOperatorItem]
);
......@@ -335,12 +266,10 @@ const OperatorList = (props: IProps) => {
<span className={styles.name}>{item.title}</span>
<span className={styles.version}>v{item.version}</span>
</div>
{/* <span className={styles.name}>{item.title}</span>
<span className={styles.version}>{item.version}</span> */}
</div>
);
})}
{!loading && (
{loading && (
<div className={styles.loading}>
<CircularProgress
size={12}
......@@ -352,7 +281,7 @@ const OperatorList = (props: IProps) => {
加载中...
</div>
)}
{!isLastPage && <div className={styles.loading}>已经到底了</div>}
{isLastPage && <div className={styles.loading}>已经到底了</div>}
</div>
</div>
);
......
src/views/CustomOperator/index.tsx
View file @ e20a8772
......@@ -21,6 +21,7 @@ const CustomOperator = observer((props: IProps) => {
const sessionStorageOperatorList = JSON.parse(
sessionStorage.getItem("operatorList") || "[]"
);
console.log("sessionStorageOperatorList", sessionStorageOperatorList);
const [operatorList, setOperatorList] = useState<ITask[]>(
sessionStorageOperatorList
);
......
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