feat: 图片对比功能搞定

src/api/modules/demo/videoStable.ts

@@ -74,3 +74,7 @@ export const exportVideoStableApi = (data: any) => {
 export const startVideoStableApi = (id: String | Number) => {
   return http.get('/demo/videoStable/start/' + id)
 }
+
+export const getCompareImageApi = (taskName: String, idx: String | Number) => {
+  return http.get('/demo/videoStable/compare/' + taskName + '/' + idx)
+}

src/views/demo/videoStable/index.vue

@@ -32,6 +32,16 @@
     </ProTable>
     <FormDialog ref="formDialogRef" />
     <ImportExcel ref="dialogRef" />
+    <el-dialog v-model="dialogVisible" :title="'图片对比： ' + taskName + '第' + imageIdx + '张图片对比'" width="80%">
+      <div class="image-dialog">
+        <el-image :src="'data:image/png;base64,' + imageBase64List.origin" style="width: 45%"></el-image>
+        <el-image :src="'data:image/png;base64,' + imageBase64List.stable" style="width: 45%"></el-image>
+      </div>
+      <div class="image-dialog-btn">
+        <el-button type="primary" @click="pre_picture" :disabled="imageIdx === 1">上一个</el-button>
+        <el-button type="primary" @click="next_picture">下一个</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -53,19 +63,50 @@ import {
   importVideoStableDataApi,
   exportVideoStableApi,
   getVideoStableApi,
-  startVideoStableApi
+  startVideoStableApi,
+  getCompareImageApi
 } from '@/api/modules/demo/videoStable'
 
+const dialogVisible = ref(false)
+const taskName = ref('')
+const imageIdx = ref(1)
+const imageBase64List = ref({
+  origin: '',
+  stable: ''
+})
+
 const startVideoStable = async (params: any) => {
   const res = await startVideoStableApi(params.id)
   if (res.code === 200) {
     ElMessage.success('开始去抖动成功')
-    proTable.value?.getTableList()
   } else {
     ElMessage.error('开始去抖动失败')
   }
+  proTable.value?.getTableList()
+}
+
+const loadImageData = async (taskName: string, imageIdx: number) => {
+  const res: any = await getCompareImageApi(taskName, imageIdx)
+  imageBase64List.value.origin = res.origin
+  imageBase64List.value.stable = res.stable
+}
+const compareVideoStable = async (params: any) => {
+  taskName.value = params.name
+  imageIdx.value = 1
+  await loadImageData(taskName.value, imageIdx.value)
+
+  dialogVisible.value = true
+}
+const next_picture = async () => {
+  imageIdx.value = imageIdx.value + 1
+  await loadImageData(taskName.value, imageIdx.value)
+}
+const pre_picture = async () => {
+  if (imageIdx.value > 1) {
+    imageIdx.value = imageIdx.value - 1
+    await loadImageData(taskName.value, imageIdx.value)
+  }
 }
-const compareVideoStable = (params: any) => {}
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -329,3 +370,19 @@ const setItemsOptions = () => {
   ]
 }
 </script>
+
+<style lang="scss" scoped>
+.image-dialog {
+  display: flex;
+  justify-content: center;
+  .el-image {
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+}
+.image-dialog-btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+</style>