| | |
| | | :destroy-on-close="true" |
| | | > |
| | | <div class="content-container" v-if="isShow"> |
| | | <TaskDetailsHead/> |
| | | <TaskDetailsLeft/> |
| | | <!-- 视频直播 --> |
| | | <div class="video-container"> |
| | | <LiveVideo :videoUrl="currentLiveUrl" /> |
| | | <LiveVideo :videoUrl="currentLiveUrl" :controls="false" /> |
| | | </div> |
| | | <!-- 展示地图 --> |
| | | <RealTimeMap class="realTimeMap" /> |
| | | <ControlPanel /> |
| | | <!-- <ControlPanel v-if="deviceOsdInfo?.data?.sn" />--> |
| | | <TaskDetailsRight v-if="isAutoControl" /> |
| | | <template v-else> |
| | | <TaskDetailsHead /> |
| | | </template> |
| | | <TaskDetailsLeft /> |
| | | |
| | | |
| | | <!-- 控制面板,里面有方法需要立即执行,不可用v-if --> |
| | | <ControlPanel v-show="!isAutoControl" /> |
| | | </div> |
| | | </el-dialog> |
| | | </template> |
| | |
| | | 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.vue' |
| | | import { KeyCode } from '@/hooks/controlDrone/useManualControl' |
| | | 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({ |
| | |
| | | default: () => ({}), |
| | | }, |
| | | }) |
| | | let taskDetails = ref({}) |
| | | const currentLiveUrl = ref('') |
| | | const machineNestUrl = ref('') |
| | | |
| | | const droneLiveUrl = ref('') |
| | | provide('taskDetails', taskDetails) |
| | | |
| | | 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 => { |
| | | const getDroneLiveUrl = async droneSn => { |
| | | if (droneLiveUrl.value) return droneLiveUrl.value |
| | | const res = await liveStart(dockSn, '') |
| | | 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) |
| | | } |
| | | } |
| | | |
| | |
| | | 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) { |
| | |
| | | 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> |
| | |
| | | width: 1782px; |
| | | height: 1002px; |
| | | padding: 0; |
| | | |
| | | .el-dialog__body { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .el-dialog__header { |
| | | height: 0; |
| | | overflow: hidden; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | |
| | | |
| | | .realTimeMap { |
| | | position: absolute; |