dvcp_v2_wxcp_app/library/apps/AppIntelligentSecurity/monitorDetail.vue

<template>
  <section class="monitorDetail">
    <div class="videoBox">
      <SlwVideo :id="id" :style="style"></SlwVideo>
    </div>
  </section>
</template>

<script>
import SlwVideo from './SlwVideo'
export default {
  name: "monitorDetail",
  data() {
    return {
      style: {},
      videoUrl: '',
      monitor: {},
      id: ''
    }
  },

  components: {
    SlwVideo
  },

  mounted() {
    this.$nextTick(() => {
      this.detectOrient()
    })
    document.title = '视频监控'
  },

  methods: {
    getDetail(deviceId) {
      deviceId && this.$http.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
        params: {deviceId}
      }).then(res => {
        if (res?.data) {
          this.videoUrl = res.data
        }
      })
    },

    detectOrient() {
      var width = document.querySelector('.monitorDetail').clientWidth
      var height = document.querySelector('.monitorDetail').clientHeight
      if (width >= height) { // 竖屏
        this.style = {
          width: '100%',
          height: '100%',
          transform: 'rotate(0eg)',
          transformOrigin: `0 0`
        }
      } else {
        this.style = {
          width: height + 'px',
          height: width + 'px',
          transform: 'rotate(90deg)',
          transformOrigin: `${width / 2}px ${width / 2}px`
        }
      }
    }
  },
  onLoad(params) {
    this.id = params.id
    // this.getDetail(params.id)
  }
}
</script>

<style lang="scss" scoped>
.monitorDetail {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;

  .videoBox {
    width: 100vw;
    height: 100vh;

    iframe {

    }
  }
}
</style>