index.vue

<template>
  <div class="manage-container clerk-wrapper">
    <el-row class="manage-content">
      <el-col :span="5" class="treeMenu">
        <el-row class="manage-head-wrapper">
          <el-col :xs="22" :sm="22">
            <div class="manage-select-box">
              <el-input v-model="filterText" class="search-inp" :placeholder="$t('pholder.Site')" clearable/>
            </div>
            <el-button type="primary" class="search-btn" plain  @click="searchFun">{{$t('button.search')}}</el-button>
          </el-col>
        </el-row>
        <!-- class="filter-tree" :filter-node-method="filterNode" -->
        <el-tree :data="tableData" class="tree" :style="{height:tableHeight+'px'}" ref="tree" default-expand-all  :props="defaultProps"  @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="19" class="personInfo">
        <div v-show="platform==1" class="video-box" :style="{height:tableHeight+'px'}" v-loading="loading">
         	<canvas id="canvasVideo" style="background: black;width:100%;height:100%"></canvas>
         </div>
         <div v-show="platform==2" class="videoBox" :style="{height:tableHeight+'px'}" v-loading="loading">
           <div id="my-video" style="background: black;width:100%;height:100%"></div>
           <div class="btns">
             <el-button type="text" class="scaleBtn" icon="el-icon-plus" @mousedown.native='setControl(8)' @mouseup.native='stopControl(8)'></el-button>
             <el-button type="text" class="scaleBtn" icon="el-icon-minus" @mousedown.native='setControl(9)' @mouseup.native='stopControl(9)'></el-button>
           </div>
         </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as Cookies from 'js-cookie'
  import EZUIKit from 'ezuikit-js'
  import SLPlayer from '../../../../static/js/slplayer'
  export default {
    data() {
      return {
        currObj:'',
        radio1:'高清',
        tableData: [],
        loading: true,
        queryForm:{},
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        platform:'',
        palyUrl:'',
        player:'',
        playerIndex:0,
        playerM3u8:'',
        playerM3u8Index:0,
        playerEz:'',
        filterText:''
      };
    },
    computed: {
      tableHeight() {
        const windowInnerHeight = window.innerHeight;
        return windowInnerHeight - windowInnerHeight * 0.24;
      }
    },
    mounted() {
      this.getTableData()
    },
   beforeDestroy() {
   	if(this.player){
       this.player.stop()
     }
   },
   watch: {
     // filterText(val) {
     //   this.$refs.tree.filter(val);
     // }
   },
    methods: {
      getTableData(){
        this.tableData = []
        this.$api.videoShopTourReport.getGateGroup({accountId:this.$cookie.get('accountId')}).then(res => {
          let result = res.data;
          if(result.code==200){
            this.tableData = this.recursionDeal([result.data])
          }
        })
      },
      recursionDeal(data){
        let that = this
        data.forEach(item=>{
          item.children = []
          if(item.malls && item.malls.length>0){
            item.malls.forEach(item1=>{
              if(item1.patrolGates){
                item1.patrolGates.forEach(item2=>{
                  item2.type = 'gate'
                })
                item1.children = item1.patrolGates
              }
            })
            item.children.push.apply(item.children,item.malls);
          }
          if(item.subGroups && item.subGroups.length>0){
            item.children.push.apply(item.children,item.subGroups);
            that.recursionDeal(item.subGroups)
          }
        })
        return data
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      setControl(val){
        let parmas = {
          'platform':this.currObj.platform,
          'deviceSerial':this.currObj.deviceSerial,
          'channelNo':this.currObj.channelNo,
          'direction':val,
          'speed':1
        }
        this.$api.videoShopTourReport.ptzStart(parmas).then(data => {
          let result = data.data
          if(result.code !=200){
            this.$message({
              message: '调整失败',
              type: 'error'
            });
          }
        })
      },
      stopControl(val){
        let parmas = {
          'platform':this.currObj.platform,
          'deviceSerial':this.currObj.deviceSerial,
          'channelNo':this.currObj.channelNo,
          'direction':val
        }
        this.$api.videoShopTourReport.ptzStop(parmas).then(data => {
          let result = data.data
          if(result.code !=200){
            this.$message({
              message: '调整失败',
              type: 'error'
            });
          }
        })
      },
      playerVideo(atoken){
        this.$nextTick(()=>{
          // 拾联视频
          if(this.platform==1){
            if(this.playerEz){
              let canvasVideo = document.getElementById('my-video')
              canvasVideo.innerHTML = ''
            }
            if(this.playerIndex>0){
              // 暂停上次播放并重新开始新的视频
              this.player.stop();
              setTimeout(()=>{
                this.player.start(this.palyUrl)
              },100)
            }else{
              this.createPlayer(this.palyUrl);
            }
          }else{
            // 萤石云视频
            // 清除拾联视频
            if(this.player){
              this.player.stop();
            }
            // 开始萤石云视频
            if(this.playerEz){
              let canvasVideo = document.getElementById('my-video')
              canvasVideo.innerHTML = ''
            }
            if(this.currObj.presetId != undefined){
              let moveParmas = {
                platform:this.currObj.platform,
                deviceSerial:this.currObj.deviceSerial,
                channelNo:this.currObj.channelNo,
                index:this.currObj.presetId
              }
              this.$api.videoShopTourReport.getPresetMove(moveParmas).then(data => {
                console.log(data.data)
              })
            }
            // 开始萤石云视频
            this.playerEz = new EZUIKit.EZUIKitPlayer({
              id: "my-video", // 视频容器ID
              accessToken: atoken,
              url: this.palyUrl,
              template: 'theme',//simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
              autoplay: true,
              footer: ['hd','fullScreen'],
              width: document.getElementById('my-video').offsetWidth - 20,
              height:this.tableHeight - 50,
            });
            setTimeout(()=>{
              this.playerEz.play()
            },500)
          }
        })
      },
      handleNodeClick(data) {
        if(data.type != 'gate'){
          return false;
        }
        this.platform = data.platform;
        let parmas = {
          id:data.id
        }
        if(this.platform==2){
          parmas.protocol=1
        }
        let presetId = data.presetId
        this.$api.videoShopTourReport.getLiveInfo(parmas).then(res => {
          let result = res.data;
          if(result.code==200){
            this.currObj = {
              presetId:presetId,
                  ...result.data
            }
            this.palyUrl= result.data.liveAddress;
            this.playerVideo(result.data.accessToken)
          }
        })
      },
      createPlayer(row) {
          this.playerIndex ++ ;
          let that = this;
           that.Module = {
           	/* ************************************ */
           	// 定义视频画布
           	canvas: document.getElementById("canvasVideo"),
           	/* ************************************ */
           	// 设置相应的事件回调
           	onStart: function () {
           		console.log("onStart...")
           	},
           	onEnd: function () {
           		console.log("onEnd...")
           	},
           	onError: function (code, err) {
           		alert('error: ', code, err)
           		console.log('error: ', code, err);
           	},
           	onVideoStart: function () {
           		console.log('onVideoStart。。。');
           	},
           	// 录像回放中返回时间刻度
           	onPlayTime: function (ts) {
           		if(ts==0) return;
           		var date = new Date(ts * 1000);//如果date为10位不需要乘1000
           		var Y = date.getFullYear() + '-';
           		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
           		var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
           		var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
           		var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
           		var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
           		var timestamp = Y + M + D + h + m + s;
           	}
           }
           SLPlayer(that.Module).then(function (obj) {
             that.loading = false
             that.player = obj;
             setTimeout(()=>{
               that.player.start(row)
             },1000)
          });
      },
      searchFun(){
        if(this.filterText){
          let tabelParams = {
            accountId: this.$cookie.get('accountId'),
            mallName:this.filterText
          };
          this.$api.videoShopTourReport.filterGateGroup(tabelParams, null, true).then(data => {
            this.tableData = [];
            var result = data.data;
            result.data.forEach(item=>{
              if(item.patrolGates && item.patrolGates.length>0){
                item.patrolGates.forEach(item2=>{
                  item2.type = 'gate'
                })
                item.children = item.patrolGates
              }
            })
            this.tableData = result.data;
          })
        }else{
          this.getTableData()
        }
      }
    }
  };
</script>

<style scoped lang="less">
  .manage-select-box .el-select {
    width: 200px;
  }
  .manage-container{
    height: 100%;
  }
  .manage-content{
    height: calc(100% - 100px);
  }
  .videoBox{
    position: relative;
  }
  .btns{
    position: absolute;
    right: 15px;
    bottom: 70px;
    .scaleBtn{
      padding: 0;
      width: 20px;
      height: 20px;
      display: block;
      background-color: #fff;
      color: #000;
      margin: 0 0 10px 0;
    }
  }
  .personInfo{
      padding: 20px;
  }
  .tree{
      overflow: auto;
  }
  .treeMenu {
    padding-right: 5px;
    border-right: 3px solid #f0f3f9;
    height: 100%;
    .treePage {
      padding: 2px 0;
      position: fixed;
      bottom: 15px;
      /deep/.el-pagination__jump{
        line-height: 22px;
        margin-left: 0;
      }
    }
    .btn-box{
      margin-bottom: 10px;
    }
  }
</style>