<template>
|
<div
|
style="width:1200px; min-width:1200px; width:expression_r(document.body.clientWidth < 1200 ?'1200px':'auto'); max-width:1800px;"
|
>
|
<div style="height:210px;width:100%">
|
<div style="float:left;width:35%;height:99%">
|
<div style="float:left;font-size:20px;margin:0px 0px;width:100%">
|
<b>数据源：</b>
|
</div>
|
<div style="float:left;width:100%;margin:0px 0px;">
|
<div style="float:left;width:60%;height:100%;margin:50px 0px 0px 10px;">
|
<silider1 ref="silider1" @changeimg="changeimg" slideWidth="100px"/>
|
</div>
|
<div style="float:left;width:40%;height:100%;margin:0px -50px;">
|
<div style="background:#f3f8fb">
|
<div style="float:left;width:100%;height:110px;margin:0px 0px;">
|
<httpImg
|
:src="imgurl"
|
style="float:left;height:110px;max-width:100%;max-height:100%;"
|
></httpImg>
|
</div>
|
<div style="float:left;width:100%;height:auto;margin:0px 0px;">
|
<button
|
@click="orbit2()"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查看轨迹"
|
>
|
<span style="font-size:17px" class="ion ion-logo-polymer"></span>
|
</button>
|
<button
|
@click="controlSub()"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="加入布控"
|
>
|
<span style="font-size:17px" class="d-block fas fa-shield-alt pb5"></span>
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 竖行分割线 -->
|
<div style="float:left;width:1px;height:99%">
|
<div style="float:left;width: 1px;height: 200px; background:#dfe6ec;margin:0px -90px;"></div>
|
</div>
|
<!-- 竖行分割线 end-->
|
<div style="float:left;width:55%;margin:0px -40px;height:99%">
|
<div style="float:left;font-size:20px;margin:0px 0px;width:100%">
|
<b>底库对比：</b>
|
</div>
|
<div style="float:left;width:100%;margin:5px 0px;">
|
<mapSilider
|
ref="mapSilider"
|
slideWidth="280px"
|
imgwidth="120"
|
imgheight="120"
|
style="margin:0px -30px;"
|
/>
|
</div>
|
</div>
|
<hr style="float:left;margin:0% 0px 0px 0px;height:1%;width:100%">
|
</div>
|
<div style="float:left;margin:30px 0px 0px 0px;;height:auto;width:100%" class="row bg-white">
|
<div
|
class="col-md-12 col-lg-3 mb-4"
|
style="margin:0px 0px"
|
v-for="(item,index) in list"
|
:key="index"
|
>
|
<div style="float:left;width:40%;text-align:center;">
|
<div style="width: 120px;height: 140px;">
|
<httpImg
|
v-if="item.picSmUrl!=null"
|
v-bind:src="item.picSmUrl"
|
style="max-width: 120px;max-height: 120px;background:#f1f1f1;"
|
></httpImg>
|
<div v-if="item.picSmUrl!=null" style="float:left;margin:5px 0px 0px 0px">
|
<button
|
@click="detail(item)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查看详情"
|
>
|
<span style="font-size:17px" class="far fa-list-alt"></span>
|
</button>
|
<button
|
@click="searchPerson(item)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查找此人"
|
>
|
<span style="font-size:17px" class="fas fa-user-circle"></span>
|
</button>
|
<button
|
@click="orbit(item)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查看轨迹"
|
>
|
<span style="font-size:17px" class="ion ion-logo-polymer"></span>
|
</button>
|
<button
|
@click="control(item)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="加入布控"
|
>
|
<span style="font-size:17px" class="d-block fas fa-shield-alt pb5"></span>
|
</button>
|
</div>
|
</div>
|
<!-- <div v-if="item.picSmUrl!=null" style="float:left;margin:5px 5px">
|
<button style="float:left;margin:0px 0px 0px -3px" @click="detail(item)" type="button" class="btn btn-outline-primary icon-btn borderless btn-sm " title="查看详情"><span style="font-size:17px" class=" far fa-list-alt"></span></button>
|
<button style="float:left;margin:0px 0px 0px -3px" @click="searchPerson(item)" type="button" class="btn btn-outline-primary icon-btn borderless btn-sm" title="查找此人"><span style="font-size:17px" class="fas fa-user-circle"></span></button>
|
<button style="float:left;margin:0px 0px 0px -3px" @click="orbit(item)" type="button" class="btn btn-outline-primary icon-btn borderless btn-sm" title="查看轨迹"><span style="font-size:17px" class="ion ion-logo-polymer"></span></button>
|
<button style="float:left;margin:0px 0px 0px -3px" @click="control(item)" type="button" class="btn btn-outline-primary icon-btn borderless btn-sm" title="加入布控"><span style="font-size:17px" class="d-block fas fa-shield-alt pb5"></span></button>
|
</div>-->
|
</div>
|
|
<div style="float:left;width:65%;margin:0px 0px 0px -25px">
|
<ul v-if="item.picSmUrl!=null" style="list-style-type:none;line-height:1.4em;">
|
<li style="color:#76bef7;font-size:32px;">
|
<b> {{item.likePer}}%</b>
|
</li>
|
<br>
|
<li
|
class="omitmap"
|
:title="item.picDate.substring(0,19)"
|
> {{item.picDate.substring(0,19)}}</li>
|
<li class="omitmap" :title="item.picAddress"> {{item.picAddress}}</li>
|
<li class="omitmap"> {{item.Gender}} {{item.Race}} {{item.Age}}</li>
|
<li
|
:title="item.BaseName"
|
v-if="item.sdkType==='1'||item.sdkType==='人脸'"
|
:class="item.personIsHub==='1'||item.personIsHub==='4'? 'red1 omitmap' : 'green1 omitmap' "
|
>
|
<b> {{item.BaseName}}</b>
|
</li>
|
<li
|
:title="item.sdkType"
|
v-if="item.sdkType!=='1'&&item.sdkType!=='人脸'"
|
:class="item.personIsHub==='1'||item.personIsHub==='4'? 'red1 omitmap' : 'green1 omitmap' "
|
>
|
<b> {{item.sdkType}}</b>
|
</li>
|
<li class="omitmap" :title="item.miaoshu"> {{item.miaoshu}}</li>
|
</ul>
|
</div>
|
</div>
|
|
<div class="pt20" style="width:100%">
|
<b-pagination
|
class="justify-content-center m-0"
|
v-if="total"
|
v-model="currentPage"
|
@change="changePage"
|
:total-rows="total"
|
:per-page="length"
|
/>
|
</div>
|
|
<div>
|
<!-- <siliderModel :BigPicParam="BigPic" :accompanyPersonParam="accompanyPerson" :parentData="childrenData" ref="model1"></siliderModel> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import mapSilider from '../silider/mapSilider'
|
import silider1 from '../silider/siliderForMaplistLeft'
|
import siliderModel from '../model/siliderModel'
|
import common from '../searchList/commonList'
|
import { findLikerPics } from '../../../../server/searchImg.js'
|
import siliderModelNew from '../model/siliderModelNew'
|
import siliderModelMV from '../model/siliderModelMV'
|
import {
|
addFromRetrieve,
|
personDetail,
|
accompanyPerson,
|
getVideoByCServer,
|
getBigPic
|
} from '../../../../server/searchList/commomList.js'
|
import { mapActions } from 'vuex'
|
export default {
|
components: {
|
personDetail,
|
addFromRetrieve,
|
mapSilider,
|
silider1,
|
siliderModel,
|
common,
|
findLikerPics,
|
mapActions,
|
accompanyPerson
|
},
|
|
data() {
|
return {
|
data: [],
|
featureBase: '',
|
featureBaseList: [],
|
BigPic: {},
|
accompanyPerson: {},
|
childrenData: {},
|
mapParam: {},
|
leftMap: [],
|
length: 40,
|
currentPage: 1,
|
total: 0,
|
list: [],
|
select: -1,
|
show: false,
|
imgurl: ''
|
}
|
},
|
created() {},
|
watch: {
|
list: {
|
handler(newName, oldName) {
|
if (newName && newName !== oldName) {
|
for (let i = 0; i < this.list.length; i++) {
|
this.list[i].miaoshu = ' '
|
if (this.list[i].name) {
|
this.list[i].miaoshu = this.list[i].name
|
if (this.list[i].gender) {
|
this.list[i].miaoshu =
|
this.list[i].miaoshu + '/' + this.list[i].gender
|
}
|
if (this.list[i].cardId) {
|
this.list[i].miaoshu =
|
this.list[i].miaoshu + '/' + this.list[i].cardId
|
}
|
if (this.list[i].no) {
|
this.list[i].miaoshu =
|
this.list[i].miaoshu + '/' + this.list[i].no
|
}
|
if (this.list[i].phone) {
|
this.list[i].miaoshu =
|
this.list[i].miaoshu + '/' + this.list[i].phone
|
}
|
if (this.list[i].orgName) {
|
this.list[i].miaoshu =
|
this.list[i].miaoshu + '/' + this.list[i].orgName
|
}
|
}
|
}
|
}
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
async updateLeft_toDO(param) {
|
let json = {
|
liker: param.liker,
|
path: param.path,
|
page: param.page,
|
length: param.length,
|
startDate: param.startDate,
|
endDate: param.endDate
|
}
|
let res = await findLikerPics(json)
|
console.log(res, '改变左侧大图后返回的数据')
|
// 改变右侧列表展示
|
this.$refs.mapSilider && this.$refs.mapSilider.setData(res.data.baseList)
|
// 改变底层的列表展示
|
this.list = res.data.esList
|
// 改变分页总数
|
this.total = res.data.esDataTotle
|
},
|
async changePage(e) {
|
this.currentPage = parseInt(e)
|
this.mapParam.page = this.currentPage
|
let res = await findLikerPics(this.mapParam)
|
// 改变底层的列表展示
|
this.list = res.data.esList
|
},
|
async getAccompanyPerson(paramw) {
|
this.data.splice(0, this.data.length)
|
// let res = await accompanyPerson(this.params)
|
let res = await accompanyPerson(paramw)
|
if (res && res.success) {
|
this.data = res.data.personList
|
// this.data.push(this.data[0])
|
// this.data.push(this.data[0])
|
// this.data.push(this.data[0])
|
// this.data.push(this.data[0])
|
// this.data.push(this.data[0])
|
}
|
for (let i = 0; i < this.data.length; i++) {
|
if (this.data[i].name) {
|
this.data[i].miaoshu = this.data[i].name
|
if (this.data[i].gender) {
|
this.data[i].miaoshu =
|
this.data[i].miaoshu + '/' + this.data[i].gender
|
}
|
if (this.data[i].cardId) {
|
this.data[i].miaoshu =
|
this.data[i].miaoshu + '/' + this.data[i].cardId
|
}
|
if (this.data[i].no) {
|
this.data[i].miaoshu = this.data[i].miaoshu + '/' + this.data[i].no
|
}
|
if (this.data[i].phone) {
|
this.data[i].miaoshu =
|
this.data[i].miaoshu + '/' + this.data[i].phone
|
}
|
if (this.data[i].orgName) {
|
this.data[i].miaoshu =
|
this.data[i].miaoshu + '/' + this.data[i].orgName
|
}
|
}
|
}
|
},
|
async detail(item1) {
|
const BigPicjson = {
|
videoNum: item1.videoNum,
|
picDate: item1.picDate,
|
videoIp: item1.videoIp,
|
indeviceid: item1.indeviceid,
|
imgKey: item1.imgKey
|
}
|
let videoRes = await getVideoByCServer(BigPicjson)
|
let videoUrl = ''
|
if (videoRes && videoRes.success) {
|
videoUrl = videoRes.data.filepath
|
}
|
console.log(videoUrl, 'videoUrl')
|
if (item1.sdkType === '1') {
|
const accompanyPersonjson = {
|
videoReqNum: item1.videoReqNum,
|
picDate: item1.picDate,
|
personId: item1.personId,
|
Id: item1.Id
|
}
|
this.getAccompanyPerson(accompanyPersonjson)
|
let res = await getBigPic(BigPicjson)
|
// if (this.data.length > 0) {
|
// for (let i = 0; i < 5; i++) {
|
// this.data.push(this.data[0])
|
// }
|
// }
|
this.$layer.iframe({
|
content: {
|
content: siliderModelMV,
|
parent: this,
|
data: {
|
url1: res && res.success ? res.data.img_url : '',
|
url2: videoUrl,
|
parentDataStr: JSON.stringify({ ...item1 }),
|
accompanyPersonArrayStr: JSON.stringify(this.data)
|
}
|
},
|
area: ['850px', '620px'],
|
title: '详情',
|
maxmin: true,
|
shade: false
|
})
|
} else {
|
this.$layer.iframe({
|
content: {
|
content: siliderModelNew,
|
parent: this,
|
data: {
|
url1: item1.picSmUrl,
|
url2: videoUrl
|
}
|
},
|
area: 'auto',
|
title: '详情',
|
maxmin: true,
|
shade: false
|
})
|
}
|
// const BigPicjson = {
|
// videoNum: item1.videoNum,
|
// picDate: item1.picDate,
|
// videoIp: item1.videoIp,
|
// indeviceid: item1.indeviceid,
|
// imgKey: item1.imgKey
|
// }
|
// this.BigPic = {...BigPicjson}
|
// const accompanyPersonjson = {
|
// videoReqNum: item1.videoReqNum,
|
// picDate: item1.picDate,
|
// personId: item1.personId,
|
// Id: item1.Id
|
// }
|
// this.accompanyPerson = {...accompanyPersonjson}
|
// if (item1.personId && item1.personId !== '') {
|
// let res = await personDetail({id: item1.Id, personId: item1.personId})
|
// if (res && res.success) {
|
// this.childrenData = res.data
|
// } else {
|
// this.childrenData = {...item1}
|
// }
|
// } else {
|
// this.childrenData = {...item1}
|
// }
|
// this.$refs.model1.showModel(BigPicjson)
|
},
|
async searchPerson(obj) {
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query:
|
'tabType=table&tableType=mapList&urlPath=' +
|
obj.picSmUrl +
|
'&liker=' +
|
this.$parent.threshold
|
})
|
},
|
orbit(obj) {
|
localStorage.removeItem('esList') // 清除esList
|
localStorage.setItem('personId', obj.personId)
|
let jsonstr = localStorage.getItem('sear')
|
let json = JSON.parse(jsonstr)
|
json.path = obj.picSmUrl
|
localStorage.setItem('searParams', JSON.stringify(json))
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=map'
|
})
|
},
|
orbit2() {
|
localStorage.removeItem('esList') // 清除esList
|
localStorage.setItem('personId', '')
|
let jsonstr = localStorage.getItem('sear')
|
let json = JSON.parse(jsonstr)
|
json.path = this.imgurl
|
localStorage.setItem('searParams', JSON.stringify(json))
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=map'
|
})
|
},
|
// 调用子组件的方法。来进行布控
|
controlSub() {
|
let json = {
|
path: this.imgurl,
|
featureBase64: this.featureBase
|
}
|
let res = addFromRetrieve(json)
|
if (res && res.success) {
|
this.$toast({
|
type: 'primary',
|
message: '已加入待布控表',
|
toastHorizontalPosition: 'right'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '加入待布控表失败',
|
toastHorizontalPosition: 'right'
|
})
|
}
|
},
|
async control(obj) {
|
let json = {
|
dbInfos: [
|
{
|
cluId: obj.cluster_id,
|
devId: obj.indeviceid
|
}
|
],
|
imgUrl: obj.picSmUrl,
|
featureBase64: obj.FaceFeature,
|
idCard: obj.cardId ? obj.cardId : ''
|
}
|
let res = addFromRetrieve(json)
|
if (res && res.success) {
|
this.$toast({
|
type: 'primary',
|
message: '已加入待布控表',
|
toastHorizontalPosition: 'right'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '加入待布控表失败',
|
toastHorizontalPosition: 'right'
|
})
|
}
|
},
|
changeimg(url, index) {
|
// 修改左侧大图的图片路径
|
this.imgurl = url
|
// 修改以图搜图的图片参数
|
this.mapParam.path = url
|
// 设置要查询的页数为第一页
|
this.mapParam.page = 1
|
this.featureBase =
|
this.featureBaseList && this.featureBaseList.length > 0
|
? this.featureBaseList[index]
|
: ''
|
this.updateLeft_toDO(this.mapParam)
|
},
|
async getList(resdata) {
|
console.log(resdata, 'mapLIst的构建数据')
|
// 记录数据源图片的特征值
|
this.featureBaseList = resdata.result.featureBase64
|
// 左侧列表展示
|
this.$refs.silider1 &&
|
this.$refs.silider1.createList(
|
resdata.result.smallPhotoPath,
|
resdata.result.index
|
)
|
// 左侧的大图显示
|
this.imgurl = resdata.result.param.path
|
// 右侧列表展示
|
this.$refs.mapSilider &&
|
this.$refs.mapSilider.setData(resdata.result.baseList)
|
// 底层的列表展示
|
this.list = resdata.result.esList
|
// 查询参数
|
this.mapParam = resdata.result.param
|
// 设置分页
|
this.total = resdata.result.esDataTotle
|
this.length = resdata.result.param.length
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.zuhe {
|
float: left;
|
width: 50%;
|
border: 2px solid #76bef7;
|
overflow: hidden;
|
}
|
.imgdiv {
|
float: left;
|
width: 50%;
|
}
|
.img43 {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.percentage-red {
|
text-align: center;
|
background: url('/static/img/search/red.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: -20px 70px;
|
}
|
.percentage-green {
|
text-align: center;
|
background: url('/static/img/search/green.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: -20px 70px;
|
}
|
.omitmap {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
ul {
|
list-style-type: none;
|
line-height: 1.5em;
|
}
|
.myion {
|
width: 30px;
|
height: 30px;
|
}
|
.myion1 {
|
width: 20px;
|
height: 20px;
|
}
|
.green1 {
|
color: green;
|
}
|
.red1 {
|
color: red;
|
}
|
</style>
|
