【无标题】监控后台视频分屏 2*3 和4*6 使用element组件Layout布局

监控后台视频分屏 2*3  和4*6  使用element组件Layout布局

个人笔记

<div class="home-page-2-middle">
  <!-- 分屏 -->
  <div class="select">
    <el-select v-model="value" placeholder="2*3" @change="changeSize">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
  <el-row :gutter="20" :class="type == 8 ? 'home-stye-1' : 'home-stye-2'">
    <el-col :span="type" v-for="(item, index) in tableData" :key="index">
      <!--   v-if="item.cameraName == '摄像仪4'"-->
      <div class="home-page--content grid-content bg-purple-dark">
        <div class="home-page-2-title">
          <span class="middle-span">场景: {{ item.cameraName }}</span>
        </div>
        <iframe
          :src="baseUrl + item.channelNo + baseSub"
          width="100%"
          allowfullscreen
          allow="autoplay; fullscreen"
          :class="type == 8 ? 'iframe-style-1' : 'iframe-style-2'"
        ></iframe>
      </div>
    </el-col>
  </el-row>
</div>

data(){

return {

type: 8,

// 分屏
options: [
  {
    value: 8,
    label: '2*3'
  },
  {
    value: 4,
    label: '4*6'
  }
],

}
}

//初始化
mounted() {
  this.getVideosList()
},

methods: {

// 视频接口
getVideosList(params) {
  this.tableData = []
  listIndexVideo(params).then((res) => {
    let arr = []
    res.data.forEach((item, index) => {
      if (this.type == 8) {
        if (index < 6) {
          arr.push(item)
        }
      } else {
        // this.tableData.push(item);
        arr.push(item)
      }
      this.tableData = arr.slice(0, 24)
    })
  })
},

// 分屏展示 
changeSize() {
  this.type = this.value
  this.getVideosList(this.type)
},

}

<style

scoped lang="scss"

>

// 分屏
.select {
  position: fixed;
  left: 8%;
  top: 10.99%;
}

// 2*3
.home-stye-1 {
  margin-bottom: 10px;
  .home-page-2-title {
    width: 100%;
    height: 60px;
    background-image: url("../assets/green-icon/title-2.png");
    background-repeat: no-repeat;

    .middle-span {
      font-size: 12px;
      margin-left: 50px;
      line-height: 50px;
    }
  }

  .middle-bg {
    width: 100%;
    height: 340px;
    background-image: url("../assets/green-icon/constent-bg.png");
    background-repeat: no-repeat;

    .middleContent-img {
      width: 90%;
      height: 85%;
      margin: 10px;
      box-sizing: border-box;
    }
  }
}

// 4*6
.home-stye-2 {
  .home-page-2-title {
    width: 100%;
    height: 60px;
    background-image: url("../assets/green-icon/title-2.png");
    background-repeat: no-repeat;

    .middle-span {
      font-size: 12px;
      margin-left: 50px;
      line-height: 50px;
    }
  }

  .middle-bg {
    width: 100%;
    height: 135px;
    background-image: url("../assets/green-icon/constent-bg.png");
    background-repeat: no-repeat;

    .middleContent-img {
      width: 90%;
      height: 85%;
      margin: 10px;
      box-sizing: border-box;
    }
  }
}

</style>