onePic.vue

<!--单人脸搜索-->
<template>
  <div >
    <div >
      <el-upload
        class="avatar-uploader"
        action=""
        :http-request="uploadsearchimg"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
       >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="pic-search-box">
        <el-select v-model="dbname" placeholder="选择比对库">
           <el-option v-for="item in crucialData" :key="item.code" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </div>
      <div class="sim-box">
        <span class="demonstration">相似度:</span>
        <div class="similarity">
          <el-slider v-model="similarity" ></el-slider>
        </div>
      </div>
      <div class="pic-search-box">

      </div>
      <div class="">
          <el-button class="search-btn" @click="searchPic()">查询</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      address: "",
      camera: "",
      value: "",
      value1: "",
      imageUrl:'',
      dbname:'',
      similarity:50,
      crucialData:[]
    };
  },
  methods: {
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file){
        const isJPG = file.type === "image/jpeg";
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt1M) {
          this.$message.error("上传头像图片大小不能超过 1MB!");
        }
        return isJPG && isLt1M;
      },
      uploadsearchimg(file){
        var file = file;
        this.base64Img(file).then(res => {
          this.imageUrl = res.src
          this.base64 = res.pic_base64
        })
      },
      initDbData(){
        this.faceapi.getFaceDbData().then(res => {
          this.crucialData = res.list_data;
        })
     },
      searchPic(){
        let data = {
          sessionId: localStorage.getItem("user_id"),
          similarity:this.similarity,
          crucial_type:this.dbname,
          limit:20,
          pics_base64:[this.base64]
        }
        console.log(data);
        this.axios.post(this.API.faceweb + '/faces/image_search', data).then((res)=> {

        });
      }
  },
  computed:{
    ...mapGetters(['faceinfo','alarmInfo'])
  },
  created() {
    this.initDbData()
  },
  watch:{
    alarmInfo(val){
      if(val.params.msg_type === 'face_img_search'){
        if(sessionStorage.getItem('activename')=='one'){
          console.log('one')
          setTimeout(()=>{
            this.axios.get(val.params.msg_url).then(res => {
              this.$emit('onceFace',res.data)
            })
          },300)
        }
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.pic-box{
  background: #fff;
  display flex
  height calc(100vh - 110px)
  .pic-left-box{
    width 230px
    box-shadow 3px 0px 3px rgba(0,0,0,.4)
  }
}
.search-btn{
  margin 50px
}
.pic-search-box{
  width 90%
  margin 10px auto 0
  color #333
}
.sim-box{
  margin-top 15px
  .demonstration,.similarity{
    float left
  }
   .demonstration{
     color #999
     line-height 35px
     padding-left 10px
     font-size 14px;
   }
  .similarity{
    width 160px
    margin-left 6px
  }
}
 .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 0 10px
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar-uploader{
    margin 0 auto
    width: 200px;
    height: 200px;
    .avatar{
      height 100%
      width 100%
    }
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
</style>