taais-web/src/views/demo/toInfrared/index.vue

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listToInfraredApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['demo:toInfrared:add']" icon="CirclePlus" @click="openDialog(1, '可见光转红外新增')"> 新增 </el-button>
        <!-- <el-button type="primary" v-auth="['demo:toInfrared:import']" icon="Upload" plain @click="batchAdd"> 导入 </el-button>
        <el-button type="primary" v-auth="['demo:toInfrared:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button> -->
        <el-button
          type="danger"
          v-auth="['demo:toInfrared:remove']"
          icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link icon="View" v-if="scope.row.algorithmModelId != null" @click="openModelDialog(scope.row)">
          <!--@click="openStartDialog(scope.row)"  -->
          详情
        </el-button>
        <el-button
          type="primary"
          link
          icon="View"
          v-auth="['demo:ToInfrared:start']"
          v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '4'"
          @click="startToInfrared(scope.row)"
        >
          <!--@click="openStartDialog(scope.row)"  -->
          开始
        </el-button>
        <el-popconfirm title="确定终止此任务吗?" @confirm="stopToInfrared(scope.row)" v-if="scope.row.status == '1'">
          <template #reference>
            <el-button type="primary" link icon="Delete"> 终止</el-button>
          </template>
        </el-popconfirm>
        <el-button
          type="primary"
          link
          icon="View"
          v-auth="['demo:DataSeq:query']"
          v-if="scope.row.status == '2' && scope.row.type == AlgorithmType2['预测/推理']"
          @click="preview(scope.row)"
        >
          预览
        </el-button>
        <el-button
          type="primary"
          link
          icon="View"
          v-auth="['demo:ToInfrared:download']"
          v-if="scope.row.status == '2'"
          @click="dowloadToInfrared(scope.row)"
        >
          下载
        </el-button>
        <!-- <el-button type="primary" link icon="View" v-auth="['demo:toInfrared:query']" @click="openDialog(3, '查看', scope.row)"> 查看 </el-button> -->
        <!-- <el-button type="primary" link icon="EditPen"v-auth="['demo:toInfrared:edit']" @click="openDialog(2, '编辑', scope.row)"> 编辑 </el-button> -->
        <el-button
          type="primary"
          link
          icon="Delete"
          v-auth="['demo:toInfrared:remove']"
          @click="deleteToInfrared(scope.row)"
          :disabled="scope.row.status == '1'"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" />
    <ImportExcel ref="dialogRef" />
    <PreviewImages :visible="dialogVisible" :urls="imageUrls" @close="dialogVisible = false" />
  </div>
</template>

<script setup lang="tsx" name="ToInfrared">
import { ref, reactive, onMounted } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { ElMessage, ElMessageBox } from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import FormDialog from '@/components/FormDialog/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import {
  listToInfraredApi,
  delToInfraredApi,
  addToInfraredApi,
  updateToInfraredApi,
  importTemplateApi,
  importToInfraredDataApi,
  exportToInfraredApi,
  startToInfraredApi,
  stopToInfraredApi,
  dowloadToInfraredApi,
  getToInfraredApi
} from '@/api/modules/demo/toInfrared'

import { getImagesApi, listDataSeqApi } from '@/api/modules/demo/DataSeq'

import { enumAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
import { getAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
import { enumAlgorithmConfigTrackApi } from '@/api/modules/demo/AlgorithmConfigTrack'
import statusEnums from '@/utils/status'
import { AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSystem, AlgorithmType2 } from '@/views/demo/utils'
import PreviewImages from '@/views/demo/components/PreviewImages.vue'
import { Row } from 'element-plus/es/components/table-v2/src/components'

const dialogVisible = ref(false)
const imageUrls = ref([])
const preview = async row => {
  console.log('showImages:', row.inputOssId)
  const data: any = await getImagesApi(row.inputOssId, '_to_infrared', false, 'predict')
  imageUrls.value = data.data
  dialogVisible.value = true
}

const openModelDialog = async row => {
  const algorithmModelId = row.algorithmModelId
  const result: any = await getAlgorithmModelTrackApi(algorithmModelId)

  // console.log(result.data)
  setItemsOptionsModel()
  const params = {
    title: '模型',
    width: 580,
    isEdit: false,
    itemsOptions: itemsOptions,
    model: result.data,
    api: updateToInfraredApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

const startToInfrared = async (params: any) => {
  const res: any = await startToInfraredApi(params.id)
  if (res.code === 200) {
    ElMessage.success('任务已开始，请等待完成！')
  } else {
    ElMessage.error('任务开始失败，请检查！')
  }
  proTable.value?.getTableList()
}

const stopToInfrared = async (params: any) => {
  const res: any = await stopToInfraredApi(params.id)
  if (res.code === 200) {
    ElMessage.success('终止任务成功！')
  } else {
    ElMessage.error('终止任务失败，请检查！')
  }
  proTable.value?.getTableList()
}
const dowloadToInfrared = async (params: any) => {
  if (params.type == AlgorithmType2['训练']) {
    await useDownload(dowloadToInfraredApi, params.name, params.id, true, '.pt')
  } else if (params.type == AlgorithmType2['预测/推理']) {
    await useDownload(dowloadToInfraredApi, params.name, params.id, true, '.zip')
  }
}

const openStartDialog = async (row: any) => {
  let res = { data: {} }
  if (row?.id) {
    res = await getToInfraredApi(row?.id || null)
  }
  // 重置表单
  setItemsOptions2()
  const params = {
    title: '开始任务',
    width: 580,
    isEdit: true,
    itemsOptions: itemsOptions,
    model: res.data,
    api: startToInfraredApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

// ProTable 实例
const proTable = ref<ProTableInstance>()

// 删除可见光转红外信息
const deleteToInfrared = async (params: any) => {
  await useHandleData(delToInfraredApi, params.id, '删除【' + params.id + '】可见光转红外')
  proTable.value?.getTableList()
}

// 批量删除可见光转红外信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delToInfraredApi, ids, '删除所选可见光转红外信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 导出可见光转红外列表
const downloadFile = async () => {
  ElMessageBox.confirm('确认导出可见光转红外数据?', '温馨提示', { type: 'warning' }).then(() =>
    useDownload(exportToInfraredApi, '可见光转红外列表', proTable.value?.searchParam)
  )
}

// 批量添加可见光转红外
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '可见光转红外',
    tempApi: importTemplateApi,
    importApi: importToInfraredDataApi,
    getTableList: proTable.value?.getTableList
  }
  dialogRef.value?.acceptParams(params)
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  let res = { data: {} }
  if (row?.id) {
    res = await getToInfraredApi(row?.id || null)
  }
  // 重置表单
  setItemsOptions()
  const params = {
    title,
    width: 580,
    isEdit: type !== 3,
    itemsOptions: itemsOptions,
    model: type == 1 ? {} : res.data,
    api: type == 1 ? addToInfraredApi : updateToInfraredApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'id', label: '主键ID', width: 180 },
  {
    prop: 'name',
    label: '任务名称',
    search: {
      el: 'input'
    },
    width: 150
  },
  {
    prop: 'status',
    label: '任务状态',
    search: {
      el: 'select'
    },
    tag: true,
    enum: statusEnums,
    width: 150
  },
  {
    prop: 'type',
    label: '类型',
    tag: true,
    enum: enumsAlgorithmType,
    width: 120
  },
  {
    prop: 'subsystem',
    label: '分系统',
    tag: true,
    enum: enumsSubSystem,
    width: 200
  },
  {
    prop: 'algorithmName',
    label: '算法名称',
    width: 200
  },
  {
    prop: 'modelName',
    label: '模型名称',
    width: 200
  },
  // {
  //   prop: 'algorithmModelId',
  //   label: '模型',
  //   search: {
  //     el: 'input'
  //   },
  //   width: 150
  // },
  {
    prop: 'startTime',
    label: '开始时间',
    width: 180
  },
  {
    prop: 'endTime',
    label: '结束时间',
    width: 180
  },
  {
    prop: 'costSecond',
    label: '耗时',
    width: 120
  },
  {
    prop: 'log',
    label: '日志',
    width: 120
  },
  {
    prop: 'outputPath',
    label: '输出路径',
    width: 120
  },
  {
    prop: 'remarks',
    label: '备注',
    search: {
      el: 'input'
    },
    width: 120
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
// 表单配置项
let itemsOptions: ProForm.ItemsOptions[] = []
const setItemsOptions = () => {
  itemsOptions = [
    {
      label: '任务名称',
      prop: 'name',
      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入任务名称'
      }
    },
    {
      label: '选择数据集',
      prop: 'inputOssId',
      rules: [{ required: false, message: '数据集不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'select',
        placeholder: '请选择或者上传数据集',
        enum: getImageDataList,
        clearable: true
      }
    },
    {
      label: '上传数据集',
      prop: 'inputOssId',
      rules: [{ required: false, message: '数据集不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'file-upload',
        fileSize: 4096,
        fileType: ['zip'],
        placeholder: '请上传数据集'
      }
    },
    {
      label: '选择模型',
      prop: 'algorithmModelId',
      rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'select',
        placeholder: '请选择模型',
        enum: enumsAlgorithmModelTrack
      }
    },
    {
      label: '备注',
      prop: 'remarks',
      rules: [],
      compOptions: {
        placeholder: '请输入备注'
      }
    }
  ]
}

const getImageDataList = ref<any>([])
onMounted(async () => {
  const qyery = {
    subsystem: SubSystem__['可见光转红外'],
    pageNum: 1,
    pageSize: 25
  }
  const result: any = await listDataSeqApi(qyery)
  const data = result['data']['list']
  for (const item of data) {
    getImageDataList.value.push({
      value: item['inputOssId'],
      label: item['name']
    })
  }
})

const enumsAlgorithmModelTrack = ref<any>([])

onMounted(async () => {
  const result: any = await enumAlgorithmModelTrackApi()
  // console.log(result.data);
  enumsAlgorithmModelTrack.value = []
  for (const item of result.data) {
    if (SubSystem[item['subsystem']] === '可见光转红外') {
      item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']] + '-' + item['algorithmName']
      enumsAlgorithmModelTrack.value.push(item)
    }
  }
})

const setItemsOptions2 = () => {
  itemsOptions = [
    {
      label: '任务名称',
      prop: 'name',
      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
      compOptions: {
        disabled: true,
        placeholder: '请输入任务名称'
      }
    },
    {
      label: '选择模型',
      prop: 'algorithmModel',
      rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'select',
        placeholder: '请选择模型',
        enum: enumsAlgorithmModelTrack
      }
    },
    {
      label: '备注',
      prop: 'remarks',
      rules: [],
      compOptions: {
        placeholder: '请输入备注'
      }
    }
  ]
}

const enumsAlgorithmConfigTrack = ref<any>([])
onMounted(async () => {
  const result = await enumAlgorithmConfigTrackApi()
  enumsAlgorithmConfigTrack.value = result['data']
  for (const item of enumsAlgorithmConfigTrack.value) {
    item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']]
  }
  return result['data']
})

const setItemsOptionsModel = () => {
  itemsOptions = [
    {
      label: '算法ID',
      prop: 'algorithmId',
      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
      compOptions: {
        disabled: true,
        placeholder: '请输入算法'
      }
    },
    {
      label: '算法类型',
      prop: 'algorithmType',
      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
      compOptions: {
        disabled: true,
        elTagName: 'select',
        placeholder: '请输入算法',
        enum: enumsAlgorithmConfigTrack
      }
    },
    {
      label: '算法参数',
      prop: 'parameterConfig',
      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入模型名称'
      }
    },
    {
      label: '模型ID',
      prop: 'id',
      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入模型名称'
      }
    },
    {
      label: '模型名称',
      prop: 'modelName',
      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入模型名称'
      }
    },
    {
      label: '模型保存路径',
      prop: 'modelAddress',
      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入模型名称'
      }
    },
    {
      label: '备注',
      prop: 'remarks',
      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入备注'
      }
    }
  ]
}
</script>