feat:视频播放重复调用处理

shuishen

2025-04-17 6cf66e68f32d26b2b2a3ab3ac46fb99df5420d3a

feat:视频播放重复调用处理

 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: 12px 10px 0;
}
</style>