cyzh-park/src/views/videoapply/comp/videowallbak2.vue

<template>
    <el-row>
      <el-col :span="4">
        <div class="box">
          <el-scrollbar>
            <basic-container>
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
              </el-input>
              <el-tree ref="tree" class="filter-tree" :props="treeProps" :data="treeData" @node-click="handleNodeClick"
                       lazy :load="treeLoad":filter-node-method="filterNode">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span v-if="node.isLeaf">
                    <el-button
                      type="text"
                      size="mini"
                      @click="() => clickPlay(data)">
                      播放
                    </el-button>
                    <el-button
                      style="color:red"
                      type="text"
                      size="mini"
                      @click="() => clickStop(node, data)">
                      停止
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </basic-container>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="20">
        <basic-container>
          <div style="margin-bottom: 20px">
            <el-radio-group v-model="screen" size="mini" @change="screenChange">
              <el-radio-button :label="4">四屏</el-radio-button>
              <el-radio-button :label="6">六分屏</el-radio-button>
              <el-radio-button :label="9">九分屏</el-radio-button>
              <el-radio-button :label="16">十六分屏</el-radio-button>
            </el-radio-group>
          </div>
            <el-row :gutter="4">
              <div class="item4" v-for="(item,index) in data4" :key="index" v-if="screen == 4">
                <div align="center">{{item.name}}</div>
                <video :id="'videoId' + index" controls="true" width="100%" height="100%">
                </video>
              </div>
              <el-col :span="screenSpan" v-for="(item,index) in screenData" :key="screen + index" v-if="item.display">
                <player style="position:sticky;overflow: hidden;" :jessibucaId="'jessibucaId' + index" :container="'container' + index" :buttonsBoxId="'buttonsBoxId' + index" :ref="'videoPlayer' + index" :hasaudio="hasaudio" fluent autoplay live ></player>
              </el-col>
            </el-row>
          </div>
        </basic-container>
      </el-col>
    </el-row>
</template>

