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

<!-- 一点即视 -->
<template>
  <div class="glance relative">
    <div class="glance-right">
      <UseFullscreen class="flex items-center" v-slot="{ toggle, isFullscreen }">
        <div class="glance-right-wrapper screen-full-target">
          <pub-video-new :newClass="'glance-ps-video' + currentActive" />
          <joystick :id="data.id" />
          <div
            v-if="isVideo"
            absolute
            top-0
            right-0
            left-0
            bottom-0
            flex
            flex-justify-center
            flex-items-center
          >
            <Icon icon="loading" color="#007bff" width="40" height="40" />
          </div>
          <div
            v-if="!isVideo && !useSystem.videoList.ball_camera"
            absolute
            top-0
            right-0
            left-0
            bottom-0
            flex
            flex-justify-center
            flex-items-center
          >
            <n-empty size="large" description="球机网络故障，请检查网络后重连设备！">
              <template #extra>
                <n-button size="small" @click="reconnect"> 重连 </n-button>
              </template>
            </n-empty>
          </div>

          <!-- 操作按钮 -->
          <div
            class="panoramic-situation-main-btn-box absolute top-10px right-10px flex flex-row-reverse"
          >
            <!-- 全屏按钮 -->
            <div
              class="panoramic-situation-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"
              mr-1
              color="#8ac5ff"
              width="25"
              height="25"
              cursor-pointer
              alt="关闭画面"
              @click="closeWorker"
            />
          </div>
        </div>
      </UseFullscreen>
    </div>
  </div>
</template>
<script setup>
  import Joystick from './joystick.vue'
  import { NEmpty, NButton } from 'naive-ui'
  import { uuid } from '@/utils'
  import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
  import { useOutsideSystemStore } from '@/stores/modules/system.js'
  import { UseFullscreen } from '@vueuse/components'
  defineOptions({ name: 'GlanceBox' })

  const clearCom = inject('clearCom')
  const useSystem = useOutsideSystemStore()
  const { API_CLICKTOSEE_POST, API_LY_B_RELOGIN_POST } = useRequest()

  const isVideo = ref(true)

  const props = defineProps({
    currentActive: Number,
    data: {
      type: Object,
      default: () => {}
    }
  })

  watch(
    () => useSystem.partObj,
    async (newV) => {
      // if (useSystem.winActive === props.currentActive) {

      // }
      await API_CLICKTOSEE_POST(
        { CameraId: props.data.id },
        {
          X: Number(newV.PartCenterX),
          Y: Number(newV.PartCenterY)
        }
      )
    },
    { deep: true }
  )
  // 球机重连
  const reconnect = async () => {
    isVideo.value = true
    try {
      await API_LY_B_RELOGIN_POST({ BallCameraId: props.data.id })
      getWss()
    } catch (e) {
      if ([7].includes(e.code)) {
        isVideo.value = false
      }
    }
  }

  const playerObj = shallowRef(null)
  provide('playerObj', playerObj)

  const getWss = () => {
    nextTick(() => {
      isVideo.value = true
      const url = useSystem.videoList.ball_camera
        .replace('{4}', uuid())
        .replace('{12}', props.data.id)

      playerObj.value = omatVideoPlayer(
        '.glance-ps-video' + props.currentActive,
        url,
        () => {
          isVideo.value = false
        },
        { enableZoom: false, enableDrag: false }
      )
    })
  }

  // 关闭线程
  const closeWorker = () => {
    playerObj.value?.destroyed()
    clearCom()
  }
  onMounted(() => {
    getWss()
  })
  onUnmounted(() => {
    playerObj.value?.destroyed()
  })
</script>
<style scoped lang="scss">
  .glance {
    display: flex;
    height: 100%;
    &-left {
      width: 400px;
      height: 100%;
      border-right: 1px solid rgba(0, 128, 255, 0.4);
    }
    &-right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      &-wrapper {
        width: 100%;
        position: relative;
        overflow: hidden;
        transition: all 0.5s;
        aspect-ratio: 16/9;
      }
    }
  }
</style>