故障报警初提交
This commit is contained in:
joylink_zhaoerwei
parent
fa6883fe8f
commit
01471bba12
@ -4,52 +4,111 @@
|
||||
<audio ref="audio" />
|
||||
</div>
|
||||
<div v-if="showAlarmMessageList">
|
||||
<div v-for="(item, index) in alarmDetailMessageList" :key="index">
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
title="设备故障"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="item.show"
|
||||
width="40%"
|
||||
class="yellow"
|
||||
:class="[{'orange':item.color == 'O','red':item.color == 'R'},itemsstyle[index]]"
|
||||
>
|
||||
<div class="alarm-message-detail">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>故障信息</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="goToAlarmDetail">详情</el-button>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
title="设备故障"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="showAlarmImportantMessage.show"
|
||||
width="40%"
|
||||
class="yellow"
|
||||
:class="{'orange':showAlarmImportantMessage.color == 'O','red':showAlarmImportantMessage.color == 'R'}"
|
||||
>
|
||||
<div class="alarm-message-detail">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>故障信息</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="goToAlarmDetail">详情</el-button>
|
||||
</div>
|
||||
<div class="text item">
|
||||
时间：{{ showAlarmImportantMessage.time }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
级别：{{ showAlarmImportantMessage.levelNew }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
设备：{{ showAlarmImportantMessage.deviceCodeNew }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
类型：{{ showAlarmImportantMessage.typeNew }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
信息：{{ showAlarmImportantMessage.descriptionNew }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
原因：{{ showAlarmImportantMessage.reason }}
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>辅助决策信息</span>
|
||||
</div>
|
||||
<div class="text item">
|
||||
（1）信息报送人员/群组：{{ showAlarmImportantMessage.showDecisionMessage.personGroup }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
（2）电话通报：{{ showAlarmImportantMessage.showDecisionMessage.telephoneNotified }}
|
||||
</div>
|
||||
<div v-if="showAlarmImportantMessage.color == 'O'" class="text item">
|
||||
（3）PIS信息模版：{{ showAlarmImportantMessage.pisTemplate }}
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="alarm-message-All">
|
||||
<el-card class="box-card">
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<div v-for="(item, index) in alarmDetailMessageGroup" :key="index">
|
||||
<el-collapse-item>
|
||||
<template slot="title">
|
||||
故障汇总：{{ item[0].levelNew }}
|
||||
</template>
|
||||
<el-table
|
||||
:data="item"
|
||||
border
|
||||
:cell-style="{'text-align':'center'}"
|
||||
:header-cell-style="{'text-align':'center'}"
|
||||
style="width: 100%"
|
||||
max-height="250"
|
||||
>
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="时间"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="levelNew"
|
||||
label="级别"
|
||||
width="70"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="deviceCodeNew"
|
||||
label="设备"
|
||||
width="105"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="typeNew"
|
||||
label="类型"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="descriptionNew"
|
||||
label="信息"
|
||||
/>
|
||||
<!-- <el-table-column label="操作" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
:type="dealAlarmMessage[scope.$index] ? 'success' : 'danger'"
|
||||
@click="handleAlarmMessage(scope.$index,scope.row)"
|
||||
>{{ dealAlarmMessage[scope.$index] ? '已处理' : '未处理' }}</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</el-collapse-item>
|
||||
</div>
|
||||
<div class="text item">
|
||||
时间：{{ item.time }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
级别：{{ item.levelNew }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
设备：{{ item.deviceCodeNew }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
类型：{{ item.typeNew }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
信息：{{ item.descriptionNew }}
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>辅助决策信息</span>
|
||||
</div>
|
||||
<div class="text item">
|
||||
（1）信息报送人员/群组：{{ item.showDecisionMessage.personGroup }}
|
||||
</div>
|
||||
<div class="text item">
|
||||
（2）电话通报：{{ item.showDecisionMessage.telephoneNotified }}
|
||||
</div></el-card>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-collapse></el-card>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -61,22 +120,8 @@ export default {
|
||||
name: 'ErrrorMessageBox',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dealAlarmMessage:[true, false],
|
||||
activeName: '0',
|
||||
showAlarmMessageList:false,
|
||||
tableData: [{
|
||||
date: '2023-04-17',
|
||||
name: '车厢编号10',
|
||||
id: '001',
|
||||
message:'电路信号故障,车辆二次设备无法运行',
|
||||
tag: '一般故障'
|
||||
}, {
|
||||
date: '2023-04-21',
|
||||
name: '车厢编号8',
|
||||
id: '005',
|
||||
message:'新的故障信息',
|
||||
tag: '重大故障'
|
||||
}],
|
||||
decisionMessage:[{
|
||||
personGroup:'主要领导、应急管理部负责人、应急管理室负责人报送，并发党群信息群；故障群/应急群发布。',
|
||||
telephoneNotified:'如故障属于I类信息，分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。'
|
||||
@ -93,7 +138,11 @@ export default {
|
||||
]),
|
||||
showDecisionMessage:{},
|
||||
alarmDetailMessageList:[],
|
||||
itemsstyle: ['item0', 'item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9']
|
||||
alarmDetailMessageGroup:[],
|
||||
showAlarmImportantMessage:{},
|
||||
dealAlarmMessage:[true, false],
|
||||
alarmReasonMap:[],
|
||||
oldShowAlarmMessage:{}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -102,9 +151,6 @@ export default {
|
||||
]),
|
||||
alarmDetailMessage() {
|
||||
return this.$store.state.socket.simulationAlarmInfo;
|
||||
},
|
||||
finishDealAlarmMessage() {
|
||||
return this.dealAlarmMessage.reduce((prev, curr)=> curr === false ? prev + 1 : prev, 0);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -112,16 +158,9 @@ export default {
|
||||
if (newValue.length > 0) {
|
||||
const clone = JSON.parse(JSON.stringify(this.alarmDetailMessage));
|
||||
this.alarmDetailMessageList.push(...clone);
|
||||
let index;
|
||||
this.alarmDetailMessageList.forEach((item, i)=>{
|
||||
this.$set(item, 'show', true);
|
||||
if (new Date(newValue[0].time).getTime() - new Date(item.time).getTime() > 90000) {
|
||||
index = i;
|
||||
}
|
||||
});
|
||||
if (index !== undefined) {
|
||||
this.alarmDetailMessageList.splice(0, index + 1);
|
||||
}
|
||||
if (newValue[0].handleMethod === 'NCC' && this.$store.getters['map/getDeviceByCode'](this.alarmDetailMessageList[0].deviceCode) !== undefined) {
|
||||
this.showAlarmPlayAlarmMusic();
|
||||
}
|
||||
@ -133,18 +172,18 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
playAlarmMusic() {
|
||||
let alarmMusic = new Audio();
|
||||
alarmMusic = require('@/assets/buzzer.mp3');
|
||||
this.$refs.audio.src = alarmMusic;
|
||||
this.$refs.audio.play();
|
||||
},
|
||||
showAlarmPlayAlarmMusic() {
|
||||
if (this.$refs.audio.paused) {
|
||||
this.playAlarmMusic();
|
||||
}
|
||||
this.showAlarm();
|
||||
},
|
||||
playAlarmMusic() {
|
||||
let alarmMusic = new Audio();
|
||||
alarmMusic = require('@/assets/buzzer.mp3');
|
||||
this.$refs.audio.src = alarmMusic;
|
||||
this.$refs.audio.play();
|
||||
},
|
||||
showAlarm() {
|
||||
this.alarmDetailMessageList.forEach((showAlarmMessage)=>{
|
||||
showAlarmMessage.show = true;
|
||||
@ -162,10 +201,48 @@ export default {
|
||||
showAlarmMessage.showDecisionMessage = this.decisionMessage[1];
|
||||
}
|
||||
});
|
||||
const newAlarmMessage = this.alarmDetailMessageList.at(-1);
|
||||
if (this.oldShowAlarmMessage.level == undefined) {
|
||||
this.oldShowAlarmMessage = newAlarmMessage;
|
||||
this.showAlarmImportantMessage = newAlarmMessage;
|
||||
} else if (newAlarmMessage.color == 'O') {
|
||||
this.oldShowAlarmMessage = newAlarmMessage;
|
||||
this.showAlarmImportantMessage = newAlarmMessage;
|
||||
} else {
|
||||
this.showAlarmImportantMessage = this.oldShowAlarmMessage;
|
||||
}
|
||||
if (this.alarmDetailMessageGroup.length == 0) {
|
||||
this.alarmDetailMessageGroup.push([newAlarmMessage]);
|
||||
this.alarmReasonMap.push(newAlarmMessage.reason);
|
||||
} else if (this.alarmReasonMap.includes(newAlarmMessage.reason)) {
|
||||
const index = this.alarmReasonMap.indexOf(newAlarmMessage.reason);
|
||||
this.alarmDetailMessageGroup[index].push(newAlarmMessage);
|
||||
} else {
|
||||
this.alarmReasonMap.push(newAlarmMessage.reason);
|
||||
this.alarmDetailMessageGroup.push([newAlarmMessage]);
|
||||
}
|
||||
this.showAlarmMessageList = true;
|
||||
},
|
||||
goToAlarmDetail() {
|
||||
}
|
||||
/* handleAlarmMessage(index, row) {
|
||||
this.$confirm('此操作将处理故障信息, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.dealAlarmMessage.splice(index, 1, !this.dealAlarmMessage[index]);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '处理成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消处理'
|
||||
});
|
||||
});
|
||||
} */
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -203,6 +280,12 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarm-message-All{
|
||||
margin-top:10px;
|
||||
.box-card{
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.yellow{
|
||||
/deep/ .el-dialog__body{
|
||||
padding: 0 10px 10px;
|
||||
@ -230,45 +313,4 @@ export default {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
.item0 {
|
||||
top: 0px;
|
||||
z-index: 1501 !important;
|
||||
}
|
||||
.item1 {
|
||||
top:50px;
|
||||
z-index: 1502 !important;
|
||||
}
|
||||
.item2 {
|
||||
top:100px;
|
||||
z-index: 1503 !important;
|
||||
}
|
||||
.item3 {
|
||||
top: 150px;
|
||||
z-index: 1504 !important;
|
||||
}
|
||||
.item4 {
|
||||
top:200px;
|
||||
z-index: 1505 !important;
|
||||
}
|
||||
.item5 {
|
||||
top:250px;
|
||||
z-index: 1506 !important;
|
||||
}
|
||||
.item6 {
|
||||
top:300px;
|
||||
z-index: 1507 !important;
|
||||
}
|
||||
.item7 {
|
||||
top:350px;
|
||||
z-index: 1508 !important;
|
||||
}
|
||||
.item8 {
|
||||
top:400px;
|
||||
z-index: 1509 !important;
|
||||
}
|
||||
.item9 {
|
||||
top:450px;
|
||||
z-index: 1510 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user