AIManage/src/views/model/modelDetail.vue

<template>
 <div class="app-container model-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">{{modelInfo.info.model_name}}</span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">模型类型:</span>
                    <span class="sp-text">{{modelInfo.info.modl_main_type_name}}
                        /{{modelInfo.info.modl_sub_type_name}}
                    </span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">模型版本:</span>
                    <span class="sp-text">
                        {{modelInfo.info.model_version}}
                    </span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">版本描述:</span>
                    <span class="sp-text">
                        {{modelInfo.info.model_desc}}
                    </span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">模型网络:</span>
                    <span class="sp-text">
                        {{modelInfo.info.modl_net_type}}
                    </span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">上传用户:</span>
                    <span class="sp-text"> {{modelInfo.info.user_name}}</span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">算法框架:</span>
                    <span class="sp-text">
                        {{modelInfo.info.modl_framework}}
                    </span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">上传时间:</span>
                    <span class="sp-text">
                        {{modelInfo.info.create_time}}
                    </span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">文件格式:</span>
                    <span class="sp-text">
                        {{modelInfo.info.modl_file_type}}
                    </span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">网络配置:</span>
                    <span class="sp-text sp-file">
                        <a style="line-height:24px;"ref="#"><el-icon><Document /></el-icon>查看配置文件</a>
                    </span>
                </td>
            </tr>
        </table>
    </el-card>
    <el-card style="margin-top: 12px;">
        <template #header>
            <svg-icon  icon-class="pause" style="width:20px;height:20px;" />可适配算子</template>
        <el-button v-for="(it,idx) in modelInfo.opers" :key="idx">{{ it.oper_type_name }}</el-button>
        
    </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 style="position: relative;min-height:50vh;" class="scroll">
            <iframe frameborder="0" scrolling="no" :src="url" style="width:100%;height:100%;position: absolute;top:0px;"></iframe>
            </div>
    </el-card>
    <el-card class="card-footer">
            <el-button type="primary" @click="doBack">返回</el-button>
        </el-card>
    </div>
</template>

<script  setup>
import ModelApi from '@/api/models'
import request from 'axios'
const router = useRouter();
const route =useRoute()
let url=ref("")
let modelInfo=reactive({
    info:{},
    opers:[]
})
const initData=()=>{    
    let id=route.query.id;
    let ajaxs=[];
    ajaxs.push(ModelApi.findOne(id))
    ajaxs.push(ModelApi.adaptOperators(id));
    request.all(ajaxs).then(res=>{
        modelInfo.info=res[0].data?.data||{};
        modelInfo.opers=res[1].data?.data?.adapt_operator_list||[];
    });
};
onMounted(()=>{
  url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx";
  initData();
});
const doBack=()=>{
    if(route.query.from=='simulation'){
        router.push({path:"/simulationEvaluation/index"})
        return;
    }
    router.push({path:"/modelMgr/index"})
}
</script>
<style scoped lang='scss'>
.model-detail{
    :deep(.el-card__header){
        padding:8px 4px;
        display: flex;
        align-items: center
    }    
}
.sp-file{
    color:#29d;    
}
.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>