rt-sim-training-client/src/jmapNew/theme/xian_02/menus/menuStationStand.vue
2020-05-19 18:38:58 +08:00

394 lines
14 KiB
Vue

<template>
<el-dialog
v-dialogDrag
class="xian-02__system station-stand"
:title="title"
:visible.sync="show"
width="900px"
:before-close="doClose"
:z-index="2000"
:modal="false"
center
custom-class="station-stand"
:close-on-click-modal="false"
>
<el-row>
<el-col :span="24"><div style="text-align: center;width: 100%;height: 50px;" @contextmenu="totalMenuEvent"><div style="display: initial;font-size: 18px" :style="{background: bgColor, color: fontColor}">{{ title }}</div></div></el-col>
</el-row>
<el-row style="margin-top: 20px">
<el-col :span="8"><div style="text-align: center;">设备</div></el-col>
<el-col :span="8"><div style="text-align: center;">控制</div></el-col>
<el-col :span="8"><div style="text-align: center;">指示</div></el-col>
</el-row>
<el-row style="margin-top: 20px;">
<el-col :span="8">
<div class="left-table-cell" style="height: 90px;"><span @click="clickEvent('platform')">站台停车</span></div>
</el-col>
<el-col :span="8">
<div class="center-table-cell" style="height: 90px;">
<span @click="clickEvent('adjustDwell')">站停时间调整</span><br><span @contextmenu="menuEvent('psdInfoConfirm')">站台屏蔽门信息确认</span><br><span @contextmenu="menuEvent('updateStandPlan')">更新站台计划</span>
</div>
</el-col>
<el-col :span="8">
<div class="right-table-cell" style="height: 90px;"><span @click="clickEvent('notCommunicating')">站台屏蔽门信息</span></div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="left-table-cell" style="height: 68px;"><span>停站曲线</span></div>
</el-col>
<el-col :span="8">
<div class="center-table-cell" style="height: 68px;"><span @contextmenu="menuEvent('upStopProfile')">上行方向</span><br><span @contextmenu="menuEvent('downStopProfile')">下行方向</span></div>
</el-col>
<el-col :span="8">
<div class="right-table-cell" style="height: 68px;"><span>&nbsp;</span></div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="left-table-cell"><span>跳停</span></div>
</el-col>
<el-col :span="8">
<div class="center-table-cell"><span @contextmenu="menuEvent('stopJumping')">设置/取消 所有列车跳停本站</span></div>
</el-col>
<el-col :span="8">
<div class="right-table-cell"><span @contextmenu="menuEvent('allTrainStopJump')">所有列车跳停本站</span></div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="left-table-cell"><span @click="clickEvent()">ATS站台扣车</span></div>
</el-col>
<el-col :span="8">
<div class="center-table-cell"><span :style="{color:detainInterval ? standDetainColor :detainStatusColor}" @contextmenu="menuEvent('standDetain')">设置/取消 所有列车本站扣车</span></div>
</el-col>
<el-col :span="8">
<div class="right-table-cell"><span :style="{color: detainStatusColor}">所有列车本站扣车</span></div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="left-table-cell"><span @click="clickEvent()">站台</span></div>
</el-col>
<el-col :span="8">
<div class="center-table-cell"><span @click="clickEvent()">通信</span></div>
</el-col>
<el-col :span="8">
<div class="right-table-cell"><span @click="clickEvent()">站台没有通信</span></div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="left-table-cell" style="height: 90px;"><span>上行方向驾驶模式禁止</span></div>
</el-col>
<el-col :span="8">
<div class="center-table-cell" style="height: 90px;">
<span @contextmenu="setRuningMode('ATPM', 'up')">禁止/释放 ATPM模式</span><br>
<span @contextmenu="setRuningMode('AM', 'up')">禁止/释放 AM模式</span><br>
<span @contextmenu="setRuningMode('ATB', 'up')">禁止/释放 ATB模式</span>
</div>
</el-col>
<el-col :span="8">
<div class="right-table-cell" style="height: 90px;">
<span>ATPM模式已禁止</span><br>
<span>AM模式已禁止</span><br>
<span>ATB模式已禁止</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="left-table-cell" style="height: 90px;"><span>下行方向驾驶模式禁止</span></div>
</el-col>
<el-col :span="8">
<div class="center-table-cell" style="height: 90px;">
<span @contextmenu="setRuningMode('ATPM', 'down')">禁止/释放 ATPM模式</span><br>
<span @contextmenu="setRuningMode('AM', 'down')">禁止/释放 AM模式</span><br>
<span @contextmenu="setRuningMode('ATB', 'down')">禁止/释放 ATB模式</span>
</div>
</el-col>
<el-col :span="8">
<div class="right-table-cell" style="height: 90px;">
<span>ATPM模式已禁止</span><br>
<span>AM模式已禁止</span><br>
<span>ATB模式已禁止</span>
</div>
</el-col>
</el-row>
<platform-dwell ref="platformDwell" />
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import PlatformDwell from './dialog/platformDwell';
import { DeviceMenu } from '@/scripts/ConstDic';
import { OperateMode } from '@/scripts/ConstDic';
export default {
name: 'MenuStationStand',
components: {
PlatformDwell
},
props: {
selected: {
type: Object,
default: () => {
return null;
}
}
},
data() {
return {
operation: null,
dialogShow: false,
loading: false,
position: '',
title: '',
standDetainColor: '#FFF',
detainStatusColor: '#FFF',
bgColor: '#000',
fontColor: '#FFF',
detainInterval: ''
};
},
computed: {
...mapGetters('training', [
'operatemode'
]),
...mapGetters('menuOperation', [
'buttonOperation'
]),
...mapGetters('map', [
'stationList',
'mapConfig'
]),
show() {
return this.dialogShow; // && !this.$store.state.menuOperation.break;
},
domIdCancel() {
return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
},
domIdConfirm() {
return this.dialogShow ? OperationEvent.Command.planTrain.addPlanTrain.domId : '';
}
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.StationStand) && !this.buttonOperation && this.operatemode !== OperateMode.FAULT) {
this.stationList.forEach(item => {
if (item.code === this.$store.state.menuOperation.selected.stationCode) {
if ((this.mapConfig.upDirection === 'right' && this.$store.state.menuOperation.selected.right) || (this.mapConfig.upDirection === 'left' && !this.$store.state.menuOperation.selected.right)) {
this.title = item.name + '-上行站台';
} else {
this.title = item.name + '-下行站台';
}
}
});
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();
}
},
'$store.state.menuOperation.requestList': function (list) {
this.initStatus(list);
},
'$store.state.socket.equipmentStatus': function (val) {
if (this.selected) {
this.detainStatusColor = this.selected.centerHoldTrain || this.selected.stationHoldTrain ? '#FF0' : '#FFF';
}
}
},
mounted() {
this.$nextTick(() => {
this.$store.dispatch('training/tipReload');
});
},
methods: {
doShow(position) {
// this.operate = operate || {};
const requestList = this.$store.state.menuOperation.requestList;
this.initStatus(requestList || []);
this.position = position;
this.dialogShow = true;
this.$nextTick(function () {
this.$store.dispatch('training/emitTipFresh');
});
},
initStatus(requestList) {
this.standDetainColor = '#FFF';
this.bgColor = '#000';
this.fontColor = '#FFF';
if (this.detainInterval) {
clearInterval(this.detainInterval);
this.detainInterval = '';
}
requestList.forEach(item => {
if (item.device && item.device.code === this.selected.code) {
if (item.operation.code === OperationEvent.StationStand.setDetainTrain.menu.operation || item.operation.code === OperationEvent.StationStand.cancelDetainTrain.menu.operation) {
this.standDetain();
}
}
});
},
doClose() {
this.loading = false;
this.dialogShow = false;
this.$store.dispatch('training/emitTipFresh');
if (this.detainInterval) {
clearInterval(this.detainInterval);
this.detainInterval = '';
}
},
menuEvent(val) {
if (val) {
this.$emit('popMenuStationStand', {position:{x: event.clientX, y: event.clientY}, type:val});
event.stopPropagation();
event.preventDefault();
}
},
totalMenuEvent() {
this.$emit('totalMenuEvent', {x: event.clientX, y: event.clientY});
},
clickEvent(val) {
this.dialogShow = true;
if (val === 'adjustDwell') {
this.setAdjustDwell();
}
event.stopPropagation();
},
setAdjustDwell() {
const step = {
start: true,
code: `${this.selected.code}`,
operation: OperationEvent.StationStand.setStopTime.menu.operation,
param: {
standCode: `${this.selected.code}`
}
};
this.$store.dispatch('training/nextNew', step).then(({ valid }) => {
if (valid) {
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
this.$refs.platformDwell.doShow(step, this.selected);
}
}).catch(() => {
this.$refs.noticeInfo.doShow(step);
});
},
commit() {
this.$refs['form'].validate((valid) => {
});
// this.$refs['form'].validate((valid) => {
// if (valid) {
// const operate = {
// send: true,
//
// operation: OperationEvent.Command.planTrain.addPlanTrain.operation
// };
//
// this.loading = true;
// this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
// this.loading = false;
// if (valid) {
// this.doClose();
// } else {
// // this.$refs.noticeInfo.doShow(operate);
// }
// }).catch(error => {
// this.loading = false;
// this.doClose();
// // this.$refs.noticeInfo.doShow(operate);
// });
// } else {
// return false;
// }
// });
},
standDetain() {
this.standDetainColor = '#FF0';
this.bgColor = '#FFF';
this.fontColor = '#000';
if (!this.detainInterval) {
this.detainInterval = setInterval(() => {
if (this.standDetainColor !== '#FF0') {
this.standDetainColor = '#FF0';
} else {
this.standDetainColor = '#000';
}
}, 1000);
}
},
setRuningMode(mode, direction) {
const step = {
start: true,
code: `${this.selected.code}`,
operation: OperationEvent.StationStand.setJumpStop.menu.operation,
param: {
standCode: `${this.selected.code}`
}
};
this.$store.dispatch('training/nextNew', step).then(({ valid }) => {
if (valid) {
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
this.$store.dispatch('menuOperation/pushRequestList', { device: this.selected, operation: OperationEvent.StationStand.setJumpStop.menu.operation});
// this.$refs.standControl.doShow(step, this.selected);
}
});
},
cancel() {
const operate = {
operation: OperationEvent.Command.cancel.menu.operation
};
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
if (valid) {
this.doClose();
}
}).catch(() => { this.doClose(); });
}
}
};
</script>
<style scoped>
.xian-02__system .el-dialog .base-label {
background: rgba(0, 0, 0, x);
position: relative;
left: -5px;
top: -18px;
padding: 0 5px;
background-color: #F0F0F0;
}
.station-stand .el-dialog .el-dialog__body {
background: #000 !important;
color: #fff;
}
.left-table-cell {
border: 1px solid #6F3700;
height: 100%;
text-align: center;
margin: 0 0 -1px -1px;
padding-bottom: 10px;
padding-top: 10px;
}
.center-table-cell {
border-bottom: 1px solid #6F3700;
border-top: 1px solid #6F3700;
text-align: center;
height: 100%;
margin: 0 0 -1px -1px;
padding-bottom: 10px;
padding-top: 10px;
}
.right-table-cell {
border: 1px solid #6F3700;
text-align: center;
height: 100%;
margin: 0 0 -1px -1px;
padding-bottom: 10px;
padding-top: 10px;
}
</style>