fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 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,7 +30,6 @@
            <TaskDetailsHead />
            <TaskDetailsLeft />
         </template>

         <!--   控制面板，里面有方法需要立即执行，不可用v-if      -->
         <ControlPanel v-show="!isAutoControl" />
         <img alt="" :src="amplifyImg" class="amplify" @click="isMaxMap = !isMaxMap" />
@@ -32,12 +41,7 @@
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'
@@ -46,117 +50,125 @@
import { ElMessage } from 'element-plus'
import EventBus from '@/event-bus'
import { updateDroneQualityApi } from '@/api/drc'
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 isAutoControl = ref(true) //是否自动控制
const lineQuality = ref(1) //1流畅，2标清
provide('isAutoControl', isAutoControl)
provide('lineQuality', lineQuality)
const taskDetailsViewer = ref(null) //地图实例
const dockSn = computed(() => taskDetails?.value?.device_sns?.[0]) //机巢sn
const droneSn = computed(() => wsInfo.value?.device_osd?.data?.sn) //无人机sn
const trueAltitude = ref('') // 真实高度
const isAiLive = ref(false) // 是ai直播
const video_id = ref('') // 直播视频id
const isShow = defineModel('show') // 是否显示当前任务详情
const props = defineProps(['id'])
const currentLiveUrl = ref('') // 当前直播地址
const isTakeOff = ref(false) // 是在飞行中
const isMaxMap = ref(false) //是大地图
const client_id = ref('') //mqtt id
const hasIr = ref(false) //有红外能力
let once = true //第一次触发
const isBackDock = ref(false)
let { taskDetails, workspace_id, getTaskDetails:initTaskDetails } = useTaskDetails(()=> getDeviceLiveUrl())
let { wsInfo } = useDroneWS(workspace_id) //ws信息，是一个ref对象

const taskDetailsViewer = ref(null)
provide('taskDetailsViewer', taskDetailsViewer)

let taskDetails = ref({})
const deviceOsdInfo = ref({})
provide('taskDetails', taskDetails)
provide('deviceOsdInfo', deviceOsdInfo)

const dockSn = computed(() => taskDetails?.value?.device_sns?.[0])
const droneSn = computed(() => deviceOsdInfo?.value?.data?.sn)
provide('wsInfo', wsInfo)
provide('isBackDock', isBackDock)
provide('workspace_id', workspace_id)
provide('dockOsdInfo', wsInfo?.value?.dock_osd)
provide('dockSn', dockSn)
provide('droneSn', droneSn)
provide('isAutoControl', isAutoControl)
provide('lineQuality', lineQuality)
provide('taskDetailsViewer', taskDetailsViewer)
provide('taskDetails', taskDetails)
provide('trueAltitude', trueAltitude)
provide('isAiLive', isAiLive)
provide('video_id', video_id)
provide('client_id', client_id)
provide('hasIr', hasIr)

const isShow = defineModel('show')
const props = defineProps(['id'])
const currentLiveUrl = ref('')
const isTakeOff = ref(false)
const isMaxMap = ref(false)
let droneWebSocket //WS实例

// 机巢直播
// 获取机巢直播
const getDeviceLiveUrl = async () => {
   const res = await liveStart(dockSn.value, 2)
   currentLiveUrl.value = res.data.data.rtcs_url
}

const video_id = ref('')
//获取是否有红外功能
async function getLiveCapacity() {
   if (!once) return
   once = false
   const res = await getLiveCapacityApi({ sn: droneSn.value })
   res?.data?.data?.forEach(item => {
      item?.cameras_list?.forEach(item1 => {
         item1?.videos_list?.forEach(item2 => {
            item2?.switch_video_types?.forEach(item3 => {
               if (item3 === 'ir') {
                  hasIr.value = true
               }
            })
         })
      })
   })
}

// set Ai直播
const getAiLiveUrl = async () => {
   const res = await getLiveAiLinkApi({
      original_stream_url: `${CURRENT_CONFIG.rtmpURL}${video_id.value.replace(/\//g, '-')}`,
      video_id: video_id.value,
   })
   currentLiveUrl.value = res.data.data.rtcs_url
   ElMessage.success('开启成功')
   isAiLive.value = true
}

// 获取无人机直播url
async function getDroneLiveUrl() {
async function getDroneLiveUrl(reset = false) {
   currentLiveUrl.value = ''
   await nextTick()
   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
   reset && ElMessage.success('刷新成功')
}

// 无人机直播画质切换
const changeLineQuality = async () => {
   const res = await updateDroneQualityApi({ video_id: video_id.value, video_quality: lineQuality.value })
   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)
   const deviceInfo = wsInfo.value?.device_osd?.data?.host
   if (!deviceInfo) return
   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()
   })
}

// websocket 的消息回调
const messageHandler = result => {
   let payload = JSON.parse(result)
   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, 'GatewayOsd--信息')
         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)
}
watch(() => wsInfo.value?.device_osd, getLiveCapacity)
watch(wsInfo, setCurrentLiveUrl, { deep: true })

onMounted(() => {
   getTaskDetails()
   const params = {wayLineJobInfoId:props.id}
   initTaskDetails(params)
   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>

@@ -204,6 +216,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%;
@@ -225,6 +252,8 @@
      position: absolute;
      left: 340px;
      bottom: 183px;
      width: 22px;
      height: 22px;
   }
}
</style>