From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/components/CurrentTaskDetails/CurrentTaskDetails.vue | 189 +++++++++++++++++++++++++++--------------------
1 files changed, 109 insertions(+), 80 deletions(-)
diff --git a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue b/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
index 5d11eee..8a39167 100644
--- a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
+++ b/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>
--
Gitblit v1.9.3