forked from drone/command-center-dashboard

chenyao
2025-04-19 bdbc09270be8590d9b5a4837501074dfc338d34b
src/components/CurrentTaskDetails/CurrentTaskDetails.vue
@@ -1,3 +1,13 @@
<!--
 * @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
@@ -10,7 +20,7 @@
   >
      <div class="content-container" v-if="isShow">
         <!-- 视频直播 -->
         <div :class="`${isMaxMap ? 'minBox' : 'maxBox'}`">
         <div :class="`${isMaxMap ? 'minBox' : 'maxBox'} centerPoint`">
            <LiveVideo :videoUrl="currentLiveUrl" :controls="false" />
         </div>
         <!-- 展示地图 -->
@@ -20,9 +30,7 @@
            <TaskDetailsHead />
            <TaskDetailsLeft />
         </template>
         <!--   控制面板,里面有方法需要立即执行,不可用v-if      -->
         <!--         <ControlPanel />-->
         <ControlPanel v-show="!isAutoControl" />
         <img alt="" :src="amplifyImg" class="amplify" @click="isMaxMap = !isMaxMap" />
      </div>
@@ -44,14 +52,14 @@
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)
@@ -64,9 +72,27 @@
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)
@@ -80,6 +106,14 @@
provide('video_id', video_id)
provide('client_id', client_id)
let once = true
watch(deviceOsdInfo,()=>{
   if (once){
      // getLiveCapacity()
      once =false
   }
})
watch(
   wsInfo,
   () => {
@@ -88,12 +122,6 @@
   },
   { 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({
@@ -132,19 +160,9 @@
   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)
@@ -201,6 +219,21 @@
   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%;
@@ -222,6 +255,8 @@
      position: absolute;
      left: 340px;
      bottom: 183px;
      width: 22px;
      height: 22px;
   }
}
</style>