BigScreen/src/views/home/middleBottomBox/components/partBox.vue

<template>
  <div class="part-box h-full">
    <div class="part-box-wrapper h-full">
      <UseFullscreen class="h-full" v-slot="{ toggle, isFullscreen }">
        <div class="part-video-box relative screen-full-target h-full">
          <vue-photo-zoom-pro
            ref="zoomRef"
            class="w-full h-full"
            :scale="3"
            :width="150"
            :disabled-event="isZoom"
          >
            <pub-video-new :newClass="'p-video' + currentActive" />
            <template v-slot:zoomer>
              <pub-video-new :newClass="'p-zoom-video' + currentActive" :key="resetKey" />
            </template>
          </vue-photo-zoom-pro>

          <!-- 操作按钮 -->
          <div class="part-main-btn-box" absolute top-10px right-10px flex flex-row-reverse z-999>
            <!-- 全屏按钮 -->
            <div
              class="part-main-all-screen screen-full-trigger"
              cursor-pointer
              ml-1
              alt="全屏按钮"
            >
              <Icon
                icon="icon-park-outline:off-screen"
                color="#8ac5ff"
                width="25"
                height="25"
                v-if="isFullscreen"
                @click="toggle"
              />
              <Icon
                icon="iconamoon:screen-full"
                color="#8ac5ff"
                width="25"
                height="25"
                @click="toggle"
                v-else
              />
            </div>
            <Icon
              icon="grommet-icons:power-shutdown"
              v-if="!isFullscreen"
              color="#8ac5ff"
              width="25"
              height="25"
              cursor-pointer
              alt="关闭画面"
              @click="closeVideo()"
            />
            <span
              class="size-28px mr-1 color-#8ac5ff cursor-pointer i-ph:magnifying-glass-plus"
              @click="magnifying(!magnifyingFlag)"
            ></span>
          </div>
          <div
            v-if="!playerObj"
            class="absolute top-0 bottom-0 right-0 left-0 flex flex-justify-center flex-items-center"
          >
            <span style="animation: fadeIn 0.8s alternate infinite">请双击全景画面</span>
          </div>
          <div
            v-if="loading"
            class="absolute top-50% left-50% transform-translate--50% flex justify-center items-center"
          >
            <NSpin />
          </div>
        </div>
      </UseFullscreen>
    </div>
  </div>
</template>
<script setup>
  import { NSpin } from 'naive-ui'
  import { useOutsideSystemStore } from '@/stores/modules/system.js'
  import { uuid, getAutofitScale } from '@/utils'
  import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
  import { UseFullscreen } from '@vueuse/components'
  import VuePhotoZoomPro from 'vue-photo-zoom-pro'

  const useSystem = useOutsideSystemStore()

  const props = defineProps({
    currentActive: Number,
    data: Object
  })
  const tourId = ref('')
  const clearCom = inject('clearCom')
  let playerObj = null

  let tempArrI = 0
  let tempArrT = null
  const loading = ref(false)
  const videoUrl = computed(() => useSystem.videoUrl)
  const videoClick = async () => {
    if (playerObj) {
      closeWorker()
    }

    nextTick(() => {
      loading.value = true

      try {
        // await useSystem.getDeviceInfo()
        console.log('websocket请求')
        playerObj = omatVideoPlayer(
          '.p-video' + props.currentActive,
          videoUrl.value,
          () => {
            const videoDom = document.querySelector('.p-video' + props.currentActive)
            setTimeout(() => {
              videoDom.style.width = videoDom.videoWidth + 'px'
              const { width, height } = videoDom.getBoundingClientRect()
              const { PartCenterY: py, PartCenterX: px } = useSystem.partObj
              const [x, y] = [
                px < 237 ? 0 : px > width ? width : px - 237,
                py < 132 ? 0 : py > height ? height : py - 132
              ]
              videoDom.style.transform = `translate(${-x}px, ${-y}px)`
              loading.value = false
            }, 150)
          },
          {
            enableZoom: false, // 启用缩放
            enableDrag: false, // 启用拖动
            minScale: 1, // 最小缩放比例
            maxScale: 6, // 最大缩放比例
            dragSpeed: 1.9 // 拖动速度
          }
        )
      } catch (error) {
        console.log(error)
      }
    })
  }

  let magnifyingWorkerObj = null
  const isZoom = ref(true)
  const zoomRef = ref(null)
  const resetKey = ref(uuid())
  const magnifyingFlag = ref(false)
  const magnifying = (flag) => {
    zoomRef.value?.mouseLeave()
    magnifyingFlag.value = flag
    if (flag) {
      if (magnifyingWorkerObj) return
      // const url = videoList.value.pano_view.replace('{14}', useSystem.deviceInfo.id)
      magnifyingWorkerObj = omatVideoPlayer(
        '.p-zoom-video' + props.currentActive,
        videoUrl.value,
        () => {
          const videoDom = document.querySelector('.p-zoom-video' + props.currentActive)
          const videoDomOrigin = document.querySelector('.p-video' + props.currentActive)
          setTimeout(() => {
            videoDom.style.width = videoDomOrigin.videoWidth + 'px'
            const { width, height } = videoDomOrigin.getBoundingClientRect()
            const { PartCenterY: py, PartCenterX: px } = useSystem.partObj
            const [x, y] = [
              px < 237 ? 0 : px > width ? width : px - 237,
              py < 132 ? 0 : py > height ? height : py - 132
            ]
            videoDom.style.transform = `translate(${-x}px, ${-y}px)`
            isZoom.value = false
            zoomRef.value.mouseEnter()
          }, 200)
        }
      )
    } else {
      isZoom.value = true
      zoomRef.value.mouseLeave()
      magnifyingWorkerObj?.destroyed()
      resetKey.value = uuid()
      magnifyingWorkerObj = null
    }
  }

  const closeVideo = () => {
    if (magnifyingFlag.value) {
      magnifying(false)
    }
    closeWorker()
  }
  // 关闭线程
  const closeWorker = (index) => {
    if (!playerObj) return
    playerObj?.destroyed()
    playerObj = null
  }
  const init = () => {
    videoClick()
  }

  watch(
    () => useSystem.partObj,
    () => {
      if (props.currentActive !== useSystem.winActive) return
      init()
    },
    { deep: true }
  )

  onBeforeUnmount(() => {
    closeWorker()
  })

  defineExpose({ init })
</script>
<style scoped lang="scss"></style>