From da4f50e1008b815067cf47352747bf6d23b8b043 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期四, 27 一月 2022 13:58:54 +0800
Subject: [PATCH] bug修复
---
src/components/searching/UploadImg.vue | 216 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 130 insertions(+), 86 deletions(-)
diff --git a/src/components/searching/UploadImg.vue b/src/components/searching/UploadImg.vue
index 7ed4555..56eb295 100644
--- a/src/components/searching/UploadImg.vue
+++ b/src/components/searching/UploadImg.vue
@@ -5,14 +5,21 @@
鏁版嵁婧�
<i
class="iconfont iconchushaixuanxiang close"
- style="margin-left:200px;cursor:pointer;color:#ccc"
+ 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,21 +201,21 @@
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()
+ this.VideoPhotoData.uploadDiaplay = false;
+ this.VideoPhotoData.clearStatus();
},
selectChange() {
if (!this.compareTabs.includes("esData") && this.compareTabs.length > 0) {
@@ -182,7 +224,7 @@
this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
}
}
- this.$emit('labelDisabled', true)
+ this.$emit("labelDisabled", true);
return;
}
if (this.compareTabs.includes("esData")) {
@@ -191,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;
@@ -199,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);
}
}
}
@@ -237,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;
@@ -279,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">
@@ -311,7 +355,7 @@
height: 100%;
box-sizing: border-box;
padding: 5px;
- .el-button--info{
+ .el-button--info {
color: #222;
}
.upload-area {
--
Gitblit v1.8.0