AIManage/src/views/connection/detail.vue

<template>
    <div class="app-container connection-detail">
        <el-card>
            <template #header>
                <svg-icon icon-class="pause" style="width:20px;height:20px;" />
                互联协议信息</template>
            <table style="width:100%" class="tb-base-info">
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">模型名称:</span>
                        <span class="sp-text">{{ info.data.model_name }}</span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">模型版本:</span>
                        <span class="sp-text">{{ info.data.connection_version}}</span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">互联名称:</span>
                        <span class="sp-text">{{ info.data.connection_name }}</span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">标签:</span>
                        <span class="sp-text">{{ info.data.connection_label }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">创建用户:</span>
                        <span class="sp-text">{{ info.data.user_name }}</span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">创建时间:</span>
                        <span class="sp-text">{{ info.data.create_time }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100%;" colspan="2">
                        <span class="sp-title">互联说明:</span>
                        <span class="sp-text">{{ info.data.connection_desc }}</span>
                    </td>

                </tr>
            </table>
        </el-card>
        <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" style="position: relative;">
                <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">
                   
                </div>
                </div>
                <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">
                    
                    <div class="row">
                        <span class="sp-label">算子名称:</span>
                        <span class="sp-text">{{ info.selNode.operator_name }}</span>
                    </div>
                    <div class="row">
                        <span class="sp-label">算子版本:</span>
                        <span class="sp-text">{{ info.selNode.operator_version }}</span>
                    </div>
                    <div class="row">
                        <span class="sp-label">算子说明:</span>
                        <span class="sp-text">{{ info.selNode.operator_desc }}</span>
                    </div>
                    <!--
                    <div class="row">
                        <span class="sp-label">输入参数:</span>
                        <span class="sp-text">
                            size(1024,1080)
                        </span>
                    </div>
                    <div class="row">
                        <span class="sp-label">输出参数:</span>
                        <span class="sp-text">
                            <div>size:(1024,1080)</div>
                            <div>type:nearest</div>
                        </span>
                    </div>
                    -->
                    <div class="row">
                        <span class="sp-label">参数:</span>
                        <span class="sp-text">
                            <span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span>
                        </span>
                    </div>
                
                </div>
                </div>
            </div>
        </el-card>
        <el-card class="card-footer">
            <el-button type="primary" @click="doBack">返回</el-button>
        </el-card>
    </div>
</template>

<script  setup>
import detailFlow from './detailFlow.vue';
import ConnApi from '@/api/connection'
const router = useRouter();
const route =useRoute()
const info=reactive({
    data:{},
    selNode:null
})
const operFlow=ref();

const doBack=()=>{
    router.replace({path:"/connection/index"})
}
const mapToArray=obj=>{
    let arr=[];
    for(let k in obj){
        arr.push({
            key:k,value:obj[k]
        })
    };
    return arr;
}
const loadData=()=>{
    let id=route.query.id;
    ConnApi.detail(id).then(d=>{
        info.data=d.data?.data||{};
        operFlow.value.showFlow(info.data)
    });
};
const doNodeClick=(node)=>{
    info.selNode=node;
}
onMounted(() => {
  loadData();
});

</script>
<style scoped lang='scss'>
.connection-detail {
    :deep(.el-card__header) {
        padding: 8px 4px;
        display: flex;
        align-items: center
    }
    .detail-content{
        .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;    
                padding:10px;
                font-size: 12px;            
                .row{
                    display: flex;
                    .sp-label{
                        color:#888;
                        display: block;                        
                        white-space: nowrap;
                    }
                    .sp-text{
                        flex-grow: 1;
                        display: block;
                    }
                }
            }
        }
    }
}

.tb-base-info {   
    line-height: 30px;
    :deep(span){
        font-size: 14px;
    }
}

: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;
    }
  }
}
</style>