修复多屏播放时播放器样式错位

xiaoxie

2022-04-28 35b3d7618dfd86c63f20d62d606d3d84dcac094a

 web_src/src/components/live.vue

@@ -15,8 +15,7 @@
          <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;">
            <div v-for="i in spilt" :key="i" class="play-box"
                 :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
                 @click="playerIdx = (i-1)"
            >
                 @click="playerIdx = (i-1)">
              <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
              <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
            </div>
@@ -39,30 +38,15 @@
  },
  data() {
    return {
      showVideoDialog: true,
      hasAudio: false,
      videoUrl: [''],
      spilt: 1,//分屏
      playerIdx: 0,//激活播放器

      deviceList: [], //设备列表
      currentDevice: {}, //当前操作设备对象

      videoComponentList: [],
      updateLooper: 0, //数据刷新轮训标志
      currentDeviceChannelsLenth: 0,
      winHeight: window.innerHeight - 200,
      currentPage: 1,
      count: 15,
      total: 0,
      getDeviceListLoading: false,

      //channel
      searchSrt: "",
      channelType: "",
      online: "",
      channelTotal: 0,
      deviceChannelList: [],
      loading: false
    };
  },
@@ -75,12 +59,13 @@

  computed: {
    liveStyle() {
      if (this.spilt == 1) {
        return {width: '100%', height: '100%'}
      } else if (this.spilt == 4) {
        return {width: '49%', height: '49%'}
      } else if (this.spilt == 9) {
        return {width: '32%', height: '32%'}
      switch (this.spilt) {
        case 4:
          return {width: '49%', height: '49%'}
        case 9:
          return {width: '32%', height: '32%'}
        default:
          return {width: '100%', height: '100%'}
      }
    }
  },
@@ -167,13 +152,6 @@
        this.sendDevicePush({deviceId, channelId})
      }
    },
    convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
    shot(e) {
      // console.log(e)
      // send({code:'image',data:e})
@@ -211,17 +189,6 @@
      console.log(data);
      window.localStorage.setItem('playData', JSON.stringify(data))
    },
    loadAndPlay() {
      let dataStr = window.localStorage.getItem('playData') || '[]'
      let data = JSON.parse(dataStr);

      data.forEach((item, i) => {
        if (item) {
          this.playerIdx = i
          this.sendDevicePush(item)
        }
      })
    }
  }
};
</script>