车站--站控中控

src/graphics/station/Station.ts

@@ -73,75 +73,83 @@ export interface IStationState extends GraphicState {
 }
 
 const stationConsts = {
-  radius: 5,
+  radius: 3,
   borderWidth: 1,
-  borderColor: '0xff0000',
-  fillColor: '0xff0000',
-  transferRadius: 3.5,
-  transferWidth: 0.2,
-  transferColor: '0x0fe81f',
+  circleColorGrey: '0x808080',
+  circleColorBlue: '0x08F80D',
+  circleColorYellow: '0xFFFA0C',
   codeColor: '0xF48815',
   codeFontSize: 22,
-  codeControlFontSize: 18,
-  codeOffsetX: -60,
-  codeOffsetY: -25,
-  circleOffsetY: -50,
-  circleBetweenOffset: 60,
-  kilometerCodeColor: '0x0fe81f',
-  kilometerCodeFontSize: 11,
+  codeControlFontSize: 12,
+  codeOffsetY: 30,
+  circleOffsetY: 20,
+  circleBetweenOffset: 40,
+  kilometerCodeColor: '0xFFFFFF',
+  kilometerCodeFontSize: 8,
   kilometerCodeOffsetY: -25,
 };
 class constrolGraphic extends Container {
   circleA: Graphics = new Graphics();
-  codeGraphA: VectorText = new VectorText(''); //控制名--紧急站控
+  codeGraphA: VectorText = new VectorText(''); //控制名--站控
   circleB: Graphics = new Graphics();
-  codeGraphB: VectorText = new VectorText(''); //控制名--遥控
-  circleC: Graphics = new Graphics();
-  codeGraphC: VectorText = new VectorText(''); //控制名--站控
+  codeGraphB: VectorText = new VectorText(''); //控制名--中控
+  arrow: Graphics = new Graphics();
+  inArrow: Graphics = new Graphics();
   constructor() {
     super();
     this.addChild(this.circleA);
     this.addChild(this.codeGraphA);
     this.addChild(this.circleB);
     this.addChild(this.codeGraphB);
-    this.addChild(this.circleC);
-    this.addChild(this.codeGraphC);
+    this.addChild(this.arrow);
+    this.addChild(this.inArrow);
     this.codeGraphA.setVectorFontSize(stationConsts.codeFontSize);
+    this.codeGraphB.setVectorFontSize(stationConsts.codeFontSize);
   }
   draw(): void {
     this.drawCircleCode(this.circleA, this.codeGraphA, '站控');
     this.circleA.position.set(
-      stationConsts.codeOffsetX,
+      stationConsts.circleBetweenOffset / 2,
       stationConsts.circleOffsetY
     );
     this.codeGraphA.position.set(
-      stationConsts.codeOffsetX,
+      stationConsts.circleBetweenOffset / 2,
       stationConsts.codeOffsetY
     );
-    this.drawCircleCode(this.circleB, this.codeGraphB, '遥控', '0x0fe81f');
+    this.drawCircleCode(
+      this.circleB,
+      this.codeGraphB,
+      '中控',
+      stationConsts.circleColorBlue
+    );
     this.circleB.position.set(
-      stationConsts.codeOffsetX - stationConsts.circleBetweenOffset,
+      -stationConsts.circleBetweenOffset / 2,
       stationConsts.circleOffsetY
     );
     this.codeGraphB.position.set(
-      stationConsts.codeOffsetX - stationConsts.circleBetweenOffset,
-      stationConsts.codeOffsetY
-    );
-    this.drawCircleCode(this.circleC, this.codeGraphC, '紧急站控');
-    this.circleC.position.set(
-      stationConsts.codeOffsetX - stationConsts.circleBetweenOffset * 2,
-      stationConsts.circleOffsetY
-    );
-    this.codeGraphC.position.set(
-      stationConsts.codeOffsetX - stationConsts.circleBetweenOffset * 2,
+      -stationConsts.circleBetweenOffset / 2,
       stationConsts.codeOffsetY
     );
+    const arrow = this.arrow;
+    arrow.clear();
+    arrow.lineStyle(stationConsts.borderWidth, new Color('0xFFFFFF'));
+    const points = [0, 0, 2, 2, 2, 1, 14, 1, 14, -1, 2, -1, 2, -2];
+    arrow.beginFill('0xFFFFFF');
+    arrow.drawPolygon(points);
+    arrow.endFill();
+    arrow.scale.set(1.1, 1.1);
+    arrow.position.set(-7, stationConsts.circleOffsetY);
+    const inArrow = this.inArrow;
+    inArrow.beginFill(stationConsts.circleColorGrey);
+    inArrow.drawPolygon(points);
+    inArrow.endFill();
+    inArrow.position.set(-6.5, stationConsts.circleOffsetY);
   }
   drawCircleCode(
     circle: Graphics,
     codeGraph: VectorText,
     code: string,
-    fillcolor = stationConsts.fillColor
+    fillcolor = stationConsts.circleColorGrey
   ): void {
     circle.clear();
     circle.lineStyle(stationConsts.borderWidth, new Color(fillcolor));
@@ -149,17 +157,15 @@ class constrolGraphic extends Container {
     circle.drawCircle(0, 0, stationConsts.radius);
     circle.endFill;
     codeGraph.text = code;
-    codeGraph.style.fill = stationConsts.codeColor;
+    codeGraph.style.fill = fillcolor;
     codeGraph.setVectorFontSize(stationConsts.codeControlFontSize);
     codeGraph.anchor.set(0.5);
   }
   clear(): void {
     this.circleA.clear();
     this.circleB.clear();
-    this.circleC.clear();
     this.codeGraphA.text = '';
     this.codeGraphB.text = '';
-    this.codeGraphC.text = '';
   }
 }
 export class Station extends JlGraphic {