feat: 前端模型配置优化

src/views/demo/AlgorithmModelTrack/index.vue

@@ -3,8 +3,7 @@
     <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listAlgorithmModelTrackApi">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['demo:AlgorithmModelTrack:add']" icon="CirclePlus"
-                   @click="openDialog(1, '算法模型配置新增')">
+        <el-button type="primary" v-auth="['demo:AlgorithmModelTrack:add']" icon="CirclePlus" @click="openDialog(1, '算法模型配置新增')">
           新增
         </el-button>
         <!-- <el-button type="primary" v-auth="['demo:AlgorithmModelTrack:import']" icon="Upload" plain @click="batchAdd"> 导入 </el-button>
@@ -22,11 +21,10 @@
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button type="primary" link icon="View" v-auth="['demo:AlgorithmModelTrack:query']"
-                   @click="openDialog(3, '算法模型配置查看', scope.row)">
+        <el-button type="primary" link icon="View" v-auth="['demo:AlgorithmModelTrack:query']" @click="openDialog(3, '算法模型配置查看', scope.row)">
           查看
         </el-button>
-        <el-button
+        <!-- <el-button
           type="primary"
           link
           icon="EditPen"
@@ -34,27 +32,26 @@
           @click="openDialog(2, '算法模型配置编辑', scope.row)"
         >
           编辑
-        </el-button>
-        <el-button type="primary" link icon="Delete" v-auth="['demo:AlgorithmModelTrack:remove']"
-                   @click="deleteAlgorithmModelTrack(scope.row)">
+        </el-button> -->
+        <el-button type="primary" link icon="Delete" v-auth="['demo:AlgorithmModelTrack:remove']" @click="deleteAlgorithmModelTrack(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="AlgorithmModelTrack">
-import {ref, reactive, onMounted} from 'vue'
-import {useHandleData} from '@/hooks/useHandleData'
-import {useDownload} from '@/hooks/useDownload'
-import {ElMessageBox} from 'element-plus'
+import { ref, reactive, onMounted } from 'vue'
+import { useHandleData } from '@/hooks/useHandleData'
+import { useDownload } from '@/hooks/useDownload'
+import { 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 {
   listAlgorithmModelTrackApi,
   delAlgorithmModelTrackApi,
@@ -66,8 +63,8 @@ import {
   getAlgorithmModelTrackApi
 } from '@/api/modules/demo/AlgorithmModelTrack'
 
-import {enumAlgorithmConfigTrackApi} from '@/api/modules/demo/AlgorithmConfigTrack'
-import {AlgorithmType, SubSystem} from "@/views/demo/utils";
+import { enumAlgorithmConfigTrackApi } from '@/api/modules/demo/AlgorithmConfigTrack'
+import { AlgorithmType, SubSystem, enumsModelStatus, enumsAlgorithmType, enumsSubSystem } from '@/views/demo/utils'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -87,7 +84,7 @@ const batchDelete = async (ids: string[]) => {
 
 // 导出算法模型配置列表
 const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出算法模型配置数据?', '温馨提示', {type: 'warning'}).then(() =>
+  ElMessageBox.confirm('确认导出算法模型配置数据?', '温馨提示', { type: 'warning' }).then(() =>
     useDownload(exportAlgorithmModelTrackApi, '算法模型配置列表', proTable.value?.searchParam)
   )
 }
@@ -107,7 +104,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 getAlgorithmModelTrackApi(row?.id || null)
   }
@@ -127,30 +124,62 @@ const openDialog = async (type: number, title: string, row?: any) => {
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  {type: 'selection', fixed: 'left', width: 70},
-  {prop: 'id', label: '主键ID'},
+  { type: 'selection', fixed: 'left', width: 70 },
+  { prop: 'id', label: 'ID' },
+  {
+    prop: 'modelName',
+    label: '模型名称',
+    search: {
+      el: 'input'
+    },
+    minWidth: 150
+  },
   {
     prop: 'algorithmType',
     label: '算法',
     search: {
       el: 'input'
-    }
+    },
+    minWidth: 200
   },
   {
-    prop: 'modelName',
-    label: '模型名称',
+    prop: 'type',
+    label: '类型',
+    tag: true,
+    enum: enumsAlgorithmType,
     search: {
-      el: 'input'
-    }
+      el: 'select'
+    },
+    width: 120
   },
+  //   {
+  //     prop: 'parentId',
+  //     label: '父id',
+  //     search: {
+  //       el: 'input'
+  //     },
+  //     width: 120
+  //   },
   {
-    prop: 'modelAddress',
-    label: '模型',
+    prop: 'subsystem',
+    label: '分系统',
+    tag: true,
+    enum: enumsSubSystem,
     search: {
       el: 'input'
     },
     width: 120
   },
+  {
+    prop: 'modelStatus',
+    label: '模型状态',
+    tag: true,
+    enum: enumsModelStatus,
+    search: {
+      el: 'select'
+    },
+    width: 120
+  },
   //   {
   //     prop: 'sampleNumber',
   //     label: '训练样本数',
