feat: 预缓存所有图片

src/views/demo/videoStable/index.vue

@@ -32,17 +32,13 @@
     </ProTable>
     <FormDialog ref="formDialogRef" />
     <ImportExcel ref="dialogRef" />
-    <el-dialog
-      v-model="dialogVisible"
-      :title="'图片对比： 第' + imageIdx + '张图片对比 共' + Math.min(inFileCount, outFileCount) + '张图片'"
-      width="80%"
-    >
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" 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>
+        <el-image :src="'data:image/png;base64,' + cacheImages[imageIdx].origin" style="width: 45%"></el-image>
+        <el-image :src="'data:image/png;base64,' + cacheImages[imageIdx].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="pre_picture" :disabled="imageIdx <= 1">上一个</el-button>
         <el-button type="primary" @click="next_picture">下一个</el-button>
       </div>
     </el-dialog>
@@ -74,13 +70,17 @@ import {
 
 const dialogVisible = ref(false)
 const taskId = ref('')
-const imageIdx = ref(1)
+const imageIdx = ref(0)
 const imageBase64List = ref({
   origin: '',
   stable: ''
 })
 const inFileCount = ref(0)
 const outFileCount = ref(0)
+// 直接缓存所有图片
+const cacheImages = ref({ 0: { origin: '', stable: '' } })
+const dialogTitle = ref('')
+const fileCount = ref(0)
 
 const startVideoStable = async (params: any) => {
   const res = await startVideoStableApi(params.id)
@@ -99,7 +99,7 @@ const loadImageData = async (taskId: string, imageIdx: number) => {
 }
 const compareVideoStable = async (params: any) => {
   taskId.value = params.id
-  imageIdx.value = 1
+  imageIdx.value = 0
 
   const resCount: any = await getCompareImageCountApi(params.id)
   if (resCount.code === 200) {
@@ -109,19 +109,38 @@ const compareVideoStable = async (params: any) => {
     ElMessage.error('获取图片对比数量失败')
     return
   }
-
-  await loadImageData(taskId.value, imageIdx.value)
-
   dialogVisible.value = true
+
+  dialogTitle.value = '缓存图片中'
+  fileCount.value = Math.min(inFileCount.value, outFileCount.value)
+  for (let idx = 1; idx <= fileCount.value; idx++) {
+    dialogTitle.value = '缓存图片中： 第' + idx + '张图片 共' + fileCount.value + '张图片'
+    if (cacheImages.value[idx]) {
+      continue
+    }
+    const res: any = await getCompareImageApi(taskId.value, idx)
+    cacheImages.value[idx] = {
+      origin: res.origin,
+      stable: res.stable
+    }
+  }
+  imageIdx.value = 1
+  dialogTitle.value = '图片对比'
 }
 const next_picture = async () => {
-  imageIdx.value = imageIdx.value + 1
-  await loadImageData(taskId.value, imageIdx.value)
+  if (imageIdx.value < fileCount.value) {
+    if (!cacheImages.value[imageIdx.value + 1]) {
+      await loadImageData(taskId.value, imageIdx.value + 1)
+    }
+    imageIdx.value = imageIdx.value + 1
+  }
 }
 const pre_picture = async () => {
   if (imageIdx.value > 1) {
+    if (!cacheImages.value[imageIdx.value - 1]) {
+      await loadImageData(taskId.value, imageIdx.value - 1)
+    }
     imageIdx.value = imageIdx.value - 1
-    await loadImageData(taskId.value, imageIdx.value)
   }
 }