Merge remote-tracking branch 'origin/master'

罗广辉

2025-04-18 75cdd3cdcec1fc22bddebd6352e5e87e0a8d5d33

 src/views/SignMachineNest/MachineRight/MachineMonitor.vue

@@ -1,81 +1,90 @@
<!--
 * @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>
   <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 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 { useStore } from 'vuex'


const store = useStore();
const store = useStore()
// 单个机巢信息
const singleUavHome = computed(() => store.state.home.singleUavHome);
const singleUavHome = computed(() => store.state.home.singleUavHome)
// 直播地址
let airPortUrl = ref('');
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('');
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,
  }
);
   () => 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 });
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(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: 12px 10px 0;
 }
.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>