update code

main
haha 2024-07-26 23:55:09 +08:00
parent 3da7053984
commit 7f6eb671e3
5 changed files with 549 additions and 521 deletions

View File

@ -3,9 +3,9 @@ VITE_APP_PORT = 3000
# 代理前缀 # 代理前缀
VITE_APP_BASE_API = '/api' VITE_APP_BASE_API = '/api'
# VITE_APP_API_URL = http://62.234.3.186/mk/ai/api VITE_APP_API_URL = http://62.234.3.186/mk/ai/api
# 线上接口地址 # 线上接口地址
VITE_APP_API_URL = http://10.5.1.137:8800 #VITE_APP_API_URL = http://10.5.1.137:8800
# 开发接口地址 # 开发接口地址
# VITE_APP_API_URL = http://localhost:8989 # VITE_APP_API_URL = http://localhost:8989

View File

@ -78,8 +78,9 @@
<div class="row" v-if="selNode.info.parameters && selNode.info.parameters.inputs"> <div class="row" v-if="selNode.info.parameters && selNode.info.parameters.inputs">
<span class="sp-label">输入参数:</span> <span class="sp-label">输入参数:</span>
<div class="div-param"> <div class="div-param">
<div v-if="selNode.info.parameters.inputs.length>1" class="div-navs"> <div v-if="selNode.info.parameters.inputs.length > 1" class="div-navs">
<span v-for="(it,idx) in selNode.info.parameters.inputs" @click="doInputSelected(idx)" :key="idx" class="sp-nav" :class="it.selected?'active':''">{{ it.input_id }}</span> <span v-for="(it, idx) in selNode.info.parameters.inputs" @click="doInputSelected(idx)" :key="idx"
class="sp-nav" :class="it.selected ? 'active' : ''">{{ it.input_id }}</span>
</div> </div>
<span class="sp-text sp-paramter scroll" @click="doEdit(selNode.info, '输入参数', 'i')"> <span class="sp-text sp-paramter scroll" @click="doEdit(selNode.info, '输入参数', 'i')">
<span v-for="(it, idx) in selNode.info.parameters.inputs " :key="idx" v-show="it.selected" <span v-for="(it, idx) in selNode.info.parameters.inputs " :key="idx" v-show="it.selected"
@ -91,9 +92,10 @@
</div> </div>
<div class="row" style="margin-top:4px;" v-if="selNode.info.parameters && selNode.info.parameters.outputs"> <div class="row" style="margin-top:4px;" v-if="selNode.info.parameters && selNode.info.parameters.outputs">
<span class="sp-label">输出参数:</span> <span class="sp-label">输出参数:</span>
<div class="div-param" > <div class="div-param">
<div v-if="selNode.info.parameters.outputs.length>1" class="div-navs"> <div v-if="selNode.info.parameters.outputs.length > 1" class="div-navs">
<span v-for="(it,idx) in selNode.info.parameters.outputs" @click="doOutputSelected(idx)" :key="idx" class="sp-nav" :class="it.selected?'active':''">{{ it.output_id }}</span> <span v-for="(it, idx) in selNode.info.parameters.outputs" @click="doOutputSelected(idx)" :key="idx"
class="sp-nav" :class="it.selected ? 'active' : ''">{{ it.output_id }}</span>
</div> </div>
<span class="sp-text sp-paramter scroll" @click="doEdit(selNode.info, '输出参数', 'o')"> <span class="sp-text sp-paramter scroll" @click="doEdit(selNode.info, '输出参数', 'o')">
<span v-for="(it, idx) in selNode.info.parameters.outputs " :key="idx" v-show="it.selected" <span v-for="(it, idx) in selNode.info.parameters.outputs " :key="idx" v-show="it.selected"
@ -105,7 +107,8 @@
</div> </div>
<div class="row" style="margin-top:4px;" v-if="selNode.info.parameters && selNode.info.parameters.process"> <div class="row" style="margin-top:4px;" v-if="selNode.info.parameters && selNode.info.parameters.process">
<span class="sp-label">处理参数:</span> <span class="sp-label">处理参数:</span>
<span class="sp-text sp-paramter scroll" @click="doEdit(selNode.info, '处理参数', 'p')" v-if="selNode.info.parameters.process"> <span class="sp-text sp-paramter scroll" @click="doEdit(selNode.info, '处理参数', 'p')"
v-if="selNode.info.parameters.process">
<paramShow :paramInfo="selNode.info.parameters.process"></paramShow> <paramShow :paramInfo="selNode.info.parameters.process"></paramShow>
</span> </span>
</div> </div>
@ -152,56 +155,56 @@ const info = reactive({
}) })
const selNode = reactive({ const selNode = reactive({
info: null, info: null,
node:null, node: null,
}) })
let lf = ref(null) let lf = ref(null)
let edFlow = ref() let edFlow = ref()
const ndPanel = ref() const ndPanel = ref()
const doOutputSelected=idx=>{ const doOutputSelected = idx => {
selNode.info.parameters.outputs.forEach((it,i)=>{ selNode.info.parameters.outputs.forEach((it, i) => {
it.selected=i==idx; it.selected = i == idx;
}); });
} }
const doInputSelected=idx=>{ const doInputSelected = idx => {
selNode.info.parameters.inputs.forEach((it,i)=>{ selNode.info.parameters.inputs.forEach((it, i) => {
it.selected=i==idx; it.selected = i == idx;
}); });
} }
const doEditSuccess = (obj) => { const doEditSuccess = (obj) => {
let t = info.editObj.type; let t = info.editObj.type;
if (t == 'i') { if (t == 'i') {
obj.forEach(o=>{ obj.forEach(o => {
let cobjs=selNode.info.parameters.inputs.filter(d=>d.input_id==o.id); let cobjs = selNode.info.parameters.inputs.filter(d => d.input_id == o.id);
if(cobjs.length>0){ if (cobjs.length > 0) {
let cobj=cobjs[0]; let cobj = cobjs[0];
o.attrs.forEach(oo=>{ o.attrs.forEach(oo => {
if(oo.name=="oper_inout_data_type"){ if (oo.name == "oper_inout_data_type") {
cobj.oper_inout_data_type=oo.value; cobj.oper_inout_data_type = oo.value;
}else{ } else {
cobj[oo.name].value=oo.value; cobj[oo.name].value = oo.value;
} }
}); });
} }
}) })
} }
if (t == 'o') { if (t == 'o') {
obj.forEach(o=>{ obj.forEach(o => {
let cobjs=selNode.info.parameters.outputs.filter(d=>d.output_id==o.id); let cobjs = selNode.info.parameters.outputs.filter(d => d.output_id == o.id);
if(cobjs.length>0){ if (cobjs.length > 0) {
let cobj=cobjs[0]; let cobj = cobjs[0];
o.attrs.forEach(oo=>{ o.attrs.forEach(oo => {
if(oo.name=="oper_inout_data_type"){ if (oo.name == "oper_inout_data_type") {
cobj.oper_inout_data_type=oo.value; cobj.oper_inout_data_type = oo.value;
}else{ } else {
cobj[oo.name].value=oo.value; cobj[oo.name].value = oo.value;
} }
}); });
} }
}) })
} }
if (t == 'p') { if (t == 'p') {
obj[0].attrs.forEach(o=>{ obj[0].attrs.forEach(o => {
selNode.info.parameters.process[o.name]["value"]=o.value; selNode.info.parameters.process[o.name]["value"] = o.value;
}); });
} }
let tmps = info.nodes.filter(d => d.id == selNode.info.id); let tmps = info.nodes.filter(d => d.id == selNode.info.id);
@ -212,7 +215,7 @@ const doEditSuccess = (obj) => {
tmps[0].outputs = selNode.info.parameters.outputs; tmps[0].outputs = selNode.info.parameters.outputs;
tmps[0].process = selNode.info.parameters.process; tmps[0].process = selNode.info.parameters.process;
} }
edFlow.value.updateNode(selNode.info,selNode.node); edFlow.value.updateNode(selNode.info, selNode.node);
}; };
const doEdit = (obj, title, t) => { const doEdit = (obj, title, t) => {
info.editObj = { info.editObj = {
@ -221,7 +224,7 @@ const doEdit = (obj, title, t) => {
type: t type: t
} }
editDlg.value.showDialog({ editDlg.value.showDialog({
type:t, type: t,
obj: t == 'i' ? obj.parameters.inputs : t == 'o' ? obj.parameters.outputs : obj.parameters.process, obj: t == 'i' ? obj.parameters.inputs : t == 'o' ? obj.parameters.outputs : obj.parameters.process,
title: title title: title
}); });
@ -241,7 +244,7 @@ const doUpdateNode = (data) => {
const doNodeClick = (node) => { const doNodeClick = (node) => {
if (node) { if (node) {
selNode.info = node.data.properties.data; selNode.info = node.data.properties.data;
selNode.node=node; selNode.node = node;
let tmps = info.nodes.filter(d => d.id == selNode.info.id); let tmps = info.nodes.filter(d => d.id == selNode.info.id);
if (tmps.length == 0) { if (tmps.length == 0) {
info.nodes.push(selNode.info); info.nodes.push(selNode.info);
@ -251,17 +254,17 @@ const doNodeClick = (node) => {
selNode.info.parameters.process = tmps[0].parameters.process; selNode.info.parameters.process = tmps[0].parameters.process;
} }
selNode.info.parameters.inputs.forEach(d=>{ selNode.info.parameters.inputs.forEach(d => {
d.selected=false; d.selected = false;
}); });
selNode.info.parameters.outputs.forEach(d=>{ selNode.info.parameters.outputs.forEach(d => {
d.selected=false; d.selected = false;
}); });
if(selNode.info.parameters.inputs.length>0){ if (selNode.info.parameters.inputs.length > 0) {
selNode.info.parameters.inputs[0].selected=true; selNode.info.parameters.inputs[0].selected = true;
} }
if(selNode.info.parameters.outputs.length>0){ if (selNode.info.parameters.outputs.length > 0) {
selNode.info.parameters.outputs[0].selected=true; selNode.info.parameters.outputs[0].selected = true;
} }
} }
@ -278,52 +281,62 @@ const doSave = () => {
ElMessage.error("请绘制算子互联流程图!"); ElMessage.error("请绘制算子互联流程图!");
return; return;
} }
let isNoConnect=false; let isNoConnect = false;
let nodeObj={}; let nodeObj = {};
let operator_list=[]; let operator_list = [];
flowData.nodes.forEach(n=>{ flowData.nodes.forEach(n => {
nodeObj[n.id]=n.properties.data; nodeObj[n.id] = n.properties.data;
let node=info.nodes.filter(nd=>nd.id==n.properties.data.id); let node = info.nodes.filter(nd => nd.id == n.properties.data.id);
let oper={ let oper = {
operator_id:n.properties.data.id, operator_id: n.properties.data.id,
parameters:{} parameters: {}
} }
if(node.length>0){ if (node.length > 0) {
oper.parameters.inputs=node[0].inputs; oper.parameters.inputs = node[0].inputs;
oper.parameters.outputs=node[0].outputs; oper.parameters.outputs = node[0].outputs;
oper.parameters.process=node[0].process; oper.parameters.process = node[0].process;
} }
operator_list.push(oper); operator_list.push(oper);
let tmps=flowData.edges.filter(e=>e.sourceNodeId==n.id||e.targetNodeId==n.id); let tmps = flowData.edges.filter(e => e.sourceNodeId == n.id || e.targetNodeId == n.id);
if(tmps.length==0){ if (tmps.length == 0) {
isNoConnect=true; isNoConnect = true;
} }
}); });
if(isNoConnect){ if (isNoConnect) {
ElMessage.error("请在流程图中连接各个算子!"); ElMessage.error("请在流程图中连接各个算子!");
return; return;
} }
let operator_connection_list=[]; let operator_connection_list = [];
flowData.edges.forEach(e=>{ flowData.edges.forEach(e => {
operator_connection_list.push({ operator_connection_list.push({
start_oper_id:nodeObj[e.sourceNodeId].id, start_oper_id: nodeObj[e.sourceNodeId].id,
end_oper_id:nodeObj[e.targetNodeId].id, end_oper_id: nodeObj[e.targetNodeId].id,
}); });
}); });
operator_list = flowData.nodes.map(it => it.properties.data);
operator_connection_list = flowData.edges.map(it => {
let obj = {
start_oper_id: nodeObj[it.sourceNodeId].id,
end_oper_id: nodeObj[it.targetNodeId].id,
start_oper_output_id: it.properties.sourceAnchorId,
end_oper_input_id: it.properties.targetAnchorId,
};
return obj;
})
editForm.value?.validate(valid => { editForm.value?.validate(valid => {
if (valid) { if (valid) {
let postData={ let postData = {
connection_name:upForm.connection_name, connection_name: upForm.connection_name,
connection_label:upForm.connection_label, connection_label: upForm.connection_label,
connection_desc:upForm.connection_desc, connection_desc: upForm.connection_desc,
operator_list:operator_list, operator_list: operator_list,
operator_connection_list:operator_connection_list, operator_connection_list: operator_connection_list,
operator_connection_nodes:flowData.nodes, operator_connection_nodes: flowData.nodes,
operator_connection_edges:flowData.edges operator_connection_edges: flowData.edges
}; };
ConnApi.add(postData).then(d=>{ ConnApi.add(postData).then(d => {
if(d.data.code==0){ if (d.data.code == 0) {
ElMessage.success("增加模型成功!"); ElMessage.success("增加模型成功!");
router.push({ path: "/connection/index" }) router.push({ path: "/connection/index" })
} }
@ -461,18 +474,20 @@ onMounted(() => {
.sp-text { .sp-text {
flex-grow: 1; flex-grow: 1;
display: block; display: block;
margin-left:4px; margin-left: 4px;
} }
.div-param{
.div-navs{ .div-param {
.sp-nav{ .div-navs {
.sp-nav {
display: inline-block; display: inline-block;
line-height:24px; line-height: 24px;
padding:0px 12px; padding: 0px 12px;
cursor: pointer; cursor: pointer;
&.active{
&.active {
background-color: #409EFF; background-color: #409EFF;
color:#fff; color: #fff;
} }
} }
} }

View File

@ -11,7 +11,7 @@ import '@logicflow/core/dist/style/index.css';
import { Menu } from "@logicflow/extension"; import { Menu } from "@logicflow/extension";
import AiNodeExtension from '@/components/flow/index' import AiNodeExtension from '@/components/flow/index'
import RegisteMenu from '@/components/flow/menu.js' import RegisteMenu from '@/components/flow/menu.js'
const emit=defineEmits(["initLf","updateNode","nodeClick"]) const emit = defineEmits(["initLf", "updateNode", "nodeClick"])
const themeApprove = { const themeApprove = {
rect: { // rect: { //
radius: 8, radius: 8,
@ -48,38 +48,41 @@ const config = {
}, },
keyboard: { enabled: true }, keyboard: { enabled: true },
style: themeApprove, style: themeApprove,
plugins: [AiNodeExtension,Menu] plugins: [AiNodeExtension, Menu]
}; };
const flow = ref() const flow = ref()
let lf = ref(null) let lf = ref(null)
let showProp=ref(false) let showProp = ref(false)
let nodeData=reactive(null) let nodeData = reactive(null)
let nodePropKey=ref(1) let nodePropKey = ref(1)
const initEvent=(lf)=>{ const initEvent = (lf) => {
lf.on("blank:click",node=>{ lf.on("blank:click", node => {
emit("nodeClick",null) emit("nodeClick", null)
}); });
lf.on("element:click",node=>{ lf.on("element:click", node => {
nodeData=node.data nodeData = node.data
showProp.value=true showProp.value = true
nodePropKey.value++ nodePropKey.value++
emit("nodeClick",node) emit("nodeClick", node)
}); });
lf.on("node:dnd-add",data=>{ lf.on("node:dnd-add", data => {
nodeData=data.data; nodeData = data.data;
showProp.value=true showProp.value = true
nodePropKey.value++ nodePropKey.value++
doUpdateState() doUpdateState()
}); });
lf.on("connection:not-allowed",(a,b,c)=>{ lf.on("anchor:dragend", (a, b, c) => {
if(a.msg=="不允许添加连线"){ updateEdges(a, b, c);
});
lf.on("connection:not-allowed", (a, b, c) => {
if (a.msg == "不允许添加连线") {
ElMessage.error("开始结点只能连接结束节点!"); ElMessage.error("开始结点只能连接结束节点!");
}else{ } else {
ElMessage.error(a.msg); ElMessage.error(a.msg);
} }
}); });
lf.on("node:delete",data=>{ lf.on("node:delete", data => {
if(data.data.text.value=="目标绘图"){ if (data.data.text.value == "目标绘图") {
ElMessage.error("目标绘图节点不能删除"); ElMessage.error("目标绘图节点不能删除");
setTimeout(() => { setTimeout(() => {
lf.undo(); lf.undo();
@ -88,22 +91,33 @@ const initEvent=(lf)=>{
} }
doUpdateState() doUpdateState()
}); });
lf.on("node:contextmenu",(d)=>{ lf.on("node:contextmenu", (d) => {
if(d.data.text.value=="目标绘图"){ if (d.data.text.value == "目标绘图") {
setTimeout(()=>{ setTimeout(() => {
document.querySelector(".lf-menu").style.display="none"; document.querySelector(".lf-menu").style.display = "none";
},0) }, 0)
} }
}); });
} }
const doEdit=(n)=>{ const updateEdges = (a, b, c) => {
let edges = lf.value.getGraphData().edges.filter(d => d.sourceNodeId == a.edgeModel.sourceNodeId && d.targetNodeId == a.edgeModel.targetNodeId);
if (edges.length > 0) {
//edges[0].properties.edgeModel = a.edgeModel
lf.value.setProperties(edges[0].id, {
sourceAnchorId: a.edgeModel.sourceAnchorId.split("_")[0],
targetAnchorId: a.edgeModel.targetAnchorId.split("_")[0],
})
}
} }
const doUpdateState=()=>{ const doEdit = (n) => {
}
const doUpdateState = () => {
//nodePanel.value.updateNode(lf.value.getGraphData()); //nodePanel.value.updateNode(lf.value.getGraphData());
emit("updateNode",lf.value.getGraphData()) emit("updateNode", lf.value.getGraphData())
} }
const getFlowData=()=>{ const getFlowData = () => {
return lf.value.getGraphData(); return lf.value.getGraphData();
} }
onMounted(() => { onMounted(() => {
@ -115,7 +129,7 @@ onMounted(() => {
logicFlow.setDefaultEdgeType("ai-link"); logicFlow.setDefaultEdgeType("ai-link");
RegisteMenu(logicFlow) RegisteMenu(logicFlow)
initEvent(logicFlow); initEvent(logicFlow);
emit("initLf",lf); emit("initLf", lf);
window.lf = lf; window.lf = lf;
logicFlow.render({ logicFlow.render({
nodes: [], nodes: [],
@ -123,9 +137,9 @@ onMounted(() => {
}) })
doUpdateState(); doUpdateState();
}); });
const updateNode=(info,node)=>{ const updateNode = (info, node) => {
lf.value.setProperties(node.data.id,{ lf.value.setProperties(node.data.id, {
data:info data: info
}) })
} }
defineExpose({ defineExpose({

View File

@ -53,7 +53,7 @@ function handleQuery(a) {
//ElMessage.success(""); //ElMessage.success("");
loading.value = true; loading.value = true;
connApi.list(queryParams).then(d => { connApi.list(queryParams).then(d => {
loading.value = false; debugger loading.value = false;
info.data = (d.data?.data?.connection_list || []).map(it => { info.data = (d.data?.data?.connection_list || []).map(it => {
it.id = it.model_id; it.id = it.model_id;

View File

@ -117,7 +117,6 @@ const doChoiceSuccess = item => {
function handleQuery() { function handleQuery() {
loading.value = true; loading.value = true;
let m = props.modelInfo; let m = props.modelInfo;
debugger
taskApi taskApi
.availableDevices({ .availableDevices({
connection_id: m.connection_id, connection_id: m.connection_id,