修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/components/searching/uploadForModel.vue

@@ -1,15 +1,22 @@
<template>
  <div class="left-section1">
    <div class="source">
      <h2 class="title">数据源</h2>
      <div class="icon">
        <i class="iconfont iconchushaixuanxiang" @click="closeUpload()"></i>
      </div>
      <!-- <h2 class="title">数据源</h2> -->
      <!-- <div class="icon">
        <i class="iconfont iconchushaixuanxiang" @click="closeUpload"></i>
      </div> -->
    </div>
    <p class="compearValue">
      <span
        style="font-family: PingFangSC-Regular;font-size: 13px;color: #333333;letter-spacing: 0.28px;margin-right:10px"
      >对比阈值</span>
        style="
          letter-spacing: 0.4px;
          margin-right: 10px;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
        "
        >对比阈值</span
      >
      <el-input-number
        size="mini"
        v-model="picQuality"
@@ -17,6 +24,10 @@
        :min="1"
        :max="100"
      ></el-input-number>

      <i class="iconfont iconchushaixuanxiang" style="    font-size: 16px;
    color: #d1d1d1;
    cursor: pointer;float:right;" @click="closeUpload"></i>
    </p>
    <div class="upload-img-box">
      <el-upload
@@ -31,68 +42,105 @@
        :on-error="uploadError"
        :before-upload="beforeUpload"
      >
        <i
        <!-- <i
          ref="uploadIcon"
          class="el-icon-upload"
          style="color:#3D68E1;font-size:60px;position:relative;left:50px"
          style="
            color: #3d68e1;
            font-size: 60px;
            position: relative;
            left: 50px;
          "
        ></i> -->
        <i class="iconfont iconshangchuantupian-11"
          ref="uploadIcon"
        style="
            color: rgb(187,210,249);
            font-size: 70px;
            position: relative;
            left: 50px;    top: -10px;
          "
        ></i>
        <span
          class="el-upload__text"
          style="font-size:12px;color:#3D68E1;position:relative;top:25px;left:-30px"
          style="
               font-size: 12px;
    color: #999999;
    position: relative;
    top: 20px;
    left: -30px;
          "
        >
          <em>点击选择上传图片</em>
        </span>
      </el-upload>
    </div>
    <div class="res-img-box" v-if="resReady" :style="oneLine? 'height:95px':'height:185px'">
      <div class="single-box fl" v-for="(item, index) in realSmallPath" :key="index">
    <div
      class="res-img-box"
      v-if="resReady"
      :style="oneLine ? 'height:95px' : 'height:185px'"
    >
      <div
        class="single-box fl"
        v-for="(item, index) in realSmallPath"
        :key="index"
      >
        <img
          :src="item
              ? '/httpImage/'+item
              : tempImg
          "
          @click="selected($event,index)"
          style="max-height:100%"
          :style="index == clickNum ? 'border:1px solid #FF7733':''"
          :src="item ? '/httpImage/' + item : tempImg"
          @click="selected($event, index)"
          style="max-height: 100%"
          :style="index == clickNum ? 'border:1px solid #FF7733' : ''"
        />
        <img class="select" v-show="index == clickNum" :src="selectedIcon" alt />
        <img
          class="select"
          v-show="index == clickNum"
          :src="selectedIcon"
          alt
        />
      </div>
      <div class="single-box fl" v-for="(item, index) in unrealSmallPath" :key="index+'t'">
        <img :src="item
                ? item
                : tempImg
            " />
      <div
        class="single-box fl"
        v-for="(item, index) in unrealSmallPath"
        :key="index + 't'"
      >
        <img :src="item ? item : tempImg" />
      </div>
    </div>
    <el-button-group v-if="resReady" style="margin-top:10px">
    <el-button-group v-if="resReady" style="margin-top: 10px">
      <el-button type="info" size="small" @click="reUpload">重新上传</el-button>
      <el-button type="primary" size="small" style="margin-left:10px" @click="searchStart">开始检索</el-button>
      <el-button
        type="primary"
        size="small"
        style="margin-left: 10px"
        @click="searchStart"
        >开始检索</el-button
      >
    </el-button-group>
  </div>
</template>

