joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

多故障展示初稿

Browse Source
This commit is contained in:
joylink_zhaoerwei 2023-05-04 17:39:29 +08:00
parent bbf9e9ba0e
commit 91b1e8f5b3
1 changed files with 104 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/views/newMap/display/errrorMessageBox.vue
View File

@ -2,7 +2,7 @@
<div>
<div class="alarm-button">
<el-button type="warning" icon="el-icon-message-solid" circle @click="showAlarm" />
<div v-if="finishDealAlarmMessage>0" class="alarm-counter">{{ finishDealAlarmMessage }}</div>
<div v-if="alarmDetailMessageList.length>0" class="alarm-counter">{{ alarmDetailMessageList.length }}</div>
<audio ref="audio" />
</div>
<!-- <el-dialog
@ -85,60 +85,19 @@
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
:class="itemsstyle[index]"
</el-dialog> -->
<el-dialog
v-dialogDrag
title="设备故障"
:modal="false"
:visible.sync="showAlarmMessage"
width="40%"
class="dialog-alarm-message-detail"
>
<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">
时间：{{ showAlarmInfo.time }}
</div>
<div class="text item">
级别：{{ showAlarmInfo.level }}
</div>
<div class="text item">
设备：{{ showAlarmInfo.deviceCode }}
</div>
<div class="text item">
类型：{{ showAlarmInfo.type }}
</div>
<div class="text item">
信息：{{ showAlarmInfo.description }}
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>辅助决策信息</span>
</div>
<div class="text item">
（1）信息报送人员/群组：{{ showDecisionMessage.personGroup }}
</div>
<div class="text item">
（2）电话通报：{{ showDecisionMessage.telephoneNotified }}
</div></el-card>
</div>
</el-dialog>
<!-- <div v-if="showAlarmMessage">
<div v-for="(item, index) in alarmDetailMessage" :key="index">
<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="700px"
class="dialog-alarm-message-detail"
:class="itemsstyle[index]"
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">
@ -147,19 +106,19 @@
<el-button style="float: right; padding: 3px 0" type="text" @click="goToAlarmDetail">详情</el-button>
</div>
<div class="text item">
时间：{{ showAlarmInfo.time }}
时间：{{ item.time }}
</div>
<div class="text item">
级别：{{ showAlarmInfo.level }}
级别：{{ item.levelNew }}
</div>
<div class="text item">
设备：{{ showAlarmInfo.deviceCode }}
设备：{{ item.deviceCodeNew }}
</div>
<div class="text item">
类型：{{ showAlarmInfo.type }}
类型：{{ item.typeNew }}
</div>
<div class="text item">
信息：{{ showAlarmInfo.description }}
信息：{{ item.descriptionNew }}
</div>
</el-card>
<el-card class="box-card">
@ -167,15 +126,15 @@
<span>辅助决策信息</span>
</div>
<div class="text item">
（1）信息报送人员/群组：{{ showDecisionMessage.personGroup }}
（1）信息报送人员/群组：{{ item.showDecisionMessage.personGroup }}
</div>
<div class="text item">
（2）电话通报：{{ showDecisionMessage.telephoneNotified }}
（2）电话通报：{{ item.showDecisionMessage.telephoneNotified }}
</div></el-card>
</div>
</el-dialog>
</div>
</div> -->
</div>
</div>
</template>
@ -188,7 +147,6 @@ export default {
return {
dialogVisible: false,
dealAlarmMessage:[true, false],
showAlarmMessage:false,
showAlarmMessageList:false,
tableData: [{
date: '2023-04-17',
@ -203,13 +161,6 @@ export default {
message:'新的故障信息',
tag: '重大故障'
}],
showAlarmInfo:{
time:'',
level:'',
deviceCode:'',
type:'',
description:''
},
decisionMessage:[{
personGroup:'主要领导、应急管理部负责人、应急管理室负责人报送，并发党群信息群；故障群/应急群发布。',
telephoneNotified:'如故障属于I类信息，分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。'
@ -225,8 +176,8 @@ export default {
['TRAIN_DELAY', '列车延误']
]),
showDecisionMessage:{},
itemsstyle: ['item0', 'item1', 'item2'],
items: [{show:false}, {show:false}, {show:false}]
alarmDetailMessageList:[],
itemsstyle: ['item0', 'item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9']
};
},
computed: {
@ -241,13 +192,26 @@ export default {
}
},
watch: {
alarmDetailMessage() {
if (this.alarmDetailMessage.length == 1) { this.showAlarmPlayAlarmMusic(); } else { console.log(this.alarmDetailMessage, 555555); }
alarmDetailMessage(newValue, oldValue) {
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);
}
this.showAlarmPlayAlarmMusic();
}
}
},
beforeDestroy() {
this.$store.dispatch('socket/setSimulationAlarmInfo', []);
document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'yellow');
},
methods: {
@ -258,33 +222,29 @@ export default {
this.$refs.audio.play();
},
showAlarmPlayAlarmMusic() {
if (this.$refs.audio.paused) {
this.playAlarmMusic();
}
this.showAlarm();
},
showAlarm() {
this.items.forEach((item)=>{
item.show = !item.show;
});
if (this.alarmDetailMessage.length > 0) {
const station = this.$store.getters['map/getDeviceByCode'](this.alarmDetailMessage[0].deviceCode);
this.showAlarmInfo.time = this.alarmDetailMessage[0].time;
this.showAlarmInfo.level = this.mapAlarmMessage.get(this.alarmDetailMessage[0].level);
this.showAlarmInfo.deviceCode = '列车' + station.serviceNumber + station.tripNumber;
this.showAlarmInfo.type = this.mapAlarmMessage.get(this.alarmDetailMessage[0].type);
const index = this.alarmDetailMessage[0].description.indexOf('列车');
this.showAlarmInfo.description = this.alarmDetailMessage[0].description.slice(0, index) + this.showAlarmInfo.deviceCode + this.alarmDetailMessage[0].description.substring(index + 7);
if (this.alarmDetailMessage[0].color === 'Y') {
document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'yellow');
this.showDecisionMessage = this.decisionMessage[0];
} else if (this.alarmDetailMessage[0].color === 'O') {
document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'orange');
this.showDecisionMessage = this.decisionMessage[1];
this.alarmDetailMessageList.forEach((showAlarmMessage)=>{
showAlarmMessage.show = true;
const station = this.$store.getters['map/getDeviceByCode'](showAlarmMessage.deviceCode);
showAlarmMessage.levelNew = this.mapAlarmMessage.get(showAlarmMessage.level);
showAlarmMessage.deviceCodeNew = '列车' + station.serviceNumber + station.tripNumber;
showAlarmMessage.typeNew = this.mapAlarmMessage.get(showAlarmMessage.type);
const index = showAlarmMessage.description.indexOf('列车');
showAlarmMessage.descriptionNew = showAlarmMessage.description.slice(0, index) + showAlarmMessage.deviceCodeNew + showAlarmMessage.description.substring(index + 7);
if (showAlarmMessage.color === 'Y') {
showAlarmMessage.showDecisionMessage = this.decisionMessage[0];
} else if (showAlarmMessage.color === 'O') {
showAlarmMessage.showDecisionMessage = this.decisionMessage[1];
} else {
this.showDecisionMessage = this.decisionMessage[1];
document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'red');
showAlarmMessage.showDecisionMessage = this.decisionMessage[1];
}
}
this.showAlarmMessage = !this.showAlarmMessage;
});
this.showAlarmMessageList = true;
},
handleSelectionChange(val) {
if (val.length === this.tableData.length) {
@ -316,17 +276,11 @@ export default {
});
},
goToDetail(index, row) {
console.log(row);
/* const routeUrl = this.$router.resolve({
path: '/thirdLogin'
// query: { id: 96 }
});
window.open(routeUrl.href, '_blank'); */
if (index == 0) {
window.open('https://www.baidu.com', 'baidu');
} else {
window.open('http://localhost:9000/tmms/traindispatch/7', 'dispatch');
}
//
},
@ -334,19 +288,16 @@ export default {
return row.tag === value;
},
goToAlarmDetail() {
window.open('https://www.baidu.com', 'baidu');
}
}
};
</script>
<style lang="scss" scoped>
$themeBgColor: var(--bg-color, yellow);
.alarm-button{
position: absolute;
left: 20px;
bottom: 58%;
z-index: 2000;
.alarm-counter{
position: absolute;
left: 20px;
@ -383,25 +334,72 @@ $themeBgColor: var(--bg-color, yellow);
}
}
}
.dialog-alarm-message-detail{
.yellow{
/deep/ .el-dialog__body{
padding: 0 10px 10px;
background-color:$themeBgColor;
background-color:yellow;
}
/deep/ .el-dialog__header{
background-color: $themeBgColor;
background-color: yellow;
}
}
.orange{
/deep/ .el-dialog__body{
padding: 0 10px 10px;
background-color:orange;
}
/deep/ .el-dialog__header{
background-color: orange;
}
}
.red{
/deep/ .el-dialog__body{
padding: 0 10px 10px;
background-color:red;
}
/deep/ .el-dialog__header{
background-color: red;
}
}
.item0 {
left: 0px;
top: 0px;
z-index: 1501 !important;
}
.item1 {
left: 90px;
top:50px;
z-index: 1502 !important;
}
.item2 {
left: 180px;
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:400;
z-index: 1509 !important;
}
.item9 {
top:450px;
z-index: 1510 !important;
}
</style>