修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/components/searching/UploadImg.vue

@@ -5,14 +5,21 @@
        数据源
        <i
          class="iconfont iconchushaixuanxiang close"
          style="margin-left:200px;cursor:pointer;color:#ccc"
          @click="VideoPhotoData.uploadDiaplay = false"
          style="margin-left: 200px; cursor: pointer; color: #ccc"
          @click="closeUploadImg"
        ></i>
      </h2>
      <p class="compearValue">
        <span
          style="font-family: PingFangSC-Regular;font-size: 13px;color: #333333;letter-spacing: 0.28px;margin-right:10px"
        >对比阈值</span>
          style="
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: #333333;
            letter-spacing: 0.28px;
            margin-right: 10px;
          "
          >对比阈值</span
        >
        <el-input-number
          size="mini"
          v-model="VideoPhotoData.threshold"
@@ -22,7 +29,12 @@
        ></el-input-number>
      </p>
      <div class="upload-img-box">
        <img :src="'/httpImage/'+tempUploadImg" alt="临时测试" v-show="!displayUpload" class="bigPhoto" />
        <img
          :src="'/httpImage/' + tempUploadImg"
          alt="临时测试"
          v-show="!displayUpload"
          class="bigPhoto"
        />
        <el-upload
          ref="upload"
          :list-type="'picture-card'"
@@ -39,11 +51,22 @@
          <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>
          <span
            class="el-upload__text"
            style="font-size:12px;color:#3D68E1;position:relative;top:25px;left:-30px"
            style="
              font-size: 12px;
              color: #3d68e1;
              position: relative;
              top: 25px;
              left: -30px;
            "
          >
            <em>点击选择上传图片</em>
          </span>
@@ -54,24 +77,35 @@
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>-->
      </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-select
@@ -80,20 +114,28 @@
        multiple
        collapse-tags
        @change="selectChange"
        style="margin: 15px 0;width: 100%"
        style="margin: 15px 0; width: 100%"
        placeholder="请选择"
      >
        <el-option
          v-for="item in VideoPhotoData.tabsForUploadImg"
          :key="item.key+'p'"
          :key="item.key + 'p'"
          :label="item.title"
          :disabled="item.disabled"
          :value="item.key"
        ></el-option>
      </el-select>
      <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-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-group>
    </div>
  </div>
@@ -101,26 +143,26 @@

<script>
import Card from "../subComponents/Card";
import request from "@/scripts/httpRequest"
import request from "@/scripts/httpRequest";
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() {
@@ -139,7 +181,7 @@
        arr.length = 9;
      }
      return arr;
    }
    },
  },
  data() {
    return {
@@ -159,18 +201,22 @@
      realSmallPath: [],
      unrealSmallPath: [],
      oneLine: true,
      multiSelect: false
      multiSelect: false,
    };
  },
  mounted() {
    this.selectChange()
    this.selectChange();
    this.$nextTick(() => {
      let scrollContain = this.$refs.rightSection
      console.log("赋值容器：", scrollContain)
      this.VideoPhotoData.scrollContainDom = scrollContain
    })
      let scrollContain = this.$refs.rightSection;
      console.log("赋值容器：", scrollContain);
      this.VideoPhotoData.scrollContainDom = scrollContain;
    });
  },
  methods: {
    closeUploadImg() {
      this.VideoPhotoData.uploadDiaplay = false;
      this.VideoPhotoData.clearStatus();
    },
    selectChange() {
      if (!this.compareTabs.includes("esData") && this.compareTabs.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
@@ -178,7 +224,7 @@
            this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
          }
        }
        this.$emit('labelDisabled', true)
        this.$emit("labelDisabled", true);
        return;
      }
      if (this.compareTabs.includes("esData")) {
@@ -187,7 +233,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;
@@ -195,36 +241,38 @@
      }
    },
    selected(e, index) {
      this.clickNum = index
      this.clickNum = index;
    },
    async uploadImg(param) {
      const fd = new FormData()
      fd.append('file', param.file)
      fd.append('picQuality', this.VideoPhotoData.threshold)
      const fd = new FormData();
      fd.append("file", param.file);
      fd.append("picQuality", this.VideoPhotoData.threshold);
      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
        document.querySelector(".el-upload-list").querySelector("img").src =
          "/httpImage/" + res.data.uploadImage;
        this.resReady = true;
        this.realSmallPath = res.data.smImage
        this.VideoPhotoData.isHaveRealSmallImg = res.data.smImage.length > 0 ? true : false
        this.realSmallPath = res.data.smImage;
        this.VideoPhotoData.isHaveRealSmallImg =
          res.data.smImage.length > 0 ? true : false;
        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);
          }
        }
      }
@@ -233,36 +281,36 @@
      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);
    },
    beforeUpload() {
      this.$refs.uploadIcon.parentNode.classList.add("s-display");
      console.log("上传之前文件：", this.bigPhoto)
      console.log("上传之前文件：", this.bigPhoto);
    },
    uploadError(err) {
      this.$notify({
        title: "失败",
        message: "图片上传失败！" + err.data,
        type: "error"
        message: err.msg,
        type: "error",
      });
      console.log("上传失败", err)
      console.log("上传失败", err);
      this.dialogImageUrl = "";
      this.dialogVisible = false;
      this.$refs.uploadIcon.parentNode.classList.remove("s-display");
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item)
      this.CardList.addBaseList.push(item);
    },
    removeImg() {
      this.resReady = false;
      this.$refs.uploadIcon.parentNode.classList.remove("s-display");
    },
    reUpload() {
      this.displayUpload = true
      this.displayUpload = true;
      this.$refs.upload.clearFiles();
      // this.dialogImageUrl = "";
      // this.dialogVisible = false;
@@ -275,30 +323,30 @@
          title: "警告",
          type: "warning",
          message: "您还没有选择要比对的目标库",
        })
        return
        });
        return;
      }
      this.rightSectionDisplay = true;
      this.VideoPhotoData.uploadType = true;
      this.VideoPhotoData.picUrl = this.realSmallPath[this.clickNum]
      this.VideoPhotoData.compareTabs = this.compareTabs
      console.log("选的库：", this.compareTabs)
      this.VideoPhotoData.showType = "findByPic"
      this.VideoPhotoData.picUrl = this.realSmallPath[this.clickNum];
      this.VideoPhotoData.compareTabs = this.compareTabs;
      console.log("选的库：", this.compareTabs);
      this.VideoPhotoData.showType = "findByPic";
      if (this.displayUpload) {
        this.VideoPhotoData.findPerson()
        this.VideoPhotoData.findPerson();
      } else {
        this.VideoPhotoData.findPerson2()
        this.VideoPhotoData.findPerson2();
      }
    },
    getDetails(ev, index) {
      this.CardList.datalist = this.VideoPhotoData.persons
      this.CardList.datalist = this.VideoPhotoData.persons;
      let obj = this.CardList.datalist[index];
      this.CardList.details = Array.from(
        new Set([...this.CardList.details, ...[obj]])
      );
      this.VideoPhotoData.activeCard = obj.activeObject.id
    }
  }
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
  },
};
</script>
<style lang="scss">
@@ -307,6 +355,9 @@
  height: 100%;
  box-sizing: border-box;
  padding: 5px;
  .el-button--info {
    color: #222;
  }
  .upload-area {
    width: 300px;
    height: 100%;
@@ -352,7 +403,10 @@
      padding: 5px;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      vertical-align: middle;
      img {
        width: 100%;
        object-fit: contain;
        cursor: pointer;
        border-radius: 3px;