FE-MultipleCollegeBigData/src/components/newSubVideoComponent.vue

<template>
  <div class="newSubVideoComponent">
    <p class="null-data-list-p" v-if="!dataList[0]">暂无数据</p>
    <div class="sub-video-max-big-box" v-if="dataList[0]">
      <div class="sub-video-big-box" v-for="(item,index) in dataList" :key="index">
        <div class="sub-video-box">
          <p class="sub-name-p">{{item.roomNum?item.subName+'('+item.roomNum+')':item.subName}}</p>
          <mpegts-video :videoProps="item.videoData" ref="mpegtsRef" ></mpegts-video>
          <!--<H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"></H5PlayerVideo>-->
        </div>
        <div class="sensor-max-box">
          <div class="sensor-box" v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">
            <div class="img-box">
              <svg-icon v-if="minItem.icon" class="svg-img" :icon-class="minItem.icon"/>
            </div>
            <div class="text-box">
              <p>{{minItem.deviceName}}</p>
              <p>{{minItem.deviceValue?minItem.deviceValue:'-'}}{{minItem.unit}}</p>
            </div>
          </div>
          <p class="null-sensor-p" v-if="!item.sensorList">该实验室未配置传感器</p>
        </div>
      </div>
    </div>
    <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
  </div>
</template>
<script>
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
  import {
    laboratorySubRelInfoSelectInfoAndSensor,
    iotCameraFindByCondition
  } from '@/api/index'

  export default {
    name: 'newSubVideoComponent',
    components: {
      H5PlayerVideo,
      fullH5PlayerVideo,
      mpegtsVideo,
    },
    data() {
      return {
        timer: null,//定时器
        dataList: [],
        //请求参数
        queryParams: {
          page: 1,
          pageSize: 2,
          deptId: !localStorage.getItem('deptId')?'':localStorage.getItem('deptId'),
        },
        total: 0,//总数
        videoList: [],
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created() {

    },
    mounted() {
      this.initialize()
      this.timerPlay()
    },
    methods: {
      //父类方法-用于全屏窗口切换
      fullScreenWindowSwitch(data){
        let self = this;
        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
            if(data.type){
              self.$refs.mpegtsRef[i].stopVideo();
            }else{
              self.$refs.mpegtsRef[i].playVideo();
            }
          }
        }
      },
      //初始化
      initialize() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if(!obj.deptId){
          obj.buildId = localStorage.getItem('buildId');
        }
        laboratorySubRelInfoSelectInfoAndSensor(obj).then((res) => {
          if (res.data.records[0]) {
            res.data.records.forEach((bigItem)=>{
              if(bigItem.sensorList){
                bigItem.sensorList.forEach((item)=>{
                  item.icon = item.icon?localStorage.getItem('fileBrowseEnvironment')+item.icon:null;
                })
              }
            })
            this.$set(this, 'total', res.data.total)
            this.getSubVideo(res.data.records)
          } else {
            this.$set(this, 'dataList', [])
          }
        })
      },
      // 定时器
      timerPlay() {
        let self = this
        clearInterval(this.timer)
        this.timer = setInterval(function() {
          let num = self.accMul(self.queryParams.page,self.queryParams.pageSize);
          if(num<self.total){
            self.$set(self.queryParams,'page',self.queryParams.page+1);
          }else{
            self.$set(self.queryParams,'page',1);
          }
          self.laboratorySubRelInfoSelectInfoAndSensor();
        }, 1000 * 20)
      },
      laboratorySubRelInfoSelectInfoAndSensor() {
        laboratorySubRelInfoSelectInfoAndSensor(this.queryParams).then((res) => {
          if (res.data.records[0]) {
            this.getSubVideo(res.data.records)
          } else {
            this.$set(this, 'dataList', [])
          }
        })
      },
      getSubVideo(list) {
        this.$set(this,'videoList',[]);
        let sub1 = {}
        let sub2 = {}
        if (list[0]) {
          sub1 = {
            subId: list[0].subId,
            subName: list[0].subName,
            roomNum: list[0].roomNum,
            sensorList: list[0].sensorList,
            videoData:{
              width: 355, //(宽度:非必传-默认600)
              height: 200 //(高度:非必传-默认338)
            }
          }
        }
        if (list[1]) {
          sub2 = {
            subId: list[1].subId,
            subName: list[1].subName,
            roomNum: list[1].roomNum,
            sensorList: list[1].sensorList,
            videoData:{
              width: 355, //(宽度:非必传-默认600)
              height: 200 //(高度:非必传-默认338)
            }
          }
        }
        if (list[1]) {
          Promise.all([
            this.videoInitialize(sub1),
            this.videoInitialize(sub2)
          ]).then((result) => {
            this.$set(this, 'dataList', this.videoList)
            console.log('dataList2',this.dataList)
          }).catch((error) => {
          })
        } else {
          Promise.all([
            this.videoInitialize(sub1)
          ]).then((result) => {
            this.$set(this, 'dataList', this.videoList)
            console.log('dataList1',this.dataList)
          }).catch((error) => {
          })
        }

      },
      videoInitialize(data) {
        let obj = {
          page: '1',
          pageSize: '10',
          buildId: '',
          floorId: '',
          passageway: '',
          subIds: [data.subId],
          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
          streamType: 1,
          source: 1
        }
        iotCameraFindByCondition(obj).then(response => {
          if(response.data.records[0]){
            let newData = JSON.parse(JSON.stringify(data));
            newData.videoData.url = response.data.records[0].streamUrl;
            newData.videoData.cameraIndexCode = response.data.records[0].deviceNo;
            this.videoList.push(newData);
          }else{
            let newData = JSON.parse(JSON.stringify(data));
            newData.videoData.url = null;
            newData.videoData.cameraIndexCode = null;
            this.videoList.push(newData);
          }
        })
      },
      accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString()
        try {
          m += s1.split('.')[1].length
        } catch (e) {
        }
        try {
          m += s2.split('.')[1].length
        } catch (e) {
        }
        return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
      },
      //全屏开启-关闭轮播
      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',{});
      },
    },
    beforeDestroy() {
      clearInterval(this.timer)
    }
  }
