taais-web/src/views/demo/components/PreviewImages.vue

<!--
# @Date: 2024-10-11 14:37:11
# @Author: WANGKANG
# @Blog:
# @Email:
# @Filepath: src\views\demo\components\PreviewImages.vue
# @Description: PreviewImages.vue
# Copyright 2024 WANGKANG, All Rights Reserved.
-->

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="'预览 - 共' + currentImageUrls.length + '张 当前第' + (imageIdx + 1) + '张'"
    width="80%"
    @open="handleOpen"
    :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="currentImageUrls[imageIdx]" style="width: 40%"></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 >= currentImageUrls.length - 1">下一个</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { ref, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean, //接受的数据类型
    default: false //接受默认数据
  },
  urls: {
    type: Array,
    default: () => []
  }
})

watch(
  () => props.visible,
  val => {
    dialogVisible.value = val
  }
)

const handleOpen = () => {
  currentImageUrls.value = props.urls
  imageIdx.value = 0
  imageFps.value = 0
}

const dialogVisible = ref(false)
const imageFps = ref(0)
const intervalChangeFps: any = ref()
const imageIdx = ref(0)
const currentImageUrls = ref<any[]>([])
const newImageIdx = ref()

const handleClose = (done: () => void) => {
  console.log('handleClose')
  if (intervalChangeFps.value) {
    clearInterval(intervalChangeFps.value)
  }
  done()
}

const confirmNewImageIdx = () => {
  const val = parseInt(newImageIdx.value)
  if (val > 0 && val <= currentImageUrls.value.length) {
    imageIdx.value = val - 1
  } else {
    ElMessageBox.alert('跳转索引有误，请检查！')
  }
}

const changeFps = () => {
  console.log('changeFps')
  if (intervalChangeFps.value) {
    clearInterval(intervalChangeFps.value)
  }

  if (imageFps.value == 0) {
    return
  }

  intervalChangeFps.value = setInterval(() => {
    next_picture()
  }, 1000 / imageFps.value)
}

const next_picture = () => {
  if (imageIdx.value < currentImageUrls.value.length - 1) {
    imageIdx.value += 1
  }
}

const pre_picture = () => {
  if (imageIdx.value > 0) {
    imageIdx.value -= 1
  }
}
</script>

<style scoped lang="scss">
.image-dialog {
  display: flex;
  justify-content: center;
  .el-image {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.image-dialog-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>