故障报警初提交备用，待优化
This commit is contained in:
joylink_zhaoerwei
parent
20de76047b
commit
071bfa90f7
326
src/views/newMap/display/errrorMessageBox.vue
Normal file
326
src/views/newMap/display/errrorMessageBox.vue
Normal file
@ -0,0 +1,326 @@
|
|||||||
|
<template>
|
||||||
|
<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>
|
||||||
|
<audio ref="audio" />
|
||||||
|
</div>
|
||||||
|
<!-- <el-dialog
|
||||||
|
v-dialogDrag
|
||||||
|
:modal="false"
|
||||||
|
:visible.sync="showAlarmMessageList"
|
||||||
|
width="900px"
|
||||||
|
title="设备故障！！！"
|
||||||
|
>
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
:cell-style="{'text-align':'center'}"
|
||||||
|
:header-cell-style="{'text-align':'center'}"
|
||||||
|
style="width: 100%"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
@select-all="handleSelectionAll"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
width="40"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="date"
|
||||||
|
label="时间"
|
||||||
|
width="110"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
label="故障设备"
|
||||||
|
width="110"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="id"
|
||||||
|
label="故障编号"
|
||||||
|
width="90"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="message"
|
||||||
|
label="故障信息"
|
||||||
|
/>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
@click="goToDetail(scope.$index,scope.row)"
|
||||||
|
>详情</el-button>
|
||||||
|
<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-column
|
||||||
|
prop="tag"
|
||||||
|
label="标签"
|
||||||
|
width="100"
|
||||||
|
:filters="[{ text: '一般故障', value: '一般故障' }, { text: '中等故障', value: '中等故障' }, { text: '重大故障', value: '重大故障' }]"
|
||||||
|
:filter-method="filterTag"
|
||||||
|
filter-placement="bottom-end"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag
|
||||||
|
:type="scope.row.tag === '一般故障' ? 'warning' : 'danger'"
|
||||||
|
disable-transitions
|
||||||
|
>{{ scope.row.tag }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog
|
||||||
|
v-dialogDrag
|
||||||
|
title="提示"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="30%"
|
||||||
|
>
|
||||||
|
<span>进行全选操作</span>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ErrrorMessageBox',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible: false,
|
||||||
|
dealAlarmMessage:[true, false],
|
||||||
|
showAlarmMessage:false,
|
||||||
|
showAlarmMessageList:false,
|
||||||
|
tableData: [{
|
||||||
|
date: '2023-04-17',
|
||||||
|
name: '车厢编号10',
|
||||||
|
id: '001',
|
||||||
|
message:'电路信号故障,车辆二次设备无法运行',
|
||||||
|
tag: '一般故障'
|
||||||
|
}, {
|
||||||
|
date: '2023-04-21',
|
||||||
|
name: '车厢编号8',
|
||||||
|
id: '005',
|
||||||
|
message:'新的故障信息',
|
||||||
|
tag: '重大故障'
|
||||||
|
}],
|
||||||
|
showAlarmInfo:{
|
||||||
|
time:'',
|
||||||
|
level:'',
|
||||||
|
deviceCode:'',
|
||||||
|
type:'',
|
||||||
|
description:''
|
||||||
|
},
|
||||||
|
decisionMessage:[{
|
||||||
|
personGroup:'主要领导、应急管理部负责人、应急管理室负责人报送，并发党群信息群；故障群/应急群发布。',
|
||||||
|
telephoneNotified:'如故障属于I类信息，分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。'
|
||||||
|
}, {
|
||||||
|
personGroup:'故障群/应急群、党群信息群',
|
||||||
|
telephoneNotified:'分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。视情况经领导同意报集团公司。'
|
||||||
|
}],
|
||||||
|
showDecisionMessage:{}
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
alarmDetailMessage() {
|
||||||
|
return this.$store.state.socket.simulationAlarmInfo;
|
||||||
|
},
|
||||||
|
finishDealAlarmMessage() {
|
||||||
|
return this.dealAlarmMessage.reduce((prev, curr)=> curr === false ? prev + 1 : prev, 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
alarmDetailMessage() {
|
||||||
|
if (this.alarmDetailMessage.length == 1) { this.showAlarm(); } else { console.log(555555); }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.$store.dispatch('socket/setSimulationAlarmInfo', []);
|
||||||
|
document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'yellow');
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
playAlarmMusic() {
|
||||||
|
let alarmMusic = new Audio();
|
||||||
|
alarmMusic = require('@/assets/buzzer.mp3');
|
||||||
|
this.$refs.audio.src = alarmMusic;
|
||||||
|
this.$refs.audio.play();
|
||||||
|
},
|
||||||
|
showAlarm() {
|
||||||
|
this.playAlarmMusic();
|
||||||
|
this.showDecisionMessage = this.decisionMessage[0];
|
||||||
|
if (this.alarmDetailMessage.length > 0) {
|
||||||
|
this.showAlarmInfo = this.alarmDetailMessage[0];
|
||||||
|
const description = this.showAlarmInfo.description.substring(this.showAlarmInfo.description.indexOf('晚点') + 2);
|
||||||
|
const index = description.indexOf('分');
|
||||||
|
const minuteData = description.substring(0, index);
|
||||||
|
console.log(minuteData, 222);
|
||||||
|
if (minuteData >= 10 && minuteData < 30) {
|
||||||
|
document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'orange');
|
||||||
|
this.showDecisionMessage = this.decisionMessage[1];
|
||||||
|
} else if (minuteData >= 30) {
|
||||||
|
document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'red');
|
||||||
|
this.showDecisionMessage = this.decisionMessage[1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showAlarmMessage = !this.showAlarmMessage;
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
if (val.length === this.tableData.length) {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelectionAll(val) {
|
||||||
|
if (val.length > 0) {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleAlarmMessage(index, row) {
|
||||||
|
console.log(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: '已取消处理'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
//
|
||||||
|
|
||||||
|
},
|
||||||
|
filterTag(value, row) {
|
||||||
|
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;
|
||||||
|
bottom: 62%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: red;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-message-detail {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.box-card {
|
||||||
|
width: 48%;
|
||||||
|
padding: 0 5px;
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dialog-alarm-message-detail{
|
||||||
|
/deep/ .el-dialog__body{
|
||||||
|
padding: 0 10px 10px;
|
||||||
|
background-color:$themeBgColor;
|
||||||
|
}
|
||||||
|
/deep/ .el-dialog__header{
|
||||||
|
background-color: $themeBgColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -13,6 +13,7 @@
|
|||||||
<training-left-slider ref="trainingLeftSlider" @overallTranslation="overallTranslation" />
|
<training-left-slider ref="trainingLeftSlider" @overallTranslation="overallTranslation" />
|
||||||
<lineBoard ref="lineBoard" />
|
<lineBoard ref="lineBoard" />
|
||||||
<bottomTable ref="bottomTable" />
|
<bottomTable ref="bottomTable" />
|
||||||
|
<errrorMessageBoxVue />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -33,6 +34,7 @@ import ChatBox from './newChat/index.vue';
|
|||||||
import TrainingLeftSlider from './trainingList/trainingLeftSlider';
|
import TrainingLeftSlider from './trainingList/trainingLeftSlider';
|
||||||
import LineBoard from './lineBoard';
|
import LineBoard from './lineBoard';
|
||||||
import BottomTable from './bottomTable';
|
import BottomTable from './bottomTable';
|
||||||
|
import errrorMessageBoxVue from './errrorMessageBox.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'DisplayDraft',
|
name: 'DisplayDraft',
|
||||||
components: {
|
components: {
|
||||||
@ -46,7 +48,8 @@ export default {
|
|||||||
ChatBox,
|
ChatBox,
|
||||||
TrainingLeftSlider,
|
TrainingLeftSlider,
|
||||||
LineBoard,
|
LineBoard,
|
||||||
BottomTable
|
BottomTable,
|
||||||
|
errrorMessageBoxVue
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user