Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-17 2ddedb48ebcb4952e57aefe2fa0b2ba8094ea4c0

 src/components/CurrentTaskDetails/CurrentTaskDetails.vue

@@ -10,20 +10,20 @@
   >
      <div class="content-container" v-if="isShow">
         <!-- 视频直播 -->
         <div class="video-container">
         <div :class="`${isMaxMap ? 'minBox' : 'maxBox'}`">
            <LiveVideo :videoUrl="currentLiveUrl" :controls="false" />
         </div>
         <!-- 展示地图 -->
         <RealTimeMap class="realTimeMap" />
         <RealTimeMap :class="`${isMaxMap ? 'maxBox' : 'minBox'}`" />
         <TaskDetailsRight v-if="isAutoControl" />
         <template v-else>
            <TaskDetailsHead />
            <TaskDetailsLeft />
         </template>
         <TaskDetailsLeft />


         <!--   控制面板，里面有方法需要立即执行，不可用v-if      -->
         <ControlPanel v-show="!isAutoControl" />
         <img alt="" :src="amplifyImg" class="amplify" @click="amplify" />
      </div>
   </el-dialog>
</template>
@@ -42,6 +42,7 @@
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'

@@ -53,49 +54,44 @@
const isShow = defineModel('show')
const props = defineProps(['id'])
const currentLiveUrl = ref('')
const machineNestUrl = ref('')
const droneLiveUrl = ref('')
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 dockSn = computed(() => taskDetails?.value?.device_sns?.[0])
const droneSn = computed(() => deviceOsdInfo?.value?.data?.sn)
provide('dockSn', dockSn)
provide('droneSn', droneSn)

const isMaxMap = ref(false)
const amplify = () => {
   isMaxMap.value = !isMaxMap.value
}

// 机巢直播
const getDeviceLiveUrl = async () => {
   if (machineNestUrl.value) return machineNestUrl.value
   const res = await liveStart(taskDetails.value.device_sns[0], 2)
   machineNestUrl.value = res.data.data.rtcs_url
   return machineNestUrl.value
}

// 无人机直播
const getDroneLiveUrl = async droneSn => {
   if (droneLiveUrl.value) return droneLiveUrl.value
   const res = await liveStart(droneSn, lineQuality.value)
   droneLiveUrl.value = res.data.data.rtcs_url
   return droneLiveUrl.value
   const res = await liveStart(dockSn.value, 2)
   currentLiveUrl.value = res.data.data.rtcs_url
}

// 无人机直播画质切换
const changeLineQuality = async () => {
   const res = await liveStart(droneSn, lineQuality.value)
   droneLiveUrl.value = res.data.data.rtcs_url
   return droneLiveUrl.value
   const res = await liveStart(droneSn.value, lineQuality.value)
   currentLiveUrl.value = res.data.data.rtcs_url
}

const isTakeOff = ref(false)

// 设置当前直播地址
const setCurrentLiveUrl = async () => {
   const data = deviceOsdInfo.value?.data
   const deviceInfo = data?.host
   const drone = data?.sn
   if ([14, 0].includes(deviceInfo.mode_code)) {
      currentLiveUrl.value = await getDeviceLiveUrl()
   } else {
      currentLiveUrl.value = await getDroneLiveUrl(drone)
   }
   const currentIsTakeOff = ![14, 0].includes(deviceInfo.mode_code)
   // 如果还是之前的状态，不切换
   if (isTakeOff.value === currentIsTakeOff) return
   isTakeOff.value = currentIsTakeOff
   isTakeOff.value ? await changeLineQuality() : await getDeviceLiveUrl()
}

// 获取任务详情获取航线文件
@@ -103,20 +99,20 @@
   if (!props.id) ElMessage.warning('请检查是否传入id')
   getJobDetails({ wayLineJobInfoId: props.id }).then(async res => {
      taskDetails.value = res.data.data
      currentLiveUrl.value = await getDeviceLiveUrl()
      await getDeviceLiveUrl()
      taskDetails.value.workspace_id = taskDetails.value.way_lines[0]?.workspace_id
      createWsConnect()
   })
}

// websocket 的消息
// websocket 的消息回调
const messageHandler = result => {
   let payload = JSON.parse(result) // 为了兼容聊天消息
   let payload = JSON.parse(result)
   switch (payload.biz_code) {
      case EBizCode.DeviceOsd: {
         deviceOsdInfo.value = payload
         // console.log(deviceOsdInfo.value,'osd信息')
         setCurrentLiveUrl()
         console.log(deviceOsdInfo.value, 'device_osd信息')
         break
      }
      default:
@@ -124,26 +120,14 @@
   }
}

let droneWebSocket
// 创建ws连接
let connectWs
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 = {}
   droneWebSocket = useConnectWebSocket(messageHandler, webSocketUrl)
}

onMounted(() => {
@@ -152,8 +136,10 @@
})

onBeforeUnmount(() => {
   droneWebSocket?.close()
   deviceOsdInfo.value = {}
   droneWebSocket = null
   EventBus.off('CurrentTaskDetails-timeStop', changeLineQuality)
   removeEvent()
})
</script>

@@ -201,20 +187,27 @@
   border-radius: 4rem;
   overflow: hidden;

   .video-container {
   .maxBox {
      width: 100%;
      height: 100%;
   }

   .realTimeMap {
   .minBox {
      position: absolute;
      left: -1px;
      bottom: -1px;
      width: 218px;
      height: 217px;
      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>