Searchpic.vue

<!--抓拍记录-->
<template>
  <div class="pic-box template-box videobox">
    <div class="pic-left-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单人脸搜索" name="one">
          <onpice @onceFace="onceFace"></onpice>
        </el-tab-pane>
        <el-tab-pane label="多人脸搜索" name="more">
          <morepic @moreFace="moreFace"></morepic>
        </el-tab-pane>
        <!-- <el-tab-pane label="人脸比对" name="compar">
          <compaarisonpic></compaarisonpic>
        </el-tab-pane> -->
      </el-tabs>
    </div>

    <div class="pic-right-box">
      <div class="result-box" v-show="activeName == 'one'">
        <div  v-for="(item,index) in oncefaceData" :key="index"  class="one-pic-box">
          <div class="one-pic-item-box">
            <img :src="item.pics[0].url_path" alt="">
          </div>
          <div class="pic-info">
            <span class="info-item">姓名：{{item.face.name}}</span>
            <span class="info-item">年龄：{{item.age}}</span>
            <span class="info-item">性别：{{setsex(item.gender)}}</span>
            <span class="info-item">相似度：{{item.score}}</span>
          </div>
        </div>
      </div>
      <div class="result-box" v-show="activeName == 'more'">
        <div class="more-pic-box" v-for="(item,index) in morefaceData" :key="index">
          <div class="more-item org-img"  v-for="chilItem in item.pics">
            <img :src="chilItem.url_path" alt="">
          </div>
        </div>
      </div>
      <div class="result-box" v-show="activeName == 'compar'">
        <div class="compar-box">
          <div class="comparitem1">
            <img src="./1.jpg" alt="">
          </div>
          <div class="sim-box">
            <el-progress type="circle" :percentage="10"></el-progress>
          </div>
          <div class="comparitem2">
             <img src="./1.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import onpice from './onePic'
import compaarisonpic from './comparisonpic'
import morepic from './morePic'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      address: "",
      camera: "",
      value: "",
      value1: "",
      imageUrl:'',
      activeName: 'one',
      oncefaceData:[],
      morefaceData:[]
    };
  },
  components:{
    onpice,
    morepic,
    compaarisonpic
  },
  methods: {
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleClick(tab, event) {
        sessionStorage.setItem('activename',tab.name)
      },
      onceFace (val) {
        this.oncefaceData = val;
      },
      moreFace(val){
        console.log(val)
        this.morefaceData = val;
      },
      setsex(val){
        if(val == "male") return "男"
        if(val == "female") return "女"
      },
      connectws(){

      }
  },
   computed:{
    ...mapGetters(['faceInfo'])
  },
  watch:{
    faceInfo(val){
      console.log(val)
    }
  },
  created() {
      sessionStorage.setItem('activename',this.activeName)
  }
};
</script>
<style lang="stylus" scoped>
.pic-box{
  background: #fff;
  display flex
  height calc(100vh - 120px)
  border-radius 5px
  overflow hidden
  .pic-left-box{
    width 230px
    box-shadow 3px 0px 3px rgba(0,0,0,.4)
  }
}
.search-btn{
  margin 50px
}
 .avatar-uploader ,.el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    margin 20px
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .pic-right-box{
    width 100%
    overflow auto
  }
  .result-box{
    margin-left 20px
    margin-top 20px
    color #333
    .one-pic-box{
      float left
      width 200px
      height 240px
      margin 0 0 20px 20px
      border-radius 5px
      overflow hidden
      .one-pic-item-box {
        width 200px
        height 200px
        box-shadow 0 0 3px rgba(0,0,0,.3)

      }
      img{
        height 100%
        width 100%
      }
      .pic-info{
        .info-item{
          display inline-block
          width 90px
        }
      }
    }
  }
  .more-pic-box {
    display flex
    flex-wrap wrap
    .more-item{
      width 200px
      height 200px
      margin 0 0 20px 20px
      border-radius 5px
      box-shadow 0 0 3px rgba(0,0,0,.3)
      overflow hidden
      img{
        width 100%
        height 100%
      }
    }
    .org-img{
       box-shadow 0 0 5px rgba(233,13,13,.7)
    }
  }
  .compar-box {
    display flex
    .comparitem1,.comparitem2{
      width 200px;
      height 200px
      margin 0 0 20px 20px
      border-radius 5px
      box-shadow 0 0 3px rgba(0,0,0,.3)
      img{
        width 100%
        height 100%
      }
    }
    .sim-box{
      margin 40px 0px 0 20px
    }
  }
</style>