<template>
|
<div class="alarm_realTime">
|
<div class="alarm_top header_alarm">
|
<img class="alarm_img" :src="require('@/assets/images/regionalOverview/alarm.png')" alt="">
|
<span class="alarm_reminder">污染报警提醒(今日报警{{ totalNumber }}条) <img class="reminder_img" :src="require('@/assets/images/regionalOverview/smallBell.gif')" alt=""></span>
|
<img class="open" :src="require('@/assets/images/regionalOverview/open.png')" alt="" style="cursor:pointer" @click="turnAlarmTableVisible">
|
</div>
|
<div class="alarm_content">
|
<div class="alarm_info">
|
<div class="alarm_title">
|
<span v-for="(item, key) in tableTitle" :key="key"> {{ item }}</span>
|
</div>
|
<div v-for="(item, key) in tableData" :key="key" class="per_alarm" @click="showInfo($event, item)" @mouseleave="hiddenCard">
|
<span>{{ item.alarm_time.substr(11, 5) }}</span>
|
<span>{{ item.deviceName }}</span>
|
<span>{{ item.index + '' + item.alarm_type }}</span>
|
</div>
|
</div>
|
</div>
|
<div
|
id="alarm_height"
|
class="alarm_bubble"
|
:style="{ position: 'fixed', right: '400px', width: '380px', backgroundColor: '#fff',top: dynamicTop, display: showOrHidden}"
|
v-if="this.tableData.length > 0"
|
>
|
<!-- -->
|
|
<div class="alarm_bubble_top">
|
<span class="alarm_bubble_top_left">七星瓢虫环境科技</span>
|
<span class="alarm_bubble_top_right">{{ obj.alarm_time.substr(11, 5) }}</span>
|
</div>
|
<div class="alarm_bubble_body">
|
<div><span>【时间】</span><span>{{ obj.alarm_time.substr(0, 10) + ' ' + obj.alarm_time.substr(11, 5) }}</span></div>
|
<div><span>【点位】</span><span>{{ obj.deviceName }}</span></div>
|
<div><span>【报警】</span><span>{{ obj.index + '' + obj.alarm_type }}</span></div>
|
<div><span>【详情】</span><span>{{ obj.alarm_information }}</span></div>
|
</div>
|
</div>
|
<div v-else >
|
<el-empty description="暂无报警数据" :image-size="60"></el-empty>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Bus from '@/Bus'
|
export default {
|
name: 'AlarmReminder',
|
props: {
|
map: {
|
type: Object,
|
default: null
|
}
|
},
|
data() {
|
return {
|
tableTitle: ['报警时间', '点位', '报警信息'],
|
tableData: [],
|
totalNumber: 0,
|
dynamicTop: 0,
|
bubbleTop: 0,
|
showOrHidden: 'none',
|
obj: {
|
alarm_time: ''
|
}
|
}
|
},
|
mounted() {
|
Bus.$on('monitorPointIds', (mIds) => {
|
// console.log(mIds)
|
})
|
this.alarmReminder()
|
},
|
methods: {
|
// 显示报警信息详情
|
showInfo(event, obj) {
|
this.obj = obj
|
const lngLat = [this.obj.latitude, this.obj.longitude]
|
this.map.setView(lngLat, 18)
|
// 获取气泡的高度
|
this.showOrHidden = 'block'
|
const parantNode = event.target.parentElement
|
// 获取节点距离浏览器视口的高度
|
let top = parantNode.getBoundingClientRect().top
|
// 获取节点距离浏览器视口的宽度
|
const left = parantNode.getBoundingClientRect().left
|
// 获取滚动条滚动距离
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
|
// 两个top相加就是节点真正的top值
|
setTimeout(() => {
|
this.bubbleTop = document.getElementById('alarm_height').clientHeight
|
top = top + scrollTop - this.bubbleTop + 24 + 'px'
|
this.dynamicTop = top
|
})
|
},
|
// 隐藏显示的卡片
|
hiddenCard() {
|
this.showOrHidden = 'none'
|
},
|
// 获取数据
|
alarmReminder() {
|
this.$request({
|
url: '/alarmInfo/alarmReminder',
|
method: 'get',
|
params: {
|
organization_id: this.$store.state.orgId,
|
size: 3
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.tableData = res.data.alarmInfors
|
this.totalNumber = res.data.totalNumber
|
}
|
})
|
},
|
turnAlarmTableVisible() {
|
// this.$store.state.alarmTableVisible = true
|
this.$Bus.$emit('alarmTableVisible', true)
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
.alarm_realTime {
|
width: 100%;
|
margin-top: 6px;
|
background-color: #fff;
|
//box-shadow: 0 0 5px 1px #999;
|
padding: 0;
|
border: solid 1px #d9d9d9;
|
border-radius: 3px;
|
box-sizing: border-box;
|
}
|
.alarm_realTime > .alarm_top {
|
display: inline-block;
|
outline: none;
|
width: 100%;
|
float: left;
|
}
|
.header_alarm {
|
position: relative;
|
height: 40px;
|
background-color: #F8F7F7;
|
.alarm_img {
|
position: absolute;
|
top: 6px;
|
left: 16px;
|
width: 20px;
|
}
|
.alarm_reminder {
|
position: absolute;
|
height: 40px;
|
line-height: 40px;
|
left: 40px;
|
font-size: 15px;
|
color: #808080;
|
.reminder_img {
|
margin-left: 6px;
|
margin-top: -3px;
|
width: 24px;
|
vertical-align: middle;
|
}
|
}
|
.open {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
width: 20px;
|
line-height: 40px;
|
}
|
}
|
|
.alarm_content {
|
width: 100%;
|
padding: 0 12px;
|
margin-top: 50px;
|
margin-bottom: 12px;
|
.alarm_title {
|
color: #fff;
|
font-size: 14px;
|
background-color: #66b1ff;
|
font-weight: 500;
|
height: 40px;
|
line-height: 40px;
|
border-radius: 4px 4px 0 0 ;
|
span:nth-child(1) {
|
width: 24%;
|
}
|
span:nth-child(2) {
|
width: 30%;
|
}
|
span:nth-child(3) {
|
width: 44%;
|
}
|
span {
|
display: inline-block;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
}
|
}
|
.per_alarm {
|
height: 48px;
|
margin-top: 0;
|
border-bottom: 1px solid rgba(128, 128, 128, .6);
|
border-left: 1px solid rgba(128, 128, 128, .6);
|
border-right: 1px solid rgba(128, 128, 128, .6);
|
span {
|
border-right: 1px solid rgba(128, 128, 128, .6);
|
display: inline-block;
|
color: rgba(128, 128, 128, 1);
|
height: 48px;
|
line-height: 48px;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
text-align: center;
|
white-space:nowrap;
|
}
|
span:nth-child(1) {
|
width: 24%;
|
}
|
span:nth-child(2) {
|
width: 30%;
|
word-wrap:break-word;
|
word-break: normal;
|
}
|
span:nth-child(3) {
|
width: 40%;
|
border-right: none;
|
word-wrap:break-word;
|
word-break: normal;
|
}
|
}
|
.per_alarm:nth-last-child(1) {
|
border-radius: 0 0 4px 4px;
|
}
|
.per_alarm:hover {
|
cursor: pointer;
|
background-color: rgba(108, 177, 248, .12);
|
}
|
}
|
|
.text {
|
font-size: 14px;
|
}
|
|
.alarm_bubble {
|
border-radius: 8px;
|
.alarm_bubble_top {
|
width: 100%;
|
height: 45px;
|
line-height: 44px;
|
padding: 0 10px;
|
background-color: #66b1ff;
|
border-radius: 8px 8px 0 0;
|
font-size: 16px;
|
color: #fff;
|
span:nth-last-child(2){
|
float: left;
|
}
|
span:nth-last-child(1){
|
float: right;
|
}
|
}
|
.alarm_bubble_body {
|
div {
|
color: #808080;
|
width: 100%;
|
span:nth-child(1) {
|
display: inline-block;
|
float: left;
|
line-height: 26px;
|
font-size: 14px;
|
}
|
span:nth-child(2) {
|
word-wrap:break-word;
|
line-height: 26px;
|
font-size: 14px;
|
text-indent: 2px;
|
}
|
|
}
|
padding: 5px 10px;
|
}
|
}
|
|
</style>
|
