佛山线路现地界面调整

This commit is contained in:
joylink_cuiweidong 2020-03-24 18:01:10 +08:00
parent fd63b2cfa0
commit 089b8960b9
7 changed files with 294 additions and 318 deletions

View File

@ -2,127 +2,127 @@ import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import store from '@/store';
class EMouse extends Group {
constructor(device) {
super();
this.device = device;
this.create();
this.craeteSwitchBorder();
}
create() {
if (this.device.name) {
// 创建锁闭框
const rect = this.device.name.getNameText().getBoundingRect();
let textWidth = rect.width * 0.8;
if (this.device.triangle.drictx !== 1) {
// rect.x += rect.width;
textWidth = -textWidth;
}
constructor(device) {
super();
this.device = device;
this.create();
this.craeteSwitchBorder();
}
create() {
if (this.device.name) {
// 创建锁闭框
const rect = this.device.name.getNameText().getBoundingRect();
let textWidth = rect.width * 0.8;
if (this.device.triangle.drictx !== 1) {
// rect.x += rect.width;
textWidth = -textWidth;
}
this.textRect = new Rect({
zlevel: this.device.zlevel,
z: this.device.z,
silent: true,
shape: {
x: rect.x,
y: rect.y,
width: textWidth,
height: rect.height
},
style: {
lineWidth: 1,
lineDash: [3, 3],
stroke: this.device.style.Switch.mouseOverStyle.borderColor,
fill: this.device.style.Switch.mouseOverStyle.borderBackgroundColor
}
});
this.add(this.textRect);
this.textRect.hide();
}
}
this.textRect = new Rect({
zlevel: this.device.zlevel,
z: this.device.z,
silent: true,
shape: {
x: rect.x,
y: rect.y,
width: textWidth,
height: rect.height
},
style: {
lineWidth: 1,
lineDash: [3, 3],
stroke: this.device.style.Switch.mouseOverStyle.borderColor,
fill: this.device.style.Switch.mouseOverStyle.borderBackgroundColor
}
});
this.add(this.textRect);
this.textRect.hide();
}
}
// 创建道岔边框
craeteSwitchBorder() {
const sectionA = this.getInstanceByCode(this.device.model.sectionACode);
const sectionB = this.getInstanceByCode(this.device.model.sectionBCode);
const sectionC = this.getInstanceByCode(this.device.model.sectionCCode);
const rect = this.device.getBoundingRect();
// 创建道岔边框
craeteSwitchBorder() {
const sectionA = this.getInstanceByCode(this.device.model.sectionACode);
const sectionB = this.getInstanceByCode(this.device.model.sectionBCode);
const sectionC = this.getInstanceByCode(this.device.model.sectionCCode);
const rect = this.device.getBoundingRect();
sectionA && rect.union(sectionA.getBoundingRect());
sectionB && rect.union(sectionB.getBoundingRect());
sectionC && rect.union(sectionC.getBoundingRect());
sectionA && rect.union(sectionA.getBoundingRect());
sectionB && rect.union(sectionB.getBoundingRect());
sectionC && rect.union(sectionC.getBoundingRect());
this.switchBorder = new Rect({
zlevel: this.device.model.zlevel,
z: this.device.z,
silent: true,
shape: Object.assign({ r: 4 }, rect),
style: {
lineDash: [3, 3],
stroke: this.device.style.Switch.mouseOverStyle.borderColor,
fill: this.device.style.transparentColor
}
});
this.switchBorder = new Rect({
zlevel: this.device.model.zlevel,
z: this.device.z,
silent: true,
shape: Object.assign({ r: 4 }, rect),
style: {
lineDash: [3, 3],
stroke: this.device.style.Switch.mouseOverStyle.borderColor,
fill: this.device.style.transparentColor
}
});
this.add(this.switchBorder);
this.switchBorder.hide();
}
this.add(this.switchBorder);
this.switchBorder.hide();
}
getInstanceByCode(code) {
return (store.getters['map/getDeviceByCode'](code) || {}).instance;
}
getInstanceByCode(code) {
return (store.getters['map/getDeviceByCode'](code) || {}).instance;
}
mouseout(e) {
if (!this.device.model.down) {
this.switchBorder && this.switchBorder.hide();
this.device.setTextStyle({
textFill: this.device.style.backgroundColor
});
this.textRect && this.textRect.hide();
this.device.setState(this.device.model);
mouseout(e) {
if (!this.device.model.down) {
this.switchBorder && this.switchBorder.hide();
this.device.setTextStyle({
textFill: this.device.style.backgroundColor
});
this.textRect && this.textRect.hide();
this.device.setState(this.device.model);
const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
const instance = this.getInstanceByCode(parentSection.trainWindowCode);
if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
instance.mouseEvent.mouseLeave(e);
}
}
}
const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
const instance = this.getInstanceByCode(parentSection.trainWindowCode);
if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
instance.mouseEvent.mouseLeave(e);
}
}
}
mouseover(e) {
this.switchBorder && this.switchBorder.show();
this.device.setLossAction(false);
this.device.setSwitchCoreColor(this.device.style.Switch.mouseOverStyle.borderBackgroundColor);
this.device.setTextStyle({
textFill: '#000'
});
this.textRect && this.textRect.show();
mouseover(e) {
this.switchBorder && this.switchBorder.show();
// this.device.setLossAction(false);
// this.device.setSwitchCoreColor(this.device.style.Switch.mouseOverStyle.borderBackgroundColor);
this.device.setTextStyle({
textFill: '#000'
});
this.textRect && this.textRect.show();
const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
const instance = this.getInstanceByCode(parentSection.trainWindowCode);
if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
instance.mouseEvent.mouseEnter(e);
}
}
const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
const instance = this.getInstanceByCode(parentSection.trainWindowCode);
if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
instance.mouseEvent.mouseEnter(e);
}
}
mouseEnter(e) {
this.switchBorder && this.switchBorder.show();
this.device.setLossAction(false);
this.device.setSwitchCoreColor(this.device.style.Switch.mouseOverStyle.borderBackgroundColor);
this.device.setTextStyle({
textFill: '#000'
});
this.textRect && this.textRect.show();
}
mouseEnter(e) {
this.switchBorder && this.switchBorder.show();
// this.device.setLossAction(false);
// this.device.setSwitchCoreColor(this.device.style.Switch.mouseOverStyle.borderBackgroundColor);
this.device.setTextStyle({
textFill: '#000'
});
this.textRect && this.textRect.show();
}
mouseLeave(e) {
this.switchBorder && this.switchBorder.hide();
this.device.setTextStyle({
textFill: this.device.style.backgroundColor
});
this.textRect && this.textRect.hide();
this.device.setState(this.device.model);
}
mouseLeave(e) {
this.switchBorder && this.switchBorder.hide();
this.device.setTextStyle({
textFill: this.device.style.backgroundColor
});
this.textRect && this.textRect.hide();
this.device.setState(this.device.model);
}
}
export default EMouse;

