<template>
|
<div class="swiper pr" style="float:left;width:45%;margin: 0px 0px">
|
<swiper :options="swiperOption" ref="mySwiper">
|
<!-- slides -->
|
<swiper-slide
|
class="row bg-white"
|
v-for="(slide, index) in data"
|
:style="slideWidth?`width:${slideWidth};`:''"
|
:key="index"
|
>
|
<div
|
style="margin:0px 2px;text-align:center;width:60px;height:60px"
|
class="row bg-white"
|
@click="updateFatherImg(index)"
|
>
|
<httpImg
|
:class="select===index?'gaoliang':''"
|
:src="slide.path"
|
style="height:60px;max-width: 100%;max-height: 100%;"
|
></httpImg>
|
<b-img
|
v-if="select===index"
|
style="margin:40px 0px 0px -18px;"
|
src="/static/img/search/check.png"
|
width="16px"
|
height="16px"
|
></b-img>
|
</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 style="margin:0px 0px 0px 5px;" class="fa fa-chevron-left"></i>
|
</div>
|
<div
|
class="swiper-button-next"
|
slot="button-next"
|
v-if="isShowButton"
|
@click="swiper.slideNext()"
|
>
|
<i style="margin:0px 0px 0px 20px;" class="fa fa-chevron-right"></i>
|
</div>
|
|
<!-- <b-img v-if="1===1" style="float:left;margin:-40px 325px;" src="/static/img/search/check.png" width="30px" height="30px" ></b-img> -->
|
</div>
|
</template>
|
<script>
|
import 'swiper/dist/css/swiper.css'
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
import { addFromRetrieve } from '../../../../server/searchList/commomList.js'
|
export default {
|
components: {
|
swiper,
|
swiperSlide,
|
addFromRetrieve
|
},
|
props: {
|
slideWidth: {
|
default: '90px',
|
type: String
|
},
|
isShowPagination: {
|
default: false,
|
type: Boolean
|
},
|
isShowButton: {
|
default: true,
|
type: Boolean
|
},
|
dataarray: {
|
default: () => [],
|
type: Array
|
}
|
},
|
data() {
|
return {
|
data: [],
|
url: '',
|
swiperOption: {
|
pagination: {
|
el: '.swiper-pagination',
|
clickable: true
|
},
|
slidesPerView: 'auto',
|
spaceBetween: 0
|
},
|
select: 0
|
}
|
},
|
methods: {
|
async detail(obj) {},
|
async searchPerson(obj) {},
|
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'
|
})
|
},
|
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 = addFromRetrieve(json)
|
if (res && res.success) {
|
this.$toast({
|
type: 'primary',
|
message: '已加入待布控表',
|
toastHorizontalPosition: 'right'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '加入待布控表失败',
|
toastHorizontalPosition: 'right'
|
})
|
}
|
},
|
setData(data) {},
|
createList(datalist, index) {
|
this.select = index
|
this.data = datalist
|
this.url = this.data[index].path
|
this.swiper.slideTo(index, 1000, true)
|
// this.$emit('changeimg', this.url)
|
},
|
// 修改 父级的图片显示
|
updateFatherImg(index) {
|
this.select = index
|
this.url = this.data[index].path
|
this.$emit('changeimg', this.url, index)
|
}
|
},
|
computed: {
|
swiper() {
|
return this.$refs.mySwiper.swiper
|
}
|
},
|
mounted() {
|
// this.select = 0
|
// // current swiper instance
|
// // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
|
// this.data = new Array(10)
|
// for (let i = 0; i < this.data.length; i++) {
|
// if ((i & 1) === 1) {
|
// this.data[i] = '/static/img/1.jpg'
|
// } else {
|
// this.data[i] = '/static/img/timg.jpg'
|
// }
|
// }
|
// this.url = this.data[0]
|
// this.$emit('changeimg', this.url)
|
// this.swiper.slideTo(0, 1000, false)
|
// console.log('this is current swiper instance object', this.swiper)
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.swiper {
|
.swiper-container {
|
padding: 0 20px;
|
}
|
.swiper-button-prev,
|
.swiper-button-next {
|
background-image: none;
|
display: block;
|
i {
|
font-size: 25px;
|
color: #76bef7;
|
}
|
}
|
.swiper-button-prev {
|
left: -15px;
|
top: 40px;
|
}
|
.swiper-button-next {
|
right: -15px;
|
top: 40px;
|
}
|
&:hover .swiper-button-prev,
|
&:hover .swiper-button-next {
|
display: block;
|
}
|
.msg {
|
position: absolute;
|
left: 0px;
|
bottom: 2px;
|
width: 50%;
|
}
|
}
|
.gaoliang {
|
border: 1px solid red;
|
}
|
.img43 {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.myion {
|
width: 20px;
|
height: 20px;
|
}
|
</style>
|
