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">目标分类模型</span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">模型类型:</span>
                    <span class="sp-text">目标分类</span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">模型版本:</span>
                    <span class="sp-text">1.0</span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">版本描述:</span>
                    <span class="sp-text">进行10中类型的目标分类建模和一些其他操作。</span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">模型网络:</span>
                    <span class="sp-text">目标分类</span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">上传用户:</span>
                    <span class="sp-text">王大大</span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">算法框架:</span>
                    <span class="sp-text">ONNX</span>
                </td>
                <td style="width: 50%;">
                    <span class="sp-title">上传时间:</span>
                    <span class="sp-text">2023-12-12 12:12:12</span>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <span class="sp-title">文件格式:</span>
                    <span class="sp-text">ONNX</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>前处理-GRAY图像格式</el-button>
        <el-button>前处理-GRAY图像格式</el-button>
        <el-button>前处理-GRAY图像格式</el-button>
        <el-button>前处理-RGB24图像格式</el-button>
    </el-card>
    <el-card style="margin-top: 12px;">
        <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>
    </div>
</template>

<script  setup>
let url=ref("")
onMounted(()=>{
  url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx"
});
</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(.svg-icon){
    margin-right:8px;
}
</style>