View File

@ -3,7 +3,7 @@
<menu-cancel ref="menuCancel" />
<template v-show="isShowAll">
<menu-bar v-show="isShowBar" ref="menuBar" :selected="selected" />
<!-- <menu-button ref="menuButton" /> -->
<menu-button ref="menuButton" />
<menu-axle-reset ref="menuAxleReset" :selected="selected" />
<menu-auto-trun-route ref="menuAutoTrunRoute" :selected="selected" />
<menu-station-stand ref="menuStationStand" :selected="selected" />
@ -25,7 +25,7 @@
import { mapGetters } from 'vuex';
import MenuCancel from './menuCancel';
import MenuSignal from './menuSignal';
// import MenuButton from './menuButton';
import MenuButton from './menuButton';
import MenuAxleReset from './menuAxleReset';
import MenuAutoTrunRoute from './menuAutoTrunRoute';
import MenuStationStand from './menuStationStand';
@ -44,7 +44,7 @@ export default {
name: 'Menus',
components: {
MenuBar,
// MenuButton,
MenuButton,
MenuAxleReset,
MenuAutoTrunRoute,
MenuCancel,

View File

@ -1,21 +1,5 @@
<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"
:style="{display: 'block', float: 'left', 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"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@ -46,54 +30,6 @@
</center>
</span>
</button>
<button
:id="Signal.reopenSignal.button.domId"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown(Signal.reopenSignal.button.operation)"
>
<span style="color: black">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
:id="Signal.guide.button.domId"
:style="{display: 'block', float: 'left', 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="mbm_06"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_06')"
>
<span style="color: red">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
:id="Switch.locate.button.domId"
:style="{display: 'block', float: 'left', width: width+'px',backgroundColor:buttonUpColor}"
@ -152,12 +88,123 @@
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
id="mbm_12"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_12')"
>
<span style="color: red">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
id="mbm_13"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_13')"
>
<span style="color: black">
<center>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
:id="Section.fault.button.domId"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown(Section.fault.button.operation)"
>
<span style="color: red">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
id="mbm_14"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_14')"
>
<span style="color: red">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
id="mbm_15"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_15')"
>
<span style="color: red">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
:id="Signal.guide.button.domId"
:style="{display: 'block', float: 'left', 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="mbm_06"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_06')"
>
<span style="color: black">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
:id="Signal.setAutoInterlock.button.domId"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@ -165,27 +212,12 @@
>
<span style="color: black">
<center>
<b></b>
<b></b>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
:id="Section.fault.button.domId"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown(Section.fault.button.operation)"
>
<span style="color: black">
<center>
<b></b>
</center>
<center>
<b></b>
<b></b>
<b></b>
<b></b>
</center>
</span>
</button>
@ -196,44 +228,12 @@
>
<span style="color: black">
<center>
<b></b>
<b></b>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
</center>
</span>
</button>
<button
id="mbm_11"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_11')"
>
<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="mbm_12"
:style="{display: 'block', float: 'left', width: width+'px', backgroundColor:buttonUpColor}"
@click="buttonDown('mbm_12')"
>
<span style="color: black">
<center>
<b></b>
<b></b>
</center>
<center>
<b></b>
<b></b>
<b></b>
<b></b>
</center>
</span>
</button>
@ -254,8 +254,8 @@ export default {
},
operation: '0',
buttonName: '',
buttonDownColor: '#A8A8A8',
buttonUpColor: '#DCDCDC',
buttonDownColor: '#00c8c8',
buttonUpColor: '#ece9d8',
width: 58,
tempData: null,
offset: {}

View File

@ -51,12 +51,12 @@ export default {
label: '区段切除',
handler: this.split,
cmdType: CMD.Section.CMD_SECTION_CUT_OFF
},
{
label: '区段故障解锁',
handler: this.fault,
cmdType: CMD.Section.CMD_SECTION_FAULT_UNLOCK
}
// {
// label: '',
// handler: this.fault,
// cmdType: CMD.Section.CMD_SECTION_FAULT_UNLOCK
// }
],
Center: [
{

View File

@ -61,11 +61,11 @@ export default {
handler: this.arrangementRoute,
cmdType: CMD.Signal.CMD_SIGNAL_SET_ROUTE
},
{
label: '进路取消',
handler: this.cancelTrainRoute,
cmdType: CMD.Signal.CMD_SIGNAL_CANCEL_ROUTE
},
// {
// label: '',
// handler: this.cancelTrainRoute,
// cmdType: CMD.Signal.CMD_SIGNAL_CANCEL_ROUTE
// },
{
label: '信号重开',
handler: this.reopenSignal,
@ -81,26 +81,26 @@ export default {
handler: this.humanTrainRoute,
cmdType: CMD.Signal.CMD_SIGNAL_CANCEL_GUIDE
},
{
label: '信号封锁',
handler: this.lock,
cmdType: CMD.Signal.CMD_SIGNAL_BLOCK
},
{
label: '信号解封',
handler: this.unlock,
cmdType: CMD.Signal.CMD_SIGNAL_UNBLOCK
},
{
label: '设置自动进路',
handler: this.singalPassModel,
cmdType: CMD.Signal.CMD_SIGNAL_SET_CI_AUTO
},
{
label: '取消自动进路',
handler: this.singalCancelPassModel,
cmdType: CMD.Signal.CMD_SIGNAL_CANCEL_CI_AUTO
},
// {
// label: '',
// handler: this.lock,
// cmdType: CMD.Signal.CMD_SIGNAL_BLOCK
// },
// {
// label: '',
// handler: this.unlock,
// cmdType: CMD.Signal.CMD_SIGNAL_UNBLOCK
// },
// {
// label: '',
// handler: this.singalPassModel,
// cmdType: CMD.Signal.CMD_SIGNAL_SET_CI_AUTO
// },
// {
// label: '',
// handler: this.singalCancelPassModel,
// cmdType: CMD.Signal.CMD_SIGNAL_CANCEL_CI_AUTO
// },
{
label: '进路交人工控',
handler: this.humanControl,

View File

@ -43,36 +43,36 @@ export default {
menu: [],
menuNormal: {
Local: [
{
label: '道岔总定',
handler: this.locate,
cmdType: CMD.Switch.CMD_SWITCH_TURN_NP_CHAIN
},
{
label: '道岔总反',
handler: this.reverse,
cmdType: CMD.Switch.CMD_SWITCH_TURN_RP_CHAIN
},
{
label: '道岔单锁',
handler: this.lock,
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
},
{
label: '道岔单解',
handler: this.unlock,
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
},
{
label: '道岔封闭',
handler: this.block,
cmdType: CMD.Switch.CMD_SWITCH_BLOCK
},
{
label: '道岔解封',
handler: this.unblock,
cmdType: CMD.Switch.CMD_SWITCH_UNBLOCK
}
// {
// label: '',
// handler: this.locate,
// cmdType: CMD.Switch.CMD_SWITCH_TURN_NP_CHAIN
// },
// {
// label: '',
// handler: this.reverse,
// cmdType: CMD.Switch.CMD_SWITCH_TURN_RP_CHAIN
// },
// {
// label: '',
// handler: this.lock,
// cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
// },
// {
// label: '',
// handler: this.unlock,
// cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
// },
// {
// label: '',
// handler: this.block,
// cmdType: CMD.Switch.CMD_SWITCH_BLOCK
// },
// {
// label: '',
// handler: this.unblock,
// cmdType: CMD.Switch.CMD_SWITCH_UNBLOCK
// }
//
],
Center: [

View File

@ -54,10 +54,6 @@ export default {
title() {
if (this.operation === OperationEvent.Signal.signalClose.menu.operation) {
return '信号关灯';
} else if (this.operation === OperationEvent.StationStand.setRunLevel.menu.operation) {
return '设置运行等级';
} else if (this.operation === OperationEvent.StationStand.setStopTime.menu.operation) {
return '停站时间';
} else if (this.operation === OperationEvent.StationStand.setBackStrategy.menu.operation) {
return '设置折返策略';
}
@ -70,12 +66,6 @@ export default {
if (this.operation === OperationEvent.Signal.signalClose.menu.operation) {
/** 信号关灯*/
return OperationEvent.Signal.signalClose.confirm.domId;
} else if (this.operation === OperationEvent.StationStand.setRunLevel.menu.operation) {
/** 设置运行等级*/
return OperationEvent.StationStand.setRunLevel.confirm.domId;
} else if (this.operation === OperationEvent.StationStand.setStopTime.menu.operation) {
/** 设置停战时间*/
return OperationEvent.StationStand.setStopTime.confirm.domId;
} else if (this.operation === OperationEvent.StationStand.setBackStrategy.menu.operation) {
/** 设置折返策略*/
return OperationEvent.StationStand.setBackStrategy.confirm.domId;
@ -111,12 +101,6 @@ export default {
if (this.operation === OperationEvent.Signal.signalClose.menu.operation) {
/** 信号关灯*/
this.signalClose();
} else if (this.operation === OperationEvent.StationStand.setRunLevel.menu.operation) {
/** 设置运行等级*/
this.setRunLevel();
} else if (this.operation === OperationEvent.StationStand.setStopTime.menu.operation) {
/** 停站时间*/
this.setStopTime();
} else if (this.operation === OperationEvent.StationStand.setBackStrategy.menu.operation) {
/** 设置折返策略*/
this.setBackStrategy();
@ -126,14 +110,6 @@ export default {
signalClose() {
this.sendCommand(menuOperate.Signal.signalClose);
},
//
setRunLevel() {
this.sendCommand(menuOperate.StationStand.setRunLevel);
},
//
setStopTime() {
this.sendCommand(menuOperate.StationStand.setStopTime);
},
//
setBackStrategy() {
this.sendCommand(menuOperate.StationStand.setBackStrategy);