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.model_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.operator_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(() => {
  let id = route.query.id;
  url.value = "./onnx/onnx.html?id=" + id;
  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>