<template>
|
<div
|
style="width:1200px; overflow-x:scroll;min-width:1200px; width:expression_r(document.body.clientWidth < 1200 ?'1200px':'auto'); max-width:1800px;"
|
>
|
<div class="overflow-auto row bg-white" style="margin:0px 0px">
|
<div
|
class="col-md-12 col-lg-3 mb-4"
|
style="margin:0px 0px"
|
v-for="(item,index) in list"
|
:key="index"
|
>
|
<div v-if="item.sdkType" style="float:left;width:39%;">
|
<div style="text-align:center;width: 120px;height: 140px;">
|
<div style="text-align:center;width: 120px;height: 120px;background:#f1f1f1;">
|
<httpImg
|
v-if="item.sdkType==='1'||item.sdkType==='人脸'"
|
v-bind:src="item.picSmUrl"
|
style="max-width: 100%;max-height: 100%;height: 120px;"
|
></httpImg>
|
<httpImg
|
v-if="item.sdkType!=='1'&&item.sdkType!=='人脸'"
|
v-bind:src="item.picSmUrl"
|
style="width: 120px;height: 68px;float:left;margin:26px 0px 26px 0px"
|
></httpImg>
|
</div>
|
<div v-if="item.picSmUrl!=null" style="float:left;margin:5px 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
|
v-if="item.sdkType==='1'||item.sdkType==='人脸'"
|
@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
|
v-if="item.sdkType==='1'||item.sdkType==='人脸'"
|
@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
|
v-if="item.sdkType==='1'||item.sdkType==='人脸'"
|
@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>
|
<!-- <div v-if="item.picSmUrl!=null" style="float:left;margin:5px 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 v-if="item.sdkType==='1'||item.sdkType==='人脸'" @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 v-if="item.sdkType==='1'||item.sdkType==='人脸'" @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 v-if="item.sdkType==='1'||item.sdkType==='人脸'" @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.sdkType"
|
style="float:left;width:65%;margin:0px 0px 0px -20px;text-align:left;"
|
>
|
<ul v-if="item.picSmUrl!=null">
|
<li class :title="item.picDate.substring(0,19)"> {{item.picDate.substring(0,19)}}</li>
|
<li class="omit" :title="item.picAddress"> {{item.picAddress}}</li>
|
<li class="omit"> {{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 omit' : 'green1 omit' "
|
>
|
<b> {{item.BaseName}}</b>
|
</li>
|
<li
|
:title="item.sdkType"
|
v-if="item.sdkType!=='1'&&item.sdkType!=='人脸'"
|
:class="item.personIsHub==='1'||item.personIsHub==='4'? 'red1 omit' : 'green1 omit' "
|
>
|
<b> {{item.sdkType}}</b>
|
</li>
|
<li class="omit" :title="item.miaoshu"> {{item.miaoshu}}</li>
|
</ul>
|
</div>
|
<hr style="margin:-20px -12px">
|
</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="siliderModelForCommon"></siliderModel>
|
<sdkTypeModel ref="sdkTypeModelForCommon"></sdkTypeModel>-->
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
findEsData,
|
addFromRetrieve,
|
getBigPic,
|
accompanyPerson,
|
getVideoByCServer
|
} from '../../../../server/searchList/commomList.js'
|
import siliderModel from '../model/siliderModel'
|
import { mapActions } from 'vuex'
|
import sdkTypeModel from '../model/sdkTypeModel'
|
import siliderModelNew from '../model/siliderModelNew'
|
import siliderModelMV from '../model/siliderModelMV'
|
export default {
|
components: {
|
findEsData,
|
siliderModel,
|
mapActions,
|
sdkTypeModel,
|
addFromRetrieve,
|
siliderModelNew,
|
getBigPic,
|
accompanyPerson,
|
getVideoByCServer,
|
siliderModelMV
|
},
|
props: {},
|
data() {
|
return {
|
data: [],
|
list: [],
|
length: 40,
|
currentPage: 1,
|
total: 0,
|
BigPic: {},
|
accompanyPerson: {},
|
childrenData: {},
|
parameter: {
|
ack_alarm: '',
|
cluId: '',
|
content: '',
|
contents: [],
|
dataBaseList: [],
|
endDate: '2019-01-10 05:51:19',
|
indeviceid: [],
|
page: 1,
|
recordType: '',
|
sdkType: [],
|
size: 40,
|
startDate: '2019-01-04 05:51:19'
|
}
|
}
|
},
|
created() {},
|
watch: {},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
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 getList(param) {
|
if (param && param !== null) {
|
this.parameter.indeviceid = param.indeviceid.indeviceid
|
this.parameter.cluId =
|
param.indeviceid.indeviceid.length > 0 ? '' : param.currentItem.type
|
this.parameter.content = param.content
|
this.parameter.dataBaseList = param.recordData.dataBaseList
|
this.parameter.endDate = param.dateTime[1]
|
this.parameter.sdkType = param.sdkData.sdkType
|
this.parameter.startDate = param.dateTime[0]
|
this.parameter.recordType = param.recordData.recordType
|
this.parameter.page = 1
|
this.currentPage = 1
|
// // console.log(this.parameter, '修改后的参数')
|
}
|
let res = await findEsData(this.parameter)
|
// console.log(res, '普通列表findEsData得到的数据')
|
if (res && res.success) {
|
this.total = parseInt(res.data.total)
|
this.list = res.data.esList
|
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
|
}
|
}
|
}
|
this.bushang()
|
}
|
},
|
changePage(e) {
|
this.currentPage = parseInt(e)
|
this.parameter.page = parseInt(e)
|
this.getList()
|
},
|
// 查看详情
|
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}
|
// this.childrenData = {...item1}
|
// // console.log(BigPicjson, '来的参数')
|
// if (item1.sdkType === '1' || item1.sdkType === '人脸') {
|
// this.$refs.siliderModelForCommon.showModel(BigPicjson)
|
// } else {
|
// this.$refs.sdkTypeModelForCommon.showModel(BigPicjson, item1.picSmUrl)
|
// }
|
},
|
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=' +
|
localStorage.getItem('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))
|
localStorage.setItem('personId', obj.personId)
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=map'
|
})
|
},
|
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 = await addFromRetrieve(json)
|
console.log(res, '已加入待布控表')
|
if (res && res.success) {
|
this.$toast({
|
type: 'primary',
|
message: '已加入待布控表',
|
toastHorizontalPosition: 'right'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '加入待布控表失败',
|
toastHorizontalPosition: 'right'
|
})
|
}
|
},
|
bushang() {
|
let s = 4 - (this.list.length % 4)
|
s = s === 4 ? s - 4 : s
|
for (let i = 0; i < s; i++) {
|
let obj = {}
|
this.list.push(obj)
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.zuhe {
|
float: left;
|
width: 50%;
|
border: 2px solid #76bef7;
|
overflow: hidden;
|
}
|
.imgdiv {
|
float: left;
|
width: 50%;
|
}
|
.img43 {
|
width: 120px;
|
height: 120px;
|
}
|
.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;
|
}
|
.omit {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
ul {
|
list-style-type: none;
|
line-height: 1.5em;
|
}
|
.myion {
|
width: 30px;
|
height: 30px;
|
}
|
.green1 {
|
color: green;
|
}
|
.red1 {
|
color: red;
|
}
|
</style>
|
