feat: 目标检测前端优化

src/views/demo/TargetDetection/index.vue

@@ -3,9 +3,7 @@
     <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listTargetDetectionApi">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['demo:TargetDetection:add']" icon="CirclePlus" @click="openDialog(1, '目标检测新增')">
-          新增
-        </el-button>
+        <el-button type="primary" v-auth="['demo:TargetDetection:add']" icon="CirclePlus" @click="openDialog(1, '目标检测新增')"> 新增 </el-button>
         <!--        <el-button type="primary" v-auth="['demo:TargetDetection:import']" icon="Upload" plain @click="batchAdd">-->
         <!--          导入-->
         <!--        </el-button>-->
@@ -44,13 +42,7 @@
             <el-button type="primary" link icon="Delete"> 终止</el-button>
           </template>
         </el-popconfirm>
-        <el-button
-          type="primary"
-          link
-          icon="View"
-          v-auth="['demo:trackSequence:download']"
-          v-if="scope.row.status == '2'"
-        >
+        <el-button type="primary" link icon="View" v-auth="['demo:trackSequence:download']" v-if="scope.row.status == '2'">
           <!--          @confirm="stopTrackSequence(scope.row)"-->
           <!--          @click="dowloadtrackSequence(scope.row)"-->
           下载
@@ -73,26 +65,25 @@
         <!--        >-->
         <!--          编辑-->
         <!--        </el-button>-->
-        <el-button type="primary" link icon="Delete" v-auth="['demo:TargetDetection:remove']"
-                   @click="deleteTargetDetection(scope.row)">
+        <el-button type="primary" link icon="Delete" v-auth="['demo:TargetDetection:remove']" @click="deleteTargetDetection(scope.row)">
           删除
         </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef"/>
-    <ImportExcel ref="dialogRef"/>
+    <FormDialog ref="formDialogRef" />
+    <ImportExcel ref="dialogRef" />
   </div>
 </template>
 
 <script setup lang="tsx" name="TargetDetection">
-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 {
   listTargetDetectionApi,
   delTargetDetectionApi,
@@ -104,12 +95,14 @@ import {
   getTargetDetectionApi,
   startTargetDetectionApi
 } from '@/api/modules/demo/TargetDetection'
-import statusEnums from "@/utils/status";
-import {enumAlgorithmModelTrackApi, getAlgorithmModelTrackApi} from "@/api/modules/demo/AlgorithmModelTrack";
-import {AlgorithmType, SubSystem} from "@/views/demo/utils";
-import {enumAlgorithmConfigTrackApi} from "@/api/modules/demo/AlgorithmConfigTrack";
-import {updateTrackSequenceApi} from "@/api/modules/demo/trackSequence";
-import {startToInfraredApi} from "@/api/modules/demo/toInfrared";
+
+import { enumAlgorithmModelTrackApi, getAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
+import { enumAlgorithmConfigTrackApi } from '@/api/modules/demo/AlgorithmConfigTrack'
+import { updateTrackSequenceApi } from '@/api/modules/demo/trackSequence'
+import { startToInfraredApi } from '@/api/modules/demo/toInfrared'
+
+import statusEnums from '@/utils/status'
+import { AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSystem } from '@/views/demo/utils'
 
 const startTargetDetection = async (params: any) => {
   const res: any = await startTargetDetectionApi(params.id)
@@ -121,7 +114,6 @@ const startTargetDetection = async (params: any) => {
   proTable.value?.getTableList()
 }
 
-
 const enumsAlgorithmConfigTrack = ref<any>([])
 onMounted(async () => {
   const result = await enumAlgorithmConfigTrackApi()
@@ -168,7 +160,7 @@ const batchDelete = async (ids: string[]) => {
 
 // 导出目标检测列表
 const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出目标检测数据?', '温馨提示', {type: 'warning'}).then(() =>
+  ElMessageBox.confirm('确认导出目标检测数据?', '温馨提示', { type: 'warning' }).then(() =>
     useDownload(exportTargetDetectionApi, '目标检测列表', proTable.value?.searchParam)
   )
 }
@@ -188,7 +180,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 getTargetDetectionApi(row?.id || null)
   }
@@ -208,8 +200,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: '任务名称',
@@ -229,10 +221,37 @@ const columns = reactive<ColumnProps<any>[]>([
     width: 150
   },
   {
-    prop: 'algorithmModelId',
-    label: '模型id',
+    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: '开始时间',
@@ -266,19 +285,19 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 120
   },
-  {prop: 'operation', label: '操作', width: 230, fixed: 'right'}
+  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
 
 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)
     }
   }
@@ -291,7 +310,7 @@ const setItemsOptions = () => {
     {
       label: '任务名称',
       prop: 'name',
-      rules: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入任务名称'
       }
@@ -299,7 +318,7 @@ const setItemsOptions = () => {
     {
       label: '上传图片集',
       prop: 'inputOssId',
-      rules: [{required: true, message: '图片集不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '图片集不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'file-upload',
         fileSize: 4096,
@@ -310,7 +329,7 @@ const setItemsOptions = () => {
     {
       label: '选择模型',
       prop: 'algorithmModelId',
-      rules: [{required: true, message: '模型不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'select',
         placeholder: '请选择模型',
@@ -333,16 +352,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',
@@ -353,7 +372,7 @@ const setItemsOptionsModel = () => {
     {
       label: '算法参数',
       prop: 'parameterConfig',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -361,7 +380,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型ID',
       prop: 'id',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -369,7 +388,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型名称',
       prop: 'modelName',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -377,7 +396,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型保存路径',
       prop: 'modelAddress',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -385,7 +404,7 @@ const setItemsOptionsModel = () => {
     {
       label: '备注',
       prop: 'remarks',
-      rules: [{required: false, message: '备注不能为空', trigger: 'blur'}],
+      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入备注'
       }