<template>
|
<div style="height: 100%;" class="swiper-box">
|
<div class="swiper-box-top">
|
<h2 style="float:left; font-size:15px">实时抓拍</h2>
|
<span
|
style="float:left;font-family:PingFangSC-Regular;font-size:13px;color:#999999;"
|
> （共{{VideoCaptrue.cards.length}}张）</span>
|
<router-link to="Searching">
|
<b class="search-more-btn">查看更多</b>
|
</router-link>
|
</div>
|
<!-- swiper -->
|
<div style="position:relative;height:calc(100% - 26px);">
|
<swiper ref="swiper" :options="swiperOption" class="swiper-box-container">
|
<swiper-slide v-for="(item, index) in VideoCaptrue.cards" :key="index">
|
<Card
|
:class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
|
:data="item"
|
@detailsClick="getDetails($event, index)"
|
@addToBase="toAdd"
|
></Card>
|
</swiper-slide>
|
</swiper>
|
<div class="pre-border">
|
<div class="icon-btn" slot="button-prev">
|
<i class="iconfont iconzuo"></i>
|
</div>
|
</div>
|
<div class="next-border">
|
<div class="icon-btn" slot="button-next">
|
<i class="iconfont iconyou1"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Card from "../subComponents/Card";
|
export default {
|
components: {
|
Card
|
},
|
data() {
|
return {
|
swiperOption: {
|
slidesPerView: 4,
|
spaceBetween: 10,
|
pagination: {
|
el: ".swiper-pagination",
|
clickable: true
|
},
|
navigation: {
|
nextEl: ".next-border",
|
prevEl: ".pre-border"
|
}
|
},
|
goodVisibility: true,
|
taskUid: 0,
|
activeIndex: 0,
|
mySwiper: Object
|
};
|
},
|
computed: {
|
// swiper() {
|
// console.log(this.$refs.swiper,'this.$refs.swiper')
|
// return this.$refs.swiper.swiper
|
// }
|
},
|
beforeDestroy() {
|
this.taskUid = 0;
|
},
|
watch: {
|
"VideoPhotoData.activeCard": function (value) {
|
let cards = this.VideoCaptrue.cards;
|
for (let i = 0; i < cards.length; i++) {
|
if (cards[i].activeObject.id == value) {
|
if (this.$refs.swiper.swiper.activeIndex < i) {
|
this.$refs.swiper.swiper.slideNext();
|
} else if (this.$refs.swiper.swiper.activeIndex > i) {
|
this.$refs.swiper.swiper.slidePrev();
|
}
|
}
|
}
|
},
|
"mySwiper.activeIndex": function (value) {
|
this.activeIndex = this.$refs.swiper.swiper.activeIndex;
|
}
|
},
|
methods: {
|
showCapture(nodes) {
|
if (nodes.length < 1) {
|
this.taskUid = 0;
|
this.VideoCaptrue.cards = [];
|
return;
|
}
|
this.VideoCaptrue.cameras = nodes;
|
this.VideoCaptrue.initCards();
|
this.initMonitor();
|
},
|
toAdd(item) {
|
this.$emit("addToBase", item);
|
},
|
initMonitor() {
|
const uid = Math.round(Math.random() * 1000);
|
this.taskUid = uid;
|
let _this = this;
|
setTimeout(() => {
|
_this.monitoRealTimeMsg(uid);
|
}, 2 * 1000);
|
},
|
monitoRealTimeMsg(uid) {
|
if (uid !== this.taskUid) {
|
return;
|
}
|
this.VideoCaptrue.monitorCapture();
|
// this.$refs.swiper.swiper.destroy() //先销毁
|
// console.log("先销毁")
|
//this.$refs.swiper.mountInstance() //后在加载
|
let _this = this;
|
setTimeout(() => {
|
_this.monitoRealTimeMsg(uid);
|
}, 2 * 1000);
|
},
|
getDetails(ev, index) {
|
this.CardList.datalist = this.VideoCaptrue.cards;
|
let obj = this.CardList.datalist[index];
|
// this.CardList.details.push(obj);
|
this.CardList.details = Array.from(
|
new Set([...this.CardList.details, ...[obj]])
|
);
|
this.VideoPhotoData.activeCard = obj.activeObject.id;
|
this.VideoPhotoData.total = this.VideoCaptrue.cards.length;
|
this.VideoPhotoData.page = 1;
|
this.VideoPhotoData.size = 20;
|
}
|
},
|
mounted() {
|
this.mySwiper = this.$refs.swiper.swiper;
|
}
|
};
|
</script>
|
<style lang="scss">
|
.swiper-box {
|
height: 100%;
|
.swiper-box-top {
|
overflow: hidden;
|
height: 26px;
|
line-height: 26px;
|
padding: 0px 20px;
|
.search-more-btn {
|
font-size: 12px;
|
color: #ffffff;
|
background: #3d68e1;
|
border-radius: 2px;
|
padding: 0px 12px;
|
float: right;
|
}
|
.search-more-btn:hover {
|
background: #2249b4;
|
}
|
}
|
.swiper-box-container {
|
text-align: left;
|
padding: 8px 8px 0px 8px;
|
.el-card__body {
|
height: 100%;
|
padding: 0px;
|
}
|
height: calc(100% - 10px);
|
.info {
|
width: 100%;
|
height: 100%;
|
.info-left {
|
width: 50%;
|
height: 100%;
|
float: left;
|
img {
|
width: 100%;
|
}
|
}
|
.info-right {
|
width: 50%;
|
height: 100%;
|
float: left;
|
box-sizing: border-box;
|
padding: 10px;
|
p {
|
padding: 4px 0px;
|
}
|
.infoIcon {
|
height: 24px;
|
cursor: pointer;
|
i {
|
margin: 5px;
|
font-size: 22px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.pre-border,
|
.next-border {
|
width: 40px;
|
height: 40px;
|
position: absolute;
|
background: #8888;
|
top: 34%;
|
z-index: 99;
|
border-radius: 4em;
|
outline: none;
|
.icon-btn {
|
color: rgb(255, 255, 255);
|
text-align: center;
|
line-height: 38px;
|
cursor: pointer;
|
}
|
}
|
.pre-border {
|
left: -9px;
|
}
|
.pre-border:hover {
|
background: #666;
|
}
|
.next-border {
|
right: 10px;
|
}
|
.next-border:hover {
|
background: #666;
|
}
|
|
.btn-bg-8 {
|
background: #8888;
|
}
|
.btn-bg-5 {
|
background: #555;
|
}
|
</style>
|
