rt-sim-training-client/src/jmapNew/theme/chengdu_03/menus/menuButton.vue

<template>
  <div v-if="isShowBtn" class="menu" style="height: 45px;" :style="{left: point.x+'px', top: point.y+'px' }">
    <button :id="Signal.arrangementRoute.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.arrangementRoute.button.operation, 'Signal')">
      <span style="color: black">
        <center><b>排</b><b>列</b></center>
        <center><b>进</b><b>路</b></center>
      </span>
    </button>
    <button :id="Signal.cancelTrainRoute.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.cancelTrainRoute.button.operation, 'Signal')">
      <span style="color: black">
        <center><b>总</b></center>
        <center><b>取</b><b>消</b></center>
      </span>
    </button>
    <button :id="Signal.guide.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.guide.button.operation, 'Signal')">
      <span style="color: black">
        <center><b>引</b><b>导</b></center>
        <center><b>进</b><b>路</b></center>
      </span>
    </button>
    <!-- 流程未做暂不显示 -->
    <!-- <button :id="Switch.guideLock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.guideLock.button.operation)">
      <span style="color: red">
        <center><b>引</b><b>导</b></center>
        <center><b>总</b><b>锁</b></center>
      </span>
    </button> -->
    <button :id="Signal.humanTrainRoute.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.humanTrainRoute.button.operation, 'Signal')">
      <span style="color: red">
        <center><b>总</b></center>
        <center><b>人</b><b>解</b></center>
      </span>
    </button>
    <button :id="Section.fault.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Section.fault.button.operation, 'Section')">
      <span style="color: black">
        <center><b>区</b></center>
        <center><b>故</b><b>解</b></center>
      </span>
    </button>
    <button :id="Switch.locate.button.domId" class="button_box" :style="{width: width+'px',backgroundColor:buttonUpColor}" @click="buttonDown(Switch.locate.button.operation, 'Switch')">
      <span style="color: black">
        <center><b>道</b><b>岔</b></center>
        <center><b>定</b><b>操</b></center>
      </span>
    </button>
    <button :id="Switch.reverse.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.reverse.button.operation, 'Switch')">
      <span style="color: black">
        <center><b>道</b><b>岔</b></center>
        <center><b>反</b><b>操</b></center>
      </span>
    </button>
    <button :id="Switch.lock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.lock.button.operation, 'Switch')">
      <span style="color: black">
        <center><b>道</b><b>岔</b></center>
        <center><b>单</b><b>锁</b></center>
      </span>
    </button>
    <button :id="Switch.unlock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Switch.unlock.button.operation, 'Switch')">
      <span style="color: red">
        <center><b>道</b><b>岔</b></center>
        <center><b>解</b><b>锁</b></center>
      </span>
    </button>
    <button :id="MixinCommand.block.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(MixinCommand.block.button.operation, 'MixinCommand')">
      <span style="color: black">
        <center><b>封</b></center>
        <center><b>锁</b></center>
      </span>
    </button>
    <button :id="MixinCommand.unblock.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(MixinCommand.unblock.button.operation, 'MixinCommand')">
      <span style="color: black">
        <center><b>解</b></center>
        <center><b>封</b></center>
      </span>
    </button>
    <button :id="MixinCommand.functionButton.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(MixinCommand.functionButton.button.operation, 'MixinCommand')">
      <span style="color: black">
        <center>
          <b style="color:deepskyblue">功</b>
          <b style="color:burlywood">能</b>
        </center>
        <center>
          <b style="color: red">按</b>
          <b style="color:forestgreen">钮</b>
        </center>
      </span>
    </button>
    <button :id="Signal.atsAutoControl.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.atsAutoControl.button.operation, 'Signal')">
      <span style="color: black">
        <center><b>自</b></center>
        <center><b>动</b><b>控</b></center>
      </span>
    </button>
    <button :id="Signal.humanControl.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.humanControl.button.operation, 'Signal')">
      <span style="color: black">
        <center><b>人</b></center>
        <center><b>工</b><b>控</b></center>
      </span>
    </button>
    <button :id="Command.cancel.clearMbm.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Command.cancel.clearMbm.operation)">
      <span style="color: black">
        <center><b>清</b></center>
        <center><b>除</b></center>
      </span>
    </button>
    <password-box ref="password" @checkOver="passWordCommit" />
  </div>
</template>

<script>
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import OperationHandler from '@/scripts/cmdPlugin/OperationHandler';
import Handler from '@/scripts/cmdPlugin/Handler';
// import { deepAssign } from '@/utils/index';
import PasswordBox from './dialog/childDialog/passwordInputBox.vue';
import CMD from '@/scripts/cmdPlugin/CommandEnum';

