From 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:50:13 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/CurrentTaskDetails.vue | 145 ++++++++++++++++++++++++++++++++++++++----------
1 files changed, 114 insertions(+), 31 deletions(-)
diff --git a/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/CurrentTaskDetails.vue b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/CurrentTaskDetails.vue
index fba05d6..45ad001 100644
--- a/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/CurrentTaskDetails.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/CurrentTaskDetails.vue
@@ -11,10 +11,19 @@
<div class="content-container" v-if="isShow">
<!-- 视频直播 -->
<div class="video-container">
- <LiveVideo :videoUrl="currentLiveUrl" />
+ <LiveVideo :videoUrl="currentLiveUrl" :controls="false" />
</div>
<!-- 展示地图 -->
- <RealTimeMap />
+ <RealTimeMap class="realTimeMap" />
+ <TaskDetailsRight v-if="isAutoControl" />
+ <template v-else>
+ <TaskDetailsHead />
+ </template>
+ <TaskDetailsLeft />
+
+
+ <!-- 控制面板，里面有方法需要立即执行，不可用v-if -->
+ <ControlPanel v-show="!isAutoControl" />
</div>
</el-dialog>
</template>
@@ -29,6 +38,17 @@
import { getWebsocketUrl } from '@/websocket/util/config'
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
import { EBizCode } from '@/utils/staticData/enums'
+import ControlPanel from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/ControlPanel.vue'
+import TaskDetailsHead from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsHead.vue'
+import TaskDetailsLeft from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue'
+import TaskDetailsRight from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsRight.vue'
+import { ElMessage } from 'element-plus'
+import EventBus from '@/event-bus'
+
+const isAutoControl = ref(true)
+const lineQuality = ref(1) //1流畅，2标清
+provide('isAutoControl', isAutoControl)
+provide('lineQuality', lineQuality)
const isShow = defineModel('show')
const props = defineProps({
@@ -38,40 +58,49 @@
default: () => ({}),
},
})
-let taskDetails = ref({})
const currentLiveUrl = ref('')
const machineNestUrl = ref('')
-const dockLiveUrl = ref('')
-provide('taskDetails', taskDetails)
-
+const droneLiveUrl = ref('')
+let taskDetails = ref({})
const deviceOsdInfo = ref({})
+provide('taskDetails', taskDetails)
provide('deviceOsdInfo', deviceOsdInfo)
+provide('dockSn', taskDetails?.value?.device_sns?.[0])
+provide('droneSn', deviceOsdInfo?.value?.data?.sn)
+
// 机巢直播
const getDeviceLiveUrl = async () => {
if (machineNestUrl.value) return machineNestUrl.value
- const res = await liveStart(taskDetails.value.device_sns[0])
+ const res = await liveStart(taskDetails.value.device_sns[0], 2)
machineNestUrl.value = res.data.data.rtcs_url
return machineNestUrl.value
}
// 无人机直播
-const getDockLiveUrl = async dockSn => {
- if (dockLiveUrl.value) return dockLiveUrl.value
- const res = await liveStart(dockSn)
- dockLiveUrl.value = res.data.data.rtcs_url
- return dockLiveUrl.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 changeLineQuality = async () => {
+ const res = await liveStart(droneSn, lineQuality.value)
+ droneLiveUrl.value = res.data.data.rtcs_url
+ return droneLiveUrl.value
}
// 设置当前直播地址
const setCurrentLiveUrl = async () => {
const data = deviceOsdInfo.value?.data
const deviceInfo = data?.host
- const dockSn = data?.sn
+ const drone = data?.sn
if ([14, 0].includes(deviceInfo.mode_code)) {
currentLiveUrl.value = await getDeviceLiveUrl()
} else {
- currentLiveUrl.value = await getDockLiveUrl(dockSn)
+ currentLiveUrl.value = await getDroneLiveUrl(drone)
}
}
@@ -80,10 +109,12 @@
getJobDetails({ wayLineJobInfoId: props.rowData.id }).then(async res => {
taskDetails.value = res.data.data
currentLiveUrl.value = await getDeviceLiveUrl()
- createWsConnect(taskDetails.value.way_lines[0].workspace_id)
+ taskDetails.value.workspace_id = taskDetails.value.way_lines[0]?.workspace_id
+ createWsConnect()
})
}
+// websocket 的消息
const messageHandler = result => {
let payload = JSON.parse(result) // 为了兼容聊天消息
switch (payload.biz_code) {
@@ -97,46 +128,98 @@
break
}
}
+
+// 创建ws连接
let connectWs
-const createWsConnect = workspaceId => {
+const createWsConnect = () => {
+ const workspaceId = taskDetails.value.workspace_id
+ if (!workspaceId) return
let webSocketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId
// 监听ws 消息
connectWs = useConnectWebSocket(messageHandler, webSocketUrl)
}
+
+watch(
+ () => taskDetails.value.workspace_id,
+ () => {
+ createWsConnect()
+ }
+)
const removeEvent = () => {
connectWs?.close()
deviceOsdInfo.value = {}
}
-// 监听 rowData 变化
-watch(isShow, newVal => {
- if (newVal) {
- getTaskDetails()
- } else {
- removeEvent()
- }
+onMounted(() => {
+ getTaskDetails()
+ EventBus.on('CurrentTaskDetails-timeStop', changeLineQuality)
})
onBeforeUnmount(() => {
+ EventBus.off('CurrentTaskDetails-timeStop', changeLineQuality)
removeEvent()
})
</script>
-<style lang="scss" scoped>
+<style lang="scss">
.current-task-details {
display: flex;
justify-content: space-between;
- .content-container {
- display: flex;
- // gap: 20px;
- height: 600px;
+ .el-dialog {
+ border-radius: 40px;
+ position: relative;
+ margin-top: 38px;
+ width: 1782px;
+ height: 1002px;
+ padding: 0;
- .video-container {
- width: 50%;
- padding-right: 10px;
+ .el-dialog__body {
+ width: 100%;
+ height: 100%;
}
+
+ .el-dialog__header {
+ height: 0;
+ overflow: hidden;
+ padding: 0;
+
+ .el-dialog__headerbtn {
+ position: absolute;
+ right: -40px;
+ top: -40px;
+
+ .el-dialog__close {
+ font-size: 30px;
+ }
+ }
+ }
+ }
+}
+</style>
+
+<style lang="scss" scoped>
+.content-container {
+ height: 100%;
+ width: 100%;
+ border-radius: 4rem;
+ overflow: hidden;
+
+ .video-container {
+ width: 100%;
+ height: 100%;
+ }
+
+ .realTimeMap {
+ position: absolute;
+ left: -1px;
+ bottom: -1px;
+ width: 218px;
+ height: 217px;
+ border-radius: 0px 20px 0px 40px;
+ border: 1px solid #62a1ff;
+ overflow: hidden;
}
}
</style>
--
Gitblit v1.9.3