<!--
|
* @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>
|
</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)
|
// 直播地址
|
let airPortUrl = ref('')
|
// 获取直播地址
|
const getVideoUrl = (sn, quality) => {
|
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('')
|
// 监听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
|
}
|
},
|
{
|
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);
|
})
|
</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: 10px 10px;
|
}
|
</style>
|