export default {
    name: 'MapButtonMenu',
    components: {
        PasswordBox
    },
    data() {
        return {
            point: {
                x: -1000,
                y: -1000
            },
            operation: '0',
            buttonName: '',
            buttonDownColor: '#A8A8A8',
            buttonUpColor: '#DCDCDC',
            width: 58,
            tempData: null,
            offset: {},
            commandType: '',
            cmdTypeList: []
        };
    },
    computed: {
        Switch() {
            return OperationEvent.Switch;
        },
        Section() {
            return OperationEvent.Section;
        },
        Signal() {
            return OperationEvent.Signal;
        },
        MixinCommand() {
            return OperationEvent.MixinCommand;
        },
        Command() {
            return OperationEvent.Command;
        },
        isShowBtn() {
            return this.$store.state.training.prdType == '01';
        },
        CMD() {
            return CMD;
        },
        cmdType() {
            switch (this.operation) {
            case this.Switch.lock.button.operation: // 道岔单锁
                return CMD.Switch.CMD_SWITCH_SINGLE_LOCK;
            case this.Switch.unlock.button.operation: // 道岔解锁
                return CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK;
            case this.Switch.locate.button.operation || this.Switch.reverse.button.operation: // 道岔定位/反位
                return CMD.Switch.CMD_SWITCH_TURN;
            case this.MixinCommand.block.button.operation: // 封锁
                return {};
            case this.MixinCommand.unblock.button.operation: // 解封
                return {};
            case this.Signal.atsAutoControl.button.operation: // 自动控
                return CMD.Signal.CMD_SIGNAL_OPEN_AUTO_SETTING;
            case this.Signal.humanControl.button.operation: // 人工控
                return CMD.Signal.CMD_SIGNAL_CLOSE_AUTO_SETTING;
            case this.Section.fault.button.operation: // 区故解
                return CMD.Section.CMD_SECTION_FAULT_UNLOCK;
            case this.Signal.humanTrainRoute.button.operation: // 总人解 (取消引导进路)
                return CMD.Section.CMD_SIGNAL_HUMAN_RELEASE_ROUTE;
            case this.Signal.cancelTrainRoute.button.operation: // 总取消
                return CMD.Section.CMD_SIGNAL_CANCEL_ROUTE;
            case this.Signal.arrangementRoute.button.operation: // 排列进路
                return CMD.Section.CMD_SIGNAL_SET_ROUTE;
            case this.Signal.guide.button.operation: // 引导进路
                return CMD.Section.CMD_SIGNAL_ROUTE_GUIDE;
            }
            return '';
        }
    },
    watch: {
        '$store.state.config.canvasOffsetCount': function (val) {
            this.resetPosition();
        },
        '$store.state.menuOperation.buttonOperation': function (val, old) {
            this.updateButtonShow(val, old);
        },
        '$store.state.menuOperation.selectedCount': function (val) {
            this.selectedChange();
        }
    },
    mounted() {
        this.resetPosition();
    },
    methods: {
        passWordCommit(data) {
            const operate = {
                type: 'mbm',
                operation: data.operateNext
            };

            this.$store.dispatch('training/next', operate).then(({ valid }) => {
                if (valid) {
                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                }
            }).catch(() => {
                this.$refs.noticeInfo.doShow(operate);
            });
        },
        resetPosition() {
            this.$nextTick(() => {
                const canvasOffset = this.$store.state.config.canvasOffset;
                this.point = {
                    x: canvasOffset.x + 20,
                    y: canvasOffset.y + this.$store.state.config.height - 65
                };
                this.$store.dispatch('training/tipReload');
            });
        },
        updateButtonShow(val, old) {
            if (old) {
                // 恢复旧按钮显示
                const domId = OperationHandler.getDomIdByOperation(old);
                const dom = document.getElementById(domId);
                if (dom) {
                    dom.disabled = false;
                    dom.style.backgroundColor = this.buttonUpColor;
                }
            }
            if (val) {
                // 新按钮按下效果
                const domId = OperationHandler.getDomIdByOperation(val);
                const dom = document.getElementById(domId);
                if (dom) {
                    dom.disabled = true;
                    dom.style.backgroundColor = this.buttonDownColor;
                }
            }
        },
        buttonDown(operation, commandType) {
            if (operation != this.Command.cancel.clearMbm.operation) {
                const operate = {
                    type: 'mbm',
                    operation: operation
                };
                this.$store.dispatch('training/next', operate).then(({ valid }) => {
                    if (valid) {
                        this.operation = operation;
                        this.commandType = commandType;
                        if (this.commandType == 'MixinCommand') {
                            this.cmdTypeList = ['Switch', 'Signal'];
                        } else {
                            this.cmdTypeList = [commandType];
                        }
                        this.$store.dispatch('menuOperation/setButtonOperation', operation); // 按钮菜单是否被按下
                        this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                        if (operation == this.Signal.humanTrainRoute.button.operation) { // 总人解操作 显示密码窗
                            operate['operateNext'] = this.Command.close.password.operation;
                            this.$refs.password.doShow(operate);
                        } else if (operation == this.Section.fault.button.operation) { // 区故解操作 显示密码窗
                            operate['operateNext'] = this.Command.close.password.operation;
                            this.$refs.password.doShow(operate);
                        } else if (operation == this.Switch.unlock.button.operation) { // 道岔解锁操作 显示密码窗
                            operate['operateNext'] = this.Command.close.password.operation;
                            this.$refs.password.doShow(operate);
                        } else if (operation == this.MixinCommand.unblock.button.operation) { // 解封操作 显示密码窗
                            operate['operateNext'] = this.Command.close.password.operation;
                            this.$refs.password.doShow(operate);
                        }
                        this.$store.dispatch('training/emitTipFresh');
                    }
                });
            } else {
                const operate = {
                    start: true,
                    type: 'mbm',
                    operation: operation
                };
                this.$store.dispatch('training/next', operate).then(({ valid }) => {
                    if (valid) {
                        this.commandType = '';
                        this.$store.dispatch('menuOperation/setButtonOperation', null);
                        this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                        Handler.clear(); // 清空操作组
                    }
                });
            }
        },
        selectedChange() {
            // 按钮按下时
            if (this.$store.state.menuOperation.buttonOperation) {
                const model = this.$store.state.menuOperation.selected; // 选择设备
                if (model._type) {
                    const operate = this.handelOperate(model);
                    if (this.cmdTypeList.indexOf(model._type) >= 0) {
                        this.$store.dispatch('training/next', operate).then(({ valid, response }) => {
                            if (valid) {
                                if (this.operation == this.Signal.guide.button.operation) { // 引导进路操作 显示密码窗
                                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                                    operate['operateNext'] = this.Command.close.password.operation;
                                    this.operation = '0';
                                    this.$refs.password.doShow(operate);
                                }
                            }
                        });
                    } else {
                        Handler.clear(); // 清空操作组
                        this.$store.dispatch('menuOperation/setButtonOperation', null);
                    }
                } else {
                    Handler.clear(); // 清空操作组
                    this.$store.dispatch('menuOperation/setButtonOperation', null);
                }
            }
        },
        handelOperate(model) { // 设置operate
            const operate = {
                send: true,
                operation: this.$store.state.menuOperation.buttonOperation,
                cmdType: this.cmdType,
                param: {}
            };
            switch (this.commandType) {
            case 'Switch':
                operate.param['Switch_Code'] = model.code;
                break;
            case 'Signal':
                operate.param['Signal_Code'] = model.code;
                break;
            case 'Section':
                operate.param['Section_Code'] = model.code;
                break;
            case 'MixinCommand':
                if (model._type == 'Switch') {
                    if (this.operation == this.MixinCommand.block.button.operation) {
                        operate.cmdType = CMD.Switch.CMD_SWITCH_BLOCK;
                    } else if (this.operation == this.MixinCommand.unblock.button.operation) {
                        operate.cmdType = CMD.Switch.CMD_SWITCH_UNBLOCK;
                    }
                    operate.param['Switch_Code'] = model.code;
                } else if (model._type == 'Signal') {
                    if (this.operation == this.MixinCommand.block.button.operation) {
                        operate.cmdType = CMD.Signal.CMD_SIGNAL_BLOCK;
                    } else if (this.operation == this.MixinCommand.unblock.button.operation) {
                        operate.cmdType = CMD.Signal.CMD_SIGNAL_UNBLOCK;
                    }
                    operate.param['Signal_Code'] = model.code;
                }
                break;
            }
            return operate;
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    $bg: #fff;
    $hoverBg: #f5f7fa;
    .button_box{
        display: block;
        float: left;
    }
    .menu {
        background-color: $bg;
        position: fixed;
        border: 1px solid gray;
        z-index: 10;
        display: block;

        .dsp-block {
            display: block;
            text-align: center;
            border-radius: unset;
            width: 100%;
        }

        .dsp-block:hover {
            background-color: $hoverBg;
        }
    }
</style>