<template>
|
<div class="swiper pr">
|
<swiper :options="swiperOption" ref="mySwiper">
|
<!-- slides -->
|
<swiper-slide
|
v-for="(slide, index) in data"
|
:style="slideWidth?`width:${slideWidth};`:''"
|
:key="index"
|
>
|
<div style="margin: 0px 0px">
|
<div style="float:left;text-align:center;width:40%;background:#f1f1f1;">
|
<httpImg v-bind:src="slide.picSmUrl" style="max-width:110px;max-height:110px;"></httpImg>
|
</div>
|
|
<div style="float:left;width:60%;margin:0px 0px 0px -30px">
|
<ul style="list-style-type:none;line-height:1.3em;">
|
<li
|
class="omit"
|
:title="slide.picDate.substring(0,19)"
|
> {{slide.picDate.substring(0,19)}}</li>
|
<li class="omit" :title="slide.picAddress"> {{slide.picAddress}}</li>
|
<li class="omit"> {{slide.Gender}} {{slide.Race}} {{slide.Age}}</li>
|
<li
|
:title="slide.BaseName"
|
:class="slide.personIsHub==='1'||slide.personIsHub==='4'? 'red1 omit' : 'green1 omit' "
|
>
|
<b> {{slide.BaseName}}</b>
|
</li>
|
<li class="omit" :title="slide.miaoshu"> {{slide.miaoshu}}</li>
|
<li>
|
<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>
|
<button
|
@click="control(slide)"
|
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&&data.length>0"
|
@click="swiper.slidePrev()"
|
>
|
<i class="fa fa-chevron-left"></i>
|
</div>
|
<div
|
class="swiper-button-next"
|
slot="button-next"
|
v-if="isShowButton&&data.length>0"
|
@click="swiper.slideNext()"
|
>
|
<i class="fa fa-chevron-right"></i>
|
</div>
|
<div>
|
<div v-if="data.length<1" style="margin:0px 0px">
|
<h3>暂无数据</h3>
|
</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 { mapActions } from 'vuex'
|
export default {
|
components: {
|
mapActions,
|
swiper,
|
swiperSlide,
|
accompanyPerson,
|
addFromRetrieve
|
},
|
props: {
|
params: {
|
default: () => {},
|
type: Object
|
},
|
datalist: {
|
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
|
}
|
},
|
watch: {},
|
data() {
|
return {
|
data: [],
|
swiperOption: {
|
pagination: {
|
el: '.swiper-pagination',
|
clickable: true
|
},
|
slidesPerView: 'auto',
|
spaceBetween: 10
|
}
|
}
|
},
|
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
|
}
|
}
|
}
|
},
|
detail(obj) {},
|
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() {
|
// 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: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
ul {
|
list-style-type: none;
|
line-height: 1.5em;
|
}
|
.img43 {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.myion {
|
width: 20px;
|
height: 20px;
|
}
|
.green1 {
|
color: green;
|
}
|
.red1 {
|
color: red;
|
}
|
}
|
</style>
|
