320 lines
12 KiB
Vue
320 lines
12 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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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)">
|
||
|
|
<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 { MapDeviceType, OperationEvent, getDomIdByOperation } from '@/scripts/ConstDic';
|
||
|
|
import OperateHandler from '@/scripts/plugin/OperateHandler';
|
||
|
|
import { deepAssign } from '@/utils/index';
|
||
|
|
import PasswordBox from './dialog/childDialog/passwordInputBox.vue';
|
||
|
|
|
||
|
|
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: {}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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 = getDomIdByOperation(old);
|
||
|
|
const dom = document.getElementById(domId);
|
||
|
|
if (dom) {
|
||
|
|
dom.disabled = false;
|
||
|
|
dom.style.backgroundColor = this.buttonUpColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (val) {
|
||
|
|
// 新按钮按下效果
|
||
|
|
const domId = getDomIdByOperation(val);
|
||
|
|
const dom = document.getElementById(domId);
|
||
|
|
if (dom) {
|
||
|
|
dom.disabled = true;
|
||
|
|
dom.style.backgroundColor = this.buttonDownColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
buttonDown(operation) {
|
||
|
|
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.$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 = {
|
||
|
|
type: 'mbm',
|
||
|
|
operation: operation
|
||
|
|
};
|
||
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
||
|
|
if (valid) {
|
||
|
|
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
||
|
|
OperateHandler.cleanOperates(); // 清空操作组
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
selectedChange() {
|
||
|
|
// 按钮按下时
|
||
|
|
if (this.$store.state.menuOperation.buttonOperation) {
|
||
|
|
const model = this.$store.state.menuOperation.selected; // 选择设备
|
||
|
|
if (model._type) {
|
||
|
|
const deviceType = MapDeviceType[model._type];
|
||
|
|
const modelData = deepAssign({}, model);
|
||
|
|
const operate = {
|
||
|
|
send: true,
|
||
|
|
model: modelData,
|
||
|
|
code: model.code,
|
||
|
|
type: deviceType.type,
|
||
|
|
operation: this.$store.state.menuOperation.buttonOperation,
|
||
|
|
tempData: this.tempData
|
||
|
|
};
|
||
|
|
|
||
|
|
this.$store.dispatch('training/next', operate).then(({ valid, response }) => {
|
||
|
|
if (valid) {
|
||
|
|
if (response) {
|
||
|
|
this.tempData = response.data;
|
||
|
|
}
|
||
|
|
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 {
|
||
|
|
OperateHandler.cleanOperates(); // 清空操作组
|
||
|
|
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</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>
|