<script>
    import {getGbChannelLazyTree, startPlay, stopPlay} from "@/api/device/gb/gbdevicechannel";
    import player from './jessibuca.vue'
    export default {
      name: "videowall",
      components: {player},
      data () {
        return {
          // itemClass: {
          //   width: '500px',
          //   overflow: 'hidden',
          //   borderRadius: '5px',
          //   margin: '5px',
          //   position: 'sticky'
          // },
          screenSpan: 4,
          screen: 4,
          screenData:[],
          playerRef: "4videoPlayer",
          filterText: '',
          treeData : [],
          treeProps:{
            labelText: '标题',
            label: 'label',
            parentLabel: 'parentLabelName',
            children: 'children',
            isLeaf: "leaf"
          },
          form:{},
          data4:[],
          data6:[],
          data9:[],
          data16:[],
          loading:true,
          data:[],
        }
      },
      watch: {
        filterText(val) {
          this.$refs.tree.filter(val);
        }
      },
      created(){
        this.initData();
      },
      methods:{
        initData(){
          for(let i = 0; i < 16; i++){
            let item = null;
            if(i <= 3){
              item = {name:"", isPlay:false, index:i, channelId:null, display:true};
            }else{
              item = {name:"", isPlay:false, index:i, channelId:null, display:false};
            }
            this.screenData.push(item);

            // if(i <= 3){
            //   this.data4.push(item);
            //   this.data6.push(item);
            //   this.data9.push(item);
            //   this.data16.push(item);
            // }else if(i > 3 && i <= 5){
            //   this.data6.push(item);
            //   this.data9.push(item);
            //   this.data16.push(item);
            // }else if(i > 5 && i <= 8){
            //   this.data9.push(item);
            //   this.data16.push(item);
            // }else if(i > 8 && i <= 15){
            //   this.data16.push(item);
            // }
          }
        },
        screenChange(value){
          if(value === 4){
            this.screenSpan = 12;
            for(let i=0; i<16; i++){
              if(i < 4){
                this.screenData[i].display = true;
              }else{
                this.screenData[i].display = false;
              }
            }
          }else if(value === 6){
            this.screenSpan = 8;
            for(let i=4; i<16; i++){
              if(i < 6){
                this.screenData[i].display = true;
              }else{
                this.screenData[i].display = false;
              }
            }
          }else if(value === 9){
            this.screenSpan = 8;
            for(let i=6; i<9; i++){
              if(i < 9){
                this.screenData[i].display = true;
              }else{
                this.screenData[i].display = false;
              }
              this.screenData[i].display = true;
            }
          }else if(value === 16){
            this.screenSpan = 6;
            for(let i=4; i<16; i++){
              this.screenData[i].display = true;
            }
          }
        },
        treeLoad(node, resolve){
          const parentId = (node.level === 0) ? null : node.data.id;
          let parentColumn = null;
          const tenantId = localStorage.getItem("tenantId");
          if(tenantId === "000000"){
            if(node.level === 0){
              parentColumn = "0";
            }else if(node.level === 1){
              parentColumn = "agency";
            }else if(node.level === 2){
              parentColumn = "residential";
            }else if(node.level === 3){
              parentColumn = "building";
            }else if(node.level === 4){
              parentColumn = "floor";
            }else{
              parentColumn = null;
            }
          }else{
            if(node.level === 0){
              parentColumn = "0";
            }else if(node.level === 1){
              parentColumn = "residential";
            }else if(node.level === 2){
              parentColumn = "building";
            }else if(node.level === 3){
              parentColumn = "floor";
            }else{
              parentColumn = null;
            }
          }
          getGbChannelLazyTree(parentColumn, parentId).then(res => {
            resolve(res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              }
            }))
          });
        },
        filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        handleNodeClick(node, resolve){},
        clickPlay(data){
          this.$message.success("开始调取视频");
          //找到第一个没有播放的屏幕
          let emptyIndex = this.screenData.findIndex((item) => item.isPlay == false);
          if(emptyIndex >= 0){ //表示找到
            this.playVideo(data, emptyIndex);
            this.screenData[emptyIndex].isPlay = true;
            this.screenData[emptyIndex].channelId = data.channelId;
            return false;
          }else{
            this.playVideo(data, 0);
            this.screenData[0].isPlay = true;
            this.screenData[0].channelId = data.channelId;
          }
        },
        playVideo(treeItem, index){
          let deviceId = treeItem.deviceId;
          let channelId = treeItem.channelId;
          console.log(this.$refs[this.playerRef + index]);
          startPlay(deviceId, channelId).then(res => {
            if (res.data.data) {
              let streamInfo = res.data.data;
              this.$refs[this.playerRef + index][0].play(streamInfo.ws_flv);
              // try {
              //   let videoElement = document.getElementById("videoId" + index);
              //   let flvPlayer = flvjs.createPlayer({
              //     type: 'flv',
              //     url: streamInfo.ws_flv
              //   });
              //   flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {});
              //   flvPlayer.on(flvjs.Events.MEDIA_SOURCE_CLOSE || flvjs.Events.MEDIA_SOURCE_ENDED, () => {});
              //   flvPlayer.attachMediaElement(videoElement);
              //   flvPlayer.load();
              //   flvPlayer.play();
              //   treeItem.isPlay = true;
              // } catch (e) {
              //   console.log(e);
              // }
            }
          });
        },
        clickStop(node, treeItem){
          this.$message.warning("正在停止");
          let screenData = null;
          let deviceId = treeItem.deviceId;
          let channelId = treeItem.channelId;
          let channelVideoIndex = this.screenData.findIndex((item,index) => {return item.channelId == treeItem.channelId});
          this.$refs[this.playerRef + channelVideoIndex][0].pause();
          // stopPlay(deviceId, channelId).then(res => {
          //   this.$message.success("停止成功");
          //   this.screenData[channelVideoIndex].isPlay = false;
          //   this.screenData[channelVideoIndex].channelId = null;
          // });
        }
      },
    }
</script>

<style lang="less">
  .box {
    height: 800px;
  }

  .el-scrollbar {
    height: 100%;
  }

  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
  #videoSurveillance {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    .item4 {
      width: calc(~"49%");
      overflow: hidden;
      border-radius: 5px;
      margin: 5px;
      position: sticky;
    }

    .item6 {
      width: calc(~"32%");
      overflow: hidden;
      border-radius: 5px;
      margin: 5px;
      position: sticky;
    }

    .item9 {
      width: calc(~"32%");
      overflow: hidden;
      border-radius: 5px;
      margin: 5px;
      position: sticky;
    }

    .item16 {
      width: calc(~"24%");
      overflow: hidden;
      border-radius: 5px;
      margin: 5px;
      position: sticky;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>