393 lines
17 KiB
Vue
393 lines
17 KiB
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/nextNew', 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/nextNew', 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/nextNew', 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/nextNew', 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>
|