feat: 前端优化

src/views/demo/toInfrared/index.vue

@@ -3,9 +3,7 @@
     <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: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
@@ -23,7 +21,7 @@
       <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"
@@ -65,20 +63,20 @@
         </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef"/>
-    <ImportExcel ref="dialogRef"/>
+    <FormDialog ref="formDialogRef" />
+    <ImportExcel ref="dialogRef" />
   </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 { 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 { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import {
   listToInfraredApi,
   delToInfraredApi,
@@ -92,11 +90,14 @@ import {
   dowloadToInfraredApi,
   getToInfraredApi
 } from '@/api/modules/demo/toInfrared'
-import {enumAlgorithmModelTrackApi} from '@/api/modules/demo/AlgorithmModelTrack'
-import {getAlgorithmModelTrackApi} from '@/api/modules/demo/AlgorithmModelTrack'
-import {enumAlgorithmConfigTrackApi} from '@/api/modules/demo/AlgorithmConfigTrack'
+
+import { 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} from "@/views/demo/utils";
+import { AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSystem } from '@/views/demo/utils'
 
 const openModelDialog = async row => {
   const algorithmModelId = row.algorithmModelId
@@ -140,7 +141,7 @@ const dowloadToInfrared = async (params: any) => {
 }
 
 const openStartDialog = async (row: any) => {
-  let res = {data: {}}
+  let res = { data: {} }
   if (row?.id) {
     res = await getToInfraredApi(row?.id || null)
   }
@@ -176,7 +177,7 @@ const batchDelete = async (ids: string[]) => {
 
 // 导出可见光转红外列表
 const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出可见光转红外数据?', '温馨提示', {type: 'warning'}).then(() =>
+  ElMessageBox.confirm('确认导出可见光转红外数据?', '温馨提示', { type: 'warning' }).then(() =>
     useDownload(exportToInfraredApi, '可见光转红外列表', proTable.value?.searchParam)
   )
 }
@@ -196,7 +197,7 @@ const batchAdd = () => {
 const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
-  let res = {data: {}}
+  let res = { data: {} }
   if (row?.id) {
     res = await getToInfraredApi(row?.id || null)
   }
@@ -216,8 +217,8 @@ const openDialog = async (type: number, title: string, row?: any) => {
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  {type: 'selection', fixed: 'left', width: 70},
-  {prop: 'id', label: '主键ID', width: 180},
+  { type: 'selection', fixed: 'left', width: 70 },
+  { prop: 'id', label: '主键ID', width: 180 },
   {
     prop: 'name',
     label: '任务名称',
@@ -236,6 +237,30 @@ const columns = reactive<ColumnProps<any>[]>([
     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: '模型',
@@ -277,7 +302,7 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 120
   },
-  {prop: 'operation', label: '操作', width: 230, fixed: 'right'}
+  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
 // 表单配置项
 let itemsOptions: ProForm.ItemsOptions[] = []
@@ -286,15 +311,26 @@ const setItemsOptions = () => {
     {
       label: '任务名称',
       prop: 'name',
-      rules: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
+      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: true, message: '图片集不能为空', trigger: 'blur'}],
+      rules: [{ required: false, message: '图片集不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'file-upload',
         fileSize: 4096,
@@ -305,7 +341,7 @@ const setItemsOptions = () => {
     {
       label: '选择模型',
       prop: 'algorithmModelId',
-      rules: [{required: true, message: '模型不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'select',
         placeholder: '请选择模型',
@@ -323,15 +359,32 @@ const setItemsOptions = () => {
   ]
 }
 
+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();
+  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'];
+    if (SubSystem[item['subsystem']] === '可见光转红外') {
+      item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']] + '-' + item['algorithmName']
       enumsAlgorithmModelTrack.value.push(item)
     }
   }
@@ -342,7 +395,7 @@ const setItemsOptions2 = () => {
     {
       label: '任务名称',
       prop: 'name',
-      rules: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
       compOptions: {
         disabled: true,
         placeholder: '请输入任务名称'
@@ -351,7 +404,7 @@ const setItemsOptions2 = () => {
     {
       label: '选择模型',
       prop: 'algorithmModel',
-      rules: [{required: true, message: '模型不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'select',
         placeholder: '请选择模型',
@@ -374,7 +427,7 @@ 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']];
+    item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']]
   }
   return result['data']
 })
@@ -384,16 +437,16 @@ const setItemsOptionsModel = () => {
     {
       label: '算法ID',
       prop: 'algorithmId',
-      rules: [{required: true, message: '算法不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
       compOptions: {
         disabled: true,
-        placeholder: '请输入算法',
+        placeholder: '请输入算法'
       }
     },
     {
       label: '算法类型',
       prop: 'algorithmType',
-      rules: [{required: true, message: '算法不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
       compOptions: {
         disabled: true,
         elTagName: 'select',
@@ -404,7 +457,7 @@ const setItemsOptionsModel = () => {
     {
       label: '算法参数',
       prop: 'parameterConfig',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -412,7 +465,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型ID',
       prop: 'id',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -420,7 +473,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型名称',
       prop: 'modelName',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -428,7 +481,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型保存路径',
       prop: 'modelAddress',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -436,7 +489,7 @@ const setItemsOptionsModel = () => {
     {
       label: '备注',
       prop: 'remarks',
-      rules: [{required: false, message: '备注不能为空', trigger: 'blur'}],
+      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入备注'
       }

src/views/demo/utils.ts

@@ -20,6 +20,12 @@ export const SubSystem = {
   '2': '注释轨迹序列'
 }
 
+export const SubSystem__ = {
+  可见光转红外: '0',
+  目标检测: '1',
+  注释轨迹序列: '2'
+}
+
 export const enumsAlgorithmType = [
   { label: '训练', value: '0' },
   { label: '测试', value: '1' },