From 62ced44829fc828078752a845cf40d18df1c4b5d Mon Sep 17 00:00:00 2001 From: haha Date: Wed, 10 Jul 2024 00:04:23 +0800 Subject: [PATCH] update code --- src/components/flow/nodes/BaseNode.js | 2 +- src/views/connection/edit.vue | 166 ++++++++++++++++++-------- src/views/connection/editFlow.vue | 13 +- src/views/connection/nodePanel.vue | 4 +- 4 files changed, 131 insertions(+), 54 deletions(-) diff --git a/src/components/flow/nodes/BaseNode.js b/src/components/flow/nodes/BaseNode.js index c85a879..f50a5a6 100644 --- a/src/components/flow/nodes/BaseNode.js +++ b/src/components/flow/nodes/BaseNode.js @@ -95,7 +95,7 @@ class RedNode extends RectNode { viewBox:"0 0 1139 1024" , width:20, height:20, - x: x - 10, + x: x - 8, y: y - 16, }, h("path",{ diff --git a/src/views/connection/edit.vue b/src/views/connection/edit.vue index 4ea30a7..01b2204 100644 --- a/src/views/connection/edit.vue +++ b/src/views/connection/edit.vue @@ -4,7 +4,7 @@ - + @@ -19,19 +19,19 @@ - + - + - + @@ -77,8 +77,9 @@
输入参数: - - + + {{ it.key }}: {{ it.value }} @@ -86,8 +87,9 @@
输出参数: - - + + {{ it.key }}: {{ it.value }} @@ -95,8 +97,8 @@
处理参数: - - + + {{ it.key }}: {{ it.value }} @@ -110,7 +112,7 @@ 保存 取消 - +
@@ -120,7 +122,7 @@ import editFlow from './editFlow.vue' import ConnApi from '@/api/connection' import EditParamDlg from './editParamDlg.vue' const router = useRouter(); -const uploadForm = ref(ElForm) +const editForm = ref(ElForm) const route = useRoute() const upForm = reactive({ model_name: '', @@ -129,11 +131,18 @@ const upForm = reactive({ connection_label: '', connection_desc: '' }); -const editDlg=ref() +const upRules = computed(() => { + return { + connection_name: [{ required: true, trigger: "blur", message: "请输入互联名称", },], + connection_label: [{ required: true, trigger: "blur", message: "请输入标签", },], + connection_desc: [{ required: true, trigger: "blur", message: "请输入互联说明", },], + } +}); +const editDlg = ref() const info = reactive({ connInfo: null, nodes: [], - editObj:null, + editObj: null, }) const selNode = reactive({ info: null @@ -148,20 +157,20 @@ const doFlowInput = () => { } else { tmps[0].inputParams = selNode.info.inputParams; tmps[0].outputParams = selNode.info.outputParams; - tmps[0].process = selNode.info.process; - + tmps[0].processParams = selNode.info.processParams; + } } -const doEditSuccess=(obj)=>{ - let t=info.editObj.type; - if(t=='i'){ - selNode.info.inputParams=obj; +const doEditSuccess = (obj) => { + let t = info.editObj.type; + if (t == 'i') { + selNode.info.inputParams = obj; } - if(t=='o'){ - selNode.info.outputParams=obj; + if (t == 'o') { + selNode.info.outputParams = obj; } - if(t=='p'){ - selNode.info.process=obj; + if (t == 'p') { + selNode.info.processParams = obj; } let tmps = info.nodes.filter(d => d.id == selNode.info.id); if (tmps.length == 0) { @@ -169,24 +178,24 @@ const doEditSuccess=(obj)=>{ } else { tmps[0].inputParams = selNode.info.inputParams; tmps[0].outputParams = selNode.info.outputParams; - tmps[0].process = selNode.info.process; + tmps[0].processParams = selNode.info.processParams; } }; -const doEdit=(obj,title,t)=>{ - info.editObj={ - obj:obj, - title:title, - type:t +const doEdit = (obj, title, t) => { + info.editObj = { + obj: obj, + title: title, + type: t } editDlg.value.showDialog({ - obj:t=='i'?obj.inputParams:t=='o'?obj.outputParams:obj.process, - title:title + obj: t == 'i' ? obj.inputParams : t == 'o' ? obj.outputParams : obj.processParams, + title: title }); } -const objToArr=(obj,t)=>{ - let arr=[]; - for(let k in obj){ - arr.push({key:k,value:obj[k]}) +const objToArr = (obj, t) => { + let arr = []; + for (let k in obj) { + arr.push({ key: k, value: obj[k] }) } return arr; } @@ -204,7 +213,7 @@ const doNodeClick = (node) => { } else { selNode.info.inputParams = tmps[0].inputParams; selNode.info.outputParams = tmps[0].outputParams; - selNode.info.process = tmps[0].process; + selNode.info.processParams = tmps[0].processParams; } } else { @@ -215,7 +224,66 @@ const doInitLf = (o) => { lf.value = o.value } const doSave = () => { - router.replace({ path: "/connection/index" }) + let flowData = lf.value.getGraphData(); + if (flowData.nodes.length < 3) { + ElMessage.error("请绘制算子互联流程图!"); + return; + } + debugger + let isNoConnect=false; + let nodeObj={}; + let operator_list=[]; + flowData.nodes.forEach(n=>{ + nodeObj[n.id]=n.properties.data; + let node=info.nodes.filter(nd=>nd.id==n.properties.data.id); + let oper={ + operator_id:n.properties.data.id, + parameters:{} + } + if(node.length>0){ + oper.parameters.inputParams=node[0].inputParams; + oper.parameters.outputParams=node[0].outputParams; + oper.parameters.processParams=node[0].processParams; + } + operator_list.push(oper); + let tmps=flowData.edges.filter(e=>e.sourceNodeId==n.id||e.targetNodeId==n.id); + if(tmps.length==0){ + isNoConnect=true; + } + }); + + if(isNoConnect){ + ElMessage.error("请在流程图中连接各个算子!"); + return; + } + let operator_connection_list=[]; + flowData.edges.forEach(e=>{ + operator_connection_list.push({ + start_oper_id:nodeObj[e.sourceNodeId].id, + end_oper_id:nodeObj[e.targetNodeId].id, + }); + }); + editForm.value?.validate(valid => { + if (valid) { + let postData={ + connection_name:upForm.connection_name, + connection_label:upForm.connection_label, + connection_desc:upForm.connection_desc, + operator_list:operator_list, + operator_connection_list:operator_connection_list, + operator_connection_nodes:flowData.nodes, + operator_connection_edges:flowData.edges + }; + ConnApi.add(postData).then(d=>{ + if(d.data.code==0){ + ElMessage.success("增加模型成功!"); + router.replace({ path: "/connection/index" }) + } + }); + + } + }); + } const doCancel = () => { router.replace({ path: "/connection/index" }) @@ -243,20 +311,24 @@ onMounted(() => { align-items: center; font-weight: bold; } - :deep(.anchors-end){ - fill:red; + + :deep(.anchors-end) { + fill: red; } - :deep(.anchors-start){ - fill:green; + + :deep(.anchors-start) { + fill: green; } - .sp-paramter{ + + .sp-paramter { height: 60px; - border:solid 1px #409EFF; + border: solid 1px #409EFF; overflow-y: auto; - padding:4px; + padding: 4px; cursor: pointer; - .param-item{ - display:block; + + .param-item { + display: block; } } } diff --git a/src/views/connection/editFlow.vue b/src/views/connection/editFlow.vue index eb2a78a..72554f6 100644 --- a/src/views/connection/editFlow.vue +++ b/src/views/connection/editFlow.vue @@ -99,9 +99,10 @@ const doUpdateState=()=>{ //nodePanel.value.updateNode(lf.value.getGraphData()); emit("updateNode",lf.value.getGraphData()) } -defineExpose({ - doEdit, -}) + +const getFLowData=()=>{ + return lf.value.getGraphData(); +} onMounted(() => { const logicFlow = new LogicFlow({ ...config, @@ -142,8 +143,12 @@ onMounted(() => { ] }) - doUpdateState(); + doUpdateState(); }); +defineExpose({ + doEdit, + getFLowData +})