<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;width:30%;">
|
<httpImg v-bind:src="slide.picSmUrl" :style="mainStyles"></httpImg>
|
</div>
|
<div v-if="score==='1'" style="float:left;width:60%;margin: 0px 0px">
|
<ul>
|
<li class="omit" style="color:#76bef7;font-size:32px;">
|
<b>{{slide.likePer}}</b>
|
</li>
|
<br>
|
<li :class="slide.state===1? 'omit green1' : 'omit red1' ">
|
<b>{{slide.job}}</b>
|
</li>
|
<li class="omit" :title="slide.personid">身份证号：{{slide.personid}}</li>
|
<li class="omit" :title="slide.org">{{slide.org}}</li>
|
<li>
|
<!-- <div @click="detail(slide)" class="far fa-list-alt myion" title="查看详情"></div> -->
|
<div @click="searchPerson(slide)" class="fas fa-user-circle myion" title="查找此人"></div>
|
<div @click="orbit(slide)" class="ion ion-logo-polymer myion" title="查看轨迹"></div>
|
<div @click="control(slide)" class="d-block fas fa-shield-alt pb5 myion" title="加入布控"></div>
|
</li>
|
</ul>
|
</div>
|
|
<div v-if="score==='0'" style="float:left;width:60%;margin: 0px 0px">
|
<ul>
|
<li>{{slide.picDate.substring(0,19)}}</li>
|
<li>{{slide.picAddress}}</li>
|
<li>{{slide.Gender}} {{slide.Race}} {{slide.Age}}</li>
|
<li :class="slide.personIsHub==='1' ||slide.personIsHub==='4'? 'green1' : 'red1' ">
|
<b>{{slide.BaseName}}</b>
|
</li>
|
<!-- <li class="omit" v-bind:title="slide.name">{{slide.name}}</li> -->
|
<li>
|
<!-- <div @click="detail(slide)" class="far fa-list-alt myion" title="查看详情"></div> -->
|
<div @click="searchPerson(slide)" class="fas fa-user-circle myion" title="查找此人"></div>
|
<div @click="orbit(slide)" class="ion ion-logo-polymer myion" title="查看轨迹"></div>
|
<div @click="control(slide)" class="d-block fas fa-shield-alt pb5 myion" title="加入布控"></div>
|
</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 } from '../../../../server/searchList/commomList.js'
|
import { mapActions } from 'vuex'
|
export default {
|
components: {
|
mapActions,
|
swiper,
|
swiperSlide,
|
accompanyPerson
|
},
|
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: {
|
params: {
|
handler(newName, oldName) {
|
this.getAccompanyPerson()
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
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)
|
if (res && res.success) {
|
this.data = res.data.personList
|
}
|
},
|
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) {
|
this.$toast({
|
type: 'primary',
|
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: 90%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
ul {
|
list-style-type: none;
|
line-height: 1.8em;
|
}
|
.img43 {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.myion {
|
width: 20px;
|
height: 20px;
|
}
|
.green1 {
|
color: green;
|
}
|
.red1 {
|
color: red;
|
}
|
}
|
</style>
|
