update code

src/views/connection/detail.vue

@@ -44,25 +44,27 @@
                 </tr>
             </table>
         </el-card>
-        <el-card style="margin-top: 12px;">
+        <el-card style="margin-top: 12px;margin-bottom: 60px;">
             <template #header>
                 <svg-icon icon-class="pause" style="width:20px;height:20px;" />
                 算子互联信息</template>
-            <div class="detail-content">
+            <div class="detail-content" style="position: relative;">
-                <div  class="item">
+                <detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
+              
+                <div  class="item" v-if="1==2">
                 <div class="div-title">
                     <i-ep-setting/><span>互联设置</span>
                 </div>
                 <div class="div-chart">
-                    <detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
+                   
                 </div>
                 </div>
-                <div  class="item" style="margin-left: 100px;">
+                <div  class="item node-info" style="margin-left: 100px;" v-if="info.selNode"> 
                 <div class="div-title">
                     <i-ep-document/><span>算子基本信息</span>
                 </div>
                 <div class="div-info">
-                    <template v-if="info.selNode">
+                    
                     <div class="row">
                         <span class="sp-label">算子名称:</span>
                         <span class="sp-text">{{ info.selNode.operator_name }}</span>
@@ -96,7 +98,7 @@
                             <span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span>
                         </span>
                     </div>
-                </template>
+                
                 </div>
                 </div>
             </div>
