playvideo.vue

<!---实时视频--->
<template>
  <div class="template-box  videobox">
    <div class="videoleft-box">
      <div class="search-video-box">
        <el-input  prefix-icon="el-icon-search" v-model="searchvideo"></el-input>
      </div>
      <el-tree
        class="filter-tree"
        :data="treedata"
        highlight-current
        :props="defaultProps"
        :render-content="renderContent"
        ref="videotree"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick">
      </el-tree>
    </div>
    <div class="videoright-box">
      <div class="play-video-box">
        <div class="play-box"></div>
        <div class="show-pic-box">
          <div v-for="item in 15" class="pic-box">
            <img src="./testimg/2.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="comparison-box">
        <div class="item-box" v-for="item in 5">
          <div class="org-img">
            <img src="./testimg/1.jpg" alt="">
            <div class="img-info">
              <div>地点：西二旗东路</div>
              <div>时间：2019-09-12 10:00:00</div>
            </div>
          </div>
          <div class="similarity-box">
            <similar :cid="'cid'+item" :sim="30*item"></similar>
          </div>
          <div class="comp-img">
            <img src="./testimg/2.jpg" alt="">
            <div class="img-info">
              <div>姓名：xxxx</div>
              <div>身份证号:</div>
              <div>122123333211121123</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import similar from './similarity'
export default {
  components:{
    similar
  },
   data() {
      return {
        treedata: [],
        searchvideo:'',
        defaultProps: {
          children: 'childs',
          label: 'org_name'
        }
      };
  },
  methods: {
    handleNodeClick(data) {
      if (data.org_type == 'vchan') {
        console.log(data.vchan_prop)
        //播放视频
      }
    },
    renderContent(h, { node, data, store }){
        var html = <span>{data.org_name}</span>;
        if (data.org_type == "address") {
          html = <span class="">{data.org_name}</span>;
        }
        if (data.org_type == "vchan") {
          if(data.vchan_prop.is_dome){
           html = (
             <span>
              <i class="el-icon-plate-shebeileiqiuji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
            </span>);
          } else {
          html = (
             <span>
              <i class="el-icon-plate-qiangji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
            </span>);
          }
        }
        if (data.org_type == "horn") {
          html = (
             <span>
              <i class="el-icon-fa-volume-up fz20"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
            </span>);
        }
        return (
          <span>
            <span>{html}</span>
          </span>
        );
      },
    getorgtree(){
     this.axios.get(this.API.org.getorgtree,{
        params: {
          "vchan_source":'internal',
          "vchan_type":'vchan'
        },
     }).then(res => {
       this.treedata = res.data
     })
   },
    filterNode(value, data) {
        if (!value) return true;
        return data.org_name.indexOf(value) !== -1;
      }
  },
  watch: {
      searchvideo(val) {
        this.$refs.videotree.filter(val);
      }
    },
  created() {
    this.getorgtree()
  }
};
</script>
<style lang="stylus" scoped>
.videobox{
  top 0px
  height calc(100vh - 110px)
  display flex
  .videoleft-box{
    margin 5px
    width 230px
    height calc(100vh - 130px)
    box-shadow 0px 0px 2px 1px rgba(0,0,0,.1)
    background #ffffff
    border-radius 5px
    overflow hidden
  }
}

.videoright-box{
  width calc(100vw - 320px)
  color #333
  display flex
  overflow hidden
}
.play-video-box{
  flex 1 1 auto
  margin 5px .6vw
  width calc(100vw - 570px)
  overflow hidden
}
.play-box{
  width 100%
  height 70vh
  margin-bottom 1vh
  border-radius 4px
  background #333
}
.comparison-box{
  width 500px
  margin 5px
  height calc(100vh - 150px)
  overflow hidden
  box-shadow 0px 0px 2px 1px rgba(0,0,0,.2)
  background #fff
  padding 1vh 0
  border-radius 5px
  .item-box{
    display flex
    color #666
    margin 0 10px 20px
    flex-wrap nowrap
    border-radius 3px
  }
  .org-img,.comp-img{
    height 220px
    width 18vw
    overflow hidden
    font-size 14px
    img{
      height 150px
      width 100%
    }
  }
  .org-img{
  }
  .similarity-box{
    position relative
    height 150px
    width 8vw
    background #fff
    text-align center
    overflow hidden
  }
}
.comparison-box:hover{
  overflow auto
}
.search-video-box{
  width 95%
  margin 5px auto
}

.show-pic-box{
  height 16vh
  overflow hidden
  display flex
  flex-wrap wrap
  background #fff
  border-radius 5px
  margin 0 3px
  box-shadow 0px 0px 1px 1px rgba(0,0,0,.2)
  .pic-box{
    height 15vh
    border-radius 5px
    width 8vw
    overflow hidden
    margin 0.6vh 0 1vh .41vw
    img{
      height 100%
      width 100%
    }
  }
  .pic-box:nth-child(1){
    margin-left .41vw
  }
}
</style>