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/views/SignMachineNest/MachineRight/MachineMonitor.vue | 124 ++++++++++++++++++++++++++++-------------
1 files changed, 84 insertions(+), 40 deletions(-)
diff --git a/src/views/SignMachineNest/MachineRight/MachineMonitor.vue b/src/views/SignMachineNest/MachineRight/MachineMonitor.vue
index 5c8d29e..835382e 100644
--- a/src/views/SignMachineNest/MachineRight/MachineMonitor.vue
+++ b/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>
\ No newline at end of file
+.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>
--
Gitblit v1.9.3