feat: 前端优化

src/api/modules/demo/videoStable.ts

@@ -74,6 +74,10 @@ export const startVideoStableApi = (id: String | Number) => {
   return http.get('/demo/videoStable/start/' + id)
 }
 
+export const stopVideoStableApi = (id: String | Number) => {
+  return http.get('/demo/videoStable/stop/' + id)
+}
+
 export const getCompareImageApi = (taskId: String, idx: String | Number) => {
   return http.get('/demo/videoStable/compare/' + taskId + '/' + idx)
 }

src/views/demo/video2image/index.vue

@@ -52,8 +52,8 @@
         >
           下载
         </el-button>
-        <!-- <el-button type="primary" link icon="View" v-auth="['demo:video2image:query']" @click="openDialog(3, '查看', scope.row)"> 查看 </el-button>
-        <el-button type="primary" link icon="EditPen" v-auth="['demo:video2image:edit']" @click="openDialog(2, '编辑', scope.row)"> 编辑 </el-button> -->
+        <el-button type="primary" link icon="View" v-auth="['demo:video2image:query']" @click="openDialog(3, '查看', scope.row)"> 查看 </el-button>
+        <!-- <el-button type="primary" link icon="EditPen" v-auth="['demo:video2image:edit']" @click="openDialog(2, '编辑', scope.row)"> 编辑 </el-button> -->
         <el-button type="primary" link icon="Delete" v-auth="['demo:video2image:remove']" @click="deleteVideo2image(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
@@ -80,6 +80,7 @@ import {
   exportVideo2imageApi,
   getVideo2imageApi,
   startVideo2imageApi,
+  stopVideo2imageApi,
   downloadVideo2imageApi
 } from '@/api/modules/demo/video2image'
 
