forked from drone/command-center-dashboard

shuishen
2025-04-16 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf
src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/CurrentTaskDetails.vue
@@ -9,16 +9,21 @@
      :destroy-on-close="true"
   >
      <div class="content-container" v-if="isShow">
         <TaskDetailsHead/>
         <TaskDetailsLeft/>
         <!-- 视频直播 -->
         <div class="video-container">
            <LiveVideo :videoUrl="currentLiveUrl" />
            <LiveVideo :videoUrl="currentLiveUrl" :controls="false" />
         </div>
         <!-- 展示地图 -->
         <RealTimeMap class="realTimeMap" />
         <ControlPanel />
<!--         <ControlPanel v-if="deviceOsdInfo?.data?.sn" />-->
         <TaskDetailsRight v-if="isAutoControl" />
         <template v-else>
            <TaskDetailsHead />
         </template>
         <TaskDetailsLeft />
         <!--   控制面板,里面有方法需要立即执行,不可用v-if      -->
         <ControlPanel v-show="!isAutoControl" />
      </div>
   </el-dialog>
</template>
@@ -33,10 +38,17 @@
import { getWebsocketUrl } from '@/websocket/util/config'
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
import { EBizCode } from '@/utils/staticData/enums'
import ControlPanel from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel.vue'
import { KeyCode } from '@/hooks/controlDrone/useManualControl'
import ControlPanel from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/ControlPanel.vue'
import TaskDetailsHead from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsHead.vue'
import TaskDetailsLeft from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsLeft.vue'
import TaskDetailsRight from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/TaskDetailsRight.vue'
import { ElMessage } from 'element-plus'
import EventBus from '@/event-bus'
const isAutoControl = ref(true)
const lineQuality = ref(1) //1流畅,2标清
provide('isAutoControl', isAutoControl)
provide('lineQuality', lineQuality)
const isShow = defineModel('show')
const props = defineProps({
@@ -46,28 +58,36 @@
      default: () => ({}),
   },
})
let taskDetails = ref({})
const currentLiveUrl = ref('')
const machineNestUrl = ref('')
const droneLiveUrl = ref('')
provide('taskDetails', taskDetails)
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 getDeviceLiveUrl = async () => {
   if (machineNestUrl.value) return machineNestUrl.value
   const res = await liveStart(taskDetails.value.device_sns[0], '')
   const res = await liveStart(taskDetails.value.device_sns[0], 2)
   machineNestUrl.value = res.data.data.rtcs_url
   return machineNestUrl.value
}
// 无人机直播
const getDockLiveUrl = async dockSn => {
const getDroneLiveUrl = async droneSn => {
   if (droneLiveUrl.value) return droneLiveUrl.value
   const res = await liveStart(dockSn, '')
   const res = await liveStart(droneSn, lineQuality.value)
   droneLiveUrl.value = res.data.data.rtcs_url
   return droneLiveUrl.value
}
// 无人机直播画质切换
const changeLineQuality = async () => {
   const res = await liveStart(droneSn, lineQuality.value)
   droneLiveUrl.value = res.data.data.rtcs_url
   return droneLiveUrl.value
}
@@ -76,11 +96,11 @@
const setCurrentLiveUrl = async () => {
   const data = deviceOsdInfo.value?.data
   const deviceInfo = data?.host
   const dockSn = data?.sn
   const drone = data?.sn
   if ([14, 0].includes(deviceInfo.mode_code)) {
      currentLiveUrl.value = await getDeviceLiveUrl()
   } else {
      currentLiveUrl.value = await getDockLiveUrl(dockSn)
      currentLiveUrl.value = await getDroneLiveUrl(drone)
   }
}
@@ -89,10 +109,12 @@
   getJobDetails({ wayLineJobInfoId: props.rowData.id }).then(async res => {
      taskDetails.value = res.data.data
      currentLiveUrl.value = await getDeviceLiveUrl()
      createWsConnect(taskDetails.value.way_lines[0].workspace_id)
      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) {
@@ -106,28 +128,36 @@
         break
   }
}
// 创建ws连接
let connectWs
const createWsConnect = workspaceId => {
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 = {}
}
// 监听 rowData 变化
watch(isShow, newVal => {
   if (newVal) {
      getTaskDetails()
   } else {
      removeEvent()
   }
onMounted(() => {
   getTaskDetails()
   EventBus.on('CurrentTaskDetails-timeStop', changeLineQuality)
})
onBeforeUnmount(() => {
   EventBus.off('CurrentTaskDetails-timeStop', changeLineQuality)
   removeEvent()
})
</script>
@@ -144,10 +174,12 @@
      width: 1782px;
      height: 1002px;
      padding: 0;
      .el-dialog__body {
         width: 100%;
         height: 100%;
      }
      .el-dialog__header {
         height: 0;
         overflow: hidden;
@@ -178,8 +210,6 @@
      width: 100%;
      height: 100%;
   }
   .realTimeMap {
      position: absolute;