遥控器上云H5
blame | history | patch | commit | commitdiff | ignore whitespace
chenyao
2025-02-24 a0f008e1b176ab0c844bc4721f282e12d18f855c 
 src/views/DronePilotDetails.vue


@@ -1,12 +1,21 @@


<template>


  <div class="drone-pilot-details" :style="{ width: screenWidth,height: screenHeight}">


    <div id="landscapeBox" class="landscape-box" :style="{ width: screenWidth + 'px', height: (screenHeight) + 'px'}">


    <van-nav-bar


      title="详情"


      left-arrow


      @click-left="onClickLogin"


    />


    <div id="landscapeBox" class="landscape-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px'}">


      <div id="videoModule" class="l-video" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">


        <video v-show="videoUrl" ref="videoPlayerBig" :style="{ width: screenWidthVideo + 'px', height: screenHeightVideo + 'px'}" controls autoplay muted playsinline style="text-align: left; object-fit: fill">


          Your browser is too old which doesn't support HTML5 video.


        </video>


        <el-empty v-show="videoUrl == ''" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>


        <div v-if="videoUrl" class="center-point"></div>


        <div class="right-box">


          <ptzControl :sn="sn" :osdVisible="sbInfo"/>


          <controlConsole :sn="sn" :osdVisible="sbInfo" :cesiumViewe="globalViewer" />


        </div>


      </div>


      <div class="l-map" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">


        <div id="cesiumContainerBigMap"></div>


@@ -26,10 +35,6 @@


            <img v-else src="@/assets/images/suo.png" @touchstart="changeModelMap" />


          </div>


        </div>


      </div>


      <div class="right-box">


        <ptzControl :sn="sn" :osdVisible="sbInfo" />


        <controlConsole :sn="sn" :osdVisible="sbInfo" :cesiumViewe="globalViewer" />


      </div>


    </div>


  </div>


@@ -84,12 +89,15 @@


// 使用 ref 来存储屏幕宽度和高度


const screenWidth = ref(window.innerWidth);


const screenHeight = ref(window.innerHeight);


// 加了头部


const boxWidth = ref(window.innerWidth);


const boxHeight = ref(window.innerHeight - 46);


// 地图切换


const screenWidthMap = ref((window.innerHeight/2)*2)// ref(window.innerWidth);


const screenHeightMap = ref((window.innerHeight/2));


const screenWidthMap = ref(boxWidth.value)// ref(((boxHeight.value)/2)*2)


const screenHeightMap = ref(((boxHeight.value)/2));


// 视频切换


const screenWidthVideo = ref(window.innerWidth);


const screenHeightVideo = ref(window.innerHeight/2);


const screenWidthVideo = ref(boxWidth.value);


const screenHeightVideo = ref(boxHeight.value/2);


const isBigMap = ref(false)




// 显示高德地图矢量还是影像(2D/3D)


@@ -147,12 +155,10 @@


const drawCanvasHeight = ref<Number>(0)




// 鹰眼视频


const timer = null;


const videoPlayer = ref<any>(null); // 视频播放器实例


let webrtcPlayer = null; // video.js 播放器


// const timer = null;




// 大屏幕视频


const timerBig = null;


// const timerBig = null;


const videoPlayerBig = ref<any>(null); // 视频播放器实例


let webrtcPlayerBig = null




@@ -255,7 +261,6 @@


// 获取实时航线


