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

<template>
  <div class="advanced-linkage h-full">
    <UseFullscreen v-slot="{ toggle, isFullscreen }">
      <div class="relative w-full h-full flex items-center">
        <pub-video-new :newClass="['al-video' + currentActive]" class="aspect-ratio-video" />
        <div class="absolute top-10px right-10px flex flex-row-reverse gap-1 z-999">
          <!-- 全屏按钮 -->
          <div class="all-screen popover-screen-full-trigger cursor-pointer">
            <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="closeWorker"
          />
        </div>
        <div
          v-if="loading"
          class="absolute top-50% left-50% transform-translate--50% flex justify-center items-center"
        >
          <NSpin />
        </div>
      </div>
    </UseFullscreen>
  </div>
</template>

<script setup>
  import { uuid } from '@/utils'
  import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
  import { UseFullscreen } from '@vueuse/components'
  import { NSpin } from 'naive-ui'
  import { useOutsideSystemStore } from '@/stores/modules/system.js'

  const props = defineProps({
    data: Object,
    currentActive: Number
  })
  const useSystem = useOutsideSystemStore()
  const loading = ref(false)
  const clearCom = inject('clearCom')

  let playerObj = null

  const init = async () => {
    // const url = videoList.value.third.replace('{4}', uuid()).replace('{13}', props.data.id)
    loading.value = true
    const { url } = await useSystem.getStream({ device_id: props.data.address })
    try {
      // await useSystem.getDeviceInfo()
      console.log('websocket请求')
      playerObj = omatVideoPlayer(
        '.al-video' + props.currentActive,
        url,
        () => {
          loading.value = false
        },
        {
          enableZoom: true, // 启用缩放
          enableDrag: true, // 启用拖动
          minScale: 1, // 最小缩放比例
          maxScale: 6, // 最大缩放比例
          dragSpeed: 1.9 // 拖动速度
        }
      )
    } catch (error) {
      console.log(error)
    }
  }

  // 关闭线程
  const closeWorker = () => {
    if (!playerObj) return
    playerObj?.destroyed()
    playerObj = null
    clearCom()
  }

  onMounted(() => {
    init()
  })

  onUnmounted(() => {
    playerObj?.destroyed()
  })
</script>