<template>
|
<div class="alarm-popup">
|
<div class="alarm-popup-container" v-if="visible">
|
<div class="alarm-popup-content">
|
<div class="alarm-popup-header">
|
<div class="alarm-popup-title">
|
<div v-if="speakItem.txt">
|
<i class="iconfont el-icon-shengyin-kai"></i>
|
<span>{{speakItem.txt}}</span>
|
</div>
|
<div v-else>
|
<i class="el-icon-info"></i>
|
<span>告警提示！</span>
|
</div>
|
</div>
|
<div class="alarm-popup-voice" v-if="!speakItem.txt">
|
<i class="iconfont el-icon-shengyin-kai"></i>
|
</div>
|
<div class="alarm-popup-close" @click="close">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<div class="alarm-popup-body">
|
<div class="page-flex-box">
|
<div class="page-flex-box-header">
|
<el-radio-group v-model="timeType">
|
<el-badge
|
v-for="(item, key) in times" :key="'key'+key"
|
:value="item.value" class="el-badge-radio">
|
<el-radio :label="item.key" border size="mini">{{ item.label }}</el-radio>
|
</el-badge>
|
</el-radio-group>
|
</div>
|
<div class="page-flex-box-body">
|
<el-table
|
class="popup-table"
|
stripe
|
size="small"
|
header-row-class-name="header-primary"
|
height="100%"
|
tooltip-effect="dark"
|
:data="tblAlarmList">
|
<el-table-column
|
prop="stationName3"
|
align="center"
|
label="机房名称"
|
:show-overflow-tooltip="true"
|
min-width="240"></el-table-column>
|
<el-table-column
|
prop="alarmName"
|
align="center"
|
label="告警名称"
|
min-width="180"></el-table-column>
|
<el-table-column
|
prop="alarmPoint"
|
align="center"
|
label="告警类型"
|
min-width="120"></el-table-column>
|
<el-table-column
|
prop="alarmGroupName"
|
align="center"
|
label="电池组名称"
|
min-width="120"></el-table-column>
|
<el-table-column
|
prop="alarmMon"
|
align="center"
|
label="单体编号"
|
:show-overflow-tooltip="true"
|
min-width="80"></el-table-column>
|
<el-table-column
|
prop="almStartTime"
|
align="center"
|
label="告警时间"
|
min-width="180"></el-table-column>
|
<el-table-column label="操作" width="180" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="success"
|
size="mini" @click="clickItem(scope.row)">详情</el-button>
|
<el-button
|
type="danger"
|
size="mini" @click="handleTimeout(scope.row)">延时播报</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="alarm-popup-mini" v-else>
|
<el-badge :value="times[0].value">
|
<i class="el-icon-warning" @click="show"></i>
|
</el-badge>
|
</div>
|
<alarm-details :visible.sync="detailsVisible" :params="params">
|
<div slot="footer" class="details-footer">
|
<el-button type="danger" size="small" @click="routeToPage">更多>></el-button>
|
</div>
|
</alarm-details>
|
<!-- 告警延时设置 -->
|
<el-dialog
|
title="告警延时设置"
|
width="auto"
|
:visible.sync="alarmTimeoutVisible"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center dialog-bg"
|
:modal-append-to-body="false">
|
<alarm-timeout-setting v-if="alarmTimeoutVisible" :visible.sync="alarmTimeoutVisible" :id="id" :alarm-state="alarmState" :alarm-type="alarmId"></alarm-timeout-setting>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import getNowStamp from "@/assets/js/tools/getNowStamp";
|
import AlarmDetails from "@/views/alarmMager/components/alarm-details.vue";
|
import alarmDetails from "@/views/alarmMager/js/api/alarmDetails";
|
import AlarmTimeoutSetting from "@/views/alarmMager/components/alarm-timeout-setting.vue";
|
import VueDraggableResizable from 'vue-draggable-resizable';
|
export default {
|
name: "AlarmPopup",
|
components: {AlarmTimeoutSetting, AlarmDetails, VueDraggableResizable},
|
props: {
|
list: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
updateFlag: {
|
type: Number,
|
default: 0
|
},
|
speakInfo: {
|
type: Object,
|
default() {
|
return {
|
devId: 0,
|
almId: 0
|
}
|
}
|
}
|
},
|
newAlarmNum: [],
|
data() {
|
return {
|
visible: false,
|
detailsVisible: false,
|
alarmTimeoutVisible: false,
|
stationObj: {},
|
id: "",
|
alarmId: "",
|
alarmState: 0,
|
newAlarmList: [],
|
newAlarmNum: [],
|
oneYear: 60*60*24*365*1000,
|
timeType: 5,
|
times: [
|
{
|
key: 5,
|
label: "全部",
|
range: [0, 60*24*30*12*100],
|
value: 0,
|
list: [],
|
},
|
{
|
key: 1,
|
label: "30分钟",
|
range: [0, 30],
|
value: 0,
|
list: [],
|
},
|
{
|
key: 2,
|
label: "24小时",
|
range: [30, 60*24],
|
value: 0,
|
list: [],
|
},
|
{
|
key: 3,
|
label: "7天",
|
range: [60*24, 60*24*7],
|
value: 0,
|
list: [],
|
},
|
{
|
key: 4,
|
label: "30天",
|
range: [60*24*7, 60*24*30],
|
value: 0,
|
list: [],
|
},
|
{
|
key: 6,
|
label: "3个月",
|
range: [60*24*30, 60*24*30*3],
|
value: 0,
|
list: [],
|
},
|
{
|
key: 7,
|
label: "3个月以上",
|
range: [60*24*30*3, 60*24*30*12*100],
|
value: 0,
|
list: [],
|
},
|
],
|
allAlarms: [],
|
params: {
|
almSource: "", // 告警源
|
almName: "", // 告警名称
|
almLevel:"", // 告警等级
|
almPoint: "", // 告警点
|
almReason: "", // 告警原因
|
almAdvices: [] // 告警处理建议
|
},
|
clickItemVal: {},
|
speakItem: {
|
txt: "",
|
},
|
};
|
},
|
watch: {
|
updateFlag() {
|
this.setNewAlarmNum();
|
},
|
speakInfo() {
|
this.setNewAlarmNum();
|
},
|
},
|
methods: {
|
searchAll(){
|
alarmDetails.searchAllAlarm().then(res=>{
|
let rs = res.data;
|
if(rs.code == 1 && rs.data) {
|
this.allAlarms = rs.data2.map(item=>{
|
item.value = item.almId+"&&&"+item.almName+"&&&"+item.highorlow+"&&&"+item.almType;
|
item.label = item.almName+(item.highorlow == 0?"":item.highorlow == 1?"低":"高");
|
return item;
|
});
|
}
|
}).catch(error=>{
|
console.log(error);
|
});
|
},
|
handleTimeout(val) {
|
this.id = val.battGroupId;
|
this.alarmId = val.almId;
|
if (val.alarmType == '1') { // 设备告警
|
this.alarmState = 1;
|
}else if(val.alarmType == "2") { // 电源告警
|
this.alarmState = 0;
|
}else { // 电池告警
|
this.alarmState = 2;
|
this.alarmId = val.almSignalId;
|
}
|
this.alarmTimeoutVisible = true;
|
},
|
clickItem(val) {
|
this.clickItemVal = val;
|
this.stationObj = val.stationObj;
|
this.alarmId = val.almId;
|
let almLevel = val.alarmLevel;
|
let highorlow = 0;
|
let almSignalId = val.almSignalId;
|
let almSource = "通信电源"
|
if (val.alarmType == '1') { // 设备告警
|
highorlow = 0;
|
almSource = "BTS设备";
|
}else if(val.alarmType == "2") { // 电源告警
|
almSource = "通信电源";
|
highorlow = 0;
|
}else { // 电池告警
|
almSource = "电池组";
|
if(almSignalId%2 == 0) {
|
highorlow = 1;
|
}else {
|
highorlow = 2;
|
}
|
}
|
|
let almName = "";
|
let almPoint = "";
|
let allAlm = this.allAlarms;
|
for(let j=0; j<allAlm.length; j++) {
|
let itemList = allAlm[j];
|
if(itemList.almId == val.almId && itemList.highorlow == highorlow) {
|
almName = itemList.almName;
|
almName+= itemList.highorlow == 0?"":itemList.highorlow == 1?"低":"高";
|
almPoint = itemList.almPoint;
|
}
|
}
|
alarmDetails.searchById(val.almId, highorlow).then(res=>{
|
let rs = res.data;
|
if(rs.code ==1 && rs.data) {
|
let data = rs.data2;
|
let almReason = data[0].almReason;
|
let almAdvices = [];
|
for(let i=0; i<data.length; i++) {
|
almAdvices.push(data[i].almAdvice);
|
}
|
this.params = {
|
almSource, // 告警源
|
almName, // 告警名称
|
almLevel, // 告警等级
|
almPoint, // 告警点
|
almReason, // 告警原因
|
almAdvices // 告警处理建议
|
};
|
this.detailsVisible = true;
|
}else {
|
// this.$alert('暂无'+almName+"处理方案，请联系管理员添加", '系统提示', {
|
// confirmButtonText: '确定',
|
// callback: action => {}
|
// });
|
this.routeToPage();
|
}
|
}).catch(error=>{
|
this.routeToPage();
|
});
|
// if (val.alarmType == '1') {
|
// //设备实时告警
|
// this.$router.push('/alarmMager/deviceTimequery' + this.search + '&fromType=fromIndex')
|
// } else {
|
// //电池实时告警
|
// this.$router.push('/alarmMager/batteryrTimequery' + this.search + '&fromType=fromIndex')
|
// }
|
},
|
routeToPage() {
|
let val = this.clickItemVal;
|
if (val.alarmType == '1') {
|
//设备实时告警
|
this.$router.push('/alarmMager/deviceTimequery' + this.search + '&fromType=fromIndex')
|
} else if(val.alarmType=='2') {
|
//电源实时告警
|
this.$router.push('/alarmMager/powerRealtimeInfo' + this.search + '&fromType=fromIndex')
|
}else {
|
//电池实时告警
|
this.$router.push('/alarmMager/batteryrTimequery' + this.search + '&fromType=fromIndex')
|
}
|
this.detailsVisible = false;
|
this.close();
|
},
|
close() {
|
this.visible = false;
|
},
|
show() {
|
this.visible = true;
|
},
|
setNewAlarmNum() {
|
let speakInfo = this.speakInfo;
|
let nums = [];
|
let list = [];
|
let speakItem = {
|
txt: "",
|
};
|
let filterList = this.filterList;
|
for(let i=0; i<filterList.length; i++) {
|
let item = filterList[i];
|
// 返回当前正在播报的语音内容
|
if(item.almId == speakInfo.almId && item.battGroupId == speakInfo.devId) {
|
speakItem = {...item};
|
speakItem.txt = item.stationName+"出现了"+item.alarmName;
|
}
|
|
let nowStamp = getNowStamp();
|
let inputDate = Date.parse(item.almStartTime); //输入时间戳
|
if ((nowStamp - inputDate) < this.oneYear) {
|
list.push(item);
|
}
|
}
|
|
for(let i=0; i<this.list.length; i++) {
|
let item = this.list[i];
|
let nowStamp = getNowStamp();
|
let inputDate = Date.parse(item.almStartTime); //输入时间戳
|
if ((nowStamp - inputDate) < this.oneYear) {
|
nums.push(item.num);
|
}
|
}
|
|
this.newAlarmList = list;
|
|
// 根据时间分类，分类数据
|
for(let i=0; i<this.times.length; i++) {
|
let time = this.times[i];
|
let timesList = [];
|
for(let i=0; i<filterList.length; i++) {
|
let item = filterList[i];
|
let nowStamp = new Date().getTime();
|
let inputDate = Date.parse(item.almStartTime); //输入时间戳
|
if ((nowStamp - inputDate) > time.range[0]*60*1000 && (nowStamp - inputDate) <= time.range[1]*60*1000) {
|
timesList.push(item);
|
}
|
}
|
time.value = timesList.length;
|
time.list = timesList;
|
}
|
let isShow = false;
|
let newAlarmNum = this.$options.newAlarmNum;
|
// 最新告警的长度变化
|
if(newAlarmNum.length < nums.length) {
|
isShow = true;
|
}else {
|
for(let i=0; i<nums.length; i++) {
|
let item1 = nums[i];
|
let isIn = false;
|
for(let j=0; j<newAlarmNum.length;j++) {
|
let item2 = newAlarmNum[j];
|
if(item1 == item2) {
|
isIn = true;
|
}
|
}
|
if(!isIn) {
|
isShow = true;
|
break;
|
}
|
}
|
}
|
|
if(isShow) {
|
this.show();
|
}
|
|
this.$options.newAlarmNum = nums;
|
this.speakItem = speakItem;
|
},
|
},
|
computed: {
|
search() {
|
let list = this.stationObj;
|
let addressInfo = list.stationName.split("-");
|
let id = this.alarmId;
|
return '?province=' + addressInfo[0] + '&city=' + addressInfo[1] + '&county=' + addressInfo[2] +
|
'&home=' + list.stationName3 + '&alamId=' + id + "&stationName=" + list.stationName+"&pageFlag="+Math.random();
|
},
|
// newAlarmList() {
|
// let list = [];
|
// for(let i=0; i<this.list.length; i++) {
|
// let item = this.list[i];
|
// let nowStamp = new Date().getTime();
|
// let inputDate = Date.parse(item.almStartTime); //输入时间戳
|
// if ((nowStamp - inputDate) < this.oneYear) {
|
// list.push(item);
|
// }
|
// }
|
// return list;
|
// },
|
tblAlarmList() {
|
let timeType = this.timeType;
|
let list = [];
|
for(let i=0; i<this.times.length; i++) {
|
let time = this.times[i];
|
if(time.key == timeType) {
|
list = time.list;
|
}
|
}
|
return list;
|
},
|
filterList() {
|
let list = [];
|
for(let i=0; i<this.list.length; i++) {
|
let listI = this.list[i];
|
let isIn = false;
|
for(let j=0; j<list.length; j++) {
|
let listJ = list[j];
|
if(listI.almId === listJ.almId && listI.stationName3 === listJ.stationName3) {
|
listJ.alarmMon = listJ.alarmMon + ',' + listI.alarmMon;
|
isIn = true;
|
break;
|
}
|
}
|
// 如果没有同类型的机房，添加一条记录
|
if(!isIn) {
|
list.push(listI);
|
}
|
}
|
return list;
|
}
|
},
|
mounted() {
|
this.searchAll();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.alarm-popup {
|
position: fixed;
|
bottom: 0;
|
right: 0;
|
z-index: 98;
|
user-select: none;
|
}
|
.alarm-popup-container {
|
position: relative;
|
padding: 3px;
|
}
|
.alarm-popup-content {
|
position: relative;
|
background-color: #EE9741;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
border: 1px solid #0a56f7;
|
}
|
.radius-border {
|
position: absolute;
|
width: 24px;
|
height: 24px;
|
|
}
|
.radius-border.top-left {
|
border-top: 3px solid #0ca7e2;
|
border-left: 3px solid #0ca7e2;
|
top: 0;
|
left: 0;
|
border-top-left-radius: 4px;
|
}
|
|
.radius-border.top-right {
|
border-top: 3px solid #0ca7e2;
|
border-right: 3px solid #0ca7e2;
|
top: 0;
|
right: 0;
|
border-top-right-radius: 4px;
|
}
|
.radius-border.bottom-left {
|
border-bottom: 3px solid #0ca7e2;
|
border-left: 3px solid #0ca7e2;
|
bottom: 0;
|
left: 0;
|
border-bottom-left-radius: 4px;
|
}
|
|
.radius-border.bottom-right {
|
border-bottom: 3px solid #0ca7e2;
|
border-right: 3px solid #0ca7e2;
|
bottom: 0;
|
right: 0;
|
border-bottom-right-radius: 4px;
|
}
|
.alarm-popup-header {
|
position: relative;
|
background-color: #D8741A;
|
}
|
.alarm-popup-header .alarm-popup-title {
|
line-height: 42px;
|
font-size: 16px;
|
padding-left: 8px;
|
font-weight: bold;
|
color: #FFFFFF;
|
}
|
.alarm-popup-title i {
|
font-size: 20px;
|
margin-right: 8px;
|
}
|
|
.alarm-popup-close,
|
.alarm-popup-voice {
|
position: absolute;
|
top: 8px;
|
right: 12px;
|
}
|
.alarm-popup-voice {
|
right: 40px;
|
}
|
.alarm-popup-voice i {
|
font-size: 20px;
|
}
|
.alarm-popup-close:hover,
|
.alarm-popup-voice:hover {
|
cursor: pointer;
|
color: #ffe329;
|
}
|
.alarm-popup-close:active,
|
.alarm-popup-voice:active {
|
color: #FF3801;
|
}
|
.alarm-popup-body {
|
min-width: 600px;
|
overflow-y: auto;
|
}
|
.alarm-list {
|
padding: 8px;
|
font-size: 16px;
|
}
|
.alarm-popup-mini {
|
margin-right: 24px;
|
font-size: 24px;
|
color: #ffe329;
|
}
|
.page-flex-box-header {
|
padding: 8px 16px;
|
}
|
.page-flex-box-body {
|
box-sizing: border-box;
|
width: 1326px;
|
height: 420px;
|
padding: 0 8px 8px;
|
}
|
.el-badge-radio {
|
margin-right: 32px;
|
}
|
.el-badge-radio .el-radio {
|
margin-right: 0;
|
background-color: #0b388a;
|
}
|
.el-badge-radio .el-radio.is-checked {
|
background: none;
|
}
|
/deep/ .el-badge-radio .el-radio.is-checked .el-radio__label {
|
color: #0b388a;
|
font-weight: bold;
|
}
|
/deep/ .el-table .header-primary th {
|
background: #F3B67A;
|
color: #0b388a;
|
font-weight: bold;
|
}
|
/deep/ .el-table.popup-table {
|
background-color: #F3B67A;
|
color: #000;
|
}
|
/deep/ .el-table.popup-table td {
|
background-color: #FCEAD9;
|
}
|
.details-footer {
|
padding: 8px;
|
text-align: right;
|
}
|
</style>
|
