<!-- 直播监控 -->
|
<template>
|
<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'
|
|
const store = useStore()
|
// 单个机巢信息
|
const singleUavHome = computed(() => store.state.home.singleUavHome);
|
const osdVisible = computed(() => store.state.home.osdVisible);
|
// 直播地址
|
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(() => store.state.home.deviceState, async (newValue) => {
|
console.log(osdVisible.value.sn,'333333')
|
const deviceInfo = newValue?.deviceInfo[osdVisible.value.sn]
|
if (!deviceInfo) return
|
|
const currentIsTakeOff = ![14, 0].includes(deviceInfo?.mode_code)
|
console.log(isTakeOff.value, currentIsTakeOff,'8888')
|
// 如果还是之前的状态，不切换
|
if (isTakeOff.value === currentIsTakeOff) return
|
isTakeOff.value = currentIsTakeOff
|
isTakeOff.value ? await getDroneLiveUrl(osdVisible.value.sn, 2) : await getVideoUrl(singleUavHome.value.device_sn, 1)
|
},
|
{
|
immediate: true,
|
deep: true,
|
}
|
)
|
|
onMounted(() => {
|
getVideoUrl(singleUavHome.value.device_sn, 1)
|
})
|
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;
|
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>
|