const getWrjSsLx = () => {


  if (window.cesiumViewer== null) return 


  globalViewer = window.cesiumViewer;


  getWaylineFile(sbInfo.sn).then((res:any) => {


    if (res.code != 200) return


    ssLinePath.value = res.data


@@ -294,6 +299,7 @@


    case EBizCode.DeviceOsd: {


      store.commit('SET_DEVICE_INFO', payload.data)


      store.commit('SET_WS_MESSAGE', payload)


      getviewDrone(payload)


      break


    }


    case EBizCode.DockOsd: { // 机场


@@ -302,10 +308,9 @@


    }


    case EBizCode.FlightTaskProgress: { // 获取进度


      // 如果点击列表进入没有获取到航线文件，那么这里重新请求一次


      console.log('航线有么111？',ssLinePath.value)


      if (!ssLinePath || !ssLinePath.value) {


        getWrjSsLx()


      }


      // if (!ssLinePath || !ssLinePath.value) {


      //   getWrjSsLx()


      // }


      break


    }


  }


@@ -316,17 +321,45 @@


// 监听ws 消息


useConnectWebSocket(messageHandler, webSorketUrl)






let savedMapState = null; // 保存地图状态


// 销毁之前先保存状态


const destroyViewer = () => {


  if ( window.cesiumViewer) {


    // 保存当前地图状态（如相机位置）


    // savedMapState = window.cesiumViewer.camera.view;


    window.cesiumViewer.destroy();


    window.cesiumViewer = null;


// 定义方法直接监听机场消息


const getviewDrone = (newValue) => {


  if (newValue.data.host) {


    viewDroneInfo.longitude = newValue.data.host?.longitude


    viewDroneInfo.latitude = newValue.data.host?.latitude


    viewDroneInfo.elevation = Number(newValue.data.host?.elevation.toFixed(2)) + droneHeight.value


  }


}






// let savedMapState = null; // 保存地图状态


// // 销毁之前先保存状态


// const destroyViewer = () => {


//   if ( window.cesiumViewer) {


//     // 保存当前地图状态（如相机位置）


//     // savedMapState = window.cesiumViewer.camera.view;


//     window.cesiumViewer.destroy();


//     window.cesiumViewer = null;


//   }


// }




// 视频全屏切换




// const changeModelVideo = (value:Boolean) => {


//   const videoModule = document.getElementById('videoModule');


//   // 不管是否竖/横屏都一样


//   if (value) { // 全屏


//     videoModule.style.width = `${screenWidth.value}px`


//     videoModule.style.height = `${screenHeight.value}px`


//   } else {


//     if (isLandscape.value) {


//       videoModule.style.width = `${screenWidth.value/2}px`


//       videoModule.style.height = `${screenHeight.value}px`


//     } else {


//       videoModule.style.height = `${screenHeight.value/2}px`


//       videoModule.style.width = `${screenWidth.value}px`


//     }


//   }


// }




// 地图全屏切换


const changeModelMap = () => {


@@ -337,34 +370,32 @@


  if (isLandscape.value) { // 横屏


    if (isBigMap.value) { // 全屏


      cesiumContainer.style.position = 'fixed';


      cesiumContainer.style.top = '0';


      cesiumContainer.style.top = '46px';


      cesiumContainer.style.left = '0';


      cesiumContainer.style.width = `${screenWidthMap.value * 2}px`


      cesiumContainer.style.height = `${screenHeightMap.value}px`


      cesiumContainer.style.width = `${boxWidth.value}px`


      // cesiumContainer.style.height = `${screenHeightMap.value}px`


      lZp.style.right = '40%';


      // lZoom.style.left = '0';


    } else { // 缩放


      cesiumContainer.style.width = `${screenWidthMap.value}px`


      cesiumContainer.style.height = `${screenHeightMap.value}px`


      cesiumContainer.style.width = `${boxWidth.value/2}px`


      // cesiumContainer.style.height = `${screenHeightMap.value}px`


      cesiumContainer.style.position = 'static';


      lZp.style.right = '16%';


      // lZoom.style.left = '50%';


      


    }


  } else {


    if (isBigMap.value) { // 全屏


    if (isBigMap.value) { // 竖-全屏


      cesiumContainer.style.position = 'fixed';


      cesiumContainer.style.top = '0';


      cesiumContainer.style.top = '46px';


      cesiumContainer.style.left = '0';


      cesiumContainer.style.width = `${screenWidthMap.value}px`


      cesiumContainer.style.height = `${screenHeightMap.value * 2}px`


      // cesiumContainer.style.width = `${boxHeight.value}px`


      cesiumContainer.style.height = `${boxHeight.value}px`


      lZp.style.right = '30%';


      // lZoom.style.right = '0';


    } else { // 缩放


    console.log('竖屏宽度',screenWidthMap.value)


    console.log('竖屏高度度',screenHeightMap.value)


      cesiumContainer.style.width = `${screenWidthMap.value}px`


      cesiumContainer.style.height = `${screenHeightMap.value}px`


      cesiumContainer.style.width = `${boxHeight.value}px`


      cesiumContainer.style.height = `${boxHeight.value/2}px`


      cesiumContainer.style.position = 'static';


      lZp.style.right = '30%';


      // lZoom.style.right = '0';


@@ -402,39 +433,36 @@


// };




const checkOrientation = async () => {


  screenWidth.value = window.innerWidth;


  screenHeight.value = window.innerHeight;


  console.log('屏幕宽度', screenWidth.value)


  console.log('屏幕高度', screenHeight.value)


  boxWidth.value = window.innerWidth;


  boxHeight.value = window.innerHeight - 46;


  const landscapeBox = document.getElementById('landscapeBox');


  let cesiumContainer = document.getElementById('cesiumContainerBigMap');


  const videoModule = document.getElementById('videoModule');


  const lZp = document.getElementById('lZp');


  const lZoom = document.getElementById('lZoom');




  if (window.innerWidth > window.innerHeight) {//横屏


    screenWidthVideo.value = window.innerWidth/2


    screenHeightVideo.value = window.innerHeight


    screenWidthVideo.value = boxWidth.value/2


    screenHeightVideo.value = boxHeight.value


    isLandscape.value = true;


    // updateScreenSize()


    landscapeBox.style.display = 'flex';


    lZp.style.right = '16%';


    lZoom.style.position = 'fixed';


    cesiumContainer.style.width = `${screenWidth.value/2}px`


    cesiumContainer.style.height = `${screenHeight.value}px`


    cesiumContainer.style.width = `${boxWidth.value/2}px`


    cesiumContainer.style.height = `${boxHeight.value}px`


    cesiumContainer.style.position = 'static'


    cesiumContainer.style.right = '0'


    cesiumContainer.style.marginLeft = '0%'


  } else { //竖屏


    isLandscape.value = false;


    screenWidthVideo.value = window.innerWidth


    screenHeightVideo.value = (window.innerHeight/2)


    screenWidthVideo.value = boxWidth.value


    screenHeightVideo.value = boxHeight.value/2


    // updateScreenSize()


    landscapeBox.style.display = 'inherit';


    landscapeBox.style.overflow = 'hidden';


    lZp.style.right = '32%';


    cesiumContainer.style.width = `${screenHeight.value}px`


    cesiumContainer.style.height = `${screenHeight.value/2}px`


    cesiumContainer.style.width = `${boxHeight.value}px`


    cesiumContainer.style.height = `${boxHeight.value/2}px`


    // cesiumContainer.style.position = 'absolute'


    cesiumContainer.style.marginLeft = '-32%'


  }


@@ -501,17 +529,26 @@


  }


}, {deep: true})




watch(() => store.state.wsMessage, (newValue, oldValue) => {


  // 控制台报 Expected longitude to be typeof number, actual typeof was undefined 是因为这里没有及时拿到longitude数据


  if (newValue) {


    viewDroneInfo.longitude = newValue?.longitude


    viewDroneInfo.latitude = newValue?.latitude


    viewDroneInfo.elevation = Number(newValue?.elevation.toFixed(2)) + droneHeight.value


  }


}, {deep: true})


// watch(() => store.state.wsMessage, (newValue, oldValue) => {


//   // 控制台报 Expected longitude to be typeof number, actual typeof was undefined 是因为这里没有及时拿到longitude数据


//   if (newValue) {


//     viewDroneInfo.longitude = newValue?.longitude


//     viewDroneInfo.latitude = newValue?.latitude


//     viewDroneInfo.elevation = Number(newValue?.elevation.toFixed(2)) + droneHeight.value


//   }


// }, {deep: true})






let intervalId = null;




const onClickLogin = () => {


  history.back();


}




// 为组件赋值


const getGlobalViewer = () => {


  globalViewer = window.cesiumViewer;


}




onMounted(async () => {


  window.addEventListener('orientationchange', checkOrientation);


@@ -520,16 +557,16 @@


  loadVideo()


  await nextTick();


  await _init('cesiumContainerBigMap');


  await getGlobalViewer()


  await getWrjSsLx();


  // 判断是遥控器还是机场


  let domain = sessionStorage.getItem('domain')


  if (domain !== '0') {


    await getPhoneLocation(workspaceId.value)


    clickPhoneLocation()


  // // // 设置定时器，每隔 5 秒刷新一次数据


    intervalId = setInterval(()=> {


      getPhoneLocation(workspaceId.value)


    }, 5000);


    // intervalId = setInterval(()=> {


    //   getPhoneLocation(workspaceId.value)


    // }, 5000);


  }


});




@@ -611,6 +648,7 @@


      transform: translate(-50%, -50%);


      justify-content: center;


    }


    .right-box {}


  }


  #cesiumContainerBigMap {


    width: 100%;


@@ -641,6 +679,6 @@


      }


    }


  }


  .right-box {}


  


}


</style>