<script>
import request from "@/scripts/httpRequest"
import searchPhotoFromBase from "@/api/baseLibrary"
import request from "@/scripts/httpRequest";
import searchPhotoFromBase from "@/api/baseLibrary";
export default {
  watch: {
    "VideoPhotoData.tabsForUploadImg": function (value) {
      this.selectChange()
      this.selectChange();
    },
    "VideoPhotoData.uploadImg": {
      handler(val) {
        // console.log('val:::', val)
        if (val !== "") {
          this.tempUploadImg = val
          this.realSmallPath = [val]
          this.unrealSmallPath = [this.tempImg, this.tempImg]
          this.resReady = true
          this.displayUpload = false
          this.tempUploadImg = val;
          this.realSmallPath = [val];
          this.unrealSmallPath = [this.tempImg, this.tempImg];
          this.resReady = true;
          this.displayUpload = false;
        }
      },
      immediate: true,
      deep: true
    }
      deep: true,
    },
  },
  computed: {
    getResImg() {
@@ -111,13 +159,13 @@
        arr.length = 9;
      }
      return arr;
    }
    },
  },
  data() {
    return {
      tempUploadImg: "",
      tempImg: require("../../assets/nobody.png"),
      selectedIcon: require("../../assets/duihao.png"),
      tempImg: "/images/search/nobody.png",
      selectedIcon: "/images/search/duihao.png",
      bigPhoto: [],
      displayUpload: true,
      clickNum: 0,
@@ -130,11 +178,11 @@
      realSmallPath: [],
      unrealSmallPath: [],
      oneLine: true,
      multiSelect: false
      multiSelect: false,
    };
  },
  mounted() {
    this.selectChange()
    this.selectChange();
  },
  methods: {
    selectChange() {
@@ -144,7 +192,7 @@
            this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
          }
        }
        this.$emit('labelDisabled', true)
        this.$emit("labelDisabled", true);
        return;
      }
      if (this.compareTabs.includes("esData")) {
@@ -153,7 +201,7 @@
            this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
          }
        }
        this.$emit('labelDisabled', false)
        this.$emit("labelDisabled", false);
      } else {
        for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
          this.VideoPhotoData.tabsForUploadImg[i].disabled = false;
@@ -161,65 +209,66 @@
      }
    },
    selected(e, index) {
      console.log(index, '选中了第几个', e)
      this.clickNum = index
      console.log(index, "选中了第几个", e);
      this.clickNum = index;
    },
    async uploadImg(param) {
      const fd = new FormData()
      fd.append('file', param.file)
      fd.append('picQuality', this.picQuality)
      console.log("1121231", fd)
      const fd = new FormData();
      fd.append("file", param.file);
      fd.append("picQuality", this.picQuality);
      console.log("1121231", fd);
      let res = await request({
        method: 'post',
        method: "post",
        url: `/data/api-v/dbperson/faceExtract`,
        data: fd
      })
      this.unrealSmallPath.length = 0
      console.log("切图返回：", res)
        data: fd,
      });
      this.unrealSmallPath.length = 0;
      console.log("切图返回：", res);
      if (res.success) {
        document.querySelector(".el-upload-list").querySelector("img").src = "/httpImage/" + res.data.uploadImage
        this.realSmallPath = res.data.smImage
        document.querySelector(".el-upload-list").querySelector("img").src =
          "/httpImage/" + res.data.uploadImage;
        this.realSmallPath = res.data.smImage;
        if (res.data.smImage.length > 3) {
          this.oneLine = false
          this.oneLine = false;
        } else {
          this.oneLine = true
          this.oneLine = true;
        }
        if (res.data.smImage.length % 3 !== 0) {
          // 用虚拟人像补全整行
          const length = res.data.smImage.length % 3
          console.log("看看length的值", length)
          this.unrealSmallPath.length = 0
          const length = res.data.smImage.length % 3;
          console.log("看看length的值", length);
          this.unrealSmallPath.length = 0;
          for (var i = 0; i < 3 - length; i++) {
            this.unrealSmallPath.push(this.tempImg)
            this.unrealSmallPath.push(this.tempImg);
          }
        }
        console.log('--------------：', param)
        console.log("--------------：", param);
      }
    },
    uploadSuccess(resp, file, fileList) {
      this.$notify({
        title: "成功",
        message: "图片上传成功！",
        type: "success"
        type: "success",
      });
      this.resReady = true;
      console.log("文件列表：", file, fileList)
      console.log("上传的文件：", this.bigPhoto)
      console.log("文件列表：", file, fileList);
      console.log("上传的文件：", this.bigPhoto);
    },
    closeUpload() {
      this.$emit("closeUpload")
      this.$emit("closeUpload");
    },
    beforeUpload() {
      this.$refs.uploadIcon.parentNode.classList.add("s-display");
      console.log("上传之前文件：", this.bigPhoto)
      console.log("上传之前文件：", this.bigPhoto);
    },
    uploadError(err) {
      this.$notify({
        title: "失败",
        message: "图片上传失败！" + err,
        type: "warning"
        type: "warning",
      });
      console.log("上传失败", err)
      console.log("上传失败", err);
      this.dialogImageUrl = "";
      this.dialogVisible = false;
      this.$refs.uploadIcon.parentNode.classList.remove("s-display");
@@ -229,7 +278,7 @@
      this.$refs.uploadIcon.parentNode.classList.remove("s-display");
    },
    reUpload() {
      this.displayUpload = true
      this.displayUpload = true;
      this.$refs.upload.clearFiles();
      this.dialogImageUrl = "";
      this.dialogVisible = false;
@@ -238,10 +287,10 @@
    },
    searchStart() {
      this.BaseManageData.threshold = this.picQuality;
      this.BaseManageData.picUrl = this.realSmallPath[this.clickNum]
      this.BaseManageData.searchPhotoFromBase()
      this.BaseManageData.picUrl = this.realSmallPath[this.clickNum];
      this.BaseManageData.searchPhotoFromBase();
    },
  }
  },
};
</script>
<style lang="scss">
@@ -269,7 +318,8 @@
    }
  }
  .el-upload--picture-card {
    width: 260px !important;
    width: 260px !important;    background-color: #fff;

  }
  .el-upload-list--picture-card {
    width: 260px !important;
@@ -287,7 +337,7 @@
  }
  .compearValue {
    text-align: left;
    padding: 15px 0px;
    padding-bottom: 20px;
    .el-input-number__decrease {
      .el-icon-arrow-down {
        font-size: 12px;
@@ -319,6 +369,8 @@
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    // display: inline-block;
    // vertical-align: middle;
    img {
      width: 100%;
      cursor: pointer;