feat: image mosaic

src/views/demo/dataAugmentation/index.vue

@@ -49,8 +49,19 @@
     <ImportExcel ref="dialogRef" />
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%">
       <div class="image-dialog" v-if="imageIdx >= 0">
-        <el-image :src="cacheImages[imageIdx].origin" style="width: 45%"></el-image>
-        <el-image :src="cacheImages[imageIdx].stable" style="width: 45%"></el-image>
+        <el-image
+          v-for="(image, index) in cacheImages[imageIdx].origin"
+          :key="index"
+          :src="'data:image/png;base64,' + image"
+          style="width: 45%"
+        ></el-image>
+        <el-tag>结果：</el-tag>
+        <el-image
+          v-for="(image, index) in cacheImages[imageIdx].stable"
+          :key="index"
+          :src="'data:image/png;base64,' + image"
+          style="width: 45%"
+        ></el-image>
       </div>
       <div class="image-dialog-btn" v-if="imageFps == 0">
         <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 0">上一个</el-button>
@@ -177,8 +188,8 @@ const loadImageData = async (taskId: string, imageIdx: number) => {
   const res: any = await getCompareImageApi(taskId, imageIdx)
   // imageBase64List.value.origin = res.origin
   // imageBase64List.value.stable = res.stable
-  cacheImages.value[imageIdx].origin = 'data:image/png;base64,' + res.origin
-  cacheImages.value[imageIdx].stable = 'data:image/png;base64,' + res.stable
+  cacheImages.value[imageIdx].origin = res.origin
+  cacheImages.value[imageIdx].stable = res.stable
 }
 
 const compareDataAugmentation = async (params: any) => {
@@ -198,18 +209,18 @@ const compareDataAugmentation = async (params: any) => {
   dialogTitle.value = '缓存图片中'
   fileCount.value = Math.min(inFileCount.value, outFileCount.value)
   for (let idx = 1; idx <= fileCount.value; idx++) {
-    dialogTitle.value = '缓存图片中： 第' + idx + '张图片 共' + fileCount.value + '张图片'
+    dialogTitle.value = '缓存图片中： 第' + idx + '个样本 共' + fileCount.value + '个样本'
     if (cacheImages.value[idx - 1]) {
       continue
     }
     const res: any = await getCompareImageApi(taskId.value, idx - 1)
     cacheImages.value[idx - 1] = {
-      origin: 'data:image/png;base64,' + res.origin,
-      stable: 'data:image/png;base64,' + res.stable
+      origin: res.origin,
+      stable: res.stable
     }
   }
   console.log(cacheImages.value[0])
-  dialogTitle.value = '预览: 第1张图片 共' + fileCount.value + '张图片'
+  dialogTitle.value = '预览: 第1个样本 共' + fileCount.value + '个样本'
   // next_picture()
 }
 const next_picture = async () => {
@@ -219,7 +230,7 @@ const next_picture = async () => {
     }
     imageIdx.value = imageIdx.value + 1
   }
-  dialogTitle.value = '预览: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
+  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '个样本 共' + fileCount.value + '个样本'
 }
 const pre_picture = async () => {
   if (imageIdx.value > 0) {
@@ -228,7 +239,7 @@ const pre_picture = async () => {
     }
     imageIdx.value = imageIdx.value - 1
   }
-  dialogTitle.value = '预览: 第' + imageIdx.value + 1 + '张图片 共' + fileCount.value + '张图片'
+  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '个样本 共' + fileCount.value + '个样本'
 }
 
 // ProTable 实例