taais-web/src/views/taais/homePage/inferResult.vue

<template>
  <div class="trainResult-container">
    <h4>推理结果</h4>
    <div class="table">
      <ProTable
        ref="proTable"
        row-key="userId"
        :indent="20"
        :columns="columns"
        :tool-button="false"
        :data="tableData"
        :request-auto="false"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
      >
        <template #yuan="scope">
          <el-image
            style="width: 100px; height: 100px"
            :preview-src-list="[getImageUrl(scope.row.yuan)]"
            :src="getImageUrl(scope.row.yuan)"
            :z-index="9999"
          />
        </template>
        <template #algo1="scope">
          <el-image
            style="width: 100px; height: 100px"
            :preview-src-list="[getImageUrl(scope.row.algo1)]"
            :src="getImageUrl(scope.row.algo1)"
            :z-index="9999"
          />
        </template>
        <template #algo2="scope">
          <el-image
            style="width: 100px; height: 100px"
            :preview-src-list="[getImageUrl(scope.row.algo2)]"
            :src="getImageUrl(scope.row.algo2)"
            :z-index="9999"
          />
        </template>
        <template #algo3="scope">
          <el-image
            style="width: 100px; height: 100px"
            :preview-src-list="[getImageUrl(scope.row.algo3)]"
            :src="getImageUrl(scope.row.algo3)"
            :z-index="9999"
          />
        </template>
        <template #algo4="scope">
          <el-image
            style="width: 100px; height: 100px"
            :preview-src-list="[getImageUrl(scope.row.algo3)]"
            :src="getImageUrl(scope.row.algo4)"
            :z-index="9999"
          />
        </template>
      </ProTable>
      <el-button class="btn" @click="goBack()"> 上一步 </el-button>
      <el-button class="btn next" type="success" @click="goHome()"> 返回首页 </el-button>
    </div>
  </div>
</template>
<script setup lang="tsx" name="trainResult">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { deptTreeSelectApi } from '@/api/modules/system/user'
import { getInferList } from '@/api/modules/taais/task'
const tableData = getInferList()
const router = useRouter()
onMounted(() => {
  getTreeFilter()
})
const getImageUrl = name => {
  return new URL(`../../../assets/taaisImg/${name}`, import.meta.url).href
}
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ deptId: '' })

// 获取 treeFilter 数据
// 当 proTable 的 requestAuto 属性为 false，不会自动请求表格数据，等待 treeFilter 数据回来之后，更改 initParam.departmentId 的值，才会触发请求 proTable 数据
const treeFilterData = ref<any>([])
const getTreeFilter = async () => {
  const { data } = await deptTreeSelectApi()
  treeFilterData.value = data
  initParam.deptId = treeFilterData.value[0].id
}
// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { prop: 'yuan', label: '原图' },
  { prop: 'algo1', label: '算法1推理' },
  { prop: 'algo2', label: '算法2推理' },
  { prop: 'algo3', label: '算法3推理' },
  { prop: 'algo4', label: '算法4推理' }
])
const goHome = () => {
  router.push(`/index`)
}
const goBack = () => {
  router.push(`/logPage/1`)
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>