| | |
| | | <!-- |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2025-04-19 13:13:15 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2025-04-19 15:07:04 |
| | | * @FilePath: \command-center-dashboard\src\components\CurrentTaskDetails\CurrentTaskDetails.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2025 by shuishen, All Rights Reserved. |
| | | --> |
| | | <!--当前任务详情--> |
| | | <template> |
| | | <el-dialog |
| | |
| | | > |
| | | <div class="content-container" v-if="isShow"> |
| | | <!-- 视频直播 --> |
| | | <div :class="`${isMaxMap ? 'minBox' : 'maxBox'}`"> |
| | | <div :class="`${isMaxMap ? 'minBox' : 'maxBox'} centerPoint`"> |
| | | <LiveVideo :videoUrl="currentLiveUrl" :controls="false" /> |
| | | </div> |
| | | <!-- 展示地图 --> |
| | |
| | | <TaskDetailsHead /> |
| | | <TaskDetailsLeft /> |
| | | </template> |
| | | |
| | | <!-- 控制面板,里面有方法需要立即执行,不可用v-if --> |
| | | <!-- <ControlPanel />--> |
| | | <ControlPanel v-show="!isAutoControl" /> |
| | | <img alt="" :src="amplifyImg" class="amplify" @click="isMaxMap = !isMaxMap" /> |
| | | </div> |
| | |
| | | import { ElMessage } from 'element-plus' |
| | | import EventBus from '@/event-bus' |
| | | import { updateDroneQualityApi } from '@/api/drc' |
| | | import { getLiveAiLinkApi } from '@/api/payload' |
| | | import { getLiveAiLinkApi, getLiveCapacityApi } from '@/api/payload' |
| | | import { CURRENT_CONFIG } from '@/utils/http/config' |
| | | import { useDroneWS } from '@/hooks/useDroneWS' |
| | | import { useTaskDetails } from '@/hooks/useTaskDetails/useTaskDetails' |
| | | |
| | | const isAutoControl = ref(true) //是否自动控制 |
| | | const lineQuality = ref(1) //1流畅,2标清 |
| | | const taskDetailsViewer = ref(null) //地图实例 |
| | | let taskDetails = ref({}) //任务详情 |
| | | const deviceOsdInfo = computed(() => wsInfo.value?.device_osd) |
| | | const dockSn = computed(() => taskDetails?.value?.device_sns?.[0]) |
| | | const droneSn = computed(() => deviceOsdInfo?.value?.data?.sn) |
| | |
| | | const isTakeOff = ref(false) // 是在飞行中 |
| | | const isMaxMap = ref(false) //是大地图 |
| | | const client_id = ref('') //是大地图 |
| | | const workspace_id = ref('') |
| | | |
| | | // 获取机巢直播 |
| | | const getDeviceLiveUrl = async () => { |
| | | const res = await liveStart(dockSn.value, 2) |
| | | currentLiveUrl.value = res.data.data.rtcs_url |
| | | } |
| | | |
| | | //获取相机能力 |
| | | async function getLiveCapacity() { |
| | | const res = await getLiveCapacityApi(workspace_id.value,{ sn: dockSn.value}) |
| | | } |
| | | const useTaskDetailsCallBack = () => { |
| | | console.log(workspace_id.value,66666666) |
| | | getDeviceLiveUrl() |
| | | } |
| | | |
| | | let { taskDetails, workspace_id, getTaskDetails } = useTaskDetails(useTaskDetailsCallBack) |
| | | let { wsInfo, removeWS } = useDroneWS(workspace_id) //ws信息,是一个ref对象 |
| | | |
| | | provide('wsInfo', wsInfo) |
| | | provide('workspace_id', workspace_id) |
| | | provide('deviceOsdInfo', deviceOsdInfo) |
| | | provide('dockOsdInfo', wsInfo?.value?.dock_osd) |
| | | provide('dockSn', dockSn) |
| | |
| | | provide('video_id', video_id) |
| | | provide('client_id', client_id) |
| | | |
| | | let once = true |
| | | watch(deviceOsdInfo,()=>{ |
| | | if (once){ |
| | | // getLiveCapacity() |
| | | once =false |
| | | } |
| | | }) |
| | | |
| | | watch( |
| | | wsInfo, |
| | | () => { |
| | |
| | | }, |
| | | { deep: true } |
| | | ) |
| | | |
| | | // 获取机巢直播 |
| | | const getDeviceLiveUrl = async () => { |
| | | const res = await liveStart(dockSn.value, 2) |
| | | currentLiveUrl.value = res.data.data.rtcs_url |
| | | } |
| | | |
| | | const getAiLiveUrl = async () => { |
| | | const res = await getLiveAiLinkApi({ |
| | |
| | | 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 |
| | | workspace_id.value = taskDetails.value.workspace_id |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getTaskDetails() |
| | | getTaskDetails(props?.id) |
| | | EventBus.on('CurrentTaskDetails-timeStop', changeLineQuality) |
| | | EventBus.on('CurrentTaskDetails-getAiLiveUrl', getAiLiveUrl) |
| | | EventBus.on('CurrentTaskDetails-getDroneLiveUrl', getDroneLiveUrl) |
| | |
| | | border-radius: 4rem; |
| | | overflow: hidden; |
| | | |
| | | .centerPoint { |
| | | &:before { |
| | | content: '+'; |
| | | font-size: 30px; |
| | | color: white; |
| | | position: absolute; |
| | | left: 50%; |
| | | top: 50%; |
| | | transform: translate(-50%, -50%); |
| | | pointer-events: none; |
| | | font-weight: bold; |
| | | text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; /* 四方向描边 */ |
| | | } |
| | | } |
| | | |
| | | .maxBox { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | position: absolute; |
| | | left: 340px; |
| | | bottom: 183px; |
| | | width: 22px; |
| | | height: 22px; |
| | | } |
| | | } |
| | | </style> |