From d17c4a4cc64dcf38c8373170761ee0da39a71a4a Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 17 Apr 2025 13:21:47 +0800
Subject: [PATCH] feat: 地图放大缩小逻辑
---
src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue | 14 +++---
src/assets/images/taskManagement/taskIntermediateContent/amplifyImg.png | 0
src/websocket/index.js | 8 ++--
src/components/CurrentTaskDetails/CurrentTaskDetails.vue | 90 ++++++++++++++++++++-------------------------
4 files changed, 51 insertions(+), 61 deletions(-)
diff --git a/src/assets/images/taskManagement/taskIntermediateContent/amplifyImg.png b/src/assets/images/taskManagement/taskIntermediateContent/amplifyImg.png
new file mode 100644
index 0000000..2377054
--- /dev/null
+++ b/src/assets/images/taskManagement/taskIntermediateContent/amplifyImg.png
Binary files differ
diff --git a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
index e60ce07..f4ba147 100644
--- a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
+++ b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
@@ -308,6 +308,7 @@
}
}
+// useManualControl里面用的参数
const paramsRef = computed(()=>({
droneSn:droneSn.value,
speed:speed.value,
@@ -368,7 +369,7 @@
position: absolute;
bottom: 0;
right: 0;
- width: 1540px;
+ width: 1400px;
height: 217px;
background: linear-gradient(196deg, rgba(23, 23, 23, 0.11) 0%, rgba(6, 6, 6, 0.11) 100%);
backdrop-filter: blur(5px);
@@ -381,7 +382,7 @@
pointer-events: all;
.direction {
- width: 476px;
+ width: 400px;
height: 188px;
background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
border-radius: 40px 40px 40px 40px;
@@ -396,7 +397,7 @@
.btnGroupT,
.btnGroupB {
- width: 238px;
+ width: 180px;
height: 73px;
}
}
@@ -433,7 +434,7 @@
}
.ptzControlBox {
- width: 406px;
+ width: 386px;
height: 188px;
background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
border-radius: 40px 40px 40px 40px;
@@ -546,7 +547,7 @@
display: flex;
flex-direction: column;
gap: 7px 0;
- width: 70px;
+ width: 60px;
.infoName {
height: 25px;
@@ -584,8 +585,7 @@
display: flex;
align-items: center;
text-align: center;
- justify-content: center;
- gap: 0 45px;
+ justify-content: space-evenly;
.btnItem {
.btnIcon {
diff --git a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue b/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
index 8dd53e3..649f760 100644
--- a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
+++ b/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
@@ -10,20 +10,20 @@
>
<div class="content-container" v-if="isShow">
<!-- 视频直播 -->
- <div class="video-container">
+ <div :class="`${isMaxMap ? 'minBox' : 'maxBox'}`">
<LiveVideo :videoUrl="currentLiveUrl" :controls="false" />
</div>
<!-- 展示地图 -->
- <RealTimeMap class="realTimeMap" />
+ <RealTimeMap :class="`${isMaxMap ? 'maxBox' : 'minBox'}`" />
<TaskDetailsRight v-if="isAutoControl" />
<template v-else>
<TaskDetailsHead />
<TaskDetailsLeft />
</template>
-
<!-- 控制面板，里面有方法需要立即执行，不可用v-if -->
<ControlPanel v-show="!isAutoControl" />
+ <img alt="" :src="amplifyImg" class="amplify" @click="amplify" />
</div>
</el-dialog>
</template>
@@ -42,6 +42,7 @@
import TaskDetailsHead from '@/components/CurrentTaskDetails/TaskDetailsHead.vue'
import TaskDetailsLeft from '@/components/CurrentTaskDetails/TaskDetailsLeft.vue'
import TaskDetailsRight from '@/components/CurrentTaskDetails/TaskDetailsRight.vue'
+import amplifyImg from '@/assets/images/taskManagement/taskIntermediateContent/amplifyImg.png'
import { ElMessage } from 'element-plus'
import EventBus from '@/event-bus'
@@ -53,8 +54,6 @@
const isShow = defineModel('show')
const props = defineProps(['id'])
const currentLiveUrl = ref('')
-const machineNestUrl = ref('')
-const droneLiveUrl = ref('')
let taskDetails = ref({})
const deviceOsdInfo = ref({})
provide('taskDetails', taskDetails)
@@ -62,45 +61,37 @@
const dockSn = computed(() => taskDetails?.value?.device_sns?.[0])
const droneSn = computed(() => deviceOsdInfo?.value?.data?.sn)
-
provide('dockSn', dockSn)
provide('droneSn', droneSn)
+const isMaxMap = ref(false)
+const amplify = () => {
+ isMaxMap.value = !isMaxMap.value
+}
// 机巢直播
const getDeviceLiveUrl = async () => {
- if (machineNestUrl.value) return machineNestUrl.value
- const res = await liveStart(taskDetails.value.device_sns[0], 2)
- machineNestUrl.value = res.data.data.rtcs_url
- return machineNestUrl.value
-}
-
-// 无人机直播
-const getDroneLiveUrl = async droneSn => {
- if (droneLiveUrl.value) return droneLiveUrl.value
- const res = await liveStart(droneSn, lineQuality.value)
- droneLiveUrl.value = res.data.data.rtcs_url
- return droneLiveUrl.value
+ const res = await liveStart(dockSn.value, 2)
+ currentLiveUrl.value = res.data.data.rtcs_url
}
// 无人机直播画质切换
const changeLineQuality = async () => {
- if (droneLiveUrl.value) return droneLiveUrl.value
- const res = await liveStart(droneSn, lineQuality.value)
- droneLiveUrl.value = res.data.data.rtcs_url
- return droneLiveUrl.value
+ const res = await liveStart(droneSn.value, lineQuality.value)
+ currentLiveUrl.value = res.data.data.rtcs_url
}
+
+const isTakeOff = ref(false)
// 设置当前直播地址
const setCurrentLiveUrl = async () => {
const data = deviceOsdInfo.value?.data
const deviceInfo = data?.host
- const drone = data?.sn
- if ([14, 0].includes(deviceInfo.mode_code)) {
- currentLiveUrl.value = await getDeviceLiveUrl()
- } else {
- currentLiveUrl.value = await getDroneLiveUrl(drone)
- }
+ const currentIsTakeOff = ![14, 0].includes(deviceInfo.mode_code)
+ // 如果还是之前的状态，不切换
+ if (isTakeOff.value === currentIsTakeOff) return
+ isTakeOff.value = currentIsTakeOff
+ isTakeOff.value ? await changeLineQuality() : await getDeviceLiveUrl()
}
// 获取任务详情获取航线文件
@@ -108,20 +99,20 @@
if (!props.id) ElMessage.warning('请检查是否传入id')
getJobDetails({ wayLineJobInfoId: props.id }).then(async res => {
taskDetails.value = res.data.data
- currentLiveUrl.value = await getDeviceLiveUrl()
+ await getDeviceLiveUrl()
taskDetails.value.workspace_id = taskDetails.value.way_lines[0]?.workspace_id
createWsConnect()
})
}
-// websocket 的消息
+// websocket 的消息回调
const messageHandler = result => {
- let payload = JSON.parse(result) // 为了兼容聊天消息
+ let payload = JSON.parse(result)
switch (payload.biz_code) {
case EBizCode.DeviceOsd: {
deviceOsdInfo.value = payload
- console.log(deviceOsdInfo.value,'device_osd信息')
setCurrentLiveUrl()
+ console.log(deviceOsdInfo.value, 'device_osd信息')
break
}
default:
@@ -129,23 +120,15 @@
}
}
+let droneWebSocket
// 创建ws连接
-let connectWs
const createWsConnect = () => {
const workspaceId = taskDetails.value.workspace_id
if (!workspaceId) return
let webSocketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId
// 监听ws 消息
- connectWs = useConnectWebSocket(messageHandler, webSocketUrl)
+ droneWebSocket = useConnectWebSocket(messageHandler, webSocketUrl)
}
-
-watch(
- () => taskDetails.value.workspace_id,
- () => {
- createWsConnect()
- }
-)
-
onMounted(() => {
getTaskDetails()
@@ -153,9 +136,9 @@
})
onBeforeUnmount(() => {
- connectWs?.close()
+ droneWebSocket?.close()
deviceOsdInfo.value = {}
- connectWs = null
+ droneWebSocket = null
EventBus.off('CurrentTaskDetails-timeStop', changeLineQuality)
})
</script>
@@ -204,20 +187,27 @@
border-radius: 4rem;
overflow: hidden;
- .video-container {
+ .maxBox {
width: 100%;
height: 100%;
}
- .realTimeMap {
+ .minBox {
position: absolute;
- left: -1px;
- bottom: -1px;
- width: 218px;
- height: 217px;
+ width: 376px;
+ height: 212px;
+ left: 0;
+ bottom: 0;
border-radius: 0px 20px 0px 40px;
border: 1px solid #62a1ff;
overflow: hidden;
}
+
+ .amplify {
+ cursor: pointer;
+ position: absolute;
+ left: 340px;
+ bottom: 183px;
+ }
}
</style>
diff --git a/src/websocket/index.js b/src/websocket/index.js
index ffebd8c..48e79d6 100644
--- a/src/websocket/index.js
+++ b/src/websocket/index.js
@@ -40,15 +40,15 @@
}
_onOpen() {
- console.log('连接成功')
+ console.log('ws连接成功')
}
_onClose() {
- console.log('连接已断开')
+ console.log('ws连接已断开')
}
_onError() {
- console.log('连接 error')
+ console.log('ws连接 error')
}
registerMessageHandler(messageHandler) {
@@ -67,8 +67,8 @@
}
close() {
- console.log('socket关闭')
this._socket?.close()
+ this._messageHandler = null
this._socket = null
}
}
--
Gitblit v1.9.3