rt-sim-training-client/src/jmapNew/theme/xian_02/menus/menuStationStand.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>