index.vue

<template>
  <div class="app-container">
    <el-row :gutter="5" type="flex" justify="space-around">
      <el-col :lg="4" :xl="4">
        <div class="head-container">
          <el-input
            v-model="videoTree"
            placeholder="请输入监控名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
                   :data="treeData"
                   :props="treeProps"
                   :expand-on-click-node="false"
                   :filter-node-method="filterNode"
                   ref="tree"
                   default-expand-all
                   @node-click="nodeClick"
                   style="background-color: white; color: #606266"
          >
            <template slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <i class="iconfont" :class="[data.icon, 'tree-icon']" />
                {{ node.label }}
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>

      <el-col :lg="20" :xl="20">
        <el-row class="row">
          <div class="box" :class="[flag == 1 ? 'boxred' : 'boxblack']">
            <div id="newplay1" style="width:100%; height:100%;" @click="chooseWindow(1)">
              <span class="novideo">无信号</span>
            </div>
          </div>
          <div class="box" :class="[flag == 2 ? 'boxred' : 'boxblack']">
            <div id="newplay2" style="width:100%; height:100%;" @click="chooseWindow(2)">
              <span class="novideo">无信号</span>
            </div>
          </div>
        </el-row>

        <el-row class="row">
          <div class="box" :class="[flag == 3 ? 'boxred' : 'boxblack']">
            <div id="newplay3" style="width:100%; height:100%;" @click="chooseWindow(3)">
              <span class="novideo">无信号</span>
            </div>
          </div>
          <div class="box" :class="[flag == 4 ? 'boxred' : 'boxblack']">
            <div id="newplay4" style="width:100%; height:100%;" @click="chooseWindow(4)">
              <span class="novideo">无信号</span>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scped>
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: white;
  }
  .el-tree--highlight-current .el-tree-node > .el-tree-node__content:hover {
    background-color: white;
    color: #454547;
  }
  main > div {
    background: #ffffff;
    height: calc(100vh - 110px) !important;
    padding: 0px 0px 0px 10px !important;
  }
  .row{
    display: flex;
    .box{
      width: 100%;
      text-align: center;
      background-color: black;
    }
  }
  .boxred{
    border: 1px solid red;
  }
  .boxblack{
    border: 1px solid white;
  }
  .novideo{
    /*padding: 147px 0px 147px 0px;
    display: block;*/
    line-height: calc((100vh - 130px)/2);
    color: white;
  }
  .el-icon-video-camera{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../../assets/images/video1.png");
    background-size: 20px;
  }
  .el-icon-video-play{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../../assets/images/video2.png");
    background-size: 20px;
  }
</style>

<script>
  export default {
    name: "Video",
    components: {
    },
    data() {
      return {
        videoTree: undefined,
        loading: false,
        playerWindow: "newplay1",
        flag: 1,
        treeData: [
          {
            name: "企业视频监控",
            level: 0,
            icon: "el-icon-video-camera",
            childList: []
          }
        ],
        treeProps: {
          children: "childList",
          label: "name"
        },
        treecheckedObj: {},
        ideoController: {},
      }
    },
    watch: {
      // 根据名称筛选视频监控
      videoTree(val) {
        console.log("val", val)
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      getTreeData() {
        let that = this;
        that.treeData[0].childList = [
          {
            name: "视频监控1",
            icon: "el-icon-video-play",
            deviceCode: "34020000001110000003_0200000004",
          },{
            name: "视频监控2",
            icon: "el-icon-video-play",
            deviceCode: "34020000001110000003_0200000005",
          },{
            name: "视频监控3",
            icon: "el-icon-video-play",
            deviceCode: "stream_36_0",
          },{
            name: "视频监控4",
            icon: "el-icon-video-play",
            deviceCode: "stream_37_0",
          }
        ];
      },
      // 筛选节点
      filterNode(value, data) {
        console.log(value, data)
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      nodeClick(data, node, target) {
        let that = this;
        that.treecheckedObj = node.data;

        if (node.level == "2") {
          that.playerWindow = 'newplay' + that.flag;
          var player = new WasmPlayer(null, that.playerWindow, null, {Height: true});
          console.log(that.playerWindow, node.data.deviceCode)
          player.play('http://27.128.189.137:18000/flv/hls/' + that.treecheckedObj.deviceCode + '.flv', 1);
          if (that.flag < 4) {
            that.flag++;
          }
        }
      },
      chooseWindow(data) {
        this.flag = data;
        this.playerWindow = 'newplay' + this.flag;
      },
    },
    created() {
      let that = this;
      that.getTreeData();
    }
  }
</script>