From a0f008e1b176ab0c844bc4721f282e12d18f855c Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 24 Feb 2025 18:20:11 +0800
Subject: [PATCH] 调整详情和修改地图渲染功能
---
src/views/DronePilotDetails.vue | 170 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 104 insertions(+), 66 deletions(-)
diff --git a/src/views/DronePilotDetails.vue b/src/views/DronePilotDetails.vue
index ad9d030..b3ce7be 100644
--- a/src/views/DronePilotDetails.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3