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

src/views/connection/detail.vue

@@ -12,7 +12,7 @@
                     </td>
                     <td style="width: 50%;">
                         <span class="sp-title">模型版本:</span>
-                        <span class="sp-text">{{ info.data.connection_version}}</span>
+                        <span class="sp-text">{{ info.data.connection_version }}</span>
                     </td>
                 </tr>
                 <tr>
@@ -49,11 +49,11 @@
                 <svg-icon icon-class="pause" style="width:20px;height:20px;" />
                 算子互联信息</template>
             <div class="detail-content" style="position: relative;">
-                <detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
+                <detailFlow ref="operFlow" @nodeClick="doNodeClick" />
 
-                <div  class="item" v-if="1==2">
+                <div class="item" v-if="1 == 2">
                     <div class="div-title">
-                    <i-ep-setting/><span>互联设置</span>
+                        <i-ep-setting /><span>互联设置</span>
                     </div>
                     <div class="div-chart">
 
@@ -61,7 +61,7 @@
                 </div>
                 <div class="item node-info" style="margin-left: 100px;" v-if="info.selNode">
                     <div class="div-title">
-                    <i-ep-document/><span>算子基本信息</span>
+                        <i-ep-document /><span>算子基本信息</span>
                     </div>
                     <div class="div-info">
 
@@ -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,40 +128,58 @@
 <script setup>
 import detailFlow from './detailFlow.vue';
 import ConnApi from '@/api/connection'
+import paramShow from './paramShow.vue'
 const router = useRouter();
-const route =useRoute()
+const route = useRoute()
-const info=reactive({
+const info = reactive({
-    data:{},
+    data: {},
-    selNode:null
+    selNode: null,
+    param: null,
 })
-const operFlow=ref();
+const operFlow = ref();
 
-const doBack=()=>{
+const doBack = () => {
-    router.push({path:"/connection/index"})
+    router.push({ path: "/connection/index" })
 }
-const mapToArray=obj=>{
+const mapToArray = obj => {
-    let arr=[];
+    let arr = [];
-    for(let k in obj){
+    for (let k in obj) {
         arr.push({
-            key:k,value:obj[k]
+            key: k, value: obj[k]
         })
     };
     return arr;
 }
-const loadData=()=>{
+const loadData = () => {
-    let id=route.query.id;
+    let id = route.query.id;
-    ConnApi.detail(id).then(d=>{
+    ConnApi.detail(id).then(d => {
-        info.data=d.data?.data||{};
+        info.data = d.data?.data || {};
         operFlow.value.showFlow(info.data)
     });
 };
-const doNodeClick=(node)=>{
+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{
+
-        .item{
+    .detail-content {
-            width:300px;
+        .sp-paramter {
-            &.node-info{
+            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;
+                right: 10px;
-                top:10px;
+                top: 10px;
-                .div-chart{
+
+                .div-chart {
                     min-height: unset;
                     height: auto;
                 }
-                .div-info{
+
+                .div-info {
                     min-height: unset;
                     height: auto;
                 }
             }
-            .div-title{
+
-                color:#409EFF;
+            .div-title {
+                color: #409EFF;
                 display: flex;
                 align-items: center;
                 font-size: 12px;
             }
-            .div-chart{
+
-                border:solid 1px #409EFF;
+            .div-chart {
+                border: solid 1px #409EFF;
                 min-height: 400px;
                 height: 400px;
             }
-            .div-info{
+
-                border:dotted 1px #409EFF;
+            .div-info {
-                min-height: 400px;    
+                border: dotted 1px #409EFF;
-                padding:10px;
+                min-height: 600px;
+                height: 600px;
+                padding: 10px;
                 font-size: 12px;
-                .row{
+
+                .row {
                     display: flex;
-                    .sp-label{
+
-                        color:#888;
+                    .sp-label {
+                        color: #888;
                         display: block;
                         white-space: nowrap;
                     }
-                    .sp-text{
+
+                    .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,7 +278,8 @@ onMounted(() => {
 
 .tb-base-info {
     line-height: 30px;
-    :deep(span){
+
+    :deep(span) {
         font-size: 14px;
     }
 }
@@ -213,13 +287,16 @@ onMounted(() => {
 :deep(.svg-icon) {
     margin-right: 8px;
 }
-.card-footer{
+
+.card-footer {
     position: fixed;
     width: calc(100% - 215px);
     bottom: 0px;
-  :deep(.el-card__body){
+
-    padding:10px;
+    :deep(.el-card__body) {
-    .el-pagination{
+        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;
         }