feat: 电子稳相修改最新的预览组件

src/views/demo/videoStable/index.vue

@@ -39,7 +39,7 @@
             <el-button type="primary" link icon="View"> 终止 </el-button>
           </template>
         </el-popconfirm>
-        <el-button type="primary" link icon="View" @click="compareVideoStable(scope.row)" v-if="scope.row.status == '2'"> 预览 </el-button>
+        <el-button type="primary" link icon="View" @click="previewCompare(scope.row)" v-if="scope.row.status == '2'"> 预览 </el-button>
         <el-button
           type="primary"
           link
@@ -62,30 +62,7 @@
     <FormDialog ref="formDialogRef" />
     <ViewLog ref="viewLogRef" :get-log-api="getLogVideoStableApi" />
     <ImportExcel ref="dialogRef" />
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%" :before-close="handleClose">
-      <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-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">
-        <el-image :src="'/api' + imageUrlList[imageIdx].inputUrl" style="width: 45%"></el-image>
-        <el-image :src="'/api' + 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 <= 0">上一个</el-button>
-        <el-button type="primary" @click="next_picture" :disabled="imageIdx >= imageUrlList.length - 1">下一个</el-button>
-      </div>
-    </el-dialog>
+    <PreviewCompareImages ref="previewCompareImagesRef" />
   </div>
 </template>
 
@@ -118,6 +95,12 @@ import {
 import useWebSocketStore from '@/stores/modules/websocket'
 import { resetHeart } from '@/utils/websocket'
 import ViewLog from '@/views/demo/components/ViewLog.vue'
+import PreviewCompareImages from '@/views/demo/components/PreviewCompareImages.vue'
+
+const previewCompareImagesRef = ref()
+const previewCompare = async row => {
+  await previewCompareImagesRef.value.handleOpen(getImagesApi, row.inputOssId)
+}
 
 const viewLogRef = ref()
 
@@ -135,39 +118,6 @@ onMounted(() => {
   }
 })
 
-const dialogVisible = ref(false)
-const imageIdx = ref(0)
-const imageUrlList: any = ref([])
-const newImageIdx = ref('')
-
-// 直接缓存所有图片
-const dialogTitle = ref('')
-const imageFps = ref(0)
-const intervalChangeFps: any = ref()
-
-const handleClose = (done: () => void) => {
-  console.log('handleClose')
-  if (intervalChangeFps.value) {
-    clearInterval(intervalChangeFps.value)
-  }
-  done()
-}
-
-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)
   if (res.code === 200) {
@@ -188,39 +138,6 @@ const stopVideoStable = async (params: any) => {
   proTable.value?.getTableList()
 }
 
-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) => {
-  console.log('compareVideoStable')
-  const data: any = await getImagesApi(params.inputOssId)
-
-  imageUrlList.value = data.data
-  imageIdx.value = 0
-  imageFps.value = 0
-
-  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '张图片 共' + imageUrlList.value.length + '张图片'
-  dialogVisible.value = true
-}
-const next_picture = async () => {
-  if (imageIdx.value < imageUrlList.value.length - 1) {
-    imageIdx.value = imageIdx.value + 1
-  }
-  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '张图片 共' + imageUrlList.value.length + '张图片'
-}
-const pre_picture = async () => {
-  if (imageIdx.value > 0) {
-    imageIdx.value = imageIdx.value - 1
-  }
-  dialogTitle.value = '预览: 第' + (imageIdx.value + 1) + '张图片 共' + imageUrlList.value.length + '张图片'
-}
-
 // ProTable 实例
 const proTable = ref<ProTableInstance>()