v3-school-level-big-data-web/src/views/emergencyManagement/pageComponent/videoListComponent.vue

<template>
  <div class="videoListComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="max-big-for-box">
      <H5PlayerVideo style="margin:20px 0 0;"
                     v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
      <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
    </div>
    <div class="pagination-max-box">
      <p class="null-pagination-p"></p>
      <pagination v-show="videoTotal>0"
                  :total="videoTotal"
                  layout="prev, pager, next"
                  :page.sync="videoQueryParams.page"
                  :limit.sync="videoQueryParams.pageSize"
                  @pagination="videoInitialize"
      />
      <p class="null-pagination-p"></p>
    </div>
  </div>
</template>
<script>
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  import { iotCameraFindByCondition } from "@/api/index";
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  export default {
    name: 'videoListComponent',
    components: {
      titlePageImgComponents,
      H5PlayerVideo
    },
    data () {
      return {
        propsData:{
          title:'视频监控',
        },
        width:435,
        height:245,
        videoType:false,
        //视频数据
        videoQueryParams:{
          page:1,
          pageSize:4,
        },
        videoTotal:0,
        videoList:[],
        floorId:null,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //查询实验室摄像头
      initialize(item){
        this.$set(this,'floorId',item.floorId);
        this.$set(this.videoQueryParams,'page',1);
        this.$nextTick(()=>{
          this.videoInitialize();
        })
      },
      videoInitialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:this.videoQueryParams.page,
          pageSize:this.videoQueryParams.pageSize,
          buildId:'',
          floorId:this.floorId,
          passageway:'',
          subIds:[],
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
        };
        iotCameraFindByCondition(obj).then(response => {
          let list = [];
          for(let i=0;i<response.data.records.length;i++){
            list.push(
              {
                width: this.width, //(宽度:非必传-默认600)
                height: this.height, //(高度:非必传-默认338)
                url: response.data.records[i].streamUrl,
              }
            )
          }
          this.$set(this,'videoList',list)
          this.$set(this,'videoTotal',response.data.total);
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'videoType', true);
            },1000);
          })
        });
      },
    },
  }
</script>
<style scoped lang="scss">
  .videoListComponent{
    height: 1330px;
    width: 476px;
    .max-big-for-box{
      height: 1180px;
      width: 476px;
      padding:0 20px;
      /*overflow-y: scroll;*/
      overflow: hidden;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      .null-img{
        display: block;
        width:200px;
        margin:270px auto;
      }
    }
    .pagination-max-box{
      display: flex;
      .null-pagination-p{
        flex:1;
      }
    }
    .max-big-for-box::-webkit-scrollbar {
      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .max-big-for-box::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #07B4C7;
      background: #07B4C7;
    }
    .max-big-for-box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px #013138;
      border-radius: 0;
      background: #013138;
    }
  }
</style>