@@ -167,6 +196,14 @@ const columns = reactive<ColumnProps<any>[]>([
   //     },
   //     width: 120
   //   },
+  {
+    prop: 'modelAddress',
+    label: '模型',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
   {
     prop: 'remarks',
     label: '备注',
@@ -183,7 +220,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[] = []
@@ -203,7 +240,7 @@ onMounted(async () => {
     // console.log(AlgorithmType)
     // console.log(SubSystem)
     // console.log('-------------------')
-    item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']];
+    item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']]
   }
 
   enumsAlgorithmConfigTrack.value = result['data']
@@ -215,7 +252,7 @@ const setItemsOptions = () => {
     {
       label: '算法',
       prop: 'algorithmId',
-      rules: [{required: true, message: '算法不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'select',
         placeholder: '请输入算法',
@@ -225,7 +262,7 @@ const setItemsOptions = () => {
     {
       label: '模型名称',
       prop: 'modelName',
-      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
+      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -233,7 +270,7 @@ const setItemsOptions = () => {
     {
       label: '模型',
       prop: 'modelInputOssId',
-      rules: [{required: false, message: '模型文件不能为空', trigger: 'blur'}],
+      rules: [{ required: false, message: '模型文件不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'file-upload',
         fileSize: 4096,
@@ -260,7 +297,7 @@ const setItemsOptions = () => {
     {
       label: '备注',
       prop: 'remarks',
-      rules: [{required: false, message: '备注不能为空', trigger: 'blur'}],
+      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
       compOptions: {
         placeholder: '请输入备注'
       }

src/views/demo/DataSeq/index.vue

@@ -30,31 +30,31 @@
       </template>
     </ProTable>
     <FormDialog ref="formDialogRef" />
+    <!-- <ImportExcel ref="dialogRef" /> -->
+    <el-dialog v-model="dialogVisible" :title="'数据集预览 - 共' + currentImageUrls.length + '张 当前第' + (imageIdx + 1) + '张'" width="80%">
+      <el-form :inline="true">
+        <el-form-item label="帧率">
+          <el-select v-model="imageFps" placeholder="选择帧率" style="width: 200px" @change="changeFps">
+            <el-option label="0" value="0"></el-option>
+            <el-option label="5" value="5"></el-option>
+            <el-option label="15" value="15"></el-option>
+            <el-option label="30" value="30"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="跳转至">
+          <el-input v-model="newImageIdx" type="number" style="width: 100px" />
+          <el-button type="primary" @click="confirmNewImageIdx" style="margin-left: 10px">确认</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="image-dialog">
+        <el-image :src="currentImageUrls[imageIdx]" style="width: 40%"></el-image>
+      </div>
+      <div class="image-dialog-btn" v-if="imageFps == 0">
+        <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 0">上一个</el-button>
+        <el-button type="primary" @click="next_picture" :disabled="imageIdx >= currentImageUrls.length - 1">下一个</el-button>
+      </div>
+    </el-dialog>
   </div>
-  <!-- <ImportExcel ref="dialogRef" /> -->
-  <el-dialog v-model="dialogVisible" :title="'数据集预览 - 共' + currentImageUrls.length + '张 当前第' + (imageIdx + 1) + '张'" width="80%">
-    <el-form :inline="true">
-      <el-form-item label="帧率">
-        <el-select v-model="imageFps" placeholder="选择帧率" style="width: 200px" @change="changeFps">
-          <el-option label="0" value="0"></el-option>
-          <el-option label="5" value="5"></el-option>
-          <el-option label="15" value="15"></el-option>
-          <el-option label="30" value="30"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="跳转至">
-        <el-input v-model="newImageIdx" type="number" style="width: 100px" />
-        <el-button type="primary" @click="confirmNewImageIdx" style="margin-left: 10px">确认</el-button>
-      </el-form-item>
-    </el-form>
-    <div class="image-dialog">
-      <el-image :src="currentImageUrls[imageIdx]" style="width: 40%"></el-image>
-    </div>
-    <div class="image-dialog-btn" v-if="imageFps == 0">
-      <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 0">上一个</el-button>
-      <el-button type="primary" @click="next_picture" :disabled="imageIdx >= currentImageUrls.length - 1">下一个</el-button>
-    </div>
-  </el-dialog>
 </template>
 
 <script setup lang="tsx" name="DataSeq">

src/views/demo/utils.ts

@@ -31,3 +31,36 @@ export const enumsSubSystem = [
   { label: '目标检测', value: '1' },
   { label: '注释轨迹序列', value: '2' }
 ]
+
+export const enumsModelStatus = [
+  {
+    label: '未训练',
+    value: '0',
+    disabled: false,
+    tagType: 'default'
+  },
+  {
+    label: '训练中',
+    value: '1',
+    disabled: false,
+    tagType: 'primary'
+  },
+  {
+    label: '完成',
+    value: '2',
+    disabled: false,
+    tagType: 'success'
+  },
+  {
+    label: '失败',
+    value: '3',
+    disabled: false,
+    tagType: 'danger'
+  },
+  {
+    label: '中断',
+    value: '4',
+    disabled: false,
+    tagType: 'default'
+  }
+]