412 lines
16 KiB
Vue
412 lines
16 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-dialogDrag
|
|
:visible.sync="dialogVisible"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:show-close="false"
|
|
:modal="false"
|
|
width="100%"
|
|
>
|
|
<div style="height: 130px;">
|
|
<div class="haerbin-01__systerm nav">
|
|
<el-row style="padding: 3px;">
|
|
<el-col :span="20">
|
|
<div style="width: calc(100% - 10px);border: 2px solid #DDD9CA;border-radius: 1px;height: 132px;">
|
|
<el-row style="padding: 4px;">
|
|
<div class="tip-content-box">
|
|
<div v-if="tipContent[0]">{{ `${tipContent[0].level}` }}</div>
|
|
<div v-if="tipContent[0]">{{ `${tipContent[0].time}` }}</div>
|
|
<div v-if="tipContent[0]">{{ `${tipContent[0].confirm ? '确认': '未确认'}` }}</div>
|
|
</div>
|
|
<div class="tip-content-box">
|
|
<div v-if="tipContent[1]">{{ `${tipContent[1].level}` }}</div>
|
|
<div v-if="tipContent[1]">{{ `${tipContent[1].time}` }}</div>
|
|
<div v-if="tipContent[1]">{{ `${tipContent[1].confirm ? '确认': '未确认'}` }}</div>
|
|
</div>
|
|
<div class="tip-content-box">
|
|
<div v-if="tipContent[2]">{{ `${tipContent[2].level}` }}</div>
|
|
<div v-if="tipContent[2]">{{ `${tipContent[2].time}` }}</div>
|
|
<div v-if="tipContent[2]">{{ `${tipContent[2].confirm ? '确认': '未确认'}` }}</div>
|
|
</div>
|
|
</el-row>
|
|
<div style="padding: 5px;height:20px;line-height: 20px;border-top: 2px solid #DDD9CA;display: flex;justify-content: space-between;">
|
|
<div>
|
|
<div class="div-simulate-button" style="width: 40px;" @click="rpsClick">背投</div>
|
|
<div class="div-simulate-button" style="width: 40px;">车场</div>
|
|
<div class="div-simulate-button" style="width: 40px;" @click="troClick">轨道</div>
|
|
<div class="div-simulate-button" style="width: 40px;">系统</div>
|
|
<div class="div-simulate-button" style="width: 40px;">列车</div>
|
|
</div>
|
|
<div>
|
|
<div class="div-simulate-button" style="width: 40px;">联锁</div>
|
|
<div class="div-simulate-button" style="width: 40px;">列监</div>
|
|
<div class="div-simulate-button" style="width: 40px;">运图</div>
|
|
<div class="div-simulate-button" style="width: 55px;">时刻表</div>
|
|
<div class="div-simulate-button" style="width: 40px;">编表</div>
|
|
<div class="div-simulate-button" style="width: 40px;">调度</div>
|
|
<div class="div-simulate-button" style="width: 40px;">站控</div>
|
|
<div class="div-simulate-button" style="width: 40px;">计划</div>
|
|
</div>
|
|
<div>
|
|
<div class="div-simulate-button" style="width: 40px;">SDM</div>
|
|
</div>
|
|
<div>
|
|
<div class="div-simulate-button" style="width: 55px;">管理员</div>
|
|
<div class="div-simulate-button" style="width: 40px;">职权</div>
|
|
</div>
|
|
<div>
|
|
<div class="div-simulate-button" style="width: 40px;">拷屏</div>
|
|
<div class="div-simulate-button" style="width: 40px;">录放</div>
|
|
<div class="div-simulate-button" style="width: 40px;">布局</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div style="width: calc(100% - 10px);border: 2px solid #DDD9CA;border-radius: 1px;">
|
|
<el-row style="margin-top: 20px;margin-bottom: 18px;">
|
|
<el-col :span="16">
|
|
<el-row class="button-row">
|
|
<div style="width: 25px;" class="div-simulate-button" :style="{background:isNoRecoverLevelA || isNoConfirmLevelA?'#F00':'#DDD' }" :class="{'headerBox' :isNoConfirmLevelA}" @click="showHimAlarm('A')">A</div>
|
|
<div style="width: 25px;" class="div-simulate-button" :style="{background:isNoRecoverLevelB || isNoConfirmLevelB?'#F00':'#DDD' }" :class="{'headerBox' :isNoConfirmLevelB}" @click="showHimAlarm('B')">B</div>
|
|
<div style="width: 25px;" class="div-simulate-button" :style="{background:isNoRecoverLevelC?'#F00':'#DDD' }" @click="showHimAlarm('C')">C</div>
|
|
</el-row>
|
|
<el-row class="button-row" style="margin-top: 20px;">
|
|
<div style="width: 40px;" class="div-simulate-button" @click="showHimAlarm">报警</div>
|
|
<div style="width: 40px;" class="div-simulate-button" @click="undeveloped">运图</div>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div style="width: 40px;height: 60px;line-height: 60px;" class="div-simulate-button" @click="controlAudio(false)">静音</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="button-row" style="margin: 10px 0;">
|
|
<div style="width: 40px;" class="div-simulate-button" @click="undeveloped">档案</div>
|
|
<div style="width: 40px;" class="div-simulate-button" @click="undeveloped">归档</div>
|
|
<div style="width: 40px;" class="div-simulate-button" @click="undeveloped">统计</div>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2" style="border: 2px solid #DDD9CA;border-radius: 1px;">
|
|
<el-row style="height: 88px;">
|
|
<div style="font-size: 15px;color: #000;display: flex;justify-content: space-around;align-items: center;margin-top: 40px;">
|
|
<span>{{ dateString }}</span>
|
|
<span>{{ time }}</span>
|
|
</div>
|
|
</el-row>
|
|
<el-row class="button-row" style="margin: 10px 0;">
|
|
<div style="width: 40px;" class="div-simulate-button" @click="undeveloped">锁屏</div>
|
|
<div style="width: 40px;" class="div-simulate-button" @click="undeveloped">退出</div>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<alarm-table-hmi ref="alarmTableHmi" />
|
|
<rps-dialog ref="rpsDialog" />
|
|
<tro-dialog ref="troDialog" @goTroDetail="goTroDetail" />
|
|
<tro-detail-dialog
|
|
ref="troDetailDialog"
|
|
:station-list="stationList"
|
|
:train-list="trainList"
|
|
@goTroDialog="troClick"
|
|
/>
|
|
<audio id="buzzer" controls loop="loop" style="width: 0;height: 0">
|
|
<source :src="buzzerAudio" type="audio/mpeg">
|
|
</audio>
|
|
<div class="display-draft">
|
|
<el-button-group class="button-group-box">
|
|
<template v-if="!dataError">
|
|
<el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
|
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
|
</template>
|
|
<el-button type="primary" size="small" @click="back">{{ $t('display.demon.back') }}</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { timeFormat } from '@/utils/date';
|
|
import BuzzerAudio from '@/assets/buzzer.mp3';
|
|
import AlarmTableHmi from '@/jmapNew/theme/nanjing_02/menus/menuDialog/alarmTableHmi';
|
|
import RpsDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/rps';
|
|
import TroDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/tro';
|
|
import TroDetailDialog from '@/jmapNew/theme/nanjing_02/menus/dialog/troDetail';
|
|
import { prefixIntrger } from '@/utils/date';
|
|
export default {
|
|
name: 'BaSiDi',
|
|
components: {
|
|
AlarmTableHmi,
|
|
RpsDialog,
|
|
TroDialog,
|
|
TroDetailDialog
|
|
},
|
|
props: {
|
|
|
|
dataError: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isDisable: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: true,
|
|
tipContent: [],
|
|
buzzerAudio: BuzzerAudio,
|
|
sound: false,
|
|
noConfirmMapA: {},
|
|
noConfirmMapB: {},
|
|
confirmNoRecoverMapA: {},
|
|
confirmNoRecoverMapB: {},
|
|
confirmNoRecoverMapC: {},
|
|
noConfirmMapAString: '{}',
|
|
noConfirmMapBString: '{}',
|
|
confirmNoRecoverMapAString: '{}',
|
|
confirmNoRecoverMapBString: '{}',
|
|
confirmNoRecoverMapCString: '{}',
|
|
time: '00:00:00',
|
|
dateString: '00.00.0000'
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('training', [
|
|
'mode',
|
|
'started',
|
|
'steps',
|
|
'order'
|
|
]),
|
|
...mapGetters('map', [
|
|
'stationList',
|
|
'trainList'
|
|
]),
|
|
userId() {
|
|
return this.$store.state.user ? this.$store.state.user.id : '';
|
|
},
|
|
isNoConfirmLevelA() {
|
|
return this.noConfirmMapAString !== '{}';
|
|
},
|
|
isNoConfirmLevelB() {
|
|
return this.noConfirmMapBString !== '{}';
|
|
},
|
|
isNoRecoverLevelA() {
|
|
return this.confirmNoRecoverMapAString !== '{}';
|
|
},
|
|
isNoRecoverLevelB() {
|
|
return this.confirmNoRecoverMapBString !== '{}';
|
|
},
|
|
isNoRecoverLevelC() {
|
|
return this.confirmNoRecoverMapCString !== '{}';
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.training.initTime': function (initTime) {
|
|
const date = new Date(initTime);
|
|
this.initDate(date);
|
|
},
|
|
'$store.state.socket.simulationTimeSync': function (time) { // 仿真时间更新
|
|
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
|
|
// const date = new Date(+new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
|
|
// this.initDate(date);
|
|
},
|
|
'$store.state.socket.simulationAlarmInfo': function(val) {
|
|
(val || []).forEach(item => {
|
|
if (!item.confirmed) {
|
|
this.tipContent.push(item);
|
|
this.handleAlarm(item);
|
|
if (this.tipContent.length > 3) {
|
|
this.tipContent.shift();
|
|
}
|
|
if (item.level === 'A') {
|
|
this.noConfirmMapA[item.code] = item;
|
|
this.noConfirmMapAString = JSON.stringify(this.noConfirmMapA);
|
|
} else if (item.level === 'B') {
|
|
this.noConfirmMapB[item.code] = item;
|
|
this.noConfirmMapBString = JSON.stringify(this.noConfirmMapB);
|
|
}
|
|
} else if (!item.recovered) {
|
|
if (item.level === 'A') {
|
|
delete this.noConfirmMapA[item.code];
|
|
this.confirmNoRecoverMapA[item.code] = item;
|
|
this.noConfirmMapAString = JSON.stringify(this.noConfirmMapA);
|
|
this.confirmNoRecoverMapAString = JSON.stringify(this.confirmNoRecoverMapA);
|
|
} else if (item.level === 'B') {
|
|
delete this.noConfirmMapB[item.code];
|
|
this.confirmNoRecoverMapB[item.code] = item;
|
|
this.noConfirmMapBString = JSON.stringify(this.noConfirmMapB);
|
|
this.confirmNoRecoverMapBString = JSON.stringify(this.confirmNoRecoverMapB);
|
|
} else if (item.level === 'C') {
|
|
this.confirmNoRecoverMapC[item.code] = item;
|
|
this.confirmNoRecoverMapCString = JSON.stringify(this.confirmNoRecoverMapC);
|
|
}
|
|
} else {
|
|
if (item.level === 'A') {
|
|
delete this.noConfirmMapA[item.code];
|
|
delete this.confirmNoRecoverMapA[item.code];
|
|
this.noConfirmMapAString = JSON.stringify(this.noConfirmMapA);
|
|
this.confirmNoRecoverMapAString = JSON.stringify(this.confirmNoRecoverMapA);
|
|
} else if (item.level === 'B') {
|
|
delete this.noConfirmMapB[item.code];
|
|
delete this.confirmNoRecoverMapB[item.code];
|
|
this.noConfirmMapBString = JSON.stringify(this.noConfirmMapB);
|
|
this.confirmNoRecoverMapBString = JSON.stringify(this.confirmNoRecoverMapB);
|
|
} else if (item.level === 'C') {
|
|
delete this.confirmNoRecoverMapC[item.code];
|
|
this.confirmNoRecoverMapCString = JSON.stringify(this.confirmNoRecoverMapC);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
undeveloped() {
|
|
this.doClose();
|
|
this.$alert(this.$t('menu.menuBar.implemented'), this.$t('global.tips'), {
|
|
confirmButtonText: this.$t('global.confirm'),
|
|
callback: action => {
|
|
}
|
|
});
|
|
},
|
|
showHimAlarm(level) {
|
|
this.$refs.alarmTableHmi.doShow(level);
|
|
},
|
|
controlAudio(val) {
|
|
const audio = document.getElementById('buzzer');
|
|
this.sound = val;
|
|
if (audio !== null) {
|
|
if (val) {
|
|
audio.play();
|
|
} else if (val === false) {
|
|
audio.pause();
|
|
}
|
|
}
|
|
},
|
|
rpsClick() {
|
|
this.$refs.rpsDialog.doShow();
|
|
},
|
|
troClick() {
|
|
this.$refs.troDialog.doShow();
|
|
},
|
|
goTroDetail(deviceCode) {
|
|
this.$refs.troDetailDialog.doShow(deviceCode);
|
|
},
|
|
selectBeginTime() {
|
|
this.$emit('selectBeginTime');
|
|
},
|
|
end() {
|
|
this.$emit('end');
|
|
},
|
|
back() {
|
|
this.$emit('back');
|
|
},
|
|
initDate(date) {
|
|
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}:${prefixIntrger(date.getSeconds(), 2)}`;
|
|
const years = date.getFullYear() + '';
|
|
let months = date.getMonth() + 1 + '';
|
|
let dates = date.getDate() + '';
|
|
if (months.length < 2) { months = '0' + months; }
|
|
if (dates.length < 2) { dates = '0' + dates; }
|
|
this.dateString = dates + '.' + months + '.' + years;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped rel="stylesheet/scss" lang="scss">
|
|
@import "src/styles/mixin.scss";
|
|
$width: 30px;
|
|
$height: 90px;
|
|
$menuPadding: 10px;
|
|
$menuItemHeight: 30px;
|
|
$menuItemWidth: 190px;
|
|
$menuItemPadding: 5px;
|
|
|
|
.nav {
|
|
display: block;
|
|
cursor: pointer;
|
|
color: #0000;
|
|
background: -webkit-linear-gradient(#FDFDFE, #DEE3F3);
|
|
background: -o-linear-gradient(#FDFDFE, #DEE3F3);
|
|
background: -moz-linear-gradient(#FDFDFE, #DEE3F3);
|
|
background: linear-gradient(#FDFDFE, #DEE3F3);
|
|
border: 1px solid #B6BCCC !important;
|
|
border-bottom: 2px solid #B6BCCC !important;
|
|
list-style: none;
|
|
}
|
|
|
|
.div-simulate-button{
|
|
height: 20px;
|
|
line-height: 20px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #303030;
|
|
border: 1px solid #44556D;
|
|
background: #DDD;
|
|
text-align: center;
|
|
border-radius: 1px;
|
|
width: 80px;
|
|
}
|
|
.tip-content-box{
|
|
height: 30px;
|
|
width: 100%;
|
|
line-height: 30px;
|
|
background: #001528;
|
|
color: #C20F29;
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.button-row{
|
|
height: 20px;
|
|
line-height: 20px;
|
|
display: flex;
|
|
justify-content:space-between;
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
to {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fade {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
to {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
.headerBox {
|
|
background: #f00;
|
|
animation: fade 600ms infinite;
|
|
-webkit-animation: fade 600ms infinite;
|
|
}
|
|
/deep/.el-dialog__body{
|
|
padding: 0;
|
|
}
|
|
.display-draft {
|
|
position: fixed;
|
|
right: 10px;
|
|
bottom: 15px;
|
|
.button-group-box{
|
|
float: right;
|
|
}
|
|
}
|
|
</style>
|