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"></webRTC>-->
      <videoForMod v-for="(item,index) in modList" :key="index"
                   :deviceNo="item.deviceNo"></videoForMod>
      <!--<mpegts-video style="display: inline-block;margin:0 5px 5px 0;"-->
                    <!--:videoProps="item" v-for="(item,index) in demoList" :key="index"></mpegts-video>-->
    </div>
  </div>
</template>
<script>
  import { getVideoList,laboratoryLabScreenScreenConfigGet,iotDeviceList,iotCameraFindByCondition } from '@/api/index'
  import videoForMod from '@/components/videoForMod/videoForMod.vue'
  import webRTC from './webRTC.vue'
  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
  export default {
    name: 'videoStats',
    components: {
      videoForMod,
      webRTC,
      mpegtsVideo,
    },
    data () {
      return {
        width:470,
        height:280,
        modList:[],
        pollTimer:null,
        page:1,
        webRtcType:false,
        demoList:[],
      }
    },
    created(){

    },
    mounted(){
      // this.laboratoryLabScreenScreenConfigGet();
      // this.pollTimer = setInterval(this.laboratoryLabScreenScreenConfigGet, 5 * 60 * 1000)

      this.initialize();
    },
    methods:{
      /* 测试方法开始 */

      initialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:'1',
          pageSize:'4',
          buildId:'',
          floorId:'',
          passageway:'',
          subIds:['2067514255432413184'],
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
          streamType:1,
          source:1,
        };
        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,
                  cameraIndexCode: response.data.records[i].deviceNo,
                }
            )
          }
          this.$set(this,'demoList',list)
        });
      },
      /* 测试方法结束 */


      //指定视频
      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<3){
                  list.push(res.data.items[i])
                }
              }
              this.$set(this,'modList',list);
            }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;
    }
  }
</style>