fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/views/SignMachineNest/MachineRight/MachineMonitor.vue

@@ -1,52 +1,96 @@
<!-- 机巢监控 -->
<!-- 直播监控 -->
<template>
  <CommonTitle title="机巢监控" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="machine-monitor">
      <LiveVideo :videoUrl="airPortUrl" />
    </div>
  </div>
   <CommonTitle title="直播监控" />
   <div :style="{ marginLeft: pxToRem(14) }">
      <div class="machine-monitor">
         <div v-if="singleUavHome.status === 'OFFLINE'" class="off-line">
            <span>当前设备已关机，无法进行直播</span>
         </div>
         <LiveVideo v-else :videoUrl="airPortUrl" />
      </div>
   </div>
</template>

<script setup>
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';
import CommonTitle from '@/components/CommonTitle.vue'
import LiveVideo from '@/components/LiveVideo.vue'
import { liveStart } from '@/api/home/machineNest'
import { useStore } from 'vuex'


const store = useStore();
const store = useStore()
// 单个机巢信息
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 = () => {
  liveStart(singleUavHome.value.device_sn).then(res => {
    if (res.data.code !== 0) return;
    airPortUrl.value = res.data.data.rtcs_url;
  });
};
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
   })
}

// 获取无人机直播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(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,
   }
)

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

<style lang="scss" scoped>
  .machine-monitor {
    width: 390px;
    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;
 }
</style>
.machine-monitor {
   width: 390px;
   height: 228px;
   background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
   opacity: 0.85;
   display: flex;
   justify-content: space-between;
   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>