Merge branch 'main' of http://62.234.3.186:3000/sxyanzhu/AIManage

src/views/connection/detail.vue

@@ -77,25 +77,41 @@
                             <span class="sp-label">算子说明:</span>
                             <span class="sp-text">{{ info.selNode.operator_desc }}</span>
                         </div>
-                    <!--
+                        <div class="row" v-if="info.param.inputs.length > 0">
-                    <div class="row">
                             <span class="sp-label">输入参数:</span>
-                        <span class="sp-text">
+                            <div class="div-param">
-                            size(1024,1080)
+                                <div v-if="info.param.inputs.length > 1" class="div-navs">
+                                    <span v-for="(it, idx) in info.param.inputs" @click="doInputSelected(idx)" :key="idx"
+                                        class="sp-nav" :class="it.selected ? 'active' : ''">{{ it.input_id }}</span>
+                                </div>
+                                <span class="sp-text  sp-paramter scroll">
+                                    <span v-for="(it, idx) in info.param.inputs " :key="idx" v-show="it.selected"
+                                        class="param-item">
+                                        <paramShow :paramInfo="it"></paramShow>
+                                    </span>
                                 </span>
                             </div>
-                    <div class="row">
+                        </div>
+                        <div class="row" style="margin-top:4px;" v-if="info.param && info.param.outputs">
                             <span class="sp-label">输出参数:</span>
-                        <span class="sp-text">
+                            <div class="div-param">
-                            <div>size:(1024,1080)</div>
+                                <div v-if="info.param.outputs.length > 1" class="div-navs">
-                            <div>type:nearest</div>
+                                    <span v-for="(it, idx) in info.param.outputs" @click="doOutputSelected(idx)"
+                                        :key="idx" class="sp-nav" :class="it.selected ? 'active' : ''">{{ it.output_id
+                                        }}</span>
+                                </div>
+                                <span class="sp-text sp-paramter scroll">
+                                    <span v-for="(it, idx) in info.param.outputs " :key="idx" v-show="it.selected"
+                                        class="param-item">
+                                        <paramShow :paramInfo="it"></paramShow>
+                                    </span>
                                 </span>
                             </div>
-                    -->
+                        </div>
-                    <div class="row">
+                        <div class="row" style="margin-top:4px;" v-if="info.param && info.param.process">
-                        <span class="sp-label">参数:</span>
+                            <span class="sp-label">处理参数:</span>
-                        <span class="sp-text">
+                            <span class="sp-text  sp-paramter scroll" v-if="info.param.process">
-                            <span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span>
+                                <paramShow :paramInfo="info.param.process"></paramShow>
                             </span>
                         </div>
 
@@ -112,11 +128,13 @@
 <script setup>
 import detailFlow from './detailFlow.vue';
 import ConnApi from '@/api/connection'
+import paramShow from './paramShow.vue'
 const router = useRouter();
 const route = useRoute()
 const info = reactive({
     data: {},
-    selNode:null
+    selNode: null,
+    param: null,
 })
 const operFlow = ref();
 
@@ -140,12 +158,28 @@ const loadData=()=>{
     });
 };
 const doNodeClick = (node) => {
-    info.selNode=node;
+    info.selNode = node?.properties?.data || {};
+    info.param = node?.properties?.data?.parameters || { inputs: [], outputs: [], process: {} }
+    info.param.inputs.forEach((d, idx) => {
+        d.selected = idx == 0;
+    });
+    info.param.outputs.forEach((d, idx) => {
+        d.selected = idx == 0;
+    });
 }
 onMounted(() => {
     loadData();
 });
