创建站台基类和北京、西安两个子类，状态数据在子类中处理

src/packages/Platform/BeiJingPlatform.ts

@@ -0,0 +1,35 @@
+import { GraphicState, JlGraphicTemplate } from "jl-graphic";
+import { CategoryType,IPlatformData, BeiJingConsts }from './PlatformConfig'
+import { JlPlatform } from "./JlPlatform";
+
+export interface IBeiJingPlatformState extends GraphicState {
+  id?: number;
+}
+
+export class BeiJingPlatform extends JlPlatform {
+  constructor(categoryType:CategoryType) {
+    super(categoryType);
+  }
+  get states(): IBeiJingPlatformState {
+    return this.getStates<IBeiJingPlatformState>();
+  }
+  doRepaint(): void {
+    this.rectGraphic.stateFillColor=BeiJingConsts.noTrainStop
+    super.doRepaint()
+  }
+}
+
+export class BeiJingPlatformTemplate extends JlGraphicTemplate<BeiJingPlatform> {
+  constructor(
+    dataTemplate: IPlatformData,
+    stateTemplate: IBeiJingPlatformState,
+  ) {
+    super(BeiJingPlatform.Type, { dataTemplate, stateTemplate });
+  }
+  new(): BeiJingPlatform {
+    const g = new BeiJingPlatform(CategoryType.BeiJing);
+    g.loadData(this.datas);
+    g.loadState(this.states);
+    return g;
+  }
+}

src/packages/Platform/JlPlatform.ts

@@ -1,43 +1,32 @@
-import { JlGraphic, JlGraphicTemplate, VectorText, calculateMirrorPoint, distance2, getRectangleCenter } from "jl-graphic";
+import { JlGraphic, VectorText, calculateMirrorPoint, getRectangleCenter } from "jl-graphic";
 import { Container,Graphics,Rectangle,Color,Point } from 'pixi.js'
-import {CategoryType, CodeConstsConfig, DoorConstsConfig, IBeiJingPlatformState, IPlatformData, IXiAnPlatformState, LozengeConstsConfig, PlatformConstsConfig,  platformConstsMap }from './PlatformConfig'
+import {CategoryType, CodeConstsConfig, DoorConstsConfig, IPlatformData, LozengeConstsConfig, PlatformConstsConfig,  platformConstsMap }from './PlatformConfig'
 
