From eadcff1e92bf3fe95ad4c80bbefc296af425bc77 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Thu, 20 Jun 2024 11:12:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=A8=E5=B1=80=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E9=87=8D=E5=A4=8Dname?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Experiment/training/index.jsx | 15 +- .../components/GlobalParamsDrawer/index.less | 2 +- .../components/GlobalParamsDrawer/index.tsx | 22 +- .../src/pages/Pipeline/editPipeline/index.jsx | 192 +++++++++--------- 4 files changed, 117 insertions(+), 114 deletions(-) diff --git a/react-ui/src/pages/Experiment/training/index.jsx b/react-ui/src/pages/Experiment/training/index.jsx index 991e9855..db217197 100644 --- a/react-ui/src/pages/Experiment/training/index.jsx +++ b/react-ui/src/pages/Experiment/training/index.jsx @@ -21,8 +21,8 @@ function ExperimentText() { const navgite = useNavigate(); const locationParams = useParams(); //新版本获取路由参数接口 const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false); - const graphRef = useRef(); + const getGraphData = (data) => { if (graph) { // 修改历史数据有蓝色边框的问题 @@ -202,9 +202,6 @@ function ExperimentText() { }, }, defaultEdge: { - // type: 'quadratic', - // type: 'cubic-vertical', - style: { endArrow: { // 设置终点箭头 @@ -226,16 +223,6 @@ function ExperimentText() { }, }, }, - defaultCombo: { - type: 'rect', - fixCollapseSize: 70, - style: { - fill: '#00e0ff0d', - stroke: '#00e0ff', - lineDash: [5, 10], - cursor: 'pointer', - }, - }, }); graph.on('node:click', (e) => { if (e.target.get('name') !== 'anchor-point' && e.item) { diff --git a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less index cd10e0d8..747d4da6 100644 --- a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less +++ b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less @@ -11,7 +11,7 @@ :global { .anticon.anticon-question-circle { - margin-top: -14px; + margin-top: -12px; } } } diff --git a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx index 7336b333..7fe6440a 100644 --- a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx +++ b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx @@ -76,9 +76,27 @@ const GlobalParamsDrawer = forwardRef( {...restField} name={[name, 'param_name']} label="参数名称" - rules={[{ required: true, message: '请输入参数名称' }]} + validateTrigger={[]} + rules={[ + { required: true, message: '请输入参数名称' }, + { + validator: (_, value) => { + const list = form.getFieldValue('global_param') || []; + const names = list.filter((item: any) => item?.param_name === value); + if (value && names.length > 1) { + return Promise.reject('参数名称不能重复'); + } else { + return Promise.resolve(); + } + }, + }, + ]} > - + form.validateFields()} + /> { const navgite = useNavigate(); - let contextMenu = {}; const locationParams = useParams(); //新版本获取路由参数接口 const graphRef = useRef(); const paramsDrawerRef = useRef(); @@ -31,10 +30,23 @@ const EditPipeline = () => { let dragSourceNode; useEffect(() => { - initMenu(); + initGraph(); getFirstWorkflow(locationParams.id); + + const changeSize = () => { + if (!graph || graph.get('destroyed')) return; + if (!graphRef.current) return; + graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight); + graph.fitView(); + }; + + window.addEventListener('resize', changeSize); + return () => { + window.removeEventListener('resize', changeSize); + }; }, []); + // 拖拽结束，添加新节点 const onDragEnd = (val) => { const { x, y } = val; const point = graph.getPointByClient(x, y); @@ -45,11 +57,14 @@ const EditPipeline = () => { y: point.y, id: val.component_name + '-' + s8(), isCluster: false, + formError: true, }; // console.log('model', model); graph.addItem('node', model, false); }; - const formChange = (val) => { + + // 节点数据发生变化 + const handleFormChange = (val) => { if (graph) { const data = graph.save(); const index = data.nodes.findIndex((item) => { @@ -68,6 +83,8 @@ const EditPipeline = () => { graph.translate(lastPoint.x - newPoint.x, lastPoint.y - newPoint.y); } }; + + // 保存 const savePipeline = async (val) => { const [res, error] = await to(paramsDrawerRef.current.validateFields()); if (error) { @@ -76,13 +93,6 @@ const EditPipeline = () => { return; } - const duplicateName = findFirstDuplicate(res.global_param || []); - if (duplicateName) { - message.error('全局参数配置有重复的参数名称：' + duplicateName); - openParamsDrawer(); - return; - } - // const [propsRes, propsError] = await to(propsRef.current.getFieldsValue()); // if (propsError) { // message.error('基本信息必填项需配置'); @@ -108,6 +118,8 @@ const EditPipeline = () => { }); }, 500); }; + + // 渲染数据 const getGraphData = (data) => { if (graph) { // 修改历史数据有蓝色边框的问题 @@ -122,6 +134,8 @@ const EditPipeline = () => { }, 500); } }; + + // 处理并行边，暂时没有用 const processParallelEdgesOnAnchorPoint = ( edges, offsetDiff = 15, @@ -242,11 +256,11 @@ const EditPipeline = () => { } return false; }; + + // 复制节点 const cloneElement = (item) => { - console.log(item); let data = graph.save(); const nodeId = s8(); - console.log(item.getModel()); data.nodes.push({ ...item.getModel(), label: item.getModel().label + '-copy', @@ -256,66 +270,22 @@ const EditPipeline = () => { }); graph.changeData(data); }; - const getFirstWorkflow = (val) => { - getWorkflowById(val).then((ret) => { - if (ret && ret.data) { - setGlobalParam(ret.data.global_param || []); - } - if (graph && ret.data && ret.data.dag) { - getGraphData(JSON.parse(ret.data.dag)); - } - }); - }; - // 上下文菜单 - const initMenu = () => { - // const selectedNodes = this.selectedNodes; - contextMenu = new G6.Menu({ - getContent(evt) { - const type = evt.item.getType(); - const cloneDisplay = type === 'node' ? 'block' : 'none'; - return ` - `; - }, - handleMenuClick: (target, item) => { - switch (target.getAttribute('code')) { - case 'delete': - graph.removeItem(item); - break; - case 'clone': - cloneElement(item); - break; - default: - break; - } - }, - // offsetX and offsetY include the padding of the parent container - // 需要加上父级容器的 padding-left 16 与自身偏移量 10 - offsetX: 16 + 10, - // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10 - offsetY: 0, - // the types of items that allow the menu show up - // 在哪些类型的元素上响应 - itemTypes: ['node', 'edge'], - }); - initGraph(); + // 获取流水线详情 + const getFirstWorkflow = async (val) => { + const [res] = await to(getWorkflowById(val)); + if (res && res.data) { + const { global_param, dag } = res.data; + setGlobalParam(global_param || []); + if (dag) { + getGraphData(JSON.parse(dag)); + } + } }; + // 初始化图 const initGraph = () => { + const contextMenu = initMenu(); G6.registerNode( 'rect-node', { @@ -515,6 +485,7 @@ const EditPipeline = () => { }, cursor: 'pointer', lineWidth: 1, + lineAppendWidth: 4, opacity: 1, stroke: '#CDD0DC', radius: 1, @@ -527,19 +498,13 @@ const EditPipeline = () => { }, }, }, - defaultCombo: { - type: 'rect', - fixCollapseSize: 70, - style: { - fill: '#00e0ff0d', - stroke: '#00e0ff', - lineDash: [5, 10], - cursor: 'pointer', - }, - }, }); + + bindEvents(); + }; + + const bindEvents = () => { graph.on('node:click', (e) => { - e.stopPropagation(); if (e.target.get('name') !== 'anchor-point' && e.item) { // 获取所有的上游节点 const parentNodes = findAllParentNodes(graph, e.item); @@ -558,16 +523,6 @@ const EditPipeline = () => { type: targetAnchorIdx === 0 || targetAnchorIdx === 1 ? 'cubic-vertical' : 'cubic-horizontal', }); - - // update the curveOffset for parallel edges - // const edges = graph.save().edges; - // processParallelEdgesOnAnchorPoint(edges); - // graph.getEdges().forEach((edge, i) => { - // graph.updateItem(edge, { - // curveOffset: edges[i].curveOffset, - // curvePosition: edges[i].curvePosition, - // }); - // }); }); // 删除边时，修改 anchor-point 的 links 值 graph.on('afterremoveitem', (e) => { @@ -639,13 +594,56 @@ const EditPipeline = () => { graph.setItemState(e.item, 'drop', false); dropAnchorIdx = undefined; }); - window.onresize = () => { - if (!graph || graph.get('destroyed')) return; - if (!graphRef.current) return; - graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight); - graph.fitView(); - }; }; + + // 上下文菜单 + const initMenu = () => { + const contextMenu = new G6.Menu({ + getContent(evt) { + const type = evt.item.getType(); + const cloneDisplay = type === 'node' ? 'block' : 'none'; + return ` + `; + }, + handleMenuClick: (target, item) => { + switch (target.getAttribute('code')) { + case 'delete': + graph.removeItem(item); + break; + case 'clone': + cloneElement(item); + break; + default: + break; + } + }, + // offsetX and offsetY include the padding of the parent container + // 需要加上父级容器的 padding-left 16 与自身偏移量 10 + offsetX: 16 + 10, + // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10 + offsetY: 0, + // the types of items that allow the menu show up + // 在哪些类型的元素上响应 + itemTypes: ['node', 'edge'], + }); + + return contextMenu; + }; + return (
@@ -687,7 +685,7 @@ const EditPipeline = () => {
- +