列车、分隔符组件化替换

2024-01-05 14:57:04 +08:00 · 2024-01-05 14:57:04 +08:00 · 8076e0bd6d
commit 8076e0bd6d
parent e10f41ce32
5 changed files with 98 additions and 520 deletions
--- a/src/drawApp/index.ts
+++ b/src/drawApp/index.ts
@ -84,7 +84,8 @@ import { PathLineDraw } from 'src/graphics/pathLine/PathLineDrawAssistant';
 import { PathLineData } from './graphics/PathLineInteraction';
 import { toStorageTransform } from './graphics/GraphicDataBase';
 import { SeparatorDraw } from 'src/graphics/separator/SeparatorDrawAssistant';
-import { Separator, SeparatorTemplate } from 'src/graphics/separator/Separator';
+import { Separator } from 'src/graphics/separator/Separator';
+import { SeparatorTemplate } from 'rt-graphic-component/components/packages/Separator/Separator';
 import { SeparatorData } from './graphics/SeparatorInteraction';
 import { LogicSectionDraw } from 'src/graphics/logicSection/LogicSectionDrawAssistant';
 import {
@ -262,7 +263,12 @@ export function initDrawApp(): IDrawApp {
        app,
        new AxleCountingTemplate(new AxleCountingData())
      ),
-      new SeparatorDraw(app, new SeparatorTemplate(new SeparatorData())),
+      new SeparatorDraw(
+        app,
+        new SeparatorTemplate(new SeparatorData(), {
+          lineColor: '0x617799',
+        })
+      ),
      new ConcentrationDividingLineDraw(
        app,
        new ConcentrationDividingLineTemplate(
--- a/src/drawApp/lineApp.ts
+++ b/src/drawApp/lineApp.ts
@ -58,7 +58,7 @@ import {
  TrainWindowTemplate,
 } from 'src/graphics/trainWindow/TrainWindow';
 import { TrainWindowData } from './graphics/TrainWindowInteraction';
-import { SeparatorTemplate } from 'src/graphics/separator/Separator';
+import { SeparatorTemplate } from 'rt-graphic-component/components/packages/Separator/Separator';
 import { SeparatorData } from './graphics/SeparatorInteraction';
 import { ContextMenu, MenuItemOptions } from 'jl-graphic';
 import {
@ -116,7 +116,9 @@ export function initLineApp(): IGraphicApp {
    new TurnoutTemplate(new TurnoutData(), new TurnoutStates()),
    new SectionTemplate(new SectionData()),
    new LogicSectionTemplate(new LogicSectionData(), new LogicSectionState()),
-    new SeparatorTemplate(new SeparatorData()),
+    new SeparatorTemplate(new SeparatorData(), {
+      lineColor: '0x617799',
+    }),
    new AxleCountingTemplate(new AxleCountingData()),
    new TrainWindowTemplate(new TrainWindowData()),
  ];
--- a/src/graphics/separator/Separator.ts
+++ b/src/graphics/separator/Separator.ts
@ -1,94 +1,8 @@
-import { Color, Graphics } from 'pixi.js';
-import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import { Separator } from 'rt-graphic-component/components/packages/Separator/Separator';
+import {
+  ISeparatorData,
+  separatorTypeEnum,
+} from 'rt-graphic-component/components/packages/Separator/SeparatorConfig';

-export interface ISeparatorData extends GraphicData {
-  get code(): string; // 编号
-  set code(v: string);
-  get separatorType(): string; // 类型
-  set separatorType(v: string);
-  clone(): ISeparatorData;
-  copyFrom(data: ISeparatorData): void;
-  eq(other: ISeparatorData): boolean;
-}
-
-export enum separatorTypeEnum {
-  turnout = 'turnout', // 道岔分隔符
-  endA = 'endA', // A端尽头分隔符
-  endB = 'endB', // B端尽头分隔符
-  section = 'section', // 区段分隔符
-}
-
-export const SeparatorConsts = {
-  height: 12,
-  lineWidth: 2,
-  lineColor: '0x617799',
-  circleColor: '0xEF0200',
-  radius: 5,
-};
-
-export class Separator extends JlGraphic {
-  static Type = 'Separator';
-  rectGraphic: Graphics = new Graphics();
-  circleGraphic: Graphics = new Graphics();
-  constructor() {
-    super(Separator.Type);
-    this.addChild(this.rectGraphic);
-    this.addChild(this.circleGraphic);
-  }
-  get datas(): ISeparatorData {
-    return this.getDatas<ISeparatorData>();
-  }
-  clear() {
-    this.rectGraphic.clear();
-    this.circleGraphic.clear();
-  }
-  doRepaint(): void {
-    this.clear();
-    const rectGraphic = this.rectGraphic;
-    if (!this.datas.separatorType) {
-      this.datas.separatorType = separatorTypeEnum.endA;
-    }
-    const typeArr = ['section', 'turnout'];
-    if (typeArr.includes(this.datas.separatorType)) {
-      rectGraphic.lineStyle(
-        SeparatorConsts.lineWidth,
-        new Color(SeparatorConsts.lineColor)
-      );
-      rectGraphic.moveTo(0, -SeparatorConsts.height / 2);
-      rectGraphic.lineTo(0, SeparatorConsts.height / 2);
-      if (this.datas.separatorType == 'turnout') {
-        this.circleGraphic.lineStyle(1, SeparatorConsts.circleColor);
-        this.circleGraphic.drawCircle(0, 0, SeparatorConsts.radius);
-      }
-    }
-    const endTypeArr = ['endA', 'endB'];
-    if (endTypeArr.includes(this.datas.separatorType)) {
-      let d = SeparatorConsts.radius;
-      if (this.datas.separatorType == 'endB') {
-        d = -d;
-      }
-      rectGraphic.lineStyle(
-        SeparatorConsts.lineWidth,
-        new Color(SeparatorConsts.lineColor)
-      );
-      rectGraphic.moveTo(0, 0);
-      rectGraphic.lineTo(-d, 0);
-      rectGraphic.lineTo(-d, -d);
-      rectGraphic.lineTo(-d * 3, -d);
-      rectGraphic.moveTo(-d, 0);
-      rectGraphic.lineTo(-d, d);
-      rectGraphic.lineTo(-d * 3, d);
-    }
-  }
-}
-
-export class SeparatorTemplate extends JlGraphicTemplate<Separator> {
-  constructor(dataTemplate: ISeparatorData) {
-    super(Separator.Type, {
-      dataTemplate,
-    });
-  }
-  new(): Separator {
-    return new Separator();
-  }
-}
+export { Separator, separatorTypeEnum };
+export type { ISeparatorData };
--- a/src/graphics/separator/SeparatorDrawAssistant.ts
+++ b/src/graphics/separator/SeparatorDrawAssistant.ts
@ -1,56 +1,18 @@
-import { FederatedPointerEvent, IHitArea, Point } from 'pixi.js';
-import {
-  GraphicDrawAssistant,
-  GraphicIdGenerator,
-  GraphicInteractionPlugin,
-  GraphicRelationParam,
-  IDrawApp,
-  JlGraphic,
-  linePoint,
-} from 'jl-graphic';
+import { Point } from 'pixi.js';
+import { GraphicIdGenerator, GraphicRelationParam, IDrawApp } from 'jl-graphic';
 import { Section, SectionType } from '../section/Section';
-import {
-  ISeparatorData,
-  Separator,
-  SeparatorConsts,
-  SeparatorTemplate,
-  separatorTypeEnum,
-} from './Separator';
+import { Separator, separatorTypeEnum } from './Separator';
 import { SeparatorData } from 'src/drawApp/graphics/SeparatorInteraction';
 import { Turnout } from '../turnout/Turnout';
 import { LogicSection } from '../logicSection/LogicSection';
+import { SeparatorTemplate } from 'rt-graphic-component/components/packages/Separator/Separator';
+import { SeparatorDraw as XaSeparatorDraw } from 'rt-graphic-component/components/packages/Separator/SeparatorDrawAssistant';

-export class SeparatorDraw extends GraphicDrawAssistant<
-  SeparatorTemplate,
-  ISeparatorData
-> {
-  SeparatorGraph: Separator;
+export class SeparatorDraw extends XaSeparatorDraw {
  constructor(app: IDrawApp, template: SeparatorTemplate) {
-    super(app, template, 'sym_o_square', '分隔符Separator');
-    this.SeparatorGraph = this.graphicTemplate.new();
-    this.container.addChild(this.SeparatorGraph);
-    SeparatorInteraction.init(app);
+    super(app, template);
  }

-  bind(): void {
-    super.bind();
-    this.SeparatorGraph.loadData(this.graphicTemplate.datas);
-    this.SeparatorGraph.doRepaint();
-  }
-
-  onLeftDown(e: FederatedPointerEvent): void {
-    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
-    this.createAndStore(true);
-  }
-
-  redraw(p: Point): void {
-    this.container.position.copyFrom(p);
-  }
-
-  prepareData(data: ISeparatorData): boolean {
-    data.transform = this.container.saveTransform();
-    return true;
-  }
  oneGenerates() {
    const SeparatorAll = this.app.queryStore.queryByType<Separator>(
      Separator.Type
@ -76,7 +38,7 @@ export class SeparatorDraw extends GraphicDrawAssistant<
      allR.forEach((relation, index) => {
        const r = relation.getRelationParam(section);
        const other = relation.getOtherRelationParam(section);
-        if (!section.datas.children.includes(other.g.id + '')) {
+        if (!section.datas.children.includes(other.g.id)) {
          // 排除物理区段和自身逻辑区段的关联关系
          port.push(r.param);
        }
@ -216,69 +178,3 @@ export class SeparatorDraw extends GraphicDrawAssistant<
    this.storeGraphic(separator);
  }
 }
-
-//碰撞检测
-export class SeparatorGraphicHitArea implements IHitArea {
-  separator: Separator;
-  constructor(separator: Separator) {
-    this.separator = separator;
-  }
-  contains(x: number, y: number): boolean {
-    let contains = false;
-    const p = new Point(x, y);
-    const typeArr = ['section', 'turnout'];
-    const endTypeArr = ['endA', 'endB'];
-    let d = SeparatorConsts.radius;
-    if (typeArr.includes(this.separator.datas.separatorType)) {
-      const tolerance = SeparatorConsts.lineWidth;
-      const p1 = new Point(0, -SeparatorConsts.height / 2);
-      const p2 = new Point(0, SeparatorConsts.height / 2);
-      contains = contains || linePoint(p1, p2, p, tolerance);
-      return contains;
-    } else if (endTypeArr.includes(this.separator.datas.separatorType)) {
-      if (this.separator.datas.separatorType == 'endB') {
-        d = -d;
-      }
-      const tolerance = SeparatorConsts.lineWidth;
-      const p1 = new Point(0, 0);
-      const p2 = new Point(-d, 0);
-      const p3 = new Point(-d, -d);
-      const p4 = new Point(-d * 3, -d);
-      const p5 = new Point(-d, d);
-      const p6 = new Point(-d * 3, d);
-      contains = contains || linePoint(p1, p2, p, tolerance);
-      contains = contains || linePoint(p2, p3, p, tolerance);
-      contains = contains || linePoint(p3, p4, p, tolerance);
-      contains = contains || linePoint(p2, p5, p, tolerance);
-      contains = contains || linePoint(p5, p6, p, tolerance);
-    }
-    return contains;
-  }
-}
-
-export class SeparatorInteraction extends GraphicInteractionPlugin<Separator> {
-  static Name = 'Separator_transform';
-  constructor(app: IDrawApp) {
-    super(SeparatorInteraction.Name, app);
-  }
-  static init(app: IDrawApp) {
-    return new SeparatorInteraction(app);
-  }
-  filter(...grahpics: JlGraphic[]): Separator[] | undefined {
-    return grahpics
-      .filter((g) => g.type === Separator.Type)
-      .map((g) => g as Separator);
-  }
-  bind(g: Separator): void {
-    g.eventMode = 'static';
-    g.cursor = 'pointer';
-    g.scalable = true;
-    g.rotatable = true;
-    g.rectGraphic.hitArea = new SeparatorGraphicHitArea(g);
-  }
-  unbind(g: Separator): void {
-    g.eventMode = 'none';
-    g.scalable = false;
-    g.rotatable = false;
-  }
-}
--- a/src/graphics/train/Train.ts
+++ b/src/graphics/train/Train.ts
@ -1,12 +1,8 @@
-import { Graphics, Container, Point } from 'pixi.js';
 import {
  GraphicData,
  GraphicIdGenerator,
  GraphicState,
-  JlGraphic,
  JlGraphicTemplate,
-  VectorText,
-  calculateMirrorPoint,
 } from 'jl-graphic';
 import { train } from 'src/protos/train';
 import { state } from 'src/protos/device_status';
@ -14,6 +10,13 @@ import { TrainWindow } from '../trainWindow/TrainWindow';
 import { LogicSection } from '../logicSection/LogicSection';
 import { Section } from '../section/Section';
 import { Station } from '../station/Station';
+import { Train as XaTrain } from 'rt-graphic-component/components/packages/Train/Train';
+import {
+  EnumDiriveModel,
+  EnumStatusText,
+  EnumTrainType,
+  UpdateTrainConsts,
+} from 'rt-graphic-component/components/packages/Train/TrainConfig';

 export interface ITrainData extends GraphicData {
  get code(): string; // 车号
@ -72,285 +75,13 @@ export interface ITrainState extends GraphicState {
  set record(v: train.TrainRecord);
 }

-interface bodyWH {
-  width: number; // 宽
-  height: number; // 高
-}
-
-// 列车颜色
-export enum TrainColorEnum {
-  headColor = '0xFFCE4D', // 箭头颜色
-  bodyColor = '0xA388B1', // 背景色
-  codeColor = '0xffffff', // 车号颜色
-  borderColor = '0xA3E198', // 边框的颜色
-  directionColor = '0x00FF00', // 方向箭头颜色
-}
-
-enum DiriveModelColorEnum { // 驾驶模式对应颜色
-  AM = '0x00FF00', // ATO自动驾驶
-  SM = '0xFFFF00', // ATP 监控下的人工驾驶模式
-  RM = '0xFFC837', // 限制人工驾驶模式
-  NRM = '0xA0522D', // 非限制人工驾驶模式
-  red = '0xF80103', // 红色表示通信中断
-}
-enum BBBColorEnum { // 识别号颜色
-  accuracy = '0xffffff', // 准点
-  early = '0x00FF00', // 早点
-  late = '0xFFFF00', // 晚点
-  schedule = '0xffffff', // 计划车
-  head = '0xE9FC01', // 头码车
-  manual = '0xE9FC01', // 人工车
-  special = '0xE9FC01', // 特殊车
-}
-
-enum statusTextColor {
-  H = '0xFFFF00', // H扣车
-  S = '0x6260F3', // S跳停
-  D = '0x00FF00', // D开门
-  A = '0xFF0000', // A报警
-}
-
 const deviceTypeString = new Map();
 deviceTypeString.set(state.DeviceType.TRACK, LogicSection.Type);
 deviceTypeString.set(state.DeviceType.SWITCH_TRACK, Section.Type);

-export const trainConsts = {
-  codeWidth: 120,
-  codeHeight: 40,
-  codePadding: 5,
-  borderWidth: 1,
-  codeFontSize: 22,
-  textFontSize: 16, // 状态字母大小
-  textMarginY: 10, // 状态字母与列车距离
-  statusTextList: ['H', 'S', 'D', 'A'],
-  marginX: 4, // 图形x轴边距
-  pauseW: 4, // 停止框宽度
-};
-
-export class TrainHead extends Container {
-  arrow: Graphics; // 箭头
-  pause: Graphics; // 停止
-  constructor() {
-    super();
-    this.arrow = new Graphics();
-    this.pause = new Graphics();
-    this.addChild(this.arrow);
-    this.addChild(this.pause);
-  }
-  clear() {
-    this.arrow.clear();
-    this.pause.clear();
-  }
-  doRepaint(states: ITrainState, bodyWH?: bodyWH) {
-    let direction = '';
-    if (states.mode?.ipModeTrainDirDown) {
-      direction = 'left';
-    }
-    if (states.mode?.ipModeTrainDirUp) {
-      direction = 'right';
-    }
-    this.clear();
-    if (!direction) {
-      return;
-    }
-    const marginX = trainConsts.marginX;
-    const pauseW = trainConsts.pauseW;
-    const codeWidth = bodyWH ? bodyWH.width : trainConsts.codeWidth;
-    const codeHeight = bodyWH ? bodyWH.height : trainConsts.codeHeight;
-    let arrowPoint = [
-      -codeHeight * 0.4 - marginX - codeWidth / 2,
-      0,
-      -marginX - codeWidth / 2,
-      codeHeight / 2,
-      -marginX - codeWidth / 2,
-      -codeHeight / 2,
-    ];
-    let pausePoint = [
-      -marginX - pauseW / 2 - codeWidth / 2,
-      -codeHeight / 2,
-      -marginX - pauseW / 2 - codeWidth / 2,
-      codeHeight / 2,
-    ];
-    if (direction != 'left') {
-      const aP: Array<number> = [];
-      arrowPoint.forEach((item, index) => {
-        if (index % 2 == 1) {
-          const p = new Point(arrowPoint[index - 1], item);
-          const newP = calculateMirrorPoint(new Point(0, 0), p);
-          aP.push(newP.x, newP.y);
-        }
-      });
-      arrowPoint = aP;
-      const pP: Array<number> = [];
-      pausePoint.forEach((item, index) => {
-        if (index % 2 == 1) {
-          const p = new Point(pausePoint[index - 1], item);
-          const newP = calculateMirrorPoint(new Point(0, 0), p);
-          pP.push(newP.x, newP.y);
-        }
-      });
-      pausePoint = pP;
-    }
-    let aColor = DiriveModelColorEnum.AM;
-    let pColor = DiriveModelColorEnum.SM;
-    if (states.mode?.ipModeTrainDriveModeCm) {
-      aColor = DiriveModelColorEnum.SM;
-      pColor = DiriveModelColorEnum.SM;
-    } else if (
-      states.mode?.ipModeTrainDriveModeRmf ||
-      states.mode?.ipModeTrainDriveModeRmr
-    ) {
-      aColor = DiriveModelColorEnum.RM;
-      pColor = DiriveModelColorEnum.RM;
-    }
-    if (states.mode?.ipModeTrainStoped) {
-      this.pause.lineStyle(pauseW, pColor, 1);
-      this.pause.moveTo(pausePoint[0], pausePoint[1]);
-      this.pause.lineTo(pausePoint[2], pausePoint[3]);
-    } else {
-      const arrow = this.arrow;
-      arrow.beginFill(aColor, 1);
-      arrow.drawPolygon(arrowPoint);
-      arrow.endFill();
-    }
-  }
-}
-
-export class TrainBody extends Container {
-  // codeRact: Graphics;
-  codeAGraph: VectorText = new VectorText(''); //识别号AA
-  codeBGraph: VectorText = new VectorText(''); //识别号BBB
-  constructor() {
-    super();
-    // this.codeRact = new Graphics();
-    // this.addChild(this.codeRact);
-    this.addChild(this.codeAGraph);
-    this.addChild(this.codeBGraph);
-    this.codeAGraph.setVectorFontSize(trainConsts.codeFontSize);
-    this.codeBGraph.setVectorFontSize(trainConsts.codeFontSize);
-  }
-  clear() {
-    // this.codeRact.clear();
-    this.codeAGraph.text = '';
-    this.codeBGraph.text = '';
-  }
-  getBodyWH(): bodyWH {
-    const bodyAWH = this.codeAGraph.localBoundsToCanvasPoints();
-    const bodyBWH = this.codeBGraph.localBoundsToCanvasPoints();
-    return {
-      width: bodyAWH[1].x - bodyAWH[0].x + bodyBWH[1].x - bodyBWH[0].x,
-      height: bodyAWH[2].y - bodyAWH[1].y,
-    };
-  }
-
-  doRepaint(states: ITrainState): void {
-    this.clear();
-    const codeAGraph = this.codeAGraph;
-    const codeBGraph = this.codeBGraph;
-    // const codeRact = this.codeRact;
-    let codeA = states.trainId;
-    // let codeA = states?.groupId;
-    // const firstChar = codeA.substring(0, 1); // 获取首字符
-    // if (+firstChar == states.lineId) {
-    //   codeA = codeA.substring(1); // 删除首字符是线路号的字符
-    // }
-    const fillAColor = BBBColorEnum.schedule;
-    let fillBColor = BBBColorEnum.schedule;
-    if (states.mode?.ipModeTrainTypeSchedule) {
-      if (states.mode?.ipModeTrainSchdLate) {
-        fillBColor = BBBColorEnum.late;
-      } else if (states.mode?.ipModeTrainSchdEarly) {
-        fillBColor = BBBColorEnum.early;
-      }
-    } else if (states.mode?.ipModeTrainTypeHead) {
-      codeA = states?.destinationId + '';
-      fillBColor = BBBColorEnum.head;
-    } else if (states.mode?.ipModeTrainTypeManual) {
-      codeA = 'MM';
-      fillBColor = BBBColorEnum.manual;
-    } else if (states.mode?.ipModeTrainTypeSpecial) {
-      codeA = '';
-    }
-    const codeB = states?.globalId;
-    codeAGraph.text = codeA || '01';
-    codeBGraph.text = codeB || '222';
-    codeAGraph.anchor.set(0.5);
-    codeBGraph.anchor.set(0.5);
-    const styleA = {
-      fill: fillAColor,
-      fontSize: trainConsts.codeFontSize,
-    };
-    const styleB = {
-      fill: fillBColor,
-      fontSize: trainConsts.codeFontSize,
-    };
-    codeAGraph.style = styleA;
-    codeBGraph.style = styleB;
-    const bodyAWH = codeAGraph.getLocalBounds();
-    const bodyBWH = codeBGraph.getLocalBounds();
-    codeAGraph.position.set(-bodyBWH.width / 2, 0);
-    codeBGraph.position.set(bodyAWH.width / 2, 0);
-    codeAGraph.updateOnScaled();
-    codeBGraph.updateOnScaled();
-    // const { width: codeWidth, height: codeHeight } = this.getBodyWH();
-    // codeRact.beginFill(new Color(TrainColorEnum.bodyColor));
-    // codeRact.drawRect(-codeWidth / 2, -codeHeight / 2, codeWidth, codeHeight);
-    // codeRact.endFill();
-  }
-}
-
-class StatusText extends Container {
-  sText: VectorText = new VectorText('');
-  constructor() {
-    super();
-    this.addChild(this.sText);
-  }
-  doRepaint(text: string, bodyWH: bodyWH): void {
-    this.sText.text = text;
-    this.sText.anchor.set(0.5);
-    const c = (statusTextColor as never)[text] || statusTextColor.D;
-    const style = {
-      fill: c,
-      fontSize: trainConsts.textFontSize,
-    };
-    this.sText.style = style;
-    const { width: codeWidth, height: codeHeight } = bodyWH;
-    const { width: textHWidth, height: textHeight } =
-      this.sText.getLocalBounds();
-    const num = trainConsts.statusTextList.length;
-    let index = trainConsts.statusTextList.findIndex((item) => {
-      return item == text;
-    });
-    if (index < 0) {
-      index = (num - 1) / 2; // 中间
-    }
-    const textMargin = (codeWidth - textHWidth * num) / (num - 1);
-    this.sText.position.set(
-      -codeWidth / 2 + (textHWidth * (index * 2 + 1)) / 2 + textMargin * index,
-      -codeHeight / 2 - textHeight / 2 - trainConsts.textMarginY
-    );
-  }
-  clear(): void {
-    this.sText.text = '';
-  }
-}
-
-export class Train extends JlGraphic {
-  static Type = 'Train';
-
-  trainHead: TrainHead;
-  trainbody: TrainBody;
-  statusTextMap: Map<string, StatusText> = new Map();
-  constructor() {
-    super(Train.Type);
-    this.trainbody = new TrainBody();
-    this.trainHead = new TrainHead();
-    this.addChild(this.trainHead);
-    this.addChild(this.trainbody);
-  }
-
-  get datas(): ITrainData {
-    return this.getDatas<ITrainData>();
+export class Train extends XaTrain {
+  constructor(data?: UpdateTrainConsts) {
+    super(data);
  }

  get states(): ITrainState {
@ -371,52 +102,73 @@ export class Train extends JlGraphic {
      this.trainbody.clear();
      return;
    }
-    this.trainbody.doRepaint(this.states);
-    const bodyWH = this.trainbody.getBodyWH();
-    this.trainHead.doRepaint(this.states, bodyWH);
+    let direction = '';
+    if (this.states.mode?.ipModeTrainDirDown) {
+      direction = 'left';
+    }
+    if (this.states.mode?.ipModeTrainDirUp) {
+      direction = 'right';
+    }
+    this.isRightRoTop = direction != 'left';
+    if (!direction) {
+      this.trainHead.clear();
+    }
+    let dModel = EnumDiriveModel.AM;
+    if (this.states.mode?.ipModeTrainDriveModeCm) {
+      dModel = EnumDiriveModel.SM;
+    } else if (
+      this.states.mode?.ipModeTrainDriveModeRmf ||
+      this.states.mode?.ipModeTrainDriveModeRmr
+    ) {
+      dModel = EnumDiriveModel.RM;
+    }
+    this.setDiriveModelColor(dModel);
+    let codeA = this.states.trainId;
+    let tType = EnumTrainType.schedule;
+    if (this.states.mode?.ipModeTrainTypeSchedule) {
+      if (this.states.mode?.ipModeTrainSchdLate) {
+        tType = EnumTrainType.late;
+      } else if (this.states.mode?.ipModeTrainSchdEarly) {
+        tType = EnumTrainType.early;
+      }
+    } else if (this.states.mode?.ipModeTrainTypeHead) {
+      codeA = this.states?.destinationId + '';
+      tType = EnumTrainType.head;
+    } else if (this.states.mode?.ipModeTrainTypeManual) {
+      codeA = 'MM';
+      tType = EnumTrainType.manual;
+    } else if (this.states.mode?.ipModeTrainTypeSpecial) {
+      codeA = '';
+    }
+    this.setTrainTypeColor(tType);
+    const codeB = this.states?.globalId;
+    this.setCodeAText(codeA);
+    this.setCodeBText(codeB);
+    this.trainbody.doRepaint();
+    this.trainHead.doRepaint();
    if (this.states.mode?.ipModeTrainHolded) {
-      this.showStatus('H');
+      this.showStatus(EnumStatusText.H);
    } else {
-      this.hideStatus('H');
+      this.hideStatus(EnumStatusText.H);
    }
    if (this.states.mode?.ipModeTrainSkipstop) {
-      this.showStatus('S');
+      this.showStatus(EnumStatusText.S);
    } else {
-      this.hideStatus('S');
+      this.hideStatus(EnumStatusText.S);
    }
    if (this.states.mode?.ipModeTrainDoorOpen) {
-      this.showStatus('D');
+      this.showStatus(EnumStatusText.D);
    } else {
-      this.hideStatus('D');
+      this.hideStatus(EnumStatusText.D);
    }
    if (this.states.mode?.ipModeTrainRsAlarm) {
-      this.showStatus('A');
+      this.showStatus(EnumStatusText.A);
    } else {
-      this.hideStatus('A');
+      this.hideStatus(EnumStatusText.A);
    }
    this.setPosition();
  }

-  showStatus(s: string) {
-    if (this.statusTextMap.has(s)) {
-      return;
-    }
-    const bodyWH = this.trainbody.getBodyWH();
-    const textD = new StatusText();
-    textD.doRepaint(s, bodyWH);
-    this.addChild(textD);
-    this.statusTextMap.set(s, textD);
-  }
-  hideStatus(s: string) {
-    if (!this.statusTextMap.has(s)) {
-      return;
-    }
-    const textD = this.statusTextMap.get(s);
-    if (textD) {
-      textD.clear();
-      this.statusTextMap.delete(s);
-    }
-  }
  setPosition(): void {
    if (deviceTypeString.get(this.states.devType)) {
      const dev = this.queryStore.queryByCodeAndType<LogicSection | Section>(
@ -455,12 +207,20 @@ export class Train extends JlGraphic {
  }
 }

+const updataConsts: UpdateTrainConsts = {
+  textMarginY: 10, // 状态字母与列车距离
+  marginX: 4, // 图形x轴边距
+  borderColor: '0xA3E198', // 边框的颜色
+  arrowDefaultColor: '0x00FF00', // 箭头默认颜色
+  pauseDefaultColor: '0xFFCE4D', // 停止默认颜色
+};
+
 export class TrainTemplate extends JlGraphicTemplate<Train> {
  constructor(dataTemplate: ITrainData, stateTemplate: ITrainState) {
    super(Train.Type, { dataTemplate, stateTemplate });
  }
  new(): Train {
-    const train = new Train();
+    const train = new Train(updataConsts);
    train.id = GraphicIdGenerator.next();
    train.loadState(this.states);
    return train;