<!--当前任务详情-->
|
<template>
|
<el-dialog
|
modal-class="current-task-details"
|
v-model="isShow"
|
title="当前任务详情"
|
:width="pxToRem(1500)"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
>
|
<div class="content-container" v-if="isShow">
|
<TaskDetailsHead/>
|
<TaskDetailsLeft/>
|
<!-- 视频直播 -->
|
<div class="video-container">
|
<LiveVideo :videoUrl="currentLiveUrl" />
|
</div>
|
<!-- 展示地图 -->
|
<RealTimeMap class="realTimeMap" />
|
<ControlPanel />
|
<!-- <ControlPanel v-if="deviceOsdInfo?.data?.sn" />-->
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { pxToRem } from '@/utils/rem'
|
import LiveVideo from '@/components/LiveVideo.vue'
|
import { liveStart } from '@/api/home/machineNest'
|
import { getJobDetails } from '@/api/home/task'
|
|
import RealTimeMap from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/RealTimeMap.vue'
|
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 TaskDetailsHead from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsHead.vue'
|
import TaskDetailsLeft from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue'
|
|
const isShow = defineModel('show')
|
const props = defineProps({
|
rowData: {
|
// 任务列表row数据
|
type: Object,
|
default: () => ({}),
|
},
|
})
|
let taskDetails = ref({})
|
const currentLiveUrl = ref('')
|
const machineNestUrl = ref('')
|
|
const droneLiveUrl = ref('')
|
provide('taskDetails', taskDetails)
|
|
const deviceOsdInfo = ref({})
|
provide('deviceOsdInfo', deviceOsdInfo)
|
|
// 机巢直播
|
const getDeviceLiveUrl = async () => {
|
if (machineNestUrl.value) return machineNestUrl.value
|
const res = await liveStart(taskDetails.value.device_sns[0], '')
|
machineNestUrl.value = res.data.data.rtcs_url
|
return machineNestUrl.value
|
}
|
|
// 无人机直播
|
const getDockLiveUrl = async dockSn => {
|
if (droneLiveUrl.value) return droneLiveUrl.value
|
const res = await liveStart(dockSn, '')
|
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
|
if ([14, 0].includes(deviceInfo.mode_code)) {
|
currentLiveUrl.value = await getDeviceLiveUrl()
|
} else {
|
currentLiveUrl.value = await getDockLiveUrl(dockSn)
|
}
|
}
|
|
// 获取任务详情获取航线文件
|
const getTaskDetails = () => {
|
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)
|
})
|
}
|
|
const messageHandler = result => {
|
let payload = JSON.parse(result) // 为了兼容聊天消息
|
switch (payload.biz_code) {
|
case EBizCode.DeviceOsd: {
|
deviceOsdInfo.value = payload
|
// console.log(deviceOsdInfo.value,'osd信息')
|
setCurrentLiveUrl()
|
break
|
}
|
default:
|
break
|
}
|
}
|
let connectWs
|
const createWsConnect = workspaceId => {
|
let webSocketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId
|
// 监听ws 消息
|
connectWs = useConnectWebSocket(messageHandler, webSocketUrl)
|
}
|
|
const removeEvent = () => {
|
connectWs?.close()
|
deviceOsdInfo.value = {}
|
}
|
|
// 监听 rowData 变化
|
watch(isShow, newVal => {
|
if (newVal) {
|
getTaskDetails()
|
} else {
|
removeEvent()
|
}
|
})
|
|
onBeforeUnmount(() => {
|
removeEvent()
|
})
|
</script>
|
|
<style lang="scss">
|
.current-task-details {
|
display: flex;
|
justify-content: space-between;
|
|
.el-dialog {
|
border-radius: 40px;
|
position: relative;
|
margin-top: 38px;
|
width: 1782px;
|
height: 1002px;
|
padding: 0;
|
.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>
|