</script>
<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .newSubVideoComponent {
    width: 680px;
    height: 500px;
    .sub-video-max-big-box {
      width: 680px;
      height: 500px;
      .sub-video-big-box:nth-child(2){
        margin-top:20px;
      }
      .sub-video-big-box {
        width: 680px;
        height: 230px;
        display: flex;
        .sub-video-box {
          width: 355px;
          height: 230px;
          .sub-name-p {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #FFFFFF;
            padding-left: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            margin-right: 1px;
          }
          .sub-video-box {
            width: 355px;
            height: 200px;
          }
        }
        .sensor-max-box {
          overflow: hidden;
          margin-left: 20px;
          .sensor-box {
            background-color: #073F55;
            height: 105px;
            width: 300px;
            margin-bottom: 20px;
            border-radius: 10px;
            display: flex;
            .img-box {
              width: 99px;
              height: 85px;
              margin: 10px 20px 0 19px;
              background: url("../assets/ZDimages/emergencyManagement/icon_yjsj_zc.png") no-repeat;
              background-size: 100%;
              .svg-img {
                display: block;
                width: 24px;
                height: 24px;
                margin: 37px 0 0 37px;
                color: #24D1F9;
              }
            }
            .text-box {
              p {
                color: #fff;
                font-size: 14px;
                line-height: 24px;
                height: 24px;
                overflow: hidden;
              }
              p:nth-child(1) {
                margin-top: 28px;
              }
              p:nth-child(2) {

              }
            }
          }
          .null-sensor-p{
            width:300px;
            text-align: center;
            color:#dedede;
            font-size:14px;
            line-height:230px;
          }
        }
      }
    }
    .null-data-list-p {
      line-height: 500px;
      text-align: center;
      width: 100%;
      color: #dedede;
    }
  }
</style>