<template>
|
<div class="s-upload-img">
|
<div class="upload-area">
|
<h2 class="title">
|
数据源
|
<i
|
class="iconfont iconchushaixuanxiang close"
|
style="margin-left:200px;cursor:pointer;color:#ccc"
|
@click="VideoPhotoData.uploadDiaplay = false"
|
></i>
|
</h2>
|
<p class="compearValue">
|
<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"
|
controls-position="right"
|
:min="1"
|
:max="100"
|
></el-input-number>
|
</p>
|
<div class="upload-img-box">
|
<img :src="'/httpImage/'+tempUploadImg" alt="临时测试" v-show="!displayUpload" class="bigPhoto" />
|
<el-upload
|
ref="upload"
|
:list-type="'picture-card'"
|
action
|
:http-request="uploadImg"
|
v-show="displayUpload"
|
accept="image/*"
|
:limit="1"
|
:on-remove="removeImg"
|
:on-success="uploadSuccess"
|
:on-error="uploadError"
|
:before-upload="beforeUpload"
|
>
|
<i
|
ref="uploadIcon"
|
class="el-icon-upload"
|
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"
|
>
|
<em>点击选择上传图片</em>
|
</span>
|
<!-- <i class="el-icon-upload" style="color:#3D68E1"></i>
|
<div class="el-upload__text" style="font-size:12px;color:#3D68E1">将文件拖到此处，或<em>点击上传</em></div>-->
|
</el-upload>
|
<!-- <el-dialog :visible.sync="dialogVisible">
|
<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">
|
<img
|
: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 />
|
</div>
|
<div class="single-box fl" v-for="(item, index) in unrealSmallPath" :key="index+'t'">
|
<img :src="item
|
? item
|
: tempImg
|
" />
|
</div>
|
</div>
|
<el-select
|
v-if="resReady"
|
v-model="compareTabs"
|
multiple
|
collapse-tags
|
@change="selectChange"
|
style="margin: 15px 0;width: 100%"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in VideoPhotoData.tabsForUploadImg"
|
: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>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Card from "../subComponents/Card";
|
import request from "@/scripts/httpRequest"
|
export default {
|
watch: {
|
"VideoPhotoData.tabsForUploadImg": function (value) {
|
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
|
}
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
computed: {
|
getResImg() {
|
let arr = this.realSmallPath;
|
// let str =
|
// "http://hbimg.b0.upaiyun.com/56ce44d4d6746ef6c88de4d241f76713fc67cf13b05b-ejL0af_fw658";
|
// let time = parseInt(Math.random() * 10);
|
// for (let i = 0; i < time; i++) {
|
// arr.push(str);
|
// }
|
if (arr.length <= 3) {
|
arr.length = 3;
|
} else if (arr.length <= 6) {
|
arr.length = 6;
|
} else if (arr.length <= 9) {
|
arr.length = 9;
|
}
|
return arr;
|
}
|
},
|
data() {
|
return {
|
tempUploadImg: "",
|
tempImg: "/images/search/nobody.png",
|
selectedIcon: "/images/search/duihao.png",
|
bigPhoto: [],
|
displayUpload: true,
|
clickNum: 0,
|
picQuality: 60,
|
dialogImageUrl: "",
|
dialogVisible: false,
|
resReady: false,
|
rightSectionDisplay: true,
|
value: "",
|
compareTabs: ["esData"],
|
realSmallPath: [],
|
unrealSmallPath: [],
|
oneLine: true,
|
multiSelect: false
|
};
|
},
|
mounted() {
|
this.selectChange()
|
this.$nextTick(() => {
|
let scrollContain = this.$refs.rightSection
|
console.log("赋值容器：", scrollContain)
|
this.VideoPhotoData.scrollContainDom = scrollContain
|
})
|
},
|
methods: {
|
selectChange() {
|
if (!this.compareTabs.includes("esData") && this.compareTabs.length > 0) {
|
for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
|
if (this.VideoPhotoData.tabsForUploadImg[i].title === "抓拍库") {
|
this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
|
}
|
}
|
this.$emit('labelDisabled', true)
|
return;
|
}
|
if (this.compareTabs.includes("esData")) {
|
for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
|
if (this.VideoPhotoData.tabsForUploadImg[i].title !== "抓拍库") {
|
this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
|
}
|
}
|
this.$emit('labelDisabled', false)
|
} else {
|
for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
|
this.VideoPhotoData.tabsForUploadImg[i].disabled = false;
|
}
|
}
|
},
|
selected(e, index) {
|
this.clickNum = index
|
},
|
async uploadImg(param) {
|
const fd = new FormData()
|
fd.append('file', param.file)
|
fd.append('picQuality', this.VideoPhotoData.threshold)
|
let res = await request({
|
method: 'post',
|
url: `/data/api-v/dbperson/faceExtract`,
|
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.resReady = true;
|
this.realSmallPath = res.data.smImage
|
this.VideoPhotoData.isHaveRealSmallImg = res.data.smImage.length > 0 ? true : false
|
if (res.data.smImage.length > 3) {
|
this.oneLine = false
|
} else {
|
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
|
for (var i = 0; i < 3 - length; i++) {
|
this.unrealSmallPath.push(this.tempImg)
|
}
|
}
|
}
|
},
|
uploadSuccess(resp, file, fileList) {
|
this.$notify({
|
title: "成功",
|
message: "图片上传成功！",
|
type: "success"
|
});
|
this.resReady = true;
|
console.log("文件列表：", file, fileList)
|
console.log("上传的文件：", this.bigPhoto)
|
},
|
beforeUpload() {
|
this.$refs.uploadIcon.parentNode.classList.add("s-display");
|
console.log("上传之前文件：", this.bigPhoto)
|
},
|
uploadError(err) {
|
this.$notify({
|
title: "失败",
|
message: "图片上传失败！" + err.data,
|
type: "error"
|
});
|
console.log("上传失败", err)
|
this.dialogImageUrl = "";
|
this.dialogVisible = false;
|
this.$refs.uploadIcon.parentNode.classList.remove("s-display");
|
},
|
toAdd(item) {
|
this.CardList.addBaseList.push(item)
|
},
|
removeImg() {
|
this.resReady = false;
|
this.$refs.uploadIcon.parentNode.classList.remove("s-display");
|
},
|
reUpload() {
|
this.displayUpload = true
|
this.$refs.upload.clearFiles();
|
// this.dialogImageUrl = "";
|
// this.dialogVisible = false;
|
this.resReady = false;
|
this.$refs.uploadIcon.parentNode.classList.remove("s-display");
|
},
|
searchStart() {
|
if (this.compareTabs.length == 0) {
|
this.$notify({
|
title: "警告",
|
type: "warning",
|
message: "您还没有选择要比对的目标库",
|
})
|
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"
|
if (this.displayUpload) {
|
this.VideoPhotoData.findPerson()
|
} else {
|
this.VideoPhotoData.findPerson2()
|
}
|
},
|
getDetails(ev, index) {
|
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
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
.s-upload-img {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 5px;
|
.upload-area {
|
width: 300px;
|
height: 100%;
|
//border: 1px solid #ccc;
|
box-sizing: border-box;
|
background: #fff;
|
padding: 15px;
|
// .el-upload-dragger {
|
// display:none!important
|
// }
|
.el-upload--picture-card {
|
width: 260px !important;
|
}
|
.el-upload-list--picture-card {
|
width: 260px !important;
|
.el-upload-list__item {
|
width: 260px !important;
|
img {
|
width: 260px;
|
height: 148px;
|
object-fit: contain;
|
}
|
}
|
}
|
.title {
|
text-align: left;
|
}
|
.compearValue {
|
text-align: left;
|
padding: 15px 0px;
|
}
|
}
|
.res-img-box {
|
width: 100%;
|
overflow: auto;
|
//height: 95px;
|
margin-top: 10px;
|
text-align: left;
|
.single-box {
|
//border: 1px solid #ccc;
|
width: 33%;
|
height: 90px;
|
padding: 5px;
|
box-sizing: border-box;
|
position: relative;
|
img {
|
object-fit: contain;
|
cursor: pointer;
|
border-radius: 3px;
|
}
|
.select {
|
position: absolute;
|
width: 20px;
|
height: 20px;
|
bottom: 5px;
|
right: 5px;
|
}
|
}
|
}
|
}
|
.s-display {
|
display: none !important;
|
}
|
|
.bigPhoto {
|
width: 148px;
|
height: 148px;
|
border-radius: 4px;
|
}
|
.el-upload-list__item {
|
transition: none !important;
|
}
|
.close:hover {
|
color: #3d68e1 !important;
|
}
|
</style>
|
