v3-school-level-big-data-web/src/views/videoSurveillance/pageComponent/videoComponent.vue

<template>
  <div class="videoComponent">
    <div class="top-num-max-box">
      <div class="for-address-box" v-for="(item,index) in addressList" :key="index">
        <p class="el-icon-d-arrow-right icon-p" v-if="index != 0"></p>
        <p class="name-p">{{item}}</p>
      </div>
      <img class="num-img" src="@/assets/ZDimages/icon_bg_rs@1x.png">
      <p class="name-p">实时人数</p>
      <div class="for-p" v-for="(item,index) in floorUserNum" :key="item.value">
        <p>{{item.label}}</p>
      </div>
      <p class="name-p" style="margin-left:10px;">人</p>
    </div>
    <div class="video-max-big-box">
      <H5PlayerVideo style="margin:10px 0 0 18px;"
                     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>
    <pagination v-show="videoTotal>0"
                :total="videoTotal"
                layout="total,sizes, prev, pager, next"
                :page.sync="videoQueryParams.page"
                :limit.sync="videoQueryParams.pageSize"
                @pagination="videoInitialize"
    />
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>
<script>
  import { iotCameraLargeFindByCondition } from "@/api/index";
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
  export default {
    name: 'videoComponent',
    components: {
      H5PlayerVideo,
      fullH5PlayerVideo
    },
    data () {
      return {
        //地址
        addressList:[],
        //人数
        floorUserNum:null,
        //视频
        // width:685,
        width:1027,
        // height:350,
        height:525,
        videoType:false,
        videoList:[],
        videoTotal:0,
        videoQueryParams:{
          page:1,
          pageSize:4,
          streamType:1,
          source:0,
        },
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //刷新地址
      getAddress(list){
        this.$set(this,'addressList',list);
      },
      //刷新人数
      getUserNum(num){
        if(num == 0){
          this.$set(this,'floorUserNum',[{
            value:'a0',
            label:'0',
          }]);
        }else{
          let list = [];
          let newNum = num;
          newNum = newNum+'';
          for(let i=0;i<newNum.length;i++){
            list.push({
              value:'a'+i,
              label:newNum[i]+'',
            })
          }
          this.$set(this,'floorUserNum',list);
        }
      },
      //刷新视屏
      getVideoData(data){
        console.log('data',data)
        let obj = {
          page:1,
          pageSize:4,
          passageway:'',
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
          streamType:1,
          source:0,
          subIds:data,
        };
        // if(data.level == 4){
        //   obj.buildId = data.treeId;
        // }else if(data.level == 5){
        //   obj.floorId = data.treeId;
        // }else if(!data.subId&&!data.level){
        //   obj.floorId = data.treeId;
        // }else if(data.subId&&!data.level){
        //   obj.subIds = [data.treeId];
        // }
        this.$set(this,'videoQueryParams',obj);
        this.$nextTick(()=>{
          this.videoInitialize()
        })
      },
      videoInitialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        iotCameraLargeFindByCondition(this.videoQueryParams).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,
                cameraIndexCode: response.data.records[i].deviceNo,
              }
            )
          }
          this.$set(this,'videoList',list)
          this.$set(this,'videoTotal',response.data.total);
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'videoType', true);
            },1000);
          })
        });
      },
      //全屏开启-关闭轮播
      stopTime(cameraIndexCode){
        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
        this.$set(this,'fullVideoType',true);
      },
      //全屏关闭-开启轮播
      outFullScreen(){
        let self = this;
        this.$set(this,'fullVideoType',false);
        this.$set(this,'fullVideoProps',{});
      },
    },
  }
</script>
<style scoped lang="scss">
  .videoComponent{
    width:2143px;
    height:1265px;
    background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
    display: flex;
    flex-direction: column;
    .top-num-max-box{
      padding:0 51px;
      height:100px;
      display: flex;
      .for-address-box{
        display: flex;
      }
      .name-p{
        line-height:100px;
        font-size:24px;
        color:#ffffff;
      }
      .icon-p{
        width:60px;
        text-align: center;
        color:#03B7CA;
        font-size:20px;
        line-height:100px;
      }
      .num-img{
        display: block;
        margin:30px 10px 0 96px;
        width:40px;
        height:40px;
      }
      .for-p{
        margin:30px 0 0 10px;
        width:34px;
        height:40px;
        line-height:40px;
        font-size:36px;
        text-align: center;
        border:1px solid #117977;
        background-color: #073e42;
        border-radius:2px;
        p{
          background: -webkit-linear-gradient(0deg, #FFFFFF, #0183FA); /* Chrome, Safari */
          background: linear-gradient(0deg, #FFFFFF, #0183FA); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
        }
      }

    }
    .video-max-big-box{
      flex:1;
      padding:0 0 0 20px;
      .null-img{
        display: block;
        width:300px;
        margin:270px auto;
      }
    }
  }
</style>