anKeYuan-largeScreen-1080/src/components/LabStats/videoStats.vue

<template>
  <div class="videoStats panel-box risk-warning">
    <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
    <div class="corner-deco bl"></div><div class="corner-deco br"></div>
    <div class="panel-title">实验室视频监控</div>
    <div class="video-content">
      <webRTC v-if="webRtcType" class="video-for-min-box"></webRTC>
      <mpegts-video class="video-for-min-box" :videoProps="item" v-for="(item,index) in mpegtsList" :key="'mpegts_'+index"></mpegts-video>
      <videoForMod class="video-for-min-box" v-for="(item,index) in modList" :key="'video_'+index" :deviceNo="item.deviceNo"></videoForMod>
    </div>
  </div>
</template>
<script>
  import { getVideoList,laboratoryLabScreenScreenConfigGet,iotDeviceList } from '@/api/index'
  import videoForMod from '@/components/videoForMod/videoForMod.vue'
  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
  import webRTC from './webRTC.vue'
  export default {
    name: 'videoStats',
    components: { videoForMod,mpegtsVideo,webRTC },
    data () {
      return {
        width:470,
        height:280,
        modList:[],
        mpegtsList:[
          {
            width: 470, //(宽度:非必传-默认600)
            height: 280, //(高度:非必传-默认338)
            url: 'https://192.168.166.11/zlmedia/gpfas/286fe8bdb0ad41f89323eaf6bd5d9f39-9ac65e490f8b43caa060e83938f47e53-29.live.flv',
            cameraIndexCode: 'mpegtsa',
          },
          {
            width: 470, //(宽度:非必传-默认600)
            height: 280, //(高度:非必传-默认338)
            url: 'https://192.168.166.11/zlmedia/gpfas/286fe8bdb0ad41f89323eaf6bd5d9f39-9ac65e490f8b43caa060e83938f47e53-29.live.flv',
            cameraIndexCode: 'mpegtsb',
          },
        ],
        pollTimer:null,
        page:1,
        webRtcType:false,
      }
    },
    created(){

    },
    mounted(){
      this.laboratoryLabScreenScreenConfigGet();
      this.pollTimer = setInterval(this.laboratoryLabScreenScreenConfigGet, 5 * 60 * 1000)
      // this.getVideoData();
    },
    methods:{
      //指定视频
      async iotDeviceList(){
        let obj = {
          page: this.page,
          pageSize: 4,
          typeKey: "camera",
          orderBy:"subject_id desc"
        };
        const res = await iotDeviceList(obj)
        if (res.code === 200) {
          this.$set(this,'modList',res.data.records);
          if(res.data.current<(res.data.pages-1)){
            this.page++
          }else{
            this.$set(this,'page',1);
          }
        }
      },
      async laboratoryLabScreenScreenConfigGet(){
        try {
          const res = await laboratoryLabScreenScreenConfigGet({ screenType: 2 })
          if (res.code === 200) {
            this.$set(this,'modList',[]);
            if(res.data.effective){
              this.$set(this,'webRtcType',true);
              this.$set(this,'page',1);
              let list = [];
              for(let i=0;i<res.data.items.length;i++){
                if(i<1){
                  list.push(res.data.items[i])
                }
              }
              this.$set(this,'modList',list);
              console.log('modList',this.modList)
            }else{
              this.$set(this,'webRtcType',false);
              this.iotDeviceList();
            }
          }
        } catch (e) {

        }
      },
      //刷新视屏
      getVideoData(data) {
        let obj = {
          page: 1,
          pageSize: 4,
          passageway: '',
          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
          streamType: 1,
          source: 4,
          subIds: data,
        };
        this.$set(this, 'videoQueryParams', obj);
        this.$nextTick(() => {
          this.videoInitialize()
        })
      },
      async videoInitialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        try {
          // const res = await getVideoList(this.videoQueryParams)

          // 假数据开始
          let res = {
            data: {
              total: 100,
              records: [
                {streamUrl: '1', deviceNo: '1'},
                {streamUrl: '2', deviceNo: '2'},
                {streamUrl: '3', deviceNo: '3'},
                {streamUrl: '4', deviceNo: '4'},
              ],
            }
          };
          // 假数据结束

          let list = [];
          for(let i=0;i<res.data.records.length;i++){
            list.push(
                {
                  width: self.width, //(宽度:非必传-默认600)
                  height: self.height, //(高度:非必传-默认338)
                  url: res.data.records[i].streamUrl,
                  cameraIndexCode: res.data.records[i].deviceNo,
                }
            )
          }
          this.$set(this,'videoList',list)
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'videoType', true);
            },1000);
          })
        } catch (e) {
          console.error('VideoGrid:', e)
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .videoStats{
  }
  .risk-warning {
    display: flex;
    flex-direction: column;
  }
  .video-content{
    padding: 0;
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    /*.videoForMod:nth-child(2){*/
      /*margin-left:10px;*/
    /*}*/
    /*.videoForMod:nth-child(3){*/
      /*margin-top:5px;*/
    /*}*/
    /*.videoForMod:nth-child(4){*/
      /*margin-top:5px;*/
      /*margin-left:10px;*/
    /*}*/
    .video-for-min-box{
      display: inline-block!important;
      overflow: hidden!important;
      border-radius:4px!important;
      height:280px!important;
      width:470px!important;
    }
    .video-for-min-box:nth-child(1){
      margin:0 10px 0 0!important;
    }
    .video-for-min-box:nth-child(2){

    }
    .video-for-min-box:nth-child(3){
      margin:10px 10px 0 0!important;
    }
    .video-for-min-box:nth-child(4){
      /*margin:10px 0 0 0!important;*/
    }
  }
</style>