-type IPlatformState=IBeiJingPlatformState|IXiAnPlatformState
 //子元素--矩形
 class RectGraphic extends Container {
   categoryType:CategoryType
-  rectGraphic: Graphics;
+  rect: Graphics;
+  stateFillColor?:string;
   constructor(categoryType:CategoryType) {
     super();
     this.categoryType=categoryType
-    this.rectGraphic = new Graphics();
+    this.rect = new Graphics();
-    this.addChild(this.rectGraphic);
+    this.addChild(this.rect);
   }
-  draw(stateData: IPlatformState,platformConsts: PlatformConstsConfig): void {
+  draw(platformConsts: PlatformConstsConfig): void {
-    const rectGraphic = this.rectGraphic;
+    const rect = this.rect;
-    let fillColor = platformConsts.noTrainStop;
+    const fillColor = this.stateFillColor ||platformConsts.noTrainStop;
-    switch (this.categoryType) {
+    rect
-      case CategoryType.XiAn:
-        const stateXiAn=stateData as IXiAnPlatformState
-        if (stateXiAn.trainberth) {
-          fillColor = platformConsts.trainStop;
-        }
-        if (stateXiAn.upSkipstop || stateXiAn.downSkipstop) {
-          fillColor = platformConsts.trainJump;
-        }
-      break;
-    }
-    rectGraphic
       .clear()
       .lineStyle(platformConsts.lineWidth, new Color(fillColor))
       .beginFill(fillColor, 1)
       .drawRect(0, 0, platformConsts.width, platformConsts.height).endFill;
-    rectGraphic.pivot = getRectangleCenter(
+      rect.pivot = getRectangleCenter(
       new Rectangle(0, 0, platformConsts.width, platformConsts.height)
     );
   }
   clear(): void {
-    this.rectGraphic.clear();
+    this.rect.clear();
   }
 }
 //子元素--门
@@ -45,6 +34,7 @@ class DoorGraphic extends Container {
   categoryType:CategoryType
   doorGraphic: Graphics;
   doorCloseGraphic: Graphics;
+  stateFillColor?:string;
   constructor(categoryType:CategoryType) {
     super();
     this.categoryType=categoryType
@@ -53,21 +43,11 @@ class DoorGraphic extends Container {
     this.addChild(this.doorGraphic);
     this.addChild(this.doorCloseGraphic);
   }
-  draw(stateData: IPlatformState,platformConsts:PlatformConstsConfig, ipRtuStusDown: boolean): void {
+  draw(platformConsts:PlatformConstsConfig): void {
     const doorConsts=platformConsts.doorGraphic as DoorConstsConfig
     const doorGraphic = this.doorGraphic;
     const doorCloseGraphic = this.doorCloseGraphic;
-    let lineColor = doorConsts.doorGreen;
+    const lineColor = this.stateFillColor ||doorConsts.doorGreen;
-    switch (this.categoryType) {
-      case CategoryType.XiAn:
-        const stateXiAn=stateData as IXiAnPlatformState
-        if (ipRtuStusDown) {
-          lineColor = doorConsts.doorBlue;
-        } else if (stateXiAn.psdCut) {
-          lineColor = doorConsts.doorRed;
-        }
-      break;
-    }
     doorGraphic.clear()
     .lineStyle(platformConsts.lineWidth, new Color(lineColor))
     .moveTo(
@@ -90,21 +70,9 @@ class DoorGraphic extends Container {
     this.doorGraphic.clear();
     this.doorCloseGraphic.clear();
   }
-  changeState(stateData: IPlatformState): void {
-    switch (this.categoryType) {
-      case CategoryType.XiAn:
-        const stateXiAn=stateData as IXiAnPlatformState
-        if (stateXiAn.psdOpen) {
-          this.doorCloseGraphic.visible = false;
-        } else {
-          this.doorCloseGraphic.visible = true;
-        }
-      break;
-    }
-  }
 }
 //子元素--字符
-class CodeGraph extends Container {
+class CodeGraphic extends Container {
   categoryType:CategoryType
   character: VectorText = new VectorText(''); //扣车H
   runLevel: VectorText = new VectorText(''); //运行等级
@@ -187,74 +155,21 @@ class CodeGraph extends Container {
   clear(): void {
     this.character.destroy();
   }
-  changeState(stateData: IPlatformState,platformConsts:PlatformConstsConfig): void {
-    const codeConsts=platformConsts.codeGraphic as CodeConstsConfig
-    switch (this.categoryType) {
-      case CategoryType.XiAn:
-        const stateXiAn=stateData as IXiAnPlatformState
-        if (
-          stateXiAn.upHold ||
-          stateXiAn.upOccHold ||
-          stateXiAn.downHold ||
-          stateXiAn.downOccHold
-        ) {
-          this.character.text = 'H';
-          this.character.visible = true;
-          this.circle.visible = true;
-          //上行扣车
-          if (stateXiAn.upHold) {
-            this.character.style.fill = codeConsts.HCharYellow;
-          }
-          if (stateXiAn.upOccHold) {
-            this.character.style.fill = codeConsts.HCharWhite;
-          }
-          if (stateXiAn.upHold && stateXiAn.upOccHold) {
-            this.character.style.fill = codeConsts.HCharRed;
-          }
-          //下行扣车
-          if (stateXiAn.downHold) {
-            this.character.style.fill = codeConsts.HCharYellow;
-          }
-          if (stateXiAn.downOccHold) {
-            this.character.style.fill = codeConsts.HCharWhite;
-          }
-          if (stateXiAn.downHold && stateXiAn.downOccHold) {
-            this.character.style.fill = codeConsts.HCharRed;
-          }
-        }
-        //运行等级
-        if (stateXiAn.nextSectionRunLevel) {
-          this.runLevel.visible = false;
-          this.runLevel.text = stateXiAn.nextSectionRunLevel;
-        }
-        //运行时间
-        if (stateXiAn.nextSectionRunTime) {
-          this.runTime.visible = true;
-          this.runTime.text = stateXiAn.nextSectionRunTime;
-        }
-        //停站时间
-        if (stateXiAn.stopTime) {
-          this.stopTime.visible = true;
-          this.stopTime.text = stateXiAn.stopTime;
-        }
-      break;
-    }
-  }
 }
 //子元素--站台旁菱形图标
 class LozengeGraphic extends Container {
   categoryType:CategoryType
-  lozengeGraphic: Graphics;
+  lozenge: Graphics;
   constructor(categoryType:CategoryType) {
     super();
     this.categoryType=categoryType
-    this.lozengeGraphic = new Graphics();
+    this.lozenge = new Graphics();
-    this.addChild(this.lozengeGraphic);
+    this.addChild(this.lozenge);
   }
   draw(platformConsts:PlatformConstsConfig): void {
     const LozengeConsts=platformConsts.lozengeGraphic as LozengeConstsConfig
-    const lozengeGraphic = this.lozengeGraphic;
+    const lozenge = this.lozenge;
-    lozengeGraphic.clear()
+    lozenge.clear()
     .lineStyle(1, new Color(LozengeConsts.lozengeRed))
     .beginFill(LozengeConsts.lozengeRed, 1)
     .drawRect(
@@ -270,36 +185,24 @@ class LozengeGraphic extends Container {
       platformConsts.height / 4,
       platformConsts.height / 4
     );
-    lozengeGraphic.pivot = getRectangleCenter(rect);
+    lozenge.pivot = getRectangleCenter(rect);
-    lozengeGraphic.rotation = Math.PI / 4;
+    lozenge.rotation = Math.PI / 4;
-    lozengeGraphic.visible = false;
+    lozenge.visible = false;
   }
   clear(): void {
-    this.lozengeGraphic.clear();
+    this.lozenge.clear();
-  }
-  changeState(stateData: IPlatformState): void {
-    switch (this.categoryType) {
-      case CategoryType.XiAn:
-        const stateXiAn=stateData as IXiAnPlatformState
-        if (stateXiAn.emergstop) {
-          this.lozengeGraphic.visible = true;
-        } else {
-          this.lozengeGraphic.visible = false;
-        }
-      break;
-    }
   }
 }
 
-export class Platform extends JlGraphic {
+export abstract class JlPlatform extends JlGraphic {
   static Type = 'Platform';
   private categoryType:CategoryType
   rectGraphic: RectGraphic;
   doorGraphic?: DoorGraphic;
   lozengeGraphic?: LozengeGraphic;
-  codeGraph?: CodeGraph;
+  codeGraphic?: CodeGraphic;
   constructor(categoryType:CategoryType) {
-    super(Platform.Type);
+    super(JlPlatform.Type);
     this.categoryType = categoryType
     const platformConsts=platformConstsMap.get(this.categoryType) as PlatformConstsConfig
     this.rectGraphic = new RectGraphic(categoryType)
@@ -313,27 +216,20 @@ export class Platform extends JlGraphic {
       this.addChild(this.lozengeGraphic);
     }
     if(platformConsts.codeGraphic){
-      this.codeGraph = new CodeGraph(categoryType,platformConsts)
+      this.codeGraphic = new CodeGraphic(categoryType,platformConsts)
-      this.addChild(this.codeGraph);
+      this.addChild(this.codeGraphic);
     }
   }
   get datas() {
     return this.getDatas<IPlatformData>();
   }
-  get states(): IPlatformState {
-    return this.getStates<IPlatformState>();
-  }
   doRepaint(): void {
     this.doorGraphic?.clear();
     const platformConsts=platformConstsMap.get(this.categoryType) as PlatformConstsConfig
-    this.rectGraphic.draw(this.states, platformConsts);
+    this.rectGraphic.draw(platformConsts);
-    if(this.datas.hasdoor && this.doorGraphic){
+    if(this.doorGraphic){
       const doorConsts= platformConsts.doorGraphic as DoorConstsConfig
-     /*  const station = this.getGraphicApp().queryStore.queryByCodeAndType<Station>(
+      this.doorGraphic.draw(platformConsts)
-        states.rtuId > 9 ? '' + states.rtuId : '0' + states.rtuId,
-        Station.Type
-      ); */
-      this.doorGraphic.draw(this.states,platformConsts,false)
       this.doorGraphic.position.set(
         0,
         -platformConsts.height / 2 -doorConsts.doorPlatformSpacing
@@ -342,23 +238,23 @@ export class Platform extends JlGraphic {
         this.doorGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.doorGraphic.position))
       }
     }
-    if(this.codeGraph){
+    if(this.codeGraphic){
       const codeConsts=platformConsts.codeGraphic as CodeConstsConfig
-      this.codeGraph.draw(platformConsts);
+      this.codeGraphic.draw(platformConsts);
-      this.codeGraph.position.set(0, 0);
+      this.codeGraphic.position.set(0, 0);
       if (this.datas.direction == 'down') {
         const psChange = [
-          this.codeGraph?.character,
+          this.codeGraphic?.character,
-          this.codeGraph?.runLevel,
+          this.codeGraphic?.runLevel,
-          this.codeGraph?.stopTime,
+          this.codeGraphic?.stopTime,
-          this.codeGraph?.runTime,
+          this.codeGraphic?.runTime,
         ];
         psChange.forEach((g) => {
           if(g){
              g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position));
           }
         });
-        this.codeGraph?.circle.position.set(
+        this.codeGraphic?.circle.position.set(
           platformConsts.width / 2 +
             platformConsts.lineWidth / 2 +
             (codeConsts.besideSpacing * 4) / 3,
@@ -379,29 +275,5 @@ export class Platform extends JlGraphic {
         this.lozengeGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.lozengeGraphic.position))
       }
     }
-    this.changeState();
-  }
-  changeState(): void {
-    const platformConsts=platformConstsMap.get(this.categoryType) as PlatformConstsConfig
-    this.doorGraphic?.changeState(this.states);
-    this.lozengeGraphic?.changeState(this.states);
-    this.codeGraph?.changeState(this.states,platformConsts);
-  }
-}
-export class PlatformTemplate extends JlGraphicTemplate<Platform> {
-  categoryType:CategoryType;
-  constructor(
-    dataTemplate: IPlatformData,
-    stateTemplate: IPlatformState,
-    categoryType: CategoryType
-  ) {
-    super(Platform.Type, { dataTemplate, stateTemplate });
-    this.categoryType = categoryType;
-  }
-  new(): Platform {
-    const g = new Platform(this.categoryType);
-    g.loadData(this.datas);
-    g.loadState(this.states);
-    return g;
   }
 }

src/packages/Platform/PlatformConfig.ts

@@ -41,7 +41,7 @@ export interface LozengeConstsConfig{
   doorPlatformSpacing: number,
 }
 
-const BeiJingConsts = {
+export const BeiJingConsts = {
   width: 90,
   height: 20,
   lineWidth: 3,
@@ -50,7 +50,7 @@ const BeiJingConsts = {
   trainJump : '0xC0C0FE',
 };
 
-const XiAnConsts = {
+export const XiAnConsts = {
   width: 90,
   height: 20,
   lineWidth: 3,
@@ -101,43 +101,3 @@ export interface IPlatformData extends GraphicData {
   copyFrom(data: IPlatformData): void;
   eq(other: IPlatformData): boolean;
 }
-
-export interface IXiAnPlatformState extends GraphicState {
-  get emergstop(): boolean; //紧急关闭
-  set emergstop(v: boolean);
-  get trainberth(): boolean; //列车停站
-  set trainberth(v: boolean);
-  get close(): boolean; //站台关闭，清客
-  set close(v: boolean);
-  get upHold(): boolean; //上行方向车站扣车
-  set upHold(v: boolean);
-  get downHold(): boolean; //下行方向车站扣车
-  set downHold(v: boolean);
-  get upOccHold(): boolean; //上行方向中心扣车
-  set upOccHold(v: boolean);
-  get downOccHold(): boolean; //下行方向中心扣车
-  set downOccHold(v: boolean);
-  get psdOpen(): boolean; //屏蔽门开
-  set psdOpen(v: boolean);
-  get psdCut(): boolean; //屏蔽门切除
-  set psdCut(v: boolean);
-  get upSkipstop(): boolean; //上行方向跳停
-  set upSkipstop(v: boolean);
-  get downSkipstop(): boolean; //下行方向跳停
-  set downSkipstop(v: boolean);
-  get upTrainSkipstop(): boolean; //上行方向指定列车跳停
-  set upTrainSkipstop(v: boolean);
-  get downTrainSkipstop(): boolean; //下行方向指定列车跳停
-  set downTrainSkipstop(v: boolean);
-  get nextSectionRunTime(): number; //下一区间运行时间
-  set nextSectionRunTime(v: number);
-  get nextSectionRunLevel(): number; //下一区间运行等级
-  set nextSectionRunLevel(v: number);
-  get stopTime(): number; //停站时间
-  set stopTime(v: number);
-  get rtuId(): number; // 集中站站号
-  set rtuId(v: number);
-}
-export interface IBeiJingPlatformState extends GraphicState {
-  id?: number;
-}

src/packages/Platform/XiAnPlatform.ts

@@ -0,0 +1,151 @@
+import { GraphicState, JlGraphicTemplate } from "jl-graphic";
+import { CategoryType,IPlatformData, XiAnConsts }from './PlatformConfig'
+import { JlPlatform } from "./JlPlatform";
+
+export interface IXiAnPlatformState extends GraphicState {
+  get emergstop(): boolean; //紧急关闭
+  set emergstop(v: boolean);
+  get trainberth(): boolean; //列车停站
+  set trainberth(v: boolean);
+  get close(): boolean; //站台关闭，清客
+  set close(v: boolean);
+  get upHold(): boolean; //上行方向车站扣车
+  set upHold(v: boolean);
+  get downHold(): boolean; //下行方向车站扣车
+  set downHold(v: boolean);
+  get upOccHold(): boolean; //上行方向中心扣车
+  set upOccHold(v: boolean);
+  get downOccHold(): boolean; //下行方向中心扣车
+  set downOccHold(v: boolean);
+  get psdOpen(): boolean; //屏蔽门开
+  set psdOpen(v: boolean);
+  get psdCut(): boolean; //屏蔽门切除
+  set psdCut(v: boolean);
+  get upSkipstop(): boolean; //上行方向跳停
+  set upSkipstop(v: boolean);
+  get downSkipstop(): boolean; //下行方向跳停
+  set downSkipstop(v: boolean);
+  get upTrainSkipstop(): boolean; //上行方向指定列车跳停
+  set upTrainSkipstop(v: boolean);
+  get downTrainSkipstop(): boolean; //下行方向指定列车跳停
+  set downTrainSkipstop(v: boolean);
+  get nextSectionRunTime(): number; //下一区间运行时间
+  set nextSectionRunTime(v: number);
+  get nextSectionRunLevel(): number; //下一区间运行等级
+  set nextSectionRunLevel(v: number);
+  get stopTime(): number; //停站时间
+  set stopTime(v: number);
+  get rtuId(): number; // 集中站站号
+  set rtuId(v: number);
+}
+
+export class XiAnPlatform extends JlPlatform {
+  constructor(categoryType:CategoryType) {
+    super(categoryType);
+  }
+  get states(): IXiAnPlatformState {
+    return this.getStates<IXiAnPlatformState>();
+  }
+  doRepaint(): void {
+    this.rectGraphic.stateFillColor=XiAnConsts.noTrainStop
+    if (this.states.trainberth) {
+      this.rectGraphic.stateFillColor = XiAnConsts.trainStop;
+    }
+    if (this.states.upSkipstop || this.states.downSkipstop) {
+      this.rectGraphic.stateFillColor = XiAnConsts.trainJump;
+    }
+   /*  const station = this.getGraphicApp().queryStore.queryByCodeAndType<Station>(
+      this.states.rtuId > 9 ? '' + this.states.rtuId : '0' + this.states.rtuId,
+      Station.Type
+    ); */
+    if (this.doorGraphic) {
+      this.doorGraphic.stateFillColor=XiAnConsts.doorGraphic.doorGreen
+     /*  if (!!station?.states.ipRtuStusDown) {
+        this.doorGraphic.stateFillColor = XiAnConsts.doorGraphic.doorBlue;
+      }  */ if (this.states.psdCut) {
+        this.doorGraphic.stateFillColor = XiAnConsts.doorGraphic.doorRed;
+      }
+    }
+    super.doRepaint()
+    if (this.doorGraphic) {
+      if (this.states.psdOpen) {
+        this.doorGraphic.doorCloseGraphic.visible = false;
+      } else {
+        this.doorGraphic.doorCloseGraphic.visible = true;
+      }
+    }
+    if( this.lozengeGraphic){
+      if (this.states.emergstop) {
+        this.lozengeGraphic.lozenge.visible = true;
+      } else {
+        this.lozengeGraphic.lozenge.visible = false;
+      }
+    }
+    if(this.codeGraphic){
+      if (
+        this.states.upHold ||
+        this.states.upOccHold ||
+        this.states.downHold ||
+        this.states.downOccHold
+      ) {
+        this.codeGraphic.character.text = 'H';
+        this.codeGraphic.character.visible = true;
+        this.codeGraphic.circle.visible = true;
+        //上行扣车
+        if (this.states.upHold) {
+          this.codeGraphic.character.style.fill = XiAnConsts.codeGraphic.HCharYellow;
+        }
+        if (this.states.upOccHold) {
+          this.codeGraphic.character.style.fill =  XiAnConsts.codeGraphic.HCharWhite;
+        }
+        if (this.states.upHold && this.states.upOccHold) {
+          this.codeGraphic.character.style.fill =  XiAnConsts.codeGraphic.HCharRed;
+        }
+        //下行扣车
+        if (this.states.downHold) {
+          this.codeGraphic.character.style.fill =  XiAnConsts.codeGraphic.HCharYellow;
+        }
+        if (this.states.downOccHold) {
+          this.codeGraphic.character.style.fill =  XiAnConsts.codeGraphic.HCharWhite;
+        }
+        if (this.states.downHold && this.states.downOccHold) {
+          this.codeGraphic.character.style.fill =  XiAnConsts.codeGraphic.HCharRed;
+        }
+      }
+      //运行等级
+      if (this.states.nextSectionRunLevel) {
+        this.codeGraphic.runLevel.visible = false;
+        this.codeGraphic.runLevel.text = this.states.nextSectionRunLevel;
+      }
+      //运行时间
+      if (this.states.nextSectionRunTime) {
+        this.codeGraphic.runTime.visible = true;
+        this.codeGraphic.runTime.text = this.states.nextSectionRunTime;
+      }
+      //停站时间
+      if (this.states.stopTime) {
+        this.codeGraphic.stopTime.visible = true;
+        this.codeGraphic.stopTime.text = this.states.stopTime;
+      }
+    }
+  }
+}
+
+export class XiAnPlatformTemplate extends JlGraphicTemplate<XiAnPlatform> {
+  hasdoor: boolean;
+  direction: string;
+  constructor(
+    dataTemplate: IPlatformData,
+    stateTemplate: IXiAnPlatformState,
+  ) {
+    super(XiAnPlatform.Type, { dataTemplate, stateTemplate });
+    this.hasdoor = true;
+    this.direction = 'up';
+  }
+  new(): XiAnPlatform {
+    const g = new XiAnPlatform(CategoryType.XiAn);
+    g.loadData(this.datas);
+    g.loadState(this.states);
+    return g;
+  }
+}