<!--当前任务详情-->
|
<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">
|
<!-- 视频直播 -->
|
<div :class="`${isMaxMap ? 'minBox' : 'maxBox'}`">
|
<LiveVideo :videoUrl="currentLiveUrl" :controls="false" />
|
</div>
|
<!-- 展示地图 -->
|
<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="isMaxMap = !isMaxMap" />
|
</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 '@/components/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 '@/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue'
|
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'
|
import { updateDroneQualityApi } from '@/api/drc'
|
import { getLiveAiLinkApi } from '@/api/payload'
|
import { CURRENT_CONFIG } from '@/utils/http/config'
|
|
const isAutoControl = ref(true)
|
const lineQuality = ref(1) //1流畅，2标清
|
provide('isAutoControl', isAutoControl)
|
provide('lineQuality', lineQuality)
|
|
const taskDetailsViewer = ref(null)
|
provide('taskDetailsViewer', taskDetailsViewer)
|
|
let taskDetails = ref({})
|
provide('taskDetails', taskDetails)
|
const deviceOsdInfo = ref({})
|
provide('deviceOsdInfo', deviceOsdInfo)
|
|
const dockSn = computed(() => taskDetails?.value?.device_sns?.[0])
|
const droneSn = computed(() => deviceOsdInfo?.value?.data?.sn)
|
provide('dockSn', dockSn)
|
provide('droneSn', droneSn)
|
|
const isAiLive = ref(false)
|
provide('isAiLive', isAiLive)
|
|
const isShow = defineModel('show')
|
const props = defineProps(['id'])
|
const currentLiveUrl = ref('')
|
const isTakeOff = ref(false)
|
const isMaxMap = ref(false)
|
let droneWebSocket //WS实例
|
|
const video_id = ref('')
|
provide('video_id', video_id)
|
|
// 获取机巢直播
|
const getDeviceLiveUrl = async () => {
|
const res = await liveStart(dockSn.value, 2)
|
currentLiveUrl.value = res.data.data.rtcs_url
|
}
|
|
const getAiLiveUrl = ()=>{
|
const res = getLiveAiLinkApi({ original_stream_url: `${CURRENT_CONFIG.rtmpURL}${video_id.value}`, video_id:video_id.value })
|
currentLiveUrl.value = res.data.data.rtcs_url
|
isAiLive.value = true
|
}
|
|
// 获取无人机直播url
|
async function getDroneLiveUrl() {
|
const res = await liveStart(droneSn.value, lineQuality.value)
|
currentLiveUrl.value = res.data.data.rtcs_url
|
video_id.value = res.data.data.video_id
|
isAiLive.value = false
|
}
|
|
// 无人机直播画质切换
|
const changeLineQuality = async () => {
|
const res = await updateDroneQualityApi({ video_id: video_id.value, video_quality: lineQuality.value })
|
ElMessage.success('切换画质成功')
|
}
|
|
// 设置当前直播地址
|
const setCurrentLiveUrl = async () => {
|
const data = deviceOsdInfo.value?.data
|
const deviceInfo = data?.host
|
const currentIsTakeOff = ![14, 0].includes(deviceInfo.mode_code)
|
// 如果还是之前的状态，不切换
|
if (isTakeOff.value === currentIsTakeOff) return
|
isTakeOff.value = currentIsTakeOff
|
isTakeOff.value ? await getDroneLiveUrl() : await getDeviceLiveUrl()
|
}
|
|
// 获取任务详情获取航线文件
|
const getTaskDetails = () => {
|
if (!props.id) ElMessage.warning('请检查是否传入id')
|
getJobDetails({ wayLineJobInfoId: props.id }).then(async res => {
|
taskDetails.value = res.data.data
|
await getDeviceLiveUrl()
|
taskDetails.value.workspace_id = taskDetails.value.way_lines[0]?.workspace_id
|
createWsConnect()
|
})
|
}
|
|
const dockOsdInfo = ref({})
|
provide('dockOsdInfo', dockOsdInfo)
|
|
const wsInfo = ref({})
|
provide('wsInfo', wsInfo)
|
// websocket 的消息回调
|
const messageHandler = result => {
|
let payload = JSON.parse(result)
|
wsInfo.value[payload.biz_code] = payload
|
switch (payload.biz_code) {
|
// 无人机
|
case EBizCode.DeviceOsd: {
|
deviceOsdInfo.value = payload
|
setCurrentLiveUrl()
|
console.log(payload, 'DeviceOsd--信息')
|
break
|
}
|
// 遥控器
|
case EBizCode.GatewayOsd: {
|
console.log(payload, 'GatewayOsd--信息')
|
break
|
}
|
// 机巢
|
case EBizCode.DockOsd: {
|
console.log(payload, 'DockOsd--信息')
|
break
|
}
|
// PsdkWidgetValues
|
case EBizCode.PsdkWidgetValues: {
|
console.log(payload, 'PsdkWidgetValues--信息')
|
break
|
}
|
// VideoSurveillance
|
case EBizCode.VideoSurveillance: {
|
console.log(payload, 'VideoSurveillance--信息')
|
break
|
}
|
default:
|
break
|
}
|
}
|
|
// 创建ws连接
|
const createWsConnect = () => {
|
const workspaceId = taskDetails.value.workspace_id
|
if (!workspaceId) return
|
let webSocketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId
|
// 监听ws 消息
|
droneWebSocket = useConnectWebSocket(messageHandler, webSocketUrl)
|
}
|
|
onMounted(() => {
|
getTaskDetails()
|
EventBus.on('CurrentTaskDetails-timeStop', changeLineQuality)
|
EventBus.on('CurrentTaskDetails-getAiLiveUrl', getAiLiveUrl)
|
EventBus.on('CurrentTaskDetails-getDroneLiveUrl', getDroneLiveUrl)
|
})
|
|
onBeforeUnmount(() => {
|
droneWebSocket?.close()
|
deviceOsdInfo.value = {}
|
droneWebSocket = null
|
EventBus.off('CurrentTaskDetails-timeStop', changeLineQuality)
|
EventBus.off('CurrentTaskDetails-getAiLiveUrl', getAiLiveUrl)
|
EventBus.off('CurrentTaskDetails-getDroneLiveUrl', getDroneLiveUrl)
|
})
|
</script>
|
|
<style lang="scss">
|
.current-task-details {
|
display: flex;
|
justify-content: space-between;
|
|
.el-dialog {
|
border-radius: 40px;
|
position: relative;
|
margin-top: 25px;
|
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: -30px;
|
top: -30px;
|
|
.el-dialog__close {
|
font-size: 30px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.content-container {
|
height: 100%;
|
width: 100%;
|
border-radius: 4rem;
|
overflow: hidden;
|
|
.maxBox {
|
width: 100%;
|
height: 100%;
|
}
|
|
.minBox {
|
position: absolute;
|
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>
|
