From de4f4d2aa6685e647fd96894ff916c84c8be30ef Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Fri, 22 Apr 2022 15:08:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8C=BA=E6=AE=B5=E5=8D=A0=E7=94=A8=EF=BC=8C?= =?UTF-8?q?=E8=BE=85=E5=8A=A9=E7=8A=B6=E6=80=81=EF=BC=8C=E6=8E=A5=E5=8F=91?= =?UTF-8?q?=E8=BD=A6=E7=AE=AD=E5=A4=B4=20=E7=8A=B6=E6=80=81=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/shape/graph/SaidLamp/EAxle.js | 3 + .../shape/graph/SaidLamp/EControlSwitch.js | 3 + .../shape/graph/SaidLamp/EDeviceStatus.js | 3 + .../shape/graph/SaidLamp/EFoldbackMode.js | 3 + .../shape/graph/SaidLamp/EIndicatorLight.js | 3 + .../shape/graph/SaidLamp/ELampFilament.js | 3 + .../shape/graph/SaidLamp/EModeStatus.js | 3 + .../graph/SaidLamp/EPickOrDepartArrow.js | 124 +++++++++++------- src/jmapNew/shape/graph/SaidLamp/EUnmanned.js | 3 + src/jmapNew/shape/graph/SaidLamp/index.js | 45 +++++-- src/jmapNew/shape/graph/SignalButton/index.js | 43 +++++- src/jmapNew/shape/graph/element/EControl.js | 13 ++ 12 files changed, 183 insertions(+), 66 deletions(-) diff --git a/src/jmapNew/shape/graph/SaidLamp/EAxle.js b/src/jmapNew/shape/graph/SaidLamp/EAxle.js index 8ac219f93..835a22106 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EAxle.js +++ b/src/jmapNew/shape/graph/SaidLamp/EAxle.js @@ -73,4 +73,7 @@ export default class EAxle extends Group { this.add(this.arc1); this.add(this.arc2); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/EControlSwitch.js b/src/jmapNew/shape/graph/SaidLamp/EControlSwitch.js index 764e64818..55d5fdc79 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EControlSwitch.js +++ b/src/jmapNew/shape/graph/SaidLamp/EControlSwitch.js @@ -14,4 +14,7 @@ export default class EControlSwitch extends Group { this.path = createPathSvg(this.model); this.add(this.path); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/EDeviceStatus.js b/src/jmapNew/shape/graph/SaidLamp/EDeviceStatus.js index f1379d572..f9315e9fe 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EDeviceStatus.js +++ b/src/jmapNew/shape/graph/SaidLamp/EDeviceStatus.js @@ -136,4 +136,7 @@ export default class EDeviceStatus extends Group { // this.add(this.pfa); // this.add(this.pfb); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/EFoldbackMode.js b/src/jmapNew/shape/graph/SaidLamp/EFoldbackMode.js index f74c838dd..2cd31893c 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EFoldbackMode.js +++ b/src/jmapNew/shape/graph/SaidLamp/EFoldbackMode.js @@ -124,4 +124,7 @@ export default class EFoldbackMode extends Group { this.add(this.lateralLineRect); this.add(this.lateralLine); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/EIndicatorLight.js b/src/jmapNew/shape/graph/SaidLamp/EIndicatorLight.js index a5ba63843..b53eee65e 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EIndicatorLight.js +++ b/src/jmapNew/shape/graph/SaidLamp/EIndicatorLight.js @@ -80,4 +80,7 @@ export default class IndicatorLight extends Group { setControlColor(color) { this.indicator.setStyle({fill: color}); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/ELampFilament.js b/src/jmapNew/shape/graph/SaidLamp/ELampFilament.js index 266fefbfc..966e325f9 100644 --- a/src/jmapNew/shape/graph/SaidLamp/ELampFilament.js +++ b/src/jmapNew/shape/graph/SaidLamp/ELampFilament.js @@ -17,4 +17,7 @@ export default class ELampFilament extends Group { setControlColor(color) { this.path.setStyle({fill: color}); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/EModeStatus.js b/src/jmapNew/shape/graph/SaidLamp/EModeStatus.js index 89b4d1a90..6bea75a44 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EModeStatus.js +++ b/src/jmapNew/shape/graph/SaidLamp/EModeStatus.js @@ -77,4 +77,7 @@ export default class EDeviceStatus extends Group { this.add(this.stationCommunication); this.add(this.verifyBypass); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/EPickOrDepartArrow.js b/src/jmapNew/shape/graph/SaidLamp/EPickOrDepartArrow.js index 1af75865e..bd62cfe37 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EPickOrDepartArrow.js +++ b/src/jmapNew/shape/graph/SaidLamp/EPickOrDepartArrow.js @@ -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); + } + + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/EUnmanned.js b/src/jmapNew/shape/graph/SaidLamp/EUnmanned.js index 52ddac674..920860196 100644 --- a/src/jmapNew/shape/graph/SaidLamp/EUnmanned.js +++ b/src/jmapNew/shape/graph/SaidLamp/EUnmanned.js @@ -14,4 +14,7 @@ export default class EUnmanned extends Group { this.path = createPathSvg(this.model); this.add(this.path); } + + recover() { + } } diff --git a/src/jmapNew/shape/graph/SaidLamp/index.js b/src/jmapNew/shape/graph/SaidLamp/index.js index eee827dd9..cf21f5623 100644 --- a/src/jmapNew/shape/graph/SaidLamp/index.js +++ b/src/jmapNew/shape/graph/SaidLamp/index.js @@ -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) { diff --git a/src/jmapNew/shape/graph/SignalButton/index.js b/src/jmapNew/shape/graph/SignalButton/index.js index f7c52d48d..e98600481 100644 --- a/src/jmapNew/shape/graph/SignalButton/index.js +++ b/src/jmapNew/shape/graph/SignalButton/index.js @@ -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(); diff --git a/src/jmapNew/shape/graph/element/EControl.js b/src/jmapNew/shape/graph/element/EControl.js index 00c07b03f..1b01a84d7 100644 --- a/src/jmapNew/shape/graph/element/EControl.js +++ b/src/jmapNew/shape/graph/element/EControl.js @@ -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);