<template>
|
<div class="swiper pr">
|
<swiper :options="swiperOption" ref="mySwiper">
|
<!-- slides -->
|
<swiper-slide
|
v-for="(slide, index) in datalistMin"
|
:style="slideWidth?`width:${slideWidth};`:''"
|
:key="index"
|
>
|
<div style="margin: 0px 0px" :id="slide.Id">
|
<div style="float:left;width:30%;">
|
<!-- <httpImg v-bind:src="slide.picSmUrl" :style="mainStyles"></httpImg> -->
|
<div
|
style="text-align: center;width: 110px;height: 110px;background:#f1f1f1; position:absolute;cursor: pointer;z-index:1"
|
@click="selectImgTochangeDetil(index,slide)"
|
>
|
<!-- <httpImg v-if="slide.sdkType==='1'||slide.sdkType==='人脸'" v-bind:src="slide.picSmUrl" style="max-width: 100%;max-height: 100%;"></httpImg> -->
|
<httpImg v-bind:src="slide.picSmUrl" style="width: 110px;height: 110px;"></httpImg>
|
<b-img
|
v-if="select===index"
|
style="position: absolute;margin:-105px 0px 0px 35px;"
|
src="/static/img/search/mapCheck.png"
|
width="18px"
|
height="18px"
|
></b-img>
|
<div
|
v-if="slide.likePer"
|
:class="slide.personIsHub==='1'||slide.personIsHub==='4'? 'silederMapMO-r' : 'silederMapMO-g' "
|
>{{slide.likePer}}%</div>
|
</div>
|
</div>
|
<div v-if="score==='0'" style="float:left;width:60%;margin: 0px 0px 0px 80px">
|
<ul class="ulsiliderCatch">
|
<!-- <li style="color:#76bef7;font-size:18px;"><b>{{slide.likePer}}%</b></li> -->
|
<li>{{slide.picDate.substring(0,19)}}</li>
|
<li
|
:title="slide.picAddress"
|
> {{slide.picAddress.length>7?slide.picAddress.substring(0,5)+'...':slide.picAddress}}</li>
|
<li class="omit"> {{slide.Gender}} {{slide.Race}} {{slide.Age}}</li>
|
<li>
|
|
<b
|
:class="slide.personIsHub==='1'||slide.personIsHub==='4'? 'red1' : 'green1' "
|
:title="slide.sdkType==='1'?slide.BaseName:slide.sdkType"
|
>{{slide.sdkType==='1'?(slide.BaseName.length>3?slide.BaseName.substring(0,2)+'...':slide.BaseName):(slide.sdkType.length>3?slide.sdkType.substring(0,2)+'...':slide.sdkType)}}</b>
|
<span
|
:title="slide.miaoshu"
|
>{{slide.miaoshu.length>3?slide.miaoshu.substring(0,3)+'...':slide.miaoshu}}</span>
|
</li>
|
<li v-if="slide.sdkType==='1'||slide.sdkType==='人脸'">
|
<button
|
@click="searchPerson(slide)"
|
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(slide)"
|
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>
|
<!-- <div @click="control(slide)" class="d-block fas fa-shield-alt pb5 myion" title="加入布控"></div> -->
|
<button
|
@click="control(slide,index)"
|
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>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</swiper-slide>
|
<!-- Optional controls -->
|
<div class="swiper-pagination" v-if="isShowPagination" slot="pagination"></div>
|
|
<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
|
</swiper>
|
<div
|
class="swiper-button-prev"
|
slot="button-prev"
|
v-if="isShowButton"
|
@click="swiper.slidePrev()"
|
>
|
<i class="fa fa-chevron-left"></i>
|
</div>
|
<div class="swiper-button-next" slot="button-next" v-if="isShowButton" @click="addImg()">
|
<i class="fa fa-chevron-right"></i>
|
</div>
|
<div></div>
|
</div>
|
</template>
|
<script>
|
import 'swiper/dist/css/swiper.css'
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
import {
|
accompanyPerson,
|
addFromRetrieve
|
} from '../../../../server/searchList/commomList.js'
|
import { getCameraRecord } from '@/server/map.js'
|
import { mapActions } from 'vuex'
|
export default {
|
components: {
|
swiper,
|
swiperSlide,
|
accompanyPerson,
|
addFromRetrieve
|
},
|
props: {
|
params: {
|
default: () => {},
|
type: Object
|
},
|
imgwidth: {
|
default: '120',
|
type: String
|
},
|
imgheight: {
|
default: '160',
|
type: String
|
},
|
slideWidth: {
|
default: '320px',
|
type: String
|
},
|
isShowPagination: {
|
default: false,
|
type: Boolean
|
},
|
isShowButton: {
|
default: true,
|
type: Boolean
|
},
|
score: {
|
default: '1',
|
type: String
|
},
|
datalist: {
|
default: () => [],
|
typeL: Array
|
}
|
},
|
watch: {
|
// 为了优化处理
|
datalist: {
|
handler: function(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
this.datalistMin =
|
newVal.length > 3 ? newVal.slice(0, 3) : this.datalist
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
select: 0,
|
datalistMin: {},
|
data: [],
|
swiperOption: {
|
pagination: {
|
el: '.swiper-pagination',
|
clickable: true
|
},
|
slidesPerView: 'auto',
|
spaceBetween: 10
|
}
|
}
|
},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
// 优化处理加载图片
|
addImg() {
|
if (this.datalistMin.length < this.datalist.length) {
|
this.datalistMin.push(this.datalist[this.datalistMin.length])
|
}
|
setTimeout(() => {
|
this.swiper.slideNext()
|
}, 100)
|
},
|
/*
|
选择不同的图片，修改使得图片第一个显示，并且回调父组件的方法改变详情的显示
|
**/
|
selectImgTochangeDetil(num, obj) {
|
this.select = num
|
this.swiper.slideTo(num, 1000, true)
|
this.$emit('changeDetil', obj)
|
},
|
addMiaoshu(list) {
|
for (let i = 0; i < list.length; i++) {
|
list[i].miaoshu = ''
|
if (list[i].name) {
|
list[i].miaoshu = list[i].name
|
if (list[i].gender) {
|
list[i].miaoshu = list[i].miaoshu + '/' + list[i].gender
|
}
|
if (list[i].cardId) {
|
list[i].miaoshu = list[i].miaoshu + '/' + list[i].cardId
|
}
|
if (list[i].no) {
|
list[i].miaoshu = list[i].miaoshu + '/' + list[i].no
|
}
|
if (list[i].phone) {
|
list[i].miaoshu = list[i].miaoshu + '/' + list[i].phone
|
}
|
if (list[i].orgName) {
|
list[i].miaoshu = list[i].miaoshu + '/' + list[i].orgName
|
}
|
}
|
}
|
},
|
setDatalist(params) {
|
this.datalist.splice(0, this.datalist.length)
|
this.datalist = params
|
},
|
async getAccompanyPerson() {
|
this.data.splice(0, this.data.length)
|
console.log(this.params, 'this.params')
|
if (this.params && this.params.paramType) {
|
if (this.params.paramType === 'device') {
|
let res = await getCameraRecord({
|
videoReqNum: this.params.id,
|
page: 1,
|
size: 10,
|
personIsHub: ''
|
})
|
if (res && res.success) {
|
this.data = res.data.equList
|
}
|
console.log(res, '获取抓拍记录')
|
} else if (this.params.paramType === 'list') {
|
let res = await accompanyPerson(this.params)
|
if (res && res.success) {
|
this.data = res.data.personList
|
}
|
}
|
}
|
this.addMiaoshu(this.data)
|
console.log(this.data, '抓拍记录的数据')
|
},
|
selectInit() {
|
this.select = 0
|
},
|
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))
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=map'
|
})
|
},
|
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'
|
})
|
}
|
}
|
},
|
computed: {
|
swiper() {
|
return this.$refs.mySwiper.swiper
|
},
|
mainStyles() {
|
let style = {}
|
style.width = `${parseInt(this.imgwidth)}px`
|
style.height = `${parseInt(this.imgheight)}px`
|
return style
|
}
|
},
|
created() {
|
// this.getAccompanyPerson()
|
// this.swiper()
|
},
|
mounted() {
|
// for (let i = 0; i < 20; i++) {
|
// this.datalist.push(this.datalist[0])
|
// }
|
setInterval(() => {
|
if (this.datalistMin.length < this.datalist.length) {
|
this.datalistMin.push(this.datalist[this.datalistMin.length])
|
}
|
}, 100)
|
|
// console.log(this.datalist, 'slider4====')
|
// this.getList()
|
// alert(this.imgwidth)
|
// current swiper instance
|
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
|
// this.swiper.slideTo(0, 10, true)
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.swiper {
|
.swiper-container {
|
padding: 0 20px;
|
}
|
.swiper-button-prev,
|
.swiper-button-next {
|
background-image: none;
|
display: none;
|
i {
|
font-size: 30px;
|
color: #76bef7;
|
}
|
}
|
.swiper-button-prev {
|
left: -10px;
|
}
|
.swiper-button-next {
|
right: -10px;
|
}
|
&:hover .swiper-button-prev,
|
&:hover .swiper-button-next {
|
display: block;
|
}
|
.msg {
|
position: absolute;
|
left: 0px;
|
bottom: 2px;
|
width: 100%;
|
}
|
.omit {
|
width: 90%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.ulsiliderCatch {
|
list-style-type: none;
|
line-height: 1.5em;
|
font-size: 10px;
|
}
|
.img43 {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.myion {
|
width: 20px;
|
height: 20px;
|
}
|
.green1 {
|
color: green;
|
}
|
.red1 {
|
color: red;
|
}
|
}
|
.silederMapMO-r {
|
position: absolute;
|
text-align: center;
|
background: url('/static/img/search/mapScore.png');
|
height: 16px;
|
float: left;
|
width: 55px;
|
color: white;
|
margin: -16px 27% !important;
|
}
|
.silederMapMO-g {
|
position: absolute;
|
text-align: center;
|
background: url('/static/img/search/mapScore.png');
|
height: 16px;
|
float: left;
|
width: 55px;
|
color: white;
|
margin: -16px 27% !important;
|
}
|
</style>
|
