EOC-UI/src/components/UeMap.vue

<template>
  <div class="ue-option" :ref="val => getVideoRef(val)"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useStateManageStore } from '@/store/stateManage'
import { getAuth } from '../utils/ueMap.js'

const stateManage = useStateManageStore()

const getVideoRef = val => {
  stateManage.setVideoContainerRef(val)
}

// const handleViewScene = (sceneId: any) => {
//   stateManage.wsConnect(videoContainerRef, sceneId, 'VIEWONLY', localStorage.getItem('token'));
// };

function getData(url = '', token = '') {
  return new Promise((resolve, reject) => {
    // 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()

    // 配置 GET 请求
    xhr.open('GET', url, true)

    // 如果提供了 token，设置 Authorization 头
    if (token) {
      xhr.setRequestHeader('Authorization', `Bearer ${token}`)
    }

    // 设置响应处理
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText)) // 请求成功，解析 JSON 响应
      } else {
        reject(`Error: ${xhr.status}`) // 请求失败
      }
    }

    // 设置错误处理
    xhr.onerror = () => reject('Request failed')

    // 发送 GET 请求
    xhr.send()
  })
}

async function getUEAuth() {
  try {
    await getAuth({ username: 'JKTest', password: '123456' }).then(res => {
      localStorage.setItem('token', res.access_token)
      init()
    })
  } catch (error) {
    console.error('获取 UE token 失败', error)
  }
}

function init() {
  const script = document.createElement('script')
  // script.src = '/pixel-streaming-client/peer-stream.js'; // 自定义元素文件的路径
  console.log(import.meta.env)
  script.src = './peer-stream.js' // 自定义元素文件的路径
  script.async = true
  script.onload = () => {
    console.log('PeerStream custom element script loaded')
  }
  document.body.appendChild(script)
  let token = localStorage.getItem('token')
  console.log(token, 'getItemToken')
  const fetchData = async () => {
    try {
      const sceneList = await getData(import.meta.env.VITE_SERVICE_API_URL + '/scenePermission', localStorage.getItem('token'))

      console.log(sceneList, 'sceneList')
      stateManage.fSceneList = sceneList[0] // 设置场景列表数据到状态
      console.log(stateManage.fSceneList, 'stateManage.fSceneList')
      stateManage.handleOperateScene()
     
    } catch (error) {
      alert(error)
    }
  }
  fetchData()
}

onMounted(() => {
  getUEAuth()
})
</script>

<style lang="scss" scoped>
.ue-option {
  position: absolute;
  top:0px;
  left: 0px;
  // z-index: 9992;
  // flex: 1;
  // height: 100%;
  // width: 100%;
  height: 1080px;
  width: 3840px;
  overflow: hidden;
}
</style>