<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 class>
|
<!-- 有比较图 -->
|
<div class style="width:360px">
|
<!-- 两张图片 -->
|
<div style="float:left;height:110px;width:220px">
|
<!-- 如果是行为 -->
|
<div
|
v-if="slide.sdkType!=='1'"
|
style="float: left;text-align: center;width:190px;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7; border-right:0px"
|
>
|
<div
|
style="float: left;text-align: center;width:100%;;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7; border-right:0px"
|
>
|
<httpImg
|
style="height:110px;max-width: 100%;max-height: 100%;padding: 0px 0px 0px 0px"
|
:src="slide.picSmUrl"
|
></httpImg>
|
</div>
|
<!-- <div style="float:left;text-align: center;width:50%;;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7; border-left:0px">
|
</div>-->
|
</div>
|
<!-- 如果是行为 end-->
|
<div
|
v-if="slide.sdkType==='1'"
|
style="float: left;text-align: center;width:110px;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7; border-right:0px"
|
>
|
<httpImg style="max-width:110px;max-height:110px;" :src="slide.picSmUrl"></httpImg>
|
</div>
|
<div
|
v-if="slide.sdkType==='1'"
|
style="float:left;text-align: center;width:110px;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7; border-left:0px"
|
>
|
<httpImg style="max-width:110px;max-height:110px;" :src="slide.personPicUrl"></httpImg>
|
</div>
|
<div
|
v-if="slide.sdkType==='1'"
|
:class="slide.personIsHub==='1'||slide.personIsHub==='4'? 'percentage-red-one' : 'percentage-red-one' "
|
>{{slide.likePer}}%</div>
|
</div>
|
<!-- 两张图片 end-->
|
<div style="float:left;margin:-110px 190px;width:220px">
|
<ul class="ul121">
|
<li
|
class="omit121"
|
:title="slide.picDate.substring(0,19)"
|
> {{slide.picDate.substring(0,19)}}</li>
|
<li class="omit121" :title="slide.picAddress"> {{slide.picAddress}}</li>
|
<li class="omit121"> {{slide.Gender}} {{slide.Race}} {{slide.Age}}</li>
|
<li
|
v-if="slide.sdkType==='1'"
|
:title="slide.BaseName"
|
:class="slide.personIsHub==='1'||slide.personIsHub==='4'? 'red121 omit121' : 'green121 omit121' "
|
>
|
<b> {{slide.BaseName}}</b>
|
</li>
|
<li
|
v-if="slide.sdkType!=='1'"
|
:title="slide.sdkType"
|
:class="slide.personIsHub==='1'||slide.personIsHub==='4'? 'red121 omit121' : 'green121 omit121' "
|
>
|
<b> {{slide.sdkType}}</b>
|
</li>
|
<li class="omit121" :title="slide.miaoshu"> {{slide.miaoshu}}</li>
|
<li v-if="slide.sdkType==='1'">
|
|
<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>
|
<!-- 有比较图 end-->
|
</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="swiper.slideNext()"
|
>
|
<i class="fa fa-chevron-right"></i>
|
</div>
|
<div class="msg">
|
<slot name="msg"/>
|
</div>
|
</div>
|
</template>
|
<script>
|
import 'swiper/dist/css/swiper.css'
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
import { mapActions } from 'vuex'
|
import { addFromRetrieve } from '../../../../server/searchList/commomList.js'
|
export default {
|
components: {
|
swiper,
|
swiperSlide,
|
addFromRetrieve
|
},
|
props: {
|
params: {
|
default: () => {},
|
type: Object
|
},
|
imgwidth: {
|
default: '100',
|
type: String
|
},
|
imgheight: {
|
default: '100',
|
type: String
|
},
|
slideWidth: {
|
default: '360px',
|
type: String
|
},
|
isShowPagination: {
|
default: false,
|
type: Boolean
|
},
|
isShowButton: {
|
default: true,
|
type: Boolean
|
},
|
data: {
|
default: () => [],
|
type: Array
|
}
|
},
|
data() {
|
return {
|
select: -1,
|
swiperOption: {
|
pagination: {
|
el: '.swiper-pagination',
|
clickable: true
|
},
|
slidesPerView: 'auto',
|
spaceBetween: 10
|
}
|
}
|
},
|
watch: {
|
// data: {
|
// handler(newName, oldName) {
|
// if (newName && newName !== oldName) {
|
// for (let i = 0; i < this.data.length; i++) {
|
// this.data[i].miaoshu = ' '
|
// 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
|
// }
|
// }
|
// }
|
// }
|
// },
|
// immediate: true,
|
// deep: true
|
// }
|
},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
searchPerson(obj) {
|
if (obj && obj.picSmUrl) {
|
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'
|
})
|
}
|
},
|
swiper2() {
|
// return this.$refs.mySwiper.swiper
|
}
|
},
|
computed: {
|
swiper() {
|
return this.$refs.mySwiper.swiper
|
},
|
mainStyles() {
|
let style = {}
|
style.width = `${parseInt(this.imgwidth)}px`
|
style.height = `${parseInt(this.imgheight)}px`
|
return style
|
}
|
},
|
mounted() {
|
// alert(this.props.imgwidth)
|
// current swiper instance
|
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
|
// for (let i = 0; i < 8; i++) {
|
// let obj = {}
|
// this.data.push(obj)
|
// this.data[i].date = '2018-11-21 14:12:30'
|
// this.data[i].org = '一年级一班'
|
// this.data[i].dec = '男 黄人 青年'
|
// this.data[i].name = '何炅'
|
// this.data[i].fenshu = '92%'
|
// if ((i & 1) === 1) {
|
// this.data[i].job = '教师，' + this.data[i].name
|
// this.data[i].state = 1
|
// } else {
|
// this.data[i].job = '在逃库，' + this.data[i].name
|
// this.data[i].state = 0
|
// }
|
// this.data[i].url1 = '/static/img/timg.jpg'
|
// this.data[i].personid = '13062319940909090x'
|
// this.data[i].name = this.data[i].name + '/' + this.data[i].personid
|
// }
|
console.log('this is current swiper instance object', this.swiper)
|
console.log(this.data, 'slider5 data')
|
// 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%;
|
}
|
.omit121 {
|
width: 60%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.ul121 {
|
list-style-type: none;
|
line-height: 1.3em;
|
}
|
.img43 {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.myion {
|
width: 20px;
|
height: 20px;
|
}
|
.green121 {
|
color: green;
|
}
|
.red121 {
|
color: red;
|
}
|
.c1 {
|
text-align: center;
|
background: url('/static/img/search/check.png');
|
height: 20px;
|
float: left;
|
width: 15px;
|
color: white;
|
margin: -150px 5px;
|
}
|
.c2 {
|
text-align: center;
|
background: url('/static/img/search/check.png');
|
height: 20px;
|
float: left;
|
width: 15px;
|
color: white;
|
margin: -150px 130px;
|
}
|
.c3 {
|
text-align: center;
|
background: red;
|
height: 20px;
|
float: left;
|
width: 15px;
|
color: white;
|
margin: -150px 5px;
|
}
|
|
.c4 {
|
text-align: center;
|
background: red;
|
height: 20px;
|
float: left;
|
width: 15px;
|
color: white;
|
margin: -150px 130px;
|
}
|
.c5 {
|
text-align: center;
|
background: green;
|
height: 20px;
|
float: left;
|
width: 35px;
|
color: white;
|
margin: -65px 10px;
|
}
|
|
.c6 {
|
text-align: center;
|
background: red;
|
height: 20px;
|
float: left;
|
width: 35px;
|
color: white;
|
margin: -65px 70px;
|
}
|
|
.c7 {
|
text-align: center;
|
background: green;
|
height: 20px;
|
float: left;
|
width: 35px;
|
color: white;
|
margin: -65px 120px;
|
}
|
.c8 {
|
text-align: center;
|
background: red;
|
height: 20px;
|
float: left;
|
width: 35px;
|
color: white;
|
margin: -65px 220px;
|
}
|
.zuhe {
|
float: left;
|
width: 60%;
|
border: 2px solid #76bef7;
|
overflow: hidden;
|
}
|
.imgdiv {
|
float: left;
|
width: 50%;
|
}
|
.img43 {
|
width: 120px;
|
height: 120px;
|
// max-width: 100%;
|
// max-height: 100%;
|
}
|
.percentage-red-one {
|
text-align: center;
|
background: url('/static/img/search/red.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: 90px -145px !important;
|
}
|
.percentage-green-one {
|
text-align: center;
|
background: url('/static/img/search/green.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: 0px 0px !important;
|
}
|
.out-div {
|
width: 300px;
|
height: 150px;
|
}
|
}
|
</style>
|
