实时监控固定视频宽高比,右侧卡片高跟随视频高度变化

hanbaoshan

2020-08-20 fcc5b3bd1bfd1f51b8dbebea2898095c2f2632b8

实时监控固定视频宽高比,右侧卡片高跟随视频高度变化

 src/pages/cameraVideo/index/App.vue

@@ -56,8 +56,8 @@
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  
  overflow-x: auto;
  overflow-y: hidden;
}
.resize-save {
  position: absolute;

 src/pages/cameraVideo/index/Video.vue

@@ -1,6 +1,7 @@
<template>
  <div style="width:100%; height: 100%;">
    <div class="monitoring-right" ref="videoRight">
      <div class="main-top">
      <div class="monitoring-video" ref="monitorVideo">
        <div class="monitoring-video-guid">
          <span
@@ -27,9 +28,9 @@
            ></span>
          </el-tooltip>
        </div>
          <div class="fixedRatioBox">
        <div
          :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'"
          style="width: 100%; height: calc(100% - 35px);"
          v-if="visibilityState"
        >
          <video-item
@@ -46,8 +47,10 @@
          ></video-item>
        </div>
      </div>
        </div>
      <div class="monitoring-task" ref="monitorTask">
        <video-task ref="taskview" @addToBase="toAdd"></video-task>
        </div>
      </div>
      <div class="monitoring-photo">
        <video-photo ref="photoview" @addToBase="toAdd"></video-photo>
@@ -163,8 +166,9 @@
  mounted() {
    document.addEventListener("visibilitychange", this.visibilitychange, false);
    this.$nextTick(() => {
      window.addEventListener("resize", this.getRightWidth);
      this.getRightWidth();
      window.addEventListener("resize", this.resizeMonitorTask);
      //this.getRightWidth();
      this.resizeMonitorTask();
    })
    this.getCenter();
    this.blackAngWhite();
@@ -422,6 +426,14 @@
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    getVideoHeight(){
      let h = this.$refs.monitorVideo.offsetHeight;
      this.$refs.monitorTask.style.height = h+'px';
    },
    resizeMonitorTask(){
      this.getRightWidth();
      this.getVideoHeight();
    },
    getRightWidth() {
      let w = this.$refs.videoRight.offsetWidth;
      // console.log("w是：", w,this.$refs.monitorVideo.offsetWidth);
@@ -560,12 +572,17 @@
  box-sizing: border-box;
  padding: 10px;
  background-color: #e9ebf2;
  .main-top{
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }
  .monitoring-video {
    width: 70.5%;
    min-width: 740px;
    max-width: 1208px;
    height: 71%;
    float: left;
    height: 98%;
    //float: left;
    box-sizing: border-box;
    // box-shadow: #e4e7ed 0px 0px 9px inset;
    border-radius: 5px;
@@ -605,15 +622,22 @@
        cursor: pointer;
      }
    }
    .fixedRatioBox{
      padding-top: 56.3%;
      box-sizing: border-box;
      position: relative;
      >div{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }
    }
  }
  .monitoring-task {
    // @media screen and (max-width: 1700px){

    // }
    //width: calc(29.5% - 10px);
    width: calc(34% - 10px);
    //width: auto;
    height: 70.5%;
    background-color: #fff;
    float: left;
    margin: 0px 0px 0px 10px;