<template>
|
<div class="left-section">
|
<div class="source">
|
<h2 class="title">数据源</h2>
|
<icon class="iconfont iconchushaixuanxiang" @click="closeUpload()"></icon>
|
</div>
|
<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="picQuality"
|
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>
|
</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">
|
<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>
|
</template>
|
|
<script>
|
import request from "@/scripts/httpRequest"
|
export default {
|
watch: {
|
"TreeDataPool.selectedNodes": function (value) {
|
this.VideoPhotoData.treeNodes = value
|
this.VideoPhotoData.findPerson()
|
},
|
"TreeDataPool.selectedNodes": function (value) {
|
this.VideoPhotoData.searchTime = value
|
this.VideoPhotoData.findPerson()
|
},
|
"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,
|
value: "",
|
compareTabs: ["esData"],
|
realSmallPath: [],
|
unrealSmallPath: [],
|
oneLine: true,
|
multiSelect: false
|
};
|
},
|
mounted() {
|
this.selectChange()
|
},
|
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) {
|
// 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)
|
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 = "http://" + res.data.uploadImage
|
this.realSmallPath = res.data.smImage
|
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
|
this.unrealSmallPath.length = 0
|
for (var i = 0; i < 3 - length; i++) {
|
this.unrealSmallPath.push(this.tempImg)
|
}
|
}
|
console.log('--------------：', param)
|
}
|
},
|
uploadSuccess(resp, file, fileList) {
|
this.$notify({
|
title: "成功",
|
message: "图片上传成功！",
|
type: "success"
|
});
|
this.resReady = true;
|
console.log("文件列表：", file, fileList)
|
console.log("上传的文件：", this.bigPhoto)
|
},
|
closeUpload() {
|
this.$emit("closeUpload")
|
},
|
beforeUpload() {
|
this.$refs.uploadIcon.parentNode.classList.add("s-display");
|
console.log("上传之前文件：", this.bigPhoto)
|
},
|
uploadError(err) {
|
this.$notify({
|
title: "失败",
|
message: "图片上传失败！" + err,
|
type: "warning"
|
});
|
console.log("上传失败", err)
|
this.dialogImageUrl = "";
|
this.dialogVisible = false;
|
this.$refs.uploadIcon.parentNode.classList.remove("s-display");
|
},
|
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() {
|
this.VideoPhotoData.rightSectionDisplay = true;
|
this.VideoPhotoData.picUrl = this.realSmallPath[this.clickNum]
|
this.VideoPhotoData.compareTabs = this.compareTabs
|
this.VideoPhotoData.showType = "findByPic"
|
this.VideoPhotoData.findPerson()
|
},
|
}
|
};
|
</script>
|
<style lang="scss">
|
.left-section {
|
width: 300px;
|
height: 100%;
|
//border: 1px solid #ccc;
|
box-sizing: border-box;
|
background: #fff;
|
//position: relative;
|
//left: -200px;
|
float: left;
|
margin-right: 15px;
|
padding: 15px;
|
// .el-upload-dragger {
|
// display:none!important
|
// }
|
.source {
|
position: relative;
|
icon {
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
cursor: pointer;
|
}
|
}
|
.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;
|
}
|
}
|
.right-section {
|
width: calc(100% - 315px);
|
height: 100%;
|
float: left;
|
overflow: auto;
|
}
|
.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 {
|
width: 100%;
|
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;
|
}
|
</style>
|
