fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/views/SignMachineNest/MachineRight/MachineMonitor.vue

@@ -1,19 +1,12 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2025-04-15 17:19:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-04-17 21:16:50
 * @FilePath: \command-center-dashboard\src\views\SignMachineNest\MachineRight\MachineMonitor.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by shuishen, All Rights Reserved. 
-->
<!-- 机巢监控 -->
<!-- 直播监控 -->
<template>
   <CommonTitle title="直播监控" />
   <div :style="{ marginLeft: pxToRem(14) }">
      <div class="machine-monitor">
         <LiveVideo :videoUrl="airPortUrl" />
         <div v-if="singleUavHome.status === 'OFFLINE'" class="off-line">
            <span>当前设备已关机，无法进行直播</span>
         </div>
         <LiveVideo v-else :videoUrl="airPortUrl" />
      </div>
   </div>
</template>
@@ -22,57 +15,57 @@
import CommonTitle from '@/components/CommonTitle.vue'
import LiveVideo from '@/components/LiveVideo.vue'
import { liveStart } from '@/api/home/machineNest'
// import { CURRENT_CONFIG as config } from '@/utils/http/config'
import { useStore } from 'vuex'

const store = useStore()
// 单个机巢信息
const singleUavHome = computed(() => store.state.home.singleUavHome)
const singleUavHome = computed(() => store.state.home.singleUavHome);
const wsInfo = inject('wsInfo')
let device_osd_info = computed(() => wsInfo.value?.device_osd || {});
let device_osd_host = computed(() => device_osd_info?.value?.data?.host || {});

const dockSn = inject('dockSn')
const droneSn = inject('droneSn')
// 直播地址
let airPortUrl = ref('')
// 获取直播地址
// 获取机巢直播地址
const getVideoUrl = (sn, quality) => {
   if (singleUavHome.value.status === 'OFFLINE') return;
   liveStart(sn, quality).then(res => {
      if (res.data.code !== 0) return
      airPortUrl.value = res.data.data.rtcs_url
   })
}
let isCurrentSn = ref(false)
let CurrentSn = ref('')

// 获取无人机直播url
async function getDroneLiveUrl(sn, quality) {
   airPortUrl.value = ''
   await nextTick()
   const res = await liveStart(sn, quality)
   airPortUrl.value = res.data.data.rtcs_url
}

const isTakeOff = ref(false)
// 监听ws消息
watch(
   () => store.state.home.deviceState.deviceInfo,
   newValue => {
      CurrentSn.value = Object.keys(newValue)[0]
      const currentDevice = newValue[CurrentSn.value]
      if (currentDevice && currentDevice?.mode_code > 0) {
         isCurrentSn.value = true
      } else if (currentDevice && currentDevice?.mode_code === 14) {
         isCurrentSn.value = false
      } else {
         isCurrentSn.value = false
      }
watch(device_osd_host, async () => {
      if (device_osd_host?.value?.mode_code === undefined) return
     const currentIsTakeOff = ![14, 0].includes(device_osd_host.value?.mode_code)
      // 如果还是之前的状态，不切换
      if (isTakeOff.value === currentIsTakeOff) return
      isTakeOff.value = currentIsTakeOff
      isTakeOff.value ? await getDroneLiveUrl(droneSn.value, 2) : await getVideoUrl(dockSn.value, 1)
   },
   {
      immediate: true,
      deep: true,
   }
)
// 监听 isCurrentSn
watch(
   isCurrentSn,
   newVal => {
      if (newVal) {
         getVideoUrl(CurrentSn.value, 2)
      } else {
         getVideoUrl(singleUavHome.value.device_sn, 1)
      }
   },
   { immediate: true, deep: true }
)

onMounted(() => {
   // getVideoUrl(singleUavHome.value.device_sn,1);
   getVideoUrl(dockSn.value, 2)
})
onUnmounted(() => {
   airPortUrl.value = ''
})
</script>

@@ -82,9 +75,22 @@
   height: 228px;
   background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
   opacity: 0.85;
   margin: 2px 0 13 0;
   display: flex;
   justify-content: space-between;
   padding: 12px 10px 0;
   padding: 10px 10px;
   .off-line {
      position: relative;
      width: 100%;
      height: 100%;
      background: url(@/assets/images/offLine.png) no-repeat center / 100% 100%;
      color: #EDEDED;
      font-size: 16px;
      span {
         position: absolute;
         text-align: center;
         bottom: 20px;
         left: 20%;
      }
   }
}
</style>