<template>
|
<div class="message">
|
<el-tooltip id="notification" :popper-class="'message-btn'" effect="dark" content="通知" placement="left">
|
<div :class='["iconBtn",selectGroup === true ? "active-button" : ""]' @click="changeSelectMouse" >
|
<i class="icon el-icon-bell" ></i>
|
</div>
|
</el-tooltip>
|
<el-dialog class="dialogMessage" :visible.sync="isShowMessage" title="通知" :modal="false" v-dialogDrag :before-close="handleClose">
|
<p class="conclusion">
|
总体概况：化集团总共有 <span>589</span> 个监测点，涉及 <span>44</span> 家企业。其中，<span>453</span> 个点排放达标，<span class="red">4</span> 个出现超标。
|
</p>
|
<ul class="detail">
|
<li>废水报警数量：
|
<el-popover placement="bottom-end" trigger="click" popper-class="popovers" title="二级风险地块">
|
<refinery :tableHeader="tableHeader1" :tableContent="tableContent1"></refinery>
|
<u slot="reference" style="color: #00ffff">22</u>
|
</el-popover>
|
个</li>
|
<li>硫化氢高报数量：<span>3</span>个</li>
|
<li>废气报警数量：<span>3</span>个</li>
|
<li>可燃气高报数量：<span>3</span>个</li>
|
<li>固废报警数量：<span>3</span>个</li>
|
<li>应急处置事件数量：<span>3</span>个</li>
|
</ul>
|
<div class="footer">
|
<el-button type="primary" size="mini" @click="btnForecastWarningDetails">预报警明细</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
//
|
import bus from '@/eventBus'
|
import Refinery from '@components/table/components/componented/refinery'
|
export default {
|
name: 'index',
|
components: {
|
Refinery
|
},
|
data () {
|
return {
|
selectGroup: false,
|
isShowMessage: false,
|
tableHeader1: [
|
{ name: '企业名称', width: '140', propS: 'value1' },
|
{ name: '监测点名称', width: '140', propS: 'value2' },
|
{ name: '污染物', width: '140', propS: 'value3' },
|
{ name: '监测值', width: '140', propS: 'value4' },
|
{ name: '标准值', width: '140', propS: 'value5' },
|
{ name: '预警值', width: '140', propS: 'value6' },
|
{ name: '报警时间', width: '140', propS: 'value7' }
|
],
|
tableContent1: [
|
{ value1: '天津石化', value2: '炼油化工排污水', value3: 'COD', value4: '30.07', value5: '35', value6: '30', value7: '2021-06-01 04：00' },
|
{ value1: '天津石化', value2: '炼油化工排污水', value3: 'COD', value4: '30.07', value5: '35', value6: '30', value7: '2021-06-01 04：00' },
|
{ value1: '天津石化', value2: '炼油化工排污水', value3: 'COD', value4: '30.07', value5: '35', value6: '30', value7: '2021-06-01 04：00' }
|
]
|
}
|
},
|
mounted () {
|
const that = this
|
bus.$on('changeState', function (state) {
|
if (state.num !== 6 && state.type) {
|
that.selectGroup = false
|
}
|
})
|
},
|
methods: {
|
changeSelectMouse () {
|
this.selectGroup = !this.selectGroup
|
this.isShowMessage = this.selectGroup
|
if (this.selectGroup) {
|
document.querySelector('#notification').style.opacity = '0'
|
this.isShow = []
|
} else {
|
this.isShow = !this.isShow
|
this.active = -1
|
}
|
const state = {
|
type: this.selectGroup,
|
num: 6
|
}
|
bus.$emit('changeState', state)
|
},
|
btnForecastWarningDetails () {
|
bus.$emit('forecastWarningDetails', '')
|
},
|
handleClose (done) {
|
this.selectGroup = false
|
this.isShowMessage = false
|
document.querySelector('#notification').style.opacity = '1'
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.message{
|
z-index: 2000;
|
position: absolute;
|
right: 0.14583rem;
|
top: 0.11979rem;
|
.dialogMessage{
|
/deep/ .el-dialog{
|
width: 30vw;
|
right: 0.14583rem;
|
top: 0.11979rem;
|
}
|
.conclusion{
|
text-indent:2em;
|
span{color: #95F204;}
|
span.red{color: red}
|
}
|
.detail{
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 5px;
|
padding-top: 5px;
|
border-top: 1px solid rgba(0, 255, 246, 0.14);
|
border-bottom: 1px solid rgba(0, 255, 246, 0.14);
|
>li{
|
width: 50%;
|
margin-bottom: 5px;q
|
cursor: pointer;
|
display: flex;
|
span{padding: 0 5px;color: #00fff6;cursor: pointer}
|
}
|
}
|
.footer{
|
padding-top: 5px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
}
|
</style>
|