-
+const doInputSelected=idx=>{
+    info.param.inputs.forEach((it,i)=>{
+        it.selected=i==idx;
+    });
+}
+const doOutputSelected=idx=>{
+    info.param.outputs.forEach((it,i)=>{
+        it.selected=i==idx;
+    });
+}
 </script>
 <style scoped lang='scss'>
 .connection-detail {
@@ -154,49 +188,88 @@ onMounted(() => {
         display: flex;
         align-items: center
     }
+
     .detail-content {
+        .sp-paramter {
+            height: 100px;
+            border: solid 1px #409EFF;
+            overflow-y: auto;
+            padding: 4px;
+            cursor: pointer;
+
+            .param-item {
+                display: block;
+            }
+        }
+
         .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;
                 align-items: center;
                 font-size: 12px;
             }
+
             .div-chart {
                 border: solid 1px #409EFF;
                 min-height: 400px;
                 height: 400px;
             }
+
             .div-info {
                 border: dotted 1px #409EFF;
-                min-height: 400px;    
+                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;
                     }
+
+                    .div-param {
+                        .div-navs {
+                            .sp-nav {
+                                display: inline-block;
+                                line-height: 24px;
+                                padding: 0px 12px;
+                                cursor: pointer;
+
+                                &.active {
+                                    background-color: #409EFF;
+                                    color: #fff;
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -205,6 +278,7 @@ onMounted(() => {
 
 .tb-base-info {
     line-height: 30px;
+
     :deep(span) {
         font-size: 14px;
     }
@@ -213,12 +287,15 @@ onMounted(() => {
 :deep(.svg-icon) {
     margin-right: 8px;
 }
+
 .card-footer {
     position: fixed;
     width: calc(100% - 215px);
     bottom: 0px;
+
     :deep(.el-card__body) {
         padding: 10px;
+
         .el-pagination {
             justify-content: end;
         }

src/views/connection/detailFlow.vue

@@ -85,13 +85,7 @@ defineExpose({
 })
 const initEvent=(lf)=>{
   lf.on("element:click",node=>{
-    let nodeId=node.data.properties.node;
+    emit("nodeClick",node.data);
-    let nd=null;
-    if(nodeId){
-        let tmps=info.opers.filter(d=>d.operator_id==nodeId);
-        nd=tmps.length>0?tmps[0]:null;
-    }
-    emit("nodeClick",nd);
   });
 }
 onMounted(() => {

src/views/connection/edit.vue

@@ -151,7 +151,8 @@ const info = reactive({
     editObj: null,
 })
 const selNode = reactive({
-    info: null
+    info: null,
+    node:null,
 })
 let lf = ref(null)
 let edFlow = ref()
@@ -174,7 +175,7 @@ const doEditSuccess = (obj) => {
             if(cobjs.length>0){
                 let cobj=cobjs[0];
                 o.attrs.forEach(oo=>{
-                    if(oo.name=="dataType"){
+                    if(oo.name=="oper_inout_data_type"){
                         cobj.oper_inout_data_type=oo.value;
                     }else{
                         cobj[oo.name].value=oo.value;
@@ -189,7 +190,7 @@ const doEditSuccess = (obj) => {
             if(cobjs.length>0){
                 let cobj=cobjs[0];
                 o.attrs.forEach(oo=>{
-                    if(oo.name=="dataType"){
+                    if(oo.name=="oper_inout_data_type"){
                         cobj.oper_inout_data_type=oo.value;
                     }else{
                         cobj[oo.name].value=oo.value;
@@ -211,6 +212,7 @@ const doEditSuccess = (obj) => {
         tmps[0].outputs = selNode.info.parameters.outputs;
         tmps[0].process = selNode.info.parameters.process;
     }
+    edFlow.value.updateNode(selNode.info,selNode.node);
 };
 const doEdit = (obj, title, t) => {
     info.editObj = {
@@ -239,6 +241,7 @@ const doUpdateNode = (data) => {
 const doNodeClick = (node) => {    
     if (node) {        
         selNode.info = node.data.properties.data;      
+        selNode.node=node; 
         let tmps = info.nodes.filter(d => d.id == selNode.info.id);
         if (tmps.length == 0) {
             info.nodes.push(selNode.info);

src/views/connection/editFlow.vue

@@ -99,7 +99,7 @@ const doUpdateState=()=>{
     emit("updateNode",lf.value.getGraphData())
 }
 
-const getFLowData=()=>{
+const getFlowData=()=>{
   return lf.value.getGraphData();
 }
 onMounted(() => {
@@ -114,39 +114,20 @@ onMounted(() => {
     emit("initLf",lf);
     window.lf = lf;
     logicFlow.render({
-    nodes: [
+    nodes: [],
-     /* {
+    edges: []
-        id: 'node_1',
-        type: 'ai-node',
-        x: 150,
-        y: 40,
-        fill:'#409effaa',
-        text: '图像缩放',
-        properties:{
-          node:201
-        }
-      },
-      {
-        id: 'node_2',
-        type: 'ai-node',
-        x: 150,
-        y: 540,
-        fill:'#3CB371',
-        text: '目标绘图',
-        properties:{
-          node:900
-        }
-      }*/
-    ],
-    edges: [
-      
-    ]
   })
   doUpdateState();  
 });
+const updateNode=(info,node)=>{
+  lf.value.setProperties(node.data.id,{
+    data:info
+  })
+}
 defineExpose({
   doEdit,    
-  getFLowData
+  getFlowData,
+  updateNode
 })
 </script>
 <style scoped lang='scss'>

src/views/connection/editParamDlg.vue

@@ -12,7 +12,7 @@
                 <div v-for="(item, index) in it.attrs" :key="index" class="div-item">
                     <span class="sp-label">{{ item.name }}</span>
                     <span class="sp-value">
-                        <el-input v-model="item.value" v-if="item.type == 'input'"  @blur="doCheckInput(item)"/>
+                        <el-input v-model="item.value" :disabled="item.name=='oper_inout_data_type'" v-if="item.type == 'input'"  @blur="doCheckInput(item)"/>
                         <el-select v-model="item.value" v-else>
                             <el-option v-for="(opt, oidx) in item.options" :key="oidx" :label="opt" :value="opt" />
                         </el-select>
@@ -98,7 +98,7 @@ const showDialog = (opt) => {
             if (o.oper_inout_data_type) {
                 attr.attrs.push(
                     {
-                        name: "dataType",
+                        name: "oper_inout_data_type",
                         value: o.oper_inout_data_type,
                         oldValue:o.oper_inout_data_type,
                         type: "input",
@@ -159,7 +159,7 @@ defineExpose({
         align-items: center;
         margin-bottom: 10px;
         .sp-label{
-            width:100px;
+            width:140px;
             text-align: right;
             margin-right: 10px;
         }