<template>
|
<div id="realTimeList" :class="CategoryData.dataStatus!=='default'? 'out-div-100':'out-div-rt'">
|
<swiper id="rt-swiper" :options="swiperOption" v-if="list.length && isShow">
|
<swiper-slide v-for="(item,index) in list" :key="item.id">
|
<li>
|
<div v-show="isShow" :class="index%2 === 0 ? 'flex-center zerbe':'flex-center'">
|
<div class="div-pic">
|
<img :src="'/httpImage/'+ item.activeObject.picMaxUrl[0]" />
|
</div>
|
<div class="div-time" :title="item.activeObject.picDate">
|
<span>{{item.activeObject.picDate}}</span>
|
</div>
|
<div class="div-location" :title="item.cameraAddr">
|
<span>{{item.activeObject.cameraAddr}}</span>
|
</div>
|
<div class="div-person" :title="item.taskName">
|
<span>{{item.activeObject.taskName}}</span>
|
</div>
|
</div>
|
</li>
|
</swiper-slide>
|
</swiper>
|
</div>
|
</template>
|
<script>
|
import { guid } from '../common/util'
|
|
export default {
|
name: 'realTimeList',
|
props: {
|
dataList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
list: [],
|
isShow: true,
|
dateMill: new Date(),
|
swiperOption: {
|
direction: 'vertical',
|
slidesPerView: 7,
|
slidesPerGroup: 1,
|
// notNextTick: true,
|
observer: true,
|
// observeParents: true,
|
// loopFillGroupWithBlank: true,
|
// spaceBetween: 2,
|
loop: true,
|
autoplay: {
|
delay: 2000,
|
stopOnLastSlide: false,
|
disableOnInteraction: false,
|
// reverseDirection: false,
|
// waitForTransition: false
|
},
|
}
|
}
|
},
|
watch: {
|
dataList: {
|
handler: function (val, oldVal) {
|
if (val !== oldVal) {
|
this.isShow = false
|
// val.map((i, index) => {
|
// this.$set(this.list, index, i)
|
// })
|
this.list = this.list.concat(val)
|
let obj = {}
|
this.list = this.list.reduce(function (item, next) {
|
// console.log(item,next,'reduce')
|
obj[next.activeObject.id] ? '' : obj[next.activeObject.id] = true && item.push(next);
|
return item;
|
}, []);
|
// console.log(this.list,'判断是否去重成功!')
|
if (this.list.length > 60) {
|
this.list.splice(0, this.list.length - 60)
|
}
|
this.$nextTick(i => {
|
this.isShow = true
|
})
|
}
|
},
|
deep: true
|
},
|
'CategoryData.dataStatus': {
|
handler: function (newVal, oldVal) {
|
// console.log(newVal,'监听data',oldVal)
|
if (newVal !== oldVal) {
|
this.isShow = false
|
this.list = []
|
if (newVal !== 'default') {
|
this.$set(this.swiperOption, 'slidesPerView', 10)
|
this.$nextTick(() => {
|
this.isShow = true
|
})
|
} else {
|
this.$set(this.swiperOption, 'slidesPerView', 7)
|
this.$nextTick(() => {
|
this.isShow = true
|
})
|
}
|
}
|
},
|
deep: true
|
}
|
},
|
methods: {
|
startMarQuee(lh, speed, delay, id) {
|
let t;
|
let p = false;
|
let o = document.getElementById(id);
|
o.innerHTML += o.innerHTML + o.innerHTML
|
o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML;
|
o.onmouseover = function () {
|
p = true;
|
}
|
o.onmouseout = function () {
|
p = false;
|
}
|
o.scrollTop = 0;
|
function start() {
|
t = setInterval(scrolling, speed);
|
if (!p) o.scrollTop += 2;
|
}
|
|
function scrolling() {
|
if (o.scrollTop % lh != 0) {
|
o.scrollTop += 2;
|
if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
|
} else {
|
clearInterval(t);
|
setTimeout(start, delay);
|
}
|
}
|
setTimeout(start, delay);
|
}
|
},
|
mounted() {
|
// setTimeout(() => {
|
// this.startMarQuee(34,50,0,'realTimeList')
|
// }, 1000);
|
setTimeout(() => {
|
this.swiperOption.loop = true;
|
}, 1000);
|
this.list = JSON.parse(JSON.stringify(this.dataList))
|
// console.log(this.list, '预警列表', this.dataList)
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.out-div-rt {
|
width: 100%;
|
height: 100%;
|
#rt-swiper {
|
width: 100%;
|
height: 100%;
|
padding: 5px 8px 5px 8px;
|
.div-pic {
|
width: calc(10% - 2px);
|
height: 100%;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
.div-time {
|
width: calc(45% - 2px);
|
height: 100%;
|
line-height: 100%;
|
max-width: 124px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
text-align: left;
|
white-space: nowrap;
|
margin: 0 auto;
|
span {
|
line-height: 50px;
|
}
|
}
|
.div-location {
|
width: calc(25% - 2px);
|
height: 100%;
|
line-height: 100%;
|
max-width: 108px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
text-align: left;
|
white-space: nowrap;
|
margin: 0 auto;
|
span {
|
line-height: 50px;
|
}
|
}
|
.div-person {
|
width: calc(25% - 2px);
|
height: 100%;
|
text-align: center;
|
line-height: 100%;
|
max-width: 108px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
text-align: left;
|
white-space: nowrap;
|
margin: 0 auto;
|
span {
|
line-height: 50px;
|
}
|
}
|
}
|
}
|
.out-div-100 {
|
width: 100%;
|
height: 100%;
|
margin-top: 40px;
|
#rt-swiper {
|
width: 100%;
|
height: 100%;
|
padding: 5px 8px 5px 8px;
|
li {
|
width: 100%;
|
height: 50px;
|
}
|
#swiper-slider {
|
max-height: 50px;
|
}
|
.div-pic {
|
width: calc(10% - 2px);
|
height: 100%;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
.div-time {
|
width: calc(40% - 2px);
|
height: 100%;
|
line-height: 100%;
|
max-width: 114px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
text-align: left;
|
white-space: nowrap;
|
margin: 0 auto;
|
span {
|
line-height: 50px;
|
}
|
}
|
.div-location {
|
width: calc(25% - 2px);
|
height: 100%;
|
line-height: 100%;
|
max-width: 108px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
text-align: left;
|
white-space: nowrap;
|
margin: 0 auto;
|
span {
|
line-height: 50px;
|
}
|
}
|
.div-person {
|
width: calc(25% - 2px);
|
height: 100%;
|
text-align: center;
|
line-height: 100%;
|
max-width: 108px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
text-align: left;
|
white-space: nowrap;
|
margin: 0 auto;
|
span {
|
line-height: 50px;
|
}
|
}
|
}
|
}
|
.zerbe {
|
background: #122253;
|
}
|
</style>
|
