区段占用,辅助状态,接发车箭头 状态代码调整

This commit is contained in:
joylink_cuiweidong 2022-04-22 15:08:36 +08:00
parent 5e30c99d2c
commit de4f4d2aa6
12 changed files with 183 additions and 66 deletions

View File

@ -73,4 +73,7 @@ export default class EAxle extends Group {
this.add(this.arc1);
this.add(this.arc2);
}
recover() {
}
}

View File

@ -14,4 +14,7 @@ export default class EControlSwitch extends Group {
this.path = createPathSvg(this.model);
this.add(this.path);
}
recover() {
}
}

View File

@ -136,4 +136,7 @@ export default class EDeviceStatus extends Group {
// this.add(this.pfa);
// this.add(this.pfb);
}
recover() {
}
}

View File

@ -124,4 +124,7 @@ export default class EFoldbackMode extends Group {
this.add(this.lateralLineRect);
this.add(this.lateralLine);
}
recover() {
}
}

View File

@ -80,4 +80,7 @@ export default class IndicatorLight extends Group {
setControlColor(color) {
this.indicator.setStyle({fill: color});
}
recover() {
}
}

View File

@ -17,4 +17,7 @@ export default class ELampFilament extends Group {
setControlColor(color) {
this.path.setStyle({fill: color});
}
recover() {
}
}

View File

@ -77,4 +77,7 @@ export default class EDeviceStatus extends Group {
this.add(this.stationCommunication);
this.add(this.verifyBypass);
}
recover() {
}
}

View File

@ -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);
}
}
}

View File

@ -14,4 +14,7 @@ export default class EUnmanned extends Group {
this.path = createPathSvg(this.model);
this.add(this.path);
}
recover() {
}
}

View File

@ -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) {

View File

@ -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();

View File

@ -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);