diff --git a/src/drawApp/graphics/PlatformInteraction.ts b/src/drawApp/graphics/PlatformInteraction.ts index 1f8f2fa..a65b744 100644 --- a/src/drawApp/graphics/PlatformInteraction.ts +++ b/src/drawApp/graphics/PlatformInteraction.ts @@ -295,13 +295,13 @@ export class PlatformOperateInteraction extends GraphicInteractionPlugin { - platform.states.upHold = true; platform.states.upOccHold = true; + platform.states.emergstop = true; platform.doRepaint(); }; removeHoldrConfig.handler = () => { - platform.states.upHold = false; platform.states.upOccHold = false; + platform.states.emergstop = false; platform.doRepaint(); }; skipStopConfig.handler = () => { diff --git a/src/graphics/platform/Platform.ts b/src/graphics/platform/Platform.ts index a41a669..0163f62 100644 --- a/src/graphics/platform/Platform.ts +++ b/src/graphics/platform/Platform.ts @@ -1,5 +1,6 @@ import { Color, Container, Graphics, Point, Rectangle } from 'pixi.js'; import { + GraphicAnimation, GraphicData, GraphicState, JlGraphic, @@ -266,23 +267,23 @@ class codeGraph extends Container { this.hold.visible = true; //上行扣车 if (stateData.upHold) { - this.hold.style.fill = PlatformColorEnum.HCharWhite; + this.hold.style.fill = PlatformColorEnum.HCharYellow; } if (stateData.upOccHold) { this.hold.style.fill = PlatformColorEnum.HCharWhite; } if (stateData.upHold && stateData.upOccHold) { - this.hold.style.fill = PlatformColorEnum.HCharWhite; + this.hold.style.fill = PlatformColorEnum.HCharRed; } //下行扣车 if (stateData.downHold) { - this.hold.style.fill = PlatformColorEnum.HCharWhite; + this.hold.style.fill = PlatformColorEnum.HCharYellow; } if (stateData.downOccHold) { this.hold.style.fill = PlatformColorEnum.HCharWhite; } if (stateData.downHold && stateData.downOccHold) { - this.hold.style.fill = PlatformColorEnum.HCharWhite; + this.hold.style.fill = PlatformColorEnum.HCharRed; } } //运行等级 @@ -308,44 +309,71 @@ class codeGraph extends Container { } } //子元素--站台旁菱形图标 -class besideGraphic extends Container { - static Type = 'BesideGraphic'; - besideGraphic: Graphics; +class emergClose extends JlGraphic { + static Type = 'emergClose'; + lozenge: Graphics; + deltaTime = 0; + fillColor = PlatformColorEnum.lozengeRed; constructor() { - super(); - this.besideGraphic = new Graphics(); - this.addChild(this.besideGraphic); + super(emergClose.Type); + this.lozenge = new Graphics(); + this.addChild(this.lozenge); } draw(): void { - const besideGraphic = this.besideGraphic; - besideGraphic.clear(); - besideGraphic.lineStyle(1, new Color(PlatformColorEnum.lozengeRed)); - besideGraphic.beginFill(PlatformColorEnum.lozengeRed, 1); - besideGraphic.drawRect( + const lozenge = this.lozenge; + lozenge.clear(); + lozenge.lineStyle(1, new Color(this.fillColor)); + lozenge.beginFill(PlatformColorEnum.lozengeRed, 1); + lozenge.drawRect( 0, 0, platformConsts.height / 4, platformConsts.height / 4 ); - besideGraphic.endFill(); + lozenge.endFill(); const rect = new Rectangle( 0, 0, platformConsts.height / 4, platformConsts.height / 4 ); - besideGraphic.pivot = getRectangleCenter(rect); - besideGraphic.rotation = Math.PI / 4; - besideGraphic.visible = false; + lozenge.pivot = getRectangleCenter(rect); + lozenge.rotation = Math.PI / 4; + lozenge.visible = false; + } + doRepaint() { + // this.draw() } clear(): void { - this.besideGraphic.clear(); + this.lozenge.clear(); } - changeState(stateData: IPlatformState): void { + createFlashAnmiation(name: string): GraphicAnimation { + const flashAnmiation = GraphicAnimation.init({ + name: name, + run: (dt: number) => { + this.deltaTime += dt; + if (this.deltaTime > 60) { + this.deltaTime = 0; + this.lozenge.visible = false; + } else if (this.deltaTime > 30) { + this.lozenge.visible = true; + } + }, + }); + return flashAnmiation; + } + changeState(id: string, stateData: IPlatformState): void { + let redFlash = this.animation(`${id}emergClose_red_flash`); if (stateData.emergstop) { - this.besideGraphic.visible = true; + if (!redFlash) { + redFlash = this.createFlashAnmiation(`${id}emergClose_red_flash`); + this.addAnimation(redFlash); + } + redFlash.resume(); } else { - this.besideGraphic.visible = false; + if (redFlash) { + redFlash.pause(); + } } } } @@ -354,13 +382,13 @@ export class Platform extends JlGraphic { static Type = 'Platform'; platformGraphic: rectGraphic = new rectGraphic(); doorGraphic: doorGraphic = new doorGraphic(); - besideGraphic: besideGraphic = new besideGraphic(); + emergClose: emergClose = new emergClose(); codeGraph: codeGraph = new codeGraph(); constructor() { super(Platform.Type); this.addChild(this.platformGraphic); this.addChild(this.doorGraphic); - this.addChild(this.besideGraphic); + this.addChild(this.emergClose); this.addChild(this.codeGraph); } @@ -376,14 +404,14 @@ export class Platform extends JlGraphic { this.doorGraphic.draw(this.states); } this.platformGraphic.draw(this.states); - this.besideGraphic.draw(); + this.emergClose.draw(); this.codeGraph.draw(); this.doorGraphic.position.set( 0, -platformConsts.height / 2 - platformConsts.doorPlatformSpacing ); - this.besideGraphic.position.set( + this.emergClose.position.set( 0, -platformConsts.height / 2 - platformConsts.doorPlatformSpacing - @@ -394,7 +422,7 @@ export class Platform extends JlGraphic { if (this.datas.direction == 'down') { const psChange = [ this.doorGraphic, - this.besideGraphic, + this.emergClose, ...this.codeGraph.children, ]; psChange.forEach((g) => { @@ -405,7 +433,7 @@ export class Platform extends JlGraphic { } changeState(): void { this.doorGraphic.changeState(this.states); - this.besideGraphic.changeState(this.states); + this.emergClose.changeState(this.id, this.states); this.codeGraph.changeState(this.states); } }