feat: 添加视频自动播放帧率

src/views/demo/videoStable/index.vue

@@ -33,13 +33,24 @@
     <FormDialog ref="formDialogRef" />
     <ImportExcel ref="dialogRef" />
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%">
-      <div class="image-dialog">
+      <el-form>
+        <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>
+      <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>
-      <div class="image-dialog-btn">
+      <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">下一个</el-button>
+        <el-button type="primary" @click="next_picture" :disabled="imageIdx >= fileCount">下一个</el-button>
       </div>
     </el-dialog>
   </div>
@@ -81,6 +92,23 @@ const outFileCount = ref(0)
 const cacheImages = ref({ 0: { origin: '', stable: '' } })
 const dialogTitle = ref('')
 const fileCount = ref(0)
+const imageFps = ref(0)
+const intervalChangeFps: any = ref()
+
+const changeFps = () => {
+  console.log('changeFps')
+  if (intervalChangeFps.value) {
+    clearInterval(intervalChangeFps.value)
+  }
+
+  if (imageFps.value == 0) {
+    return
+  }
+  imageIdx.value = 1
+  intervalChangeFps.value = setInterval(() => {
+    next_picture()
+  }, 1000 / imageFps.value)
+}
 
 const startVideoStable = async (params: any) => {
   const res = await startVideoStableApi(params.id)
@@ -124,8 +152,7 @@ const compareVideoStable = async (params: any) => {
       stable: res.stable
     }
   }
-  imageIdx.value = 1
-  dialogTitle.value = '图片对比'
+  next_picture()
 }
 const next_picture = async () => {
   if (imageIdx.value < fileCount.value) {
@@ -134,6 +161,7 @@ const next_picture = async () => {
     }
     imageIdx.value = imageIdx.value + 1
   }
+  dialogTitle.value = '图片对比: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
 }
 const pre_picture = async () => {
   if (imageIdx.value > 1) {
@@ -142,6 +170,7 @@ const pre_picture = async () => {
     }
     imageIdx.value = imageIdx.value - 1
   }
+  dialogTitle.value = '图片对比: 第' + imageIdx.value + '张图片 共' + fileCount.value + '张图片'
 }
 
 // ProTable 实例