@@ -153,10 +155,21 @@ onMounted(() => {
         align-items: center
     }
     .detail-content{
-        display: flex;
-        justify-content: center;
         .item{
             width:300px;
+            &.node-info{
+                position: absolute;
+                right:10px;
+                top:10px;
+                .div-chart{
+                    min-height: unset;
+                    height: auto;
+                }
+                .div-info{
+                    min-height: unset;
+                    height: auto;
+                }
+            }
             .div-title{
                 color:#409EFF;
                 display: flex;

src/views/connection/detailFlow.vue

@@ -79,8 +79,9 @@ const showFlow=(o)=>{
     let data={nodes:info.nodes,edges:info.edges};
     lf.value.render(data)
 }
+
 defineExpose({
-    showFlow
+    showFlow,    
 })
 const initEvent=(lf)=>{
   lf.on("element:click",node=>{
@@ -101,43 +102,18 @@ onMounted(() => {
     initEvent(logicFlow);
     lf.value = logicFlow
     window.lf = lf;    
-    /*
-    const data = { 
-        "nodes": [
-     { "id": "node_1", "type": "ai-node",fill:'#409effaa',"x": 150, "y": 20, "properties": { "node": 1, "ui": "node-ai" }, "text": { "x": 160, "y": 20, "value": "图像缩放" } }, 
-     { "id": "node_2", "type": "ai-node",fill:'#3CB371', "x": 150, "y": 290, "properties": { "node": 2, "ui": "node-ai" }, "text": { "x": 160, "y": 290, "value": "目标绘图" } }, 
-     { "id": "node_3", fill:'#409effaa',"type": "ai-node", "x": 150, "y": 90, "properties": { "node": 3, "ui": "node-ai" }, "text": { "x": 160, "y": 90, "value": "RGB12图像格式转换" } }, 
-     { "id": "node_4",fill:'#ccccccaa', "type": "ai-node", "x": 150, "y": 150, "properties": { "node": 4, "ui": "node-ai" }, "text": { "x": 160, "y": 150, "value": "VIT推理算子1" } }, 
-     { "id": "node_5", fill:'#ccccccaa',"type": "ai-node", "x": 150, "y": 220, "properties": { "node": 5, "ui": "node-ai" }, "text": { "x": 160, "y": 220, "value": "VIT推理算子2" } }], 
-     "edges": 
-     [{ "id": "54555484-e393-4a43-8b51-1f407dd42c11", "type": "polyline", "sourceNodeId": "node_1", "targetNodeId": "node_3", "startPoint": { "x": 150, "y": 35 }, 
-     "endPoint": { "x": 150, "y": 75 }, 
-     "properties": {}, 
-     "pointsList": [{ "x": 150, "y": 35 }, { "x": 150, "y": 65 }, { "x": 150, "y": 65 }, { "x": 150, "y": 45 }, { "x": 150, "y": 45 }, { "x": 150, "y": 75 }] }, 
-     { "id": "46e53f10-8997-42fc-9107-9e0083670ce8", "type": "polyline", "sourceNodeId": "node_3", "targetNodeId": "node_4", 
-     "startPoint": { "x": 150, "y": 105 }, "endPoint": { "x": 150, "y": 135 }, 
-     "properties": {}, 
-     "pointsList": [{ "x": 150, "y": 105 }, { "x": 150, "y": 135 }, { "x": 150, "y": 135 }, { "x": 150, "y": 105 }, { "x": 150, "y": 105 }, { "x": 150, "y": 135 }] }, 
-     { "id": "7d5407fa-01f5-457c-8504-f5f464dd254f", "type": "polyline", "sourceNodeId": "node_4", "targetNodeId": "node_5", 
-     "startPoint": { "x": 150, "y": 165 }, "endPoint": { "x": 150, "y": 205 }, 
-     "properties": {}, 
-     "pointsList": [{ "x": 150, "y": 165 }, { "x": 150, "y": 195 }, { "x": 150, "y": 195 }, { "x": 150, "y": 175 }, { "x": 150, "y": 175 }, { "x": 150, "y": 205 }] }, 
-     { "id": "4ece042b-faf1-4e95-8213-ee1c9b6060c5", "type": "polyline", "sourceNodeId": "node_5", "targetNodeId": "node_2", 
-     "startPoint": { "x": 150, "y": 235 }, "endPoint": { "x": 150, "y": 275 }, 
-     "properties": {}, 
-     "pointsList": [{ "x": 150, "y": 235 }, { "x": 150, "y": 265 }, { "x": 150, "y": 265 }, { "x": 150, "y": 245 }, { "x": 150, "y": 245 }, { "x": 150, "y": 275 }] }] }
-    logicFlow.render(data)
-    */
 });
 </script>
 <style scoped lang='scss'>
 .flow-demo1 {
     height: 100%;
     overflow: hidden;
+    
     padding: 20px 0px 10px;
 
     .viewport {
         height: 100%;
+        height: 600px;
         overflow: hidden;
     }
 

src/views/connection/edit.vue

@@ -8,31 +8,31 @@
                 <el-row>
                     <el-col :span="12">
                         <el-form-item label="模型名称">
-                            <el-input disabled v-model="upForm.name" placeholder="目标分类模型" />
+                            <el-input disabled v-model="upForm.model_name" placeholder="目标分类模型" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item label="模型版本">
-                            <el-input disabled v-model="upForm.ver" placeholder="v1.0" />
+                            <el-input disabled v-model="upForm.model_version" placeholder="v1.0" />
                         </el-form-item>
                     </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="12">
                         <el-form-item label="互联名称">
-                            <el-input v-model="upForm.netName" placeholder="请输入互联名称" />
+                            <el-input v-model="upForm.connection_name" placeholder="请输入互联名称" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item label="标签">
-                            <el-input v-model="upForm.label" placeholder="请输入标签" />
+                            <el-input v-model="upForm.connection_label" placeholder="请输入标签" />
                         </el-form-item>
                     </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="24">
                         <el-form-item label="互联说明">
-                            <el-input v-model="upForm.netName" type="textarea" style="width:100%;" :rows="4"
+                            <el-input v-model="upForm.connection_desc" type="textarea" style="width:100%;" :rows="4"
                                 placeholder="请输入互联说明" />
                         </el-form-item>
                     </el-col>
@@ -40,85 +40,120 @@
                 </el-row>
             </el-form>
         </el-card>
-        <el-card style="margin-top: 12px;margin-bottom: 80px;">
+        <el-card style="margin-top: 12px;margin-bottom: 80px;" class="flow-card">
             <template #header>算子互联</template>
-            <div class="edit-content">
+            <div class="edit-content" style="position: relative;">
-                <div class="item" style="position: relative;">
+                <div class="item" style="position: relative;width:380px;">
-                    <div class="line-arrow" style="position: absolute;left: 100%;margin-left:10px; width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
+                    <div class="line-arrow"
+                        style="position: absolute;left: 100%;margin-left:10px; width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
                         <i-ep-arrow-right style="color:#409eff;position: absolute;right: -7px;top: -9px;" />
                     </div>
-                    <div class="div-title">
+                    <div class="div-title" style="display: none;">
                         <i-ep-office-building /><span>可用算子</span>
                     </div>
                     <div class="div-nodes">
                         <nodePanel :lf="lf" ref="ndPanel" />
                     </div>
                 </div>
-                <div  class="item" style="margin-left: 100px;">
+                <div style="flex-grow: 1;">
-                <div class="div-title">
+                    <editFlow ref="edFlow" @initLf="doInitLf" @updateNode="doUpdateNode" @nodeClick="doNodeClick" />
-                    <i-ep-setting/><span>互联设置</span>
                 </div>
-                <div class="div-chart">
+                <div class="item flow-info" style="margin-left: 100px;" v-if="selNode.info">
-                    <editFlow @initLf="doInitLf" @updateNode="doUpdateNode"/>
-                </div>
-                </div>
-                <div  class="item" style="margin-left: 100px;">
                     <div class="div-title">
                         <i-ep-document /><span>算子基本信息</span>
                     </div>
                     <div class="div-info">
                         <div class="row">
                             <span class="sp-label">算子名称:</span>
-                        <span class="sp-text">图像缩放</span>
+                            <span class="sp-text">{{ selNode.info.operator_name }}</span>
                         </div>
                         <div class="row">
                             <span class="sp-label">算子版本:</span>
-                        <span class="sp-text">1.0</span>
+                            <span class="sp-text">{{ selNode.info.operator_version }}</span>
                         </div>
                         <div class="row">
                             <span class="sp-label">算子说明:</span>
-                        <span class="sp-text">算子说明算子说明算子说明算子说明算子说明算子说明算子说明算子说明</span>
+                            <span class="sp-text">{{ selNode.info.operator_desc }}</span>
                         </div>
                         <div class="row">
                             <span class="sp-label">输入参数:</span>
                             <span class="sp-text">
-                            size(1024,1080)
+                                <el-input v-model="selNode.info.inputParams" type="textarea" style="width:100%;"
+                                    :rows="4" @input="doFlowInput" />
                             </span>
                         </div>
-                    <div class="row">
+                        <div class="row" style="margin-top:4px;">
                             <span class="sp-label">输出参数:</span>
                             <span class="sp-text">
-                            <div>size:(1024,1080)</div>
+                                <el-input v-model="selNode.info.outputParams" type="textarea" style="width:100%;"
-                            <div>type:nearest</div>
+                                    :rows="4" @input="doFlowInput" />
                             </span>
                         </div>
                     </div>
                 </div>
             </div>
-
         </el-card>
         <el-card class="card-footer">
             <el-button type="primary" @click="doSave">保存</el-button>
             <el-button @click="doCancel">取消</el-button>
-          
         </el-card>
     </div>
 </template>
 
-<script lang='ts' setup>
+<script setup>
 import nodePanel from './nodePanel.vue'
 import editFlow from './editFlow.vue'
+import ConnApi from '@/api/connection'
 const router = useRouter();
 const uploadForm = ref(ElForm)
+const route = useRoute()
 const upForm = reactive({
-    name: ''
+    model_name: '',
+    model_version: '',
+    connection_name: '',
+    connection_label: '',
+    connection_desc: ''
+});
+const info = reactive({
+    connInfo: null,
+    nodes: [],
+})
+const selNode = reactive({
+    info: null
 })
 let lf = ref(null)
+let edFlow = ref()
 const ndPanel = ref()
-const doUpdateNode=(data:any)=>{
+const doFlowInput = () => {
+    let tmps = info.nodes.filter(d => d.id == selNode.info.id);
+    if (tmps.length == 0) {
+        info.nodes.push(selNode.info)
+    } else {
+        tmps[0].inputParams = selNode.info.inputParams;
+        tmps[0].outputParams = selNode.info.outputParams;
+    }
+}
+const doUpdateNode = (data) => {
+    if (ndPanel && ndPanel.value) {
         ndPanel.value.updateNode(data)
     }
-const doInitLf=(o:any)=>{
+}
+const doNodeClick = (node) => {
+    if (node) {
+        selNode.info = node.data.properties.data;
+        let tmps = info.nodes.filter(d => d.id == selNode.info.id);
+        if (tmps.length == 0) {
+            info.nodes.push(selNode.info);
+        } else {
+            selNode.info.inputParams = tmps[0].inputParams;
+            selNode.info.outputParams = tmps[0].outputParams;
+        }
+    }
+    else {
+        selNode.info = null;
+    }
+}
+const doInitLf = (o) => {
     lf.value = o.value
 }
 const doSave = () => {
@@ -127,6 +162,20 @@ const doSave=()=>{
 const doCancel = () => {
     router.replace({ path: "/connection/index" })
 }
+const initData = () => {
+    let id = route.query.id;
+    ConnApi.detail(id).then(d => {
+        info.connInfo = d.data?.data || {};
+        upForm.model_name = info.connInfo.model_name;
+        upForm.model_version = info.connInfo.model_version;
+        upForm.model_name = info.connInfo.model_name;
+        upForm.model_name = info.connInfo.model_name;
+    });
+};
+onMounted(() => {
+    initData();
+    window.xapp = getCurrentInstance();
+});
 </script>
 <style scoped lang='scss'>
 .connection-edit {
@@ -137,54 +186,84 @@ const doCancel=()=>{
         font-weight: bold;
     }
 }
+
 .card-footer {
     position: fixed;
     width: calc(100% - 215px);
     bottom: 0px;
+
     :deep(.el-card__body) {
         padding: 10px;
+
         .el-pagination {
             justify-content: end;
         }
     }
 }
+
+.flow-card {
+    :deep(.el-card__body) {
+        padding: 0px;
+    }
+}
+
 .edit-content {
     display: flex;
-        justify-content: center;
+
     .item {
         width: 300px;
+
+        &.flow-info {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: #fff;
+
+            .div-info {
+                min-height: unset;
+                height: auto;
+            }
+        }
+
         .div-title {
             color: #409EFF;
             display: flex;
             align-items: center;
             font-size: 12px;
         }
+
         .div-nodes {
             border: solid 1px #409EFF;
             min-height: 600px;
             height: 600px;
+
             :deep(.el-tabs--border-card) {
                 border: none;
             }
         }
+
         .div-chart {
             border: solid 1px #409EFF;
             min-height: 600px;
             height: 600px;
         }
+
         .div-info {
             border: dotted 1px #409EFF;
             min-height: 600px;
             height: 600px;
             padding: 10px;
             font-size: 12px;
+
             .row {
                 display: flex;
+
                 .sp-label {
                     color: #888;
                     display: block;
                     white-space: nowrap;
                 }
+
                 .sp-text {
                     flex-grow: 1;
                     display: block;

src/views/connection/editFlow.vue

@@ -11,7 +11,7 @@ import '@logicflow/core/dist/style/index.css';
 import { Menu } from "@logicflow/extension";
 import AiNodeExtension from '@/components/flow/index'
 import RegisteMenu from '@/components/flow/menu.js'
-const emit=defineEmits(["initLf","updateNode"])
+const emit=defineEmits(["initLf","updateNode","nodeClick"])
 const themeApprove = {
     rect: { // 矩形样式
         radius: 8,
@@ -56,11 +56,14 @@ let showProp=ref(false)
 let nodeData=reactive(null)
 let nodePropKey=ref(1)
 const initEvent=(lf)=>{
+  lf.on("blank:click",node=>{    
+    emit("nodeClick",null)
+  });
   lf.on("element:click",node=>{
     nodeData=node.data
     showProp.value=true
     nodePropKey.value++
-    console.log("-->",nodeData)
+    emit("nodeClick",node)
   });
   lf.on("node:dnd-add",data=>{    
     nodeData=data.data;
@@ -86,11 +89,16 @@ const initEvent=(lf)=>{
     }
   });
 }
+const doEdit=(n)=>{
+    debugger
+}
 const doUpdateState=()=>{  
   //nodePanel.value.updateNode(lf.value.getGraphData());
     emit("updateNode",lf.value.getGraphData())
 }
-
+defineExpose({
+  doEdit,    
+})
 onMounted(() => {
     const logicFlow = new LogicFlow({
         ...config,
@@ -103,7 +111,7 @@ onMounted(() => {
     window.lf = lf;
     logicFlow.render({
     nodes: [
-      {
+     /* {
         id: 'node_1',
         type: 'ai-node',
         x: 150,
@@ -124,7 +132,7 @@ onMounted(() => {
         properties:{
           node:900
         }
-      }
+      }*/
     ],
     edges: [
       
@@ -140,7 +148,7 @@ onMounted(() => {
     padding: 0px;
 
     .viewport {
-        height: 100%;
+        height: 600px;
         overflow: hidden;
     }
 

src/views/connection/nodePanel.vue

@@ -2,12 +2,26 @@
     <div class="node-panel">
         <el-tabs type="border-card">
             <el-tab-pane label="前处理算子">
-                <div v-for="(it1, idx1) in list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)" v-show="it1.show">
+                <div v-for="(it1, idx1) in info.list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)"
+                    v-show="it1.show">
                     {{ it1.text }}
                 </div>
             </el-tab-pane>
             <el-tab-pane label="后处理算子">
-                <div v-for="(it2, idx2) in list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"  v-show="it2.show">
+                <div v-for="(it2, idx2) in info.list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"
+                    v-show="it2.show">
+                    {{ it2.text }}
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="数据源算子">
+                <div v-for="(it2, idx2) in info.list3" :key="idx2" class="div-item item3" @mousedown="dragNode(it2, 3)"
+                    v-show="it2.show">
+                    {{ it2.text }}
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="数据报告算子">
+                <div v-for="(it2, idx2) in info.list4" :key="idx2" class="div-item item4" @mousedown="dragNode(it2, 4)"
+                    v-show="it2.show">
                     {{ it2.text }}
                 </div>
             </el-tab-pane>
@@ -16,6 +30,7 @@
 </template>
 
 <script setup>
+import OperApi from '@/api/operator'
 const props = defineProps({
     lf: {
         type: Object,
@@ -24,16 +39,32 @@ const props = defineProps({
     }
 })
 const dragNode = (it, t) => {
+    let color = '#409effaa';
+    if (t == 2) {
+        color = '#ccccccaa';
+    }
+    if (t == 3) {
+        color = '#038181aa';
+    }
+    if (t == 4) {
+        color = '#eeb806aa';
+    }
     props.lf.dnd.startDrag({
         type: 'ai-node',
         text: it.text,
-        fill: t == 1 ? '#409effaa' : '#ccccccaa',
+        fill: color,
         properties: {
-          node:it.id
+            node: it.id,
+            data:it
         }
     })
 }
-
+const info = reactive({
+    list1: [],
+    list2: [],
+    list3: [],
+    list4: []
+})
 const list1 = reactive([
     { text: "图像缩放", id: 201, show: true },
     { text: "RGB12图像格式转换", id: 202, show: true },
@@ -61,17 +92,51 @@ const updateNode=(nodes)=>{
     })
 }
 
+const doEdit=(nd)=>{
+    debugger
+    let tmps=info.all.filter(d=>d.id==nd.id);
+    if(tmps.length>0){
+        tmps[0].inputParams=nd.inputParams;
+        tmps[0].outputParams=nd.inputParams;
+    }
+}
 defineExpose({
-    updateNode
+    updateNode,
+    doEdit,     
 })
 
+const initData = () => {
+    OperApi.list().then(d => {
+        let tmps = (d.data?.data?.operator_list || []).map(it => {
+            it.show = true;
+            it.text = it.operator_name;
+            it.id = it.operator_id
+            it.inputParams="";
+            it.outputParams="";
+            return it;
+        });
+        info.all=tmps;
+        info.list1 = tmps.filter(d => d.oper_main_type == "pre_process");
+        info.list2 = tmps.filter(d => d.oper_main_type == "post_process");
+        info.list3 = tmps.filter(d => d.oper_main_type == "data_source");
+        info.list4 = tmps.filter(d => d.oper_main_type == "data_report");
+    });
+}
+onMounted(() => {
+    initData();
+});
+
 </script>
 <style lang='scss'>
 .node-panel {
+    .el-tabs__item {
+        padding: 0px 8px !important;
+    }
+
     .div-item {
         font-size: 12px;
         border: solid 1px #888;
-        margin-bottom: 10px;
+        margin: 0px 40px 10px;
         line-height: 30px;
         text-align: center;
         border-radius: 4px;
@@ -82,6 +147,14 @@ defineExpose({
         &.item2 {
             background: #ccccccaa;
         }
+
+        &.item3 {
+            background: #038181aa;
+        }
+
+        &.item4 {
+            background: #eeb806aa;
+        }
     }
 }
 </style>