@@ -223,19 +224,19 @@ const columns = reactive<ColumnProps<any>[]>([
   {
     prop: 'startTime',
     label: '开始时间',
-    search: {
-      el: 'date-picker',
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
-    },
+    // search: {
+    //   el: 'date-picker',
+    //   props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    // },
     width: 180
   },
   {
     prop: 'endTime',
     label: '结束时间',
-    search: {
-      el: 'date-picker',
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
-    },
+    // search: {
+    //   el: 'date-picker',
+    //   props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    // },
     width: 180
   },
   {
@@ -304,7 +305,7 @@ const setItemsOptions = () => {
     {
       label: '上传视频',
       prop: 'inputOssId',
-      rules: [{ required: false, message: '视频不能为空', trigger: 'blur' }],
+      rules: [{ required: true, message: '视频不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'file-upload',
         fileSize: 4096,

src/views/demo/videoStable/index.vue

@@ -19,14 +19,21 @@
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button type="primary" link icon="View" @click="startVideoStable(scope.row)" v-if="scope.row.status !== '2'"> 开始去抖动 </el-button>
-        <el-button type="primary" link icon="View" @click="compareVideoStable(scope.row)" v-if="scope.row.status == '2'"> 图片对比 </el-button>
+        <el-button type="primary" link icon="View" @click="startVideoStable(scope.row)" v-if="scope.row.status == '0' || scope.row.status == '3'">
+          开始
+        </el-button>
+        <el-popconfirm title="确定终止此任务吗?" @confirm="stopVideoStable(scope.row)" v-if="scope.row.status == '1'">
+          <template #reference>
+            <el-button type="primary" link icon="View"> 终止 </el-button>
+          </template>
+        </el-popconfirm>
+        <el-button type="primary" link icon="View" @click="compareVideoStable(scope.row)" v-if="scope.row.status == '2'"> 预览 </el-button>
         <el-button type="primary" link icon="View" v-auth="['demo:videoStable:query']" @click="openDialog(3, '视频去抖动查看', scope.row)">
           查看
         </el-button>
-        <el-button type="primary" link icon="EditPen" v-auth="['demo:videoStable:edit']" @click="openDialog(2, '视频去抖动编辑', scope.row)">
+        <!-- <el-button type="primary" link icon="EditPen" v-auth="['demo:videoStable:edit']" @click="openDialog(2, '视频去抖动编辑', scope.row)">
           编辑
-        </el-button>
+        </el-button> -->
         <el-button type="primary" link icon="Delete" v-auth="['demo:videoStable:remove']" @click="deleteVideoStable(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
@@ -75,6 +82,7 @@ import {
   exportVideoStableApi,
   getVideoStableApi,
   startVideoStableApi,
+  stopVideoStableApi,
   getCompareImageApi,
   getCompareImageCountApi
 } from '@/api/modules/demo/videoStable'
@@ -113,9 +121,19 @@ const changeFps = () => {
 const startVideoStable = async (params: any) => {
   const res = await startVideoStableApi(params.id)
   if (res.code === 200) {
-    ElMessage.success('开始去抖动成功')
+    ElMessage.success('任务已经开始，请等待')
+  } else {
+    ElMessage.error('任务开始失败，请检查！')
+  }
+  proTable.value?.getTableList()
+}
+
+const stopVideoStable = async (params: any) => {
+  const res = await stopVideoStableApi(params.id)
+  if (res.code === 200) {
+    ElMessage.success('任务终止成功')
   } else {
-    ElMessage.error('开始去抖动失败')
+    ElMessage.error('任务终止失败！')
   }
   proTable.value?.getTableList()
 }
@@ -161,7 +179,7 @@ const next_picture = async () => {
     }
     imageIdx.value = imageIdx.value + 1
   }
-  dialogTitle.value = '图片对比: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
+  dialogTitle.value = '预览: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
 }
 const pre_picture = async () => {
   if (imageIdx.value > 1) {
@@ -170,7 +188,7 @@ const pre_picture = async () => {
     }
     imageIdx.value = imageIdx.value - 1
   }
-  dialogTitle.value = '图片对比: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
+  dialogTitle.value = '预览: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
 }
 
 // ProTable 实例
@@ -178,13 +196,13 @@ const proTable = ref<ProTableInstance>()
 
 // 删除视频去抖动信息
 const deleteVideoStable = async (params: any) => {
-  await useHandleData(delVideoStableApi, params.id, '删除【' + params.id + '】视频去抖动')
+  await useHandleData(delVideoStableApi, params.id, '删除任务【' + params.name + '】？')
   proTable.value?.getTableList()
 }
 
 // 批量删除视频去抖动信息
 const batchDelete = async (ids: string[]) => {
-  await useHandleData(delVideoStableApi, ids, '删除所选视频去抖动信息')
+  await useHandleData(delVideoStableApi, ids, '删除所选任务？')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -258,48 +276,48 @@ const statusEnums: EnumProps[] = [
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
-  { prop: 'id', label: '主键ID' },
+  { prop: 'id', label: '主键ID', width: 180 },
   {
     prop: 'name',
     label: '视频名称',
     search: {
       el: 'input'
     },
-    width: 120
+    width: 150
   },
   {
     prop: 'status',
     label: '任务状态',
     search: {
-      el: 'input'
+      el: 'select'
     },
-    width: 120,
+    width: 100,
     tag: true,
     enum: statusEnums
   },
   {
     prop: 'startTime',
     label: '开始时间',
-    search: {
-      el: 'date-picker',
-      props: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss'
-      }
-    },
-    width: 120
+    // search: {
+    //   el: 'date-picker',
+    //   props: {
+    //     type: 'datetimerange',
+    //     valueFormat: 'YYYY-MM-DD HH:mm:ss'
+    //   }
+    // },
+    width: 180
   },
   {
     prop: 'endTime',
     label: '结束时间',
-    search: {
-      el: 'date-picker',
-      props: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss'
-      }
-    },
-    width: 120
+    // search: {
+    //   el: 'date-picker',
+    //   props: {
+    //     type: 'datetimerange',
+    //     valueFormat: 'YYYY-MM-DD HH:mm:ss'
+    //   }
+    // },
+    width: 180
   },
   {
     prop: 'costSecond',
@@ -307,66 +325,49 @@ const columns = reactive<ColumnProps<any>[]>([
     search: {
       el: 'input'
     },
-    width: 120
+    width: 80
   },
   {
     prop: 'log',
     label: '日志',
-    search: {
-      el: 'input'
-    },
     width: 120
   },
 
   {
     prop: 'block_size',
-    label: 'block_size',
-    search: {
-      el: 'input'
-    },
+    label: '网格大小',
     width: 120
   },
   {
     prop: 'radius',
-    label: 'radius',
-    search: {
-      el: 'input'
-    },
+    label: '扩散半径',
+    width: 120
+  },
+  {
+    prop: 'buffer_size',
+    label: '缓冲区大小',
     width: 120
   },
   {
     prop: 'cornerquality',
-    label: 'cornerquality',
-    search: {
-      el: 'input'
-    },
+    label: '角点质量',
     width: 130
   },
   {
     prop: 'cornerminDistance',
-    label: 'cornerminDistance',
-    search: {
-      el: 'input'
-    },
+    label: '角点最小距离',
     width: 180
   },
   {
     prop: 'lklevel',
-    label: 'lklevel',
-    search: {
-      el: 'input'
-    },
+    label: '光流层级',
     width: 120
   },
   {
     prop: 'lkwinSiz',
-    label: 'lkwinSiz',
-    search: {
-      el: 'input'
-    },
+    label: '光流窗口大小',
     width: 120
   },
-
   {
     prop: 'remarks',
     label: '备注',
@@ -389,15 +390,15 @@ const setItemsOptions = () => {
     {
       label: '任务名称',
       prop: 'name',
-      rules: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
+      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入视频名称'
+        placeholder: '请输入任务名称'
       }
     },
     {
       label: '图片集压缩包',
       prop: 'inputOssId',
-      rules: [{ required: false, message: '图片集压缩包不能为空', trigger: 'blur' }],
+      rules: [{ required: true, message: '图片集压缩包不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'file-upload',
         fileSize: 4096,
@@ -406,9 +407,9 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: 'block_size',
+      label: '网格大小',
       prop: 'block_size',
-      rules: [{ required: false, message: 'block_size不能为空', trigger: 'blur' }],
+      rules: [],
       compOptions: {
         type: 'input',
         clearable: true,
@@ -416,9 +417,9 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: 'radius',
+      label: '扩散半径',
       prop: 'radius',
-      rules: [{ required: false, message: 'radius不能为空', trigger: 'blur' }],
+      rules: [],
       compOptions: {
         type: 'input',
         clearable: true,
@@ -426,9 +427,9 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: 'buffer_size',
+      label: '缓冲区大小',
       prop: 'buffer_size',
-      rules: [{ required: false, message: 'buffer_size不能为空', trigger: 'blur' }],
+      rules: [],
       compOptions: {
         type: 'input',
         clearable: true,
@@ -436,9 +437,9 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: 'cornerquality',
+      label: '角点质量',
       prop: 'cornerquality',
-      rules: [{ required: false, message: 'cornerquality不能为空', trigger: 'blur' }],
+      rules: [],
       compOptions: {
         type: 'input',
         clearable: true,
@@ -446,9 +447,9 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: 'cornerminDistance',
+      label: '角点最小距离',
       prop: 'cornerminDistance',
-      rules: [{ required: false, message: 'cornerminDistance不能为空', trigger: 'blur' }],
+      rules: [],
       compOptions: {
         type: 'input',
         clearable: true,
@@ -456,9 +457,9 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: 'lklevel',
+      label: '光流层级',
       prop: 'lklevel',
-      rules: [{ required: false, message: 'lklevel不能为空', trigger: 'blur' }],
+      rules: [],
       compOptions: {
         type: 'input',
         clearable: true,
@@ -466,9 +467,9 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: 'lkwinSiz',
+      label: '光流窗口大小',
       prop: 'lkwinSiz',
-      rules: [{ required: false, message: 'lkwinSiz不能为空', trigger: 'blur' }],
+      rules: [],
       compOptions: {
         type: 'input',
         clearable: true,