区段占用,辅助状态,接发车箭头 状态代码调整
This commit is contained in:
parent
5e30c99d2c
commit
de4f4d2aa6
@ -73,4 +73,7 @@ export default class EAxle extends Group {
|
||||
this.add(this.arc1);
|
||||
this.add(this.arc2);
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -14,4 +14,7 @@ export default class EControlSwitch extends Group {
|
||||
this.path = createPathSvg(this.model);
|
||||
this.add(this.path);
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -136,4 +136,7 @@ export default class EDeviceStatus extends Group {
|
||||
// this.add(this.pfa);
|
||||
// this.add(this.pfb);
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -124,4 +124,7 @@ export default class EFoldbackMode extends Group {
|
||||
this.add(this.lateralLineRect);
|
||||
this.add(this.lateralLine);
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -80,4 +80,7 @@ export default class IndicatorLight extends Group {
|
||||
setControlColor(color) {
|
||||
this.indicator.setStyle({fill: color});
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -17,4 +17,7 @@ export default class ELampFilament extends Group {
|
||||
setControlColor(color) {
|
||||
this.path.setStyle({fill: color});
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -77,4 +77,7 @@ export default class EDeviceStatus extends Group {
|
||||
this.add(this.stationCommunication);
|
||||
this.add(this.verifyBypass);
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -3,54 +3,78 @@ import Text from 'zrender/src/graphic/Text';
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
|
||||
export default class EPickOrDepartArrow extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this._subType = model._subType;
|
||||
this.z = model.z;
|
||||
this.create(model);
|
||||
}
|
||||
create(model) {
|
||||
const style = this.model.style;
|
||||
this.arrow = new Polygon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [model.x + style.PickOrDepartArrow.length/2, model.y],
|
||||
rotation: model.right ? Math.PI : 0,
|
||||
shape: {
|
||||
points: [
|
||||
[model.x, model.y],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y - style.PickOrDepartArrow.triangleLength / 2],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y - style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.length, model.y - style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.length, model.y + style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y + style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y + style.PickOrDepartArrow.triangleLength / 2]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
fill: style.PickOrDepartArrow.fill,
|
||||
stroke: style.PickOrDepartArrow.stroke,
|
||||
lineWidth: 1
|
||||
}
|
||||
});
|
||||
this.arrowText = new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: {
|
||||
x: model.x + style.PickOrDepartArrow.length / 2,
|
||||
y: model.y + style.PickOrDepartArrow.distance,
|
||||
fontWeight: style.textStyle.fontWeight,
|
||||
fontSize: style.PickOrDepartArrow.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.text,
|
||||
textFill: style.PickOrDepartArrow.defaultColor,
|
||||
textAlign: style.textStyle.textAlign,
|
||||
textVerticalAlign: style.textStyle.textVerticalAlign
|
||||
}
|
||||
});
|
||||
this.add(this.arrow);
|
||||
this.add(this.arrowText);
|
||||
}
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this._subType = model._subType;
|
||||
this.z = model.z;
|
||||
this.create(model);
|
||||
}
|
||||
create(model) {
|
||||
const style = this.model.style;
|
||||
this.arrow = new Polygon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [model.x + style.PickOrDepartArrow.length / 2, model.y],
|
||||
rotation: model.right ? Math.PI : 0,
|
||||
shape: {
|
||||
points: [
|
||||
[model.x, model.y],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y - style.PickOrDepartArrow.triangleLength / 2],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y - style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.length, model.y - style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.length, model.y + style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y + style.PickOrDepartArrow.lineWidth / 2],
|
||||
[model.x + style.PickOrDepartArrow.triangleLength, model.y + style.PickOrDepartArrow.triangleLength / 2]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
fill: style.PickOrDepartArrow.fill,
|
||||
stroke: style.PickOrDepartArrow.stroke,
|
||||
lineWidth: 1
|
||||
}
|
||||
});
|
||||
this.arrowText = new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: {
|
||||
x: model.x + style.PickOrDepartArrow.length / 2,
|
||||
y: model.y + style.PickOrDepartArrow.distance,
|
||||
fontWeight: style.textStyle.fontWeight,
|
||||
fontSize: style.PickOrDepartArrow.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.text,
|
||||
textFill: style.PickOrDepartArrow.defaultColor,
|
||||
textAlign: style.textStyle.textAlign,
|
||||
textVerticalAlign: style.textStyle.textVerticalAlign
|
||||
}
|
||||
});
|
||||
this.add(this.arrow);
|
||||
this.add(this.arrowText);
|
||||
}
|
||||
|
||||
setControlFlashing(color) {
|
||||
if (color) {
|
||||
const style = this.model.style;
|
||||
this.arrow.animateStyle(true)
|
||||
.when(0, { fill: style.PickOrDepartArrow.fill })
|
||||
.when(1000, { stroke: color })
|
||||
.when(2000, { fill: style.PickOrDepartArrow.fill })
|
||||
.start();
|
||||
}
|
||||
}
|
||||
|
||||
recover() {
|
||||
const style = this.model.style;
|
||||
this.arrow.stopAnimation(false);
|
||||
this.arrow.setStyle('fill', style.PickOrDepartArrow.fill);
|
||||
}
|
||||
|
||||
setControlColor(color) {
|
||||
if (color) {
|
||||
this.arrow.setStyle('fill', color);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -14,4 +14,7 @@ export default class EUnmanned extends Group {
|
||||
this.path = createPathSvg(this.model);
|
||||
this.add(this.path);
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
}
|
||||
|
@ -33,8 +33,8 @@ export default class SaidLamp extends Group {
|
||||
create() {
|
||||
const model = this.model;
|
||||
const lampDevice = ['LeuControl', 'IntersiteControl', 'CenterCommunication', 'AtsControl', 'LocalControl', 'ChainControl', 'Maintain',
|
||||
'PowerSupply', 'MaintenanceLamps', 'ZcCommunication', 'SwitchFault', 'SectionOccupied', 'AssistStatus', 'TotalAssist', 'DepartAssist',
|
||||
'PickAssist', 'Recovery', 'Accident', 'Occlusion'];
|
||||
'PowerSupply', 'MaintenanceLamps', 'ZcCommunication', 'SwitchFault', 'SectionOccupied', 'AssistStatus', 'TotalAssist', 'DepartAssist',
|
||||
'PickAssist', 'Recovery', 'Accident', 'Occlusion'];
|
||||
if (lampDevice.includes(this._type)) {
|
||||
this.control = new EControl({
|
||||
zlevel: this.zlevel,
|
||||
@ -181,17 +181,17 @@ export default class SaidLamp extends Group {
|
||||
this.add(this.control);
|
||||
} else if (this._type === 'PickOrDepartArrow') {
|
||||
this.control = new EPickOrDepartArrow({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
x: model.position.x,
|
||||
y: model.position.y,
|
||||
text: model.name,
|
||||
right: model.right,
|
||||
style: this.style,
|
||||
_subType: 'PickOrDepartArrow'
|
||||
});
|
||||
this.add(this.control);
|
||||
}
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
x: model.position.x,
|
||||
y: model.position.y,
|
||||
text: model.name,
|
||||
right: model.right,
|
||||
style: this.style,
|
||||
_subType: 'PickOrDepartArrow'
|
||||
});
|
||||
this.add(this.control);
|
||||
}
|
||||
}
|
||||
|
||||
// 设置状态
|
||||
@ -200,16 +200,35 @@ export default class SaidLamp extends Group {
|
||||
if (!store.getters['map/checkDeviceShow'](this._code)) {
|
||||
this.control && this.control.hide();
|
||||
} else {
|
||||
// 区段占用,辅助状态,接发车箭头
|
||||
const datieType = [deviceType.SectionOccupied, deviceType.AssistStatus, deviceType.PickOrDepartArrow];
|
||||
if (model._type === deviceType.PowerSupply && model.name.includes('2')) {
|
||||
this.control && this.control.setControlColor(this.deviceStyle.lamp.offColor);
|
||||
this.control && this.control.setControlStroke(this.deviceStyle.lamp.strokeColor, 1);
|
||||
} else if ((model._type === deviceType.AtsControl || model._type === deviceType.LocalControl || model._type === deviceType.ChainControl) && model.name.includes('B')) {
|
||||
this.control && this.control.setControlColor(this.deviceStyle.lamp.offColor);
|
||||
} else if (datieType.includes(model._type)) {
|
||||
if (model.aspect) {
|
||||
if (model.aspect == 'WF') {
|
||||
this.control && this.control.setControlFlashing('#FFFFFF');
|
||||
} else {
|
||||
let defalutColor;
|
||||
if (model._type == deviceType.PickOrDepartArrow) {
|
||||
defalutColor = this.deviceStyle.fill;
|
||||
} else {
|
||||
defalutColor = this.deviceStyle.lamp.controlColor;
|
||||
}
|
||||
const colorMap = {'No':defalutColor, 'R':'#FF0000', 'G':'#00FF00', 'Y':'#FFFF00', 'W':'#FFFFFF'};
|
||||
this.control && this.control.setControlColor(colorMap[model.aspect]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
recover() {
|
||||
this.control && this.control.show();
|
||||
this.control && this.control.recover();
|
||||
}
|
||||
createMouseEvent() {
|
||||
if (this.deviceStyle.mouseOverStyle) {
|
||||
|
@ -2,6 +2,7 @@ import Group from 'zrender/src/container/Group';
|
||||
import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import Arc from 'zrender/src/graphic/shape/Arc';
|
||||
import store from '@/store/index';
|
||||
|
||||
export default class SignalButton extends Group {
|
||||
@ -87,6 +88,23 @@ export default class SignalButton extends Group {
|
||||
});
|
||||
this.add(this.buttonText);
|
||||
}
|
||||
if (model.type === 'CHANGE_DIRECTION') {
|
||||
this.arcFlash = new Arc({
|
||||
_subType: 'change_direction_flash',
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
cx: model.position.x + 18 + 7,
|
||||
cy: model.position.y + 7,
|
||||
r: 7
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0,
|
||||
fill: '#ffff00'
|
||||
}
|
||||
});
|
||||
this.add(this.arcFlash);
|
||||
}
|
||||
}
|
||||
startAnimate() {
|
||||
this.rectButton && this.rectButton.animateStyle(true)
|
||||
@ -97,6 +115,7 @@ export default class SignalButton extends Group {
|
||||
}
|
||||
stopAnimation() {
|
||||
this.rectButton && this.rectButton.stopAnimation(true);
|
||||
this.arcFlash && this.arcFlash.stopAnimation(false);
|
||||
}
|
||||
getTypeColor() {
|
||||
let color = '';
|
||||
@ -106,12 +125,12 @@ export default class SignalButton extends Group {
|
||||
} else if (this.model.type === 'GUIDE') {
|
||||
color = '#5050E1';
|
||||
} else if (list.includes(this.model.type)) {
|
||||
color = '#ccc'
|
||||
} else {
|
||||
color = '#ccc';
|
||||
} else {
|
||||
color = '#008000';
|
||||
}
|
||||
return color;
|
||||
}//12
|
||||
}// 12
|
||||
recover() {
|
||||
this.stopAnimation();
|
||||
this.rectButton && this.rectButton.setStyle({ fill:this.getTypeColor() });
|
||||
@ -126,6 +145,24 @@ export default class SignalButton extends Group {
|
||||
}
|
||||
setState(model) {
|
||||
this.recover();
|
||||
if (model.type == 'CHANGE_DIRECTION') {
|
||||
if (this.rectButton) {
|
||||
if (this.pressDown) {
|
||||
this.rectButton.setStyle({ fill:'#FFFF00' });
|
||||
this.arcFlash.show();
|
||||
const style = this.model.style;
|
||||
this.arcFlash.animateStyle(true)
|
||||
.when(0, { fill: style.backgroundColor })
|
||||
.when(1000, { stroke: '#FFFF00' })
|
||||
.when(2000, { fill: style.backgroundColor })
|
||||
.start();
|
||||
} else {
|
||||
this.rectButton.setStyle({ fill:this.getTypeColor() });
|
||||
this.arcFlash.stopAnimation(false);
|
||||
this.arcFlash.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!store.getters['map/checkDeviceShow'](this._code)) {
|
||||
this.buttonText && this.buttonText.hide();
|
||||
this.rectButton && this.rectButton.hide();
|
||||
|
@ -103,6 +103,19 @@ export default class EControl extends Group {
|
||||
this.control.setStyle('fill', color);
|
||||
}
|
||||
}
|
||||
setControlFlashing(color) {
|
||||
if (color) {
|
||||
this.control.animateStyle(true)
|
||||
.when(0, { fill: this.arcStyle.fill })
|
||||
.when(1000, { stroke: color })
|
||||
.when(2000, { fill: this.arcStyle.fill })
|
||||
.start();
|
||||
}
|
||||
}
|
||||
recover() {
|
||||
this.control.stopAnimation(false);
|
||||
this.control.setStyle('fill', this.arcStyle.fill);
|
||||
}
|
||||
setControlStroke(color, lineWidth) {
|
||||
this.control.setStyle('lineWidth', lineWidth);
|
||||
this.control.setStyle('stroke', color);
|
||||
|
Loading…
Reference in New Issue
Block a user