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="all-screen popover-screen-full-trigger cursor-pointer z-99 absolute right-8px top-8px"
        >
          <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>
        <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)

  let playerObj = null

  const videoList = computed(() => useSystem.videoList)

  const init = async () => {
    const url = videoList.value.third.replace('{4}', uuid()).replace('{13}', props.data.id)
    console.log(url)

    loading.value = true
    try {
      // await useSystem.getDeviceInfo()
      console.log('websocket请求')
      playerObj = omatVideoPlayer(
        '.al-video' + props.currentActive,
        url,
        () => {
          loading.value = false
        },
        {
          enableZoom: false,
          enableDrag: false
        }
      )
    } catch (error) {
      console.log(error)
    }
  }

  onMounted(() => {
    init()
    console.log(props.data)
  })

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