Merge branch 'dev_wk' into develop

src/api/modules/demo/videoStable.ts

@@ -85,3 +85,7 @@ export const getCompareImageApi = (taskId: String, idx: String | Number) => {
 export const getCompareImageCountApi = (taskId: String | Number) => {
   return http.get('/demo/videoStable/compare/num/' + taskId)
 }
+
+export const getImagesApi = (ossid: String | Number) => {
+  return http.get('/demo/videoStable/images/' + ossid)
+}

src/views/demo/videoStable/index.vue

@@ -46,24 +46,27 @@
     <FormDialog ref="formDialogRef" />
     <ImportExcel ref="dialogRef" />
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%">
-      <el-form>
+      <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-option label="60" value="60"></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" v-if="imageIdx > 0">
-        <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 class="image-dialog">
+        <el-image :src="imageUrlList[imageIdx].inputUrl" style="width: 45%"></el-image>
+        <el-image :src="imageUrlList[imageIdx].outputUrl" style="width: 45%"></el-image>
       </div>
       <div class="image-dialog-btn" v-if="imageFps == 0">
-        <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 1">上一个</el-button>
-        <el-button type="primary" @click="next_picture" :disabled="imageIdx >= fileCount">下一个</el-button>
+        <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 0">上一个</el-button>
+        <el-button type="primary" @click="next_picture" :disabled="imageIdx >= imageUrlList.length - 1">下一个</el-button>
       </div>
     </el-dialog>
   </div>
@@ -89,23 +92,18 @@ import {
   getVideoStableApi,
   startVideoStableApi,
   stopVideoStableApi,
-  getCompareImageApi,
-  getCompareImageCountApi
+  // getCompareImageApi,
+  // getCompareImageCountApi,
+  getImagesApi
 } from '@/api/modules/demo/videoStable'
 
 const dialogVisible = ref(false)
-const taskId = ref('')
 const imageIdx = ref(0)
-const imageBase64List = ref({
-  origin: '',
-  stable: ''
-})
-const inFileCount = ref(0)
-const outFileCount = ref(0)
+const imageUrlList: any = ref([])
+const newImageIdx = ref('')
+
 // 直接缓存所有图片
-const cacheImages = ref({ 0: { origin: '', stable: '' } })
 const dialogTitle = ref('')
-const fileCount = ref(0)
 const imageFps = ref(0)
 const intervalChangeFps: any = ref()
 
@@ -144,57 +142,36 @@ const stopVideoStable = async (params: any) => {
   proTable.value?.getTableList()
 }
 
-const loadImageData = async (taskId: string, imageIdx: number) => {
-  const res: any = await getCompareImageApi(taskId, imageIdx)
-  imageBase64List.value.origin = res.origin
-  imageBase64List.value.stable = res.stable
+const confirmNewImageIdx = () => {
+  const val = parseInt(newImageIdx.value)
+  if (val > 0 && val <= imageUrlList.value.length) {
+    imageIdx.value = val - 1
+  } else {
+    ElMessageBox.alert('跳转索引有误，请检查！')
+  }
 }
+
 const compareVideoStable = async (params: any) => {
-  taskId.value = params.id
+  console.log('compareVideoStable')
+  const data: any = await getImagesApi(params.inputOssId)
+
+  imageUrlList.value = data.data
   imageIdx.value = 0
 
-  const resCount: any = await getCompareImageCountApi(params.id)
-  if (resCount.code === 200) {
-    inFileCount.value = resCount.data.inFileCount
-    outFileCount.value = resCount.data.outFileCount
-  } else {
-    ElMessage.error('获取图片对比数量失败')
-    return
-  }
+  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '张图片 共' + imageUrlList.value.length + '张图片'
   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
-    }
-  }
-  next_picture()
 }
 const next_picture = async () => {
-  if (imageIdx.value < fileCount.value) {
-    if (!cacheImages.value[imageIdx.value + 1]) {
-      await loadImageData(taskId.value, imageIdx.value + 1)
-    }
+  if (imageIdx.value < imageUrlList.value.length - 1) {
     imageIdx.value = imageIdx.value + 1
   }
-  dialogTitle.value = '预览: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
+  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '张图片 共' + imageUrlList.value.length + '张图片'
 }
 const pre_picture = async () => {
-  if (imageIdx.value > 1) {
-    if (!cacheImages.value[imageIdx.value - 1]) {
-      await loadImageData(taskId.value, imageIdx.value - 1)
-    }
+  if (imageIdx.value > 0) {
     imageIdx.value = imageIdx.value - 1
   }
-  dialogTitle.value = '预览: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
+  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '张图片 共' + imageUrlList.value.length + '张图片'
 }
 
 // ProTable 实例