<template>
|
<div class="monitoring-task-box">
|
<el-carousel
|
class="topCarousel"
|
type="card"
|
height="50px"
|
indicator-position="none"
|
:initial-index="VideoTaskData.activeIndex"
|
:autoplay="autoplay"
|
@change="changeCarousel"
|
>
|
<el-carousel-item v-for="(item, index) in VideoTaskData.tasks" :key="index">
|
<b class="medium">{{ item.scene_name }}</b>
|
</el-carousel-item>
|
</el-carousel>
|
<transition name="fade"></transition>
|
<div class="monitoring-task-ul" ref="mid">
|
<li
|
v-for="(item, index) in VideoTaskData.taskCard"
|
:key="index"
|
:style="!TreeDataPool.showTreeBox ? 'float: left; width: 50%' : ''"
|
>
|
<Card
|
:data="item"
|
:class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
|
:showType="
|
item.list[0].baseInfo && item.list[0].baseInfo !== null && item.list[0].baseInfo.length > 0 ? 'compare' : ''
|
"
|
@detailsClick="getDetails($event, index)"
|
@addToBase="toAdd"
|
></Card>
|
</li>
|
</div>
|
<div class="lookMore">
|
<router-link :to="{ path: '/Layout/Searching', query: { from: 'video' } }">
|
<b>查看更多</b>
|
</router-link>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Card from "../subComponents/Card"
|
export default {
|
components: {
|
Card
|
},
|
data() {
|
return {
|
taskUid: 0,
|
liIndex: 0,
|
autoplay: false
|
}
|
},
|
watch: {
|
"VideoPhotoData.activeCard": function(value) {
|
let card = this.$refs.mid.getElementsByClassName("my-active-card")
|
|
if (card.length > 0) {
|
let cardHeight = card[0].clientHeight
|
let cardTop = card[0].offsetTop
|
let scrollTop = this.$refs.mid.scrollTop
|
let divHeight = this.$refs.mid.clientHeight
|
// console.log(cardHeight, cardTop, scrollTop, divHeight);
|
if (cardTop - cardHeight - scrollTop > divHeight - cardHeight || cardTop - cardHeight - scrollTop < 0)
|
this.$refs.mid.scrollTo(0, cardTop)
|
}
|
}
|
},
|
beforeDestroy() {
|
this.taskUid = 0
|
},
|
mounted() {
|
this.$nextTick(() => {
|
let scrollContain = this.$refs.mid
|
this.VideoPhotoData.scrollContainDom = scrollContain
|
})
|
},
|
methods: {
|
showTasks(nodes) {
|
if (nodes.length < 1) {
|
this.taskUid = 0
|
this.VideoTaskData.tasks = []
|
this.VideoTaskData.taskCard = []
|
this.VideoTaskData.activeIndex = 0
|
return
|
}
|
this.VideoTaskData.cameras = nodes
|
//fix bug 2072
|
// this.VideoTaskData.activeIndex = 0;
|
this.VideoTaskData.fetchTasks()
|
this.initTaskMonitor()
|
},
|
changeCarousel(index) {
|
this.VideoTaskData.activeIndex = index
|
this.VideoTaskData.fetchTasks()
|
this.initTaskMonitor()
|
},
|
initTaskMonitor() {
|
const uid = Math.round(Math.random() * 1000)
|
this.taskUid = uid
|
let _this = this
|
setTimeout(() => {
|
_this.monitoRealTimeMsg(uid)
|
}, 1 * 1000)
|
},
|
monitoRealTimeMsg(uid) {
|
if (uid !== this.taskUid) {
|
return
|
}
|
this.VideoTaskData.monitorTaskData()
|
let _this = this
|
setTimeout(() => {
|
_this.monitoRealTimeMsg(uid)
|
}, 2 * 1000)
|
},
|
toAdd(item) {
|
this.$emit("addToBase", item)
|
},
|
getDetails(ev, index) {
|
this.CardList.datalist = this.VideoTaskData.taskCard
|
this.VideoTaskData.activeIndex = index
|
let obj = this.CardList.datalist[index]
|
this.VideoPhotoData.activeCard = obj.activeObject.id
|
this.CardList.details = Array.from(new Set([...this.CardList.details, ...[obj]]))
|
// this.CardList.details.push(obj);
|
this.VideoPhotoData.total = this.VideoTaskData.taskCard.length
|
this.VideoPhotoData.page = 1
|
this.VideoPhotoData.size = 20
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.monitoring-task-box {
|
height: 100%;
|
width: 100%;
|
.topCarousel {
|
.el-carousel__arrow {
|
width: 20px;
|
height: 20px;
|
}
|
.el-carousel__arrow:hover {
|
background-color: rgba(102, 102, 102);
|
}
|
.is-active {
|
background: #ffffff !important;
|
box-shadow: 0 5px 5px 0 rgba(11, 51, 153, 0.12) !important;
|
height: calc(100% - 5px);
|
b {
|
color: #3d68e1 !important;
|
}
|
}
|
}
|
.monitoring-task-ul {
|
height: calc(100% - 90px);
|
width: 100%;
|
overflow: auto;
|
padding: 0px 10px;
|
box-sizing: border-box;
|
border-bottom: 1px solid #e8e8e8;
|
padding-bottom: 2px;
|
position: relative;
|
.el-card__body {
|
padding: 5px;
|
box-sizing: border-box;
|
.el-carousel__item {
|
background-color: #fff !important;
|
}
|
}
|
li {
|
height: 150px;
|
padding-top: 10px;
|
.info {
|
.leftInfo,
|
.rightInfo {
|
display: inline-block;
|
width: 50%;
|
}
|
.infoIcon {
|
height: 24px;
|
cursor: pointer;
|
i {
|
margin: 5px;
|
}
|
}
|
}
|
}
|
.img-box {
|
width: 94%;
|
margin: 0px auto;
|
position: relative;
|
.img-box-img {
|
width: 40%;
|
}
|
.img-box-p {
|
position: absolute;
|
background-color: red;
|
color: #fff;
|
text-align: center;
|
width: 34px;
|
height: 16px;
|
line-height: 16px;
|
border-top-right-radius: 5px;
|
border-top-left-radius: 5px;
|
bottom: 2px;
|
left: calc(50% - 17px);
|
}
|
}
|
}
|
.el-carousel__item .medium {
|
color: #273a53;
|
font-size: 14px;
|
opacity: 0.75;
|
line-height: 50px;
|
margin: 0;
|
}
|
|
.el-carousel__item:nth-child(2n) {
|
background-color: #e0e3e7;
|
}
|
|
.el-carousel__item:nth-child(2n + 1) {
|
background-color: #e0e3e7;
|
}
|
.el-carousel__indicators {
|
display: none;
|
}
|
.lookMore {
|
height: 38px;
|
line-height: 38px;
|
b {
|
cursor: pointer;
|
text-decoration: underline;
|
}
|
}
|
.lookMore:hover {
|
// color: red;
|
color: rgb(61, 104, 225);
|
}
|
}
|
</style>
|
