Merge branch 'master' of https://git.code.tencent.com/beijing-rtss-test/bj-rtss-client

src/components/draw-app/DrawProperties.vue

@@ -39,6 +39,12 @@
           <platform-property
             v-if="drawStore.selectedGraphicType === Platform.Type"
           ></platform-property>
+          <ibpBox-property
+            v-if="drawStore.selectedGraphicType === IbpBox.Type"
+          ></ibpBox-property>
+          <pslBox-property
+            v-if="drawStore.selectedGraphicType === PslBox.Type"
+          ></pslBox-property>
           <screenDoor-property
             v-if="drawStore.selectedGraphicType === ScreenDoor.Type"
           ></screenDoor-property>
@@ -150,6 +156,10 @@ import PolygonProperty from './properties/PolygonProperty.vue';
 import { Polygon } from 'src/graphics/polygon/Polygon';
 import PlatformProperty from './properties/PlatformProperty.vue';
 import { Platform } from 'src/graphics/platform/Platform';
+import IbpBoxProperty from './properties/IbpBoxProperty.vue';
+import { IbpBox } from 'src/graphics/ibpBox/IbpBox';
+import PslBoxProperty from './properties/PslBoxProperty.vue';
+import { PslBox } from 'src/graphics/pslBox/PslBox';
 import ScreenDoorProperty from './properties/ScreenDoorProperty.vue';
 import { ScreenDoor } from 'src/graphics/screenDoor/ScreenDoor';
 import StationProperty from './properties/StationProperty.vue';

src/components/draw-app/properties/IbpBoxProperty.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="IbpBoxModel.id" label="id" />
+    <q-input
+      outlined
+      style="margin-top: 10px"
+      v-model="IbpBoxModel.code"
+      @blur="onUpdate"
+      label="编号"
+    />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="IbpBoxModel.refStationId"
+      :options="stationList"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="关联车站"
+    />
+    <q-select
+      outlined
+      class="q-mt-md"
+      @blur="onUpdate"
+      v-model="IbpBoxModel.refIbpMapCode"
+      :options="ibpNameList"
+      label="关联IBP地图"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { getPublishList } from 'src/api/PublishApi';
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { IbpBoxData } from 'src/drawApp/graphics/IbpBoxInteraction';
+import { Station } from 'src/graphics/station/Station';
+import { PictureType } from 'src/protos/picture';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, ref } from 'vue';
+
+const drawStore = useDrawStore();
+const { data: IbpBoxModel, onUpdate } = useFormData(
+  new IbpBoxData(),
+  drawStore.getDrawApp()
+);
+const stationList: { label: string; value: number }[] = reactive([]);
+const ibpNameList = ref<string[]>([]);
+
+onMounted(() => {
+  const list1: string[] = [];
+  getPublishList({
+    type: PictureType.IBP,
+    category: drawStore.categoryType,
+  }).then((ibpMapList) => {
+    if (ibpMapList && ibpMapList.length) {
+      ibpMapList.forEach((item) => {
+        list1.push(item.name);
+      });
+      ibpNameList.value = list1;
+    }
+  });
+  const stations = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<Station>(Station.Type);
+  stations.forEach((p) => {
+    stationList.push({
+      value: p.id,
+      label: `${p.datas.code}`,
+    });
+  });
+});
+</script>

src/components/draw-app/properties/PslBoxProperty.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="IbpBoxModel.id" label="id" />
+    <q-input
+      outlined
+      style="margin-top: 10px"
+      v-model="IbpBoxModel.code"
+      @blur="onUpdate"
+      label="编号"
+    />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="IbpBoxModel.refPlatformId"
+      :options="stationList"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="关联站台"
+    />
+    <q-select
+      outlined
+      class="q-mt-md"
+      @blur="onUpdate"
+      v-model="IbpBoxModel.refPslMapCode"
+      :options="pslNameList"
+      label="关联PSL地图"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { getPublishList } from 'src/api/PublishApi';
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { PslBoxData } from 'src/drawApp/graphics/PslBoxInteraction';
+import { Platform } from 'src/graphics/platform/Platform';
+import { PictureType } from 'src/protos/picture';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, ref } from 'vue';
+
+const drawStore = useDrawStore();
+const { data: IbpBoxModel, onUpdate } = useFormData(
+  new PslBoxData(),
+  drawStore.getDrawApp()
+);
+const stationList: { label: string; value: number }[] = reactive([]);
+const pslNameList = ref<string[]>([]);
+
+onMounted(() => {
+  const list2: string[] = [];
+  getPublishList({
+    type: PictureType.Psl,
+    category: useDrawStore().categoryType,
+  }).then((pslMapList) => {
+    if (pslMapList && pslMapList.length) {
+      pslMapList.forEach((item) => {
+        list2.push(item.name);
+      });
+    }
+    pslNameList.value = list2;
+  });
+  const platforms = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<Platform>(Platform.Type);
+  platforms.forEach((p) => {
+    stationList.push({
+      value: p.id,
+      label: `${p.datas.code}`,
+    });
+  });
+});
+</script>

src/drawApp/common.ts

@@ -19,6 +19,8 @@ import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow';
 import { Transponder } from 'src/graphics/transponder/Transponder';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { ConcentrationDividingLine } from 'src/graphics/concentrationDividingLine/ConcentrationDividingLine';
+import { IbpBox } from 'src/graphics/ibpBox/IbpBox';
+import { PslBox } from 'src/graphics/pslBox/PslBox';
 
 export const drawCommonLayerList = [
   // 图层列表  默认显示的图层defaultShow: true
@@ -33,6 +35,8 @@ export const drawCommonLayerList = [
   { label: '停车位置标', value: StopPosition.Type, defaultShow: true },
   { label: 'Spks开关', value: SpksSwitch.Type, defaultShow: true },
   { label: '门控箱', value: GatedBox.Type, defaultShow: true },
+  { label: 'Ibp盘', value: IbpBox.Type, defaultShow: true },
+  { label: 'Psl盘', value: PslBox.Type, defaultShow: true },
   { label: '紧急关闭按钮', value: EsbButton.Type, defaultShow: true },
   { label: '应答器', value: Transponder.Type, defaultShow: true },
   { label: '车次窗', value: TrainWindow.Type, defaultShow: true },

src/drawApp/commonApp.ts

@@ -30,6 +30,12 @@ import { PolygonDraw } from 'src/graphics/polygon/PolygonDrawAssistant';
 import { Platform, PlatformTemplate } from 'src/graphics/platform/Platform';
 import { PlatformData, PlatformState } from './graphics/PlatformInteraction';
 import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant';
+import { IbpBox, IbpBoxTemplate } from 'src/graphics/ibpBox/IbpBox';
+import { IbpBoxData } from './graphics/IbpBoxInteraction';
+import { IbpBoxDraw } from 'src/graphics/ibpBox/IbpBoxDrawAssistant';
+import { PslBox, PslBoxTemplate } from 'src/graphics/pslBox/PslBox';
+import { PslBoxData } from './graphics/PslBoxInteraction';
+import { PslBoxDraw } from 'src/graphics/pslBox/PslBoxDrawAssistant';
 import {
   ScreenDoor,
   ScreenDoorTemplate,
@@ -170,6 +176,8 @@ export function initCommonDrawApp(app: IDrawApp) {
     app,
     new PlatformTemplate(new PlatformData(), new PlatformState())
   );
+  new IbpBoxDraw(app, new IbpBoxTemplate(new IbpBoxData()));
+  new PslBoxDraw(app, new PslBoxTemplate(new PslBoxData()));
   new ScreenDoorDraw(
     app,
     new ScreenDoorTemplate(new ScreenDoorData(), new ScreenDoorState())
@@ -366,6 +374,12 @@ export function loadCommonDrawDatas(
   storage.Platforms.forEach((platform) => {
     datas.push(new PlatformData(platform));
   });
+  storage.ibpBoxs.forEach((ibpBox) => {
+    datas.push(new IbpBoxData(ibpBox));
+  });
+  storage.pslBoxs.forEach((pslBox) => {
+    datas.push(new PslBoxData(pslBox));
+  });
   storage.screenDoors.forEach((screenDoor) => {
     datas.push(new ScreenDoorData(screenDoor));
   });
@@ -438,6 +452,12 @@ export function saveCommonDrawDatas(app: IDrawApp) {
     if (Platform.Type === g.type) {
       const platformData = (g as Platform).saveData();
       storage.Platforms.push((platformData as PlatformData).data);
+    } else if (IbpBox.Type === g.type) {
+      const ibpBoxData = (g as IbpBox).saveData();
+      storage.ibpBoxs.push((ibpBoxData as IbpBoxData).data);
+    } else if (PslBox.Type === g.type) {
+      const pslBoxData = (g as PslBox).saveData();
+      storage.pslBoxs.push((pslBoxData as PslBoxData).data);
     } else if (Station.Type === g.type) {
       const stationData = (g as Station).saveData();
       storage.stations.push((stationData as StationData).data);

src/drawApp/graphics/IbpBoxInteraction.ts

@@ -0,0 +1,83 @@
+import * as pb_1 from 'google-protobuf';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import { IbpBox, IIbpBox } from 'src/graphics/ibpBox/IbpBox';
+import { GraphicInteractionPlugin, JlGraphic, IGraphicScene } from 'jl-graphic';
+
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+import { usePslStore } from 'src/stores/psl-store';
+
+export class IbpBoxData extends GraphicDataBase implements IIbpBox {
+  constructor(data?: graphicData.IbpBox) {
+    let ibpBox;
+    if (!data) {
+      ibpBox = new graphicData.IbpBox({
+        common: GraphicDataBase.defaultCommonInfo(IbpBox.Type),
+      });
+    } else {
+      ibpBox = data;
+    }
+    super(ibpBox);
+  }
+
+  public get data(): graphicData.IbpBox {
+    return this.getData<graphicData.IbpBox>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get refStationId(): number {
+    return this.data.refStationId;
+  }
+  set refStationId(v: number) {
+    this.data.refStationId = v;
+  }
+  get refIbpMapCode(): string {
+    return this.data.refIbpMapCode;
+  }
+  set refIbpMapCode(v: string) {
+    this.data.refIbpMapCode = v;
+  }
+  clone(): IbpBoxData {
+    return new IbpBoxData(this.data.cloneMessage());
+  }
+  copyFrom(data: IbpBoxData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: IbpBoxData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class IbpBoxOperateInteraction extends GraphicInteractionPlugin<IbpBox> {
+  static Name = 'gated_box_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(IbpBoxOperateInteraction.Name, app);
+  }
+  static init(app: IGraphicScene) {
+    return new IbpBoxOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): IbpBox[] | undefined {
+    return grahpics
+      .filter((g) => g.type === IbpBox.Type)
+      .map((g) => g as IbpBox);
+  }
+  bind(g: IbpBox): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.on('_leftclick', this.onLeftClick, this);
+  }
+
+  unbind(g: IbpBox): void {
+    g.eventMode = 'none';
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const ibpBox = target.getGraphic() as IbpBox;
+    usePslStore().setPslParam(ibpBox.datas.id, ibpBox.datas.refIbpMapCode);
+  }
+}

src/drawApp/graphics/PslBoxInteraction.ts

@@ -0,0 +1,83 @@
+import * as pb_1 from 'google-protobuf';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import { PslBox, IPslBox } from 'src/graphics/pslBox/PslBox';
+import { GraphicInteractionPlugin, JlGraphic, IGraphicScene } from 'jl-graphic';
+
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+import { usePslStore } from 'src/stores/psl-store';
+
+export class PslBoxData extends GraphicDataBase implements IPslBox {
+  constructor(data?: graphicData.PslBox) {
+    let pslBox;
+    if (!data) {
+      pslBox = new graphicData.PslBox({
+        common: GraphicDataBase.defaultCommonInfo(PslBox.Type),
+      });
+    } else {
+      pslBox = data;
+    }
+    super(pslBox);
+  }
+
+  public get data(): graphicData.PslBox {
+    return this.getData<graphicData.PslBox>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get refPlatformId(): number {
+    return this.data.refPlatformId;
+  }
+  set refPlatformId(v: number) {
+    this.data.refPlatformId = v;
+  }
+  get refPslMapCode(): string {
+    return this.data.refPslMapCode;
+  }
+  set refPslMapCode(v: string) {
+    this.data.refPslMapCode = v;
+  }
+  clone(): PslBoxData {
+    return new PslBoxData(this.data.cloneMessage());
+  }
+  copyFrom(data: PslBoxData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: PslBoxData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class PslBoxOperateInteraction extends GraphicInteractionPlugin<PslBox> {
+  static Name = 'gated_box_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(PslBoxOperateInteraction.Name, app);
+  }
+  static init(app: IGraphicScene) {
+    return new PslBoxOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): PslBox[] | undefined {
+    return grahpics
+      .filter((g) => g.type === PslBox.Type)
+      .map((g) => g as PslBox);
+  }
+  bind(g: PslBox): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.on('_leftclick', this.onLeftClick, this);
+  }
+
+  unbind(g: PslBox): void {
+    g.eventMode = 'none';
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const pslBox = target.getGraphic() as PslBox;
+    usePslStore().setPslParam(pslBox.datas.id, pslBox.datas.refPslMapCode);
+  }
+}

src/drawApp/lineScene.ts

@@ -161,6 +161,8 @@ import {
 import { errorNotify, successNotify } from 'src/utils/CommonNotify';
 import { removeAllTrain } from 'src/api/Simulation';
 import { ApiError } from 'src/boot/axios';
+import { IbpBox } from 'src/graphics/ibpBox/IbpBox';
+import { PslBox } from 'src/graphics/pslBox/PslBox';
 
 const showOptions: MenuItemOptions = {
   name: '显示控制',
@@ -208,6 +210,8 @@ export const layerList = [
   { label: '停车位置标', value: StopPosition.Type, defaultShow: true },
   { label: 'Spks开关', value: SpksSwitch.Type, defaultShow: true },
   { label: '门控箱', value: GatedBox.Type, defaultShow: true },
+  { label: 'Ibp盘', value: IbpBox.Type, defaultShow: true },
+  { label: 'Psl盘', value: PslBox.Type, defaultShow: true },
   { label: '紧急关闭按钮', value: EsbButton.Type, defaultShow: true },
   { label: '应答器', value: Transponder.Type, defaultShow: true },
   // { label: 'Link', value: Link.Type, defaultShow: false },

src/graphics/ibpBox/IbpBox.ts

@@ -0,0 +1,87 @@
+import { Graphics } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'jl-graphic';
+
+export interface IIbpBox extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get refStationId(): number;
+  set refStationId(v: number);
+  get refIbpMapCode(): string;
+  set refIbpMapCode(v: string);
+  clone(): IIbpBox;
+  copyFrom(data: IIbpBox): void;
+  eq(other: IIbpBox): boolean;
+}
+
+const ibpBoxConsts = {
+  codeFontSize: 12,
+  codeColor: 0xffffff,
+  bodyLineColor: 0xffffff,
+  bodyLineWidth: 4,
+  bodyRectLineColor: 0xffffff,
+  bodyRectLineWidth: 2,
+  bodyRectWidth: 24,
+  bodyRectHeight: 20,
+  bodyColor: 0x000000,
+};
+export class IbpBox extends JlGraphic {
+  static Type = 'ibpBox';
+  rectBody: Graphics = new Graphics();
+  lineBody: Graphics = new Graphics();
+  textGraph: VectorText = new VectorText('IBP');
+
+  constructor() {
+    super(IbpBox.Type);
+    this.addChild(this.rectBody);
+    this.addChild(this.lineBody);
+    this.addChild(this.textGraph);
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IIbpBox {
+    return this.getDatas<IIbpBox>();
+  }
+  doRepaint(): void {
+    this.textGraph.style.fill = ibpBoxConsts.codeColor;
+    this.textGraph.setVectorFontSize(ibpBoxConsts.codeFontSize);
+    this.textGraph.anchor.set(0.5);
+    this.rectBody.clear();
+    this.rectBody.beginFill(ibpBoxConsts.bodyColor, 0);
+    this.rectBody.lineStyle(
+      ibpBoxConsts.bodyRectLineWidth,
+      ibpBoxConsts.bodyRectLineColor
+    );
+    this.rectBody.drawRect(
+      -ibpBoxConsts.bodyRectWidth / 2,
+      -ibpBoxConsts.bodyRectHeight / 2,
+      ibpBoxConsts.bodyRectWidth,
+      ibpBoxConsts.bodyRectHeight
+    );
+    this.rectBody.endFill();
+    this.lineBody.clear();
+    const lineY = -ibpBoxConsts.bodyRectHeight / 2;
+    this.lineBody.lineStyle(
+      ibpBoxConsts.bodyLineWidth,
+      ibpBoxConsts.bodyLineColor
+    );
+    this.lineBody.moveTo(-ibpBoxConsts.bodyRectWidth / 2, lineY);
+    this.lineBody.lineTo(ibpBoxConsts.bodyRectWidth / 2, lineY);
+  }
+}
+
+export class IbpBoxTemplate extends JlGraphicTemplate<IbpBox> {
+  constructor(dataTemplate: IIbpBox) {
+    super(IbpBox.Type, { dataTemplate });
+  }
+  new(): IbpBox {
+    const ibpBox = new IbpBox();
+    ibpBox.loadData(this.datas);
+    return ibpBox;
+  }
+}

src/graphics/ibpBox/IbpBoxDrawAssistant.ts

@@ -0,0 +1,106 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import { IbpBox, IbpBoxTemplate, IIbpBox } from './IbpBox';
+
+export interface IIbpBoxDrawOptions {
+  newData: () => IIbpBox;
+}
+export class IbpBoxDraw extends GraphicDrawAssistant<IbpBoxTemplate, IIbpBox> {
+  _gatedBox: IbpBox | null = null;
+  constructor(app: IDrawApp, template: IbpBoxTemplate) {
+    super(app, template, 'svguse:../../drawIcon.svg#icon-spks-switch', 'Ibp');
+    IbpBoxInteraction.init(app);
+  }
+  public get gatedBox(): IbpBox {
+    if (!this._gatedBox) {
+      this._gatedBox = this.graphicTemplate.new();
+      this._gatedBox.loadData(this.graphicTemplate.datas);
+      this.container.addChild(this._gatedBox);
+    }
+    return this._gatedBox;
+  }
+
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    this.gatedBox.repaint();
+    this.container.position.set(p.x, p.y);
+  }
+
+  prepareData(data: IIbpBox): boolean {
+    data.transform = this.container.saveTransform();
+    data.code = 'Ibp';
+    return true;
+  }
+}
+/**
+ * 构建吸附线
+ * @param gatedBox
+ */
+function buildAbsorbablePositions(gatedBox: IbpBox): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const gatedBoxs = gatedBox.queryStore.queryByType<IbpBox>(IbpBox.Type);
+  const canvas = gatedBox.getCanvas();
+  gatedBoxs.forEach((item) => {
+    if (item.id === gatedBox.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+  return aps;
+}
+
+export class IbpBoxInteraction extends GraphicInteractionPlugin<IbpBox> {
+  static Name = 'ibp_box_transform';
+  constructor(app: IDrawApp) {
+    super(IbpBoxInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new IbpBoxInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): IbpBox[] | undefined {
+    return grahpics
+      .filter((g) => g.type === IbpBox.Type)
+      .map((g) => g as IbpBox);
+  }
+  bind(g: IbpBox): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: IbpBox): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const gatedBox = target.getGraphic() as IbpBox;
+    gatedBox.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(gatedBox),
+    });
+  }
+}

src/graphics/pslBox/PslBox.ts

@@ -0,0 +1,87 @@
+import { Graphics } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'jl-graphic';
+
+export interface IPslBox extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get refPlatformId(): number;
+  set refPlatformId(v: number);
+  get refPslMapCode(): string;
+  set refPslMapCode(v: string);
+  clone(): IPslBox;
+  copyFrom(data: IPslBox): void;
+  eq(other: IPslBox): boolean;
+}
+
+const pslBoxConsts = {
+  codeFontSize: 12,
+  codeColor: 0xffffff,
+  bodyLineColor: 0xffffff,
+  bodyLineWidth: 4,
+  bodyRectLineColor: 0xffffff,
+  bodyRectLineWidth: 2,
+  bodyRectWidth: 24,
+  bodyRectHeight: 20,
+  bodyColor: 0x000000,
+};
+export class PslBox extends JlGraphic {
+  static Type = 'pslBox';
+  rectBody: Graphics = new Graphics();
+  lineBody: Graphics = new Graphics();
+  textGraph: VectorText = new VectorText('PSL');
+
+  constructor() {
+    super(PslBox.Type);
+    this.addChild(this.rectBody);
+    this.addChild(this.lineBody);
+    this.addChild(this.textGraph);
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IPslBox {
+    return this.getDatas<IPslBox>();
+  }
+  doRepaint(): void {
+    this.textGraph.style.fill = pslBoxConsts.codeColor;
+    this.textGraph.setVectorFontSize(pslBoxConsts.codeFontSize);
+    this.textGraph.anchor.set(0.5);
+    this.rectBody.clear();
+    this.rectBody.beginFill(pslBoxConsts.bodyColor, 0);
+    this.rectBody.lineStyle(
+      pslBoxConsts.bodyRectLineWidth,
+      pslBoxConsts.bodyRectLineColor
+    );
+    this.rectBody.drawRect(
+      -pslBoxConsts.bodyRectWidth / 2,
+      -pslBoxConsts.bodyRectHeight / 2,
+      pslBoxConsts.bodyRectWidth,
+      pslBoxConsts.bodyRectHeight
+    );
+    this.rectBody.endFill();
+    this.lineBody.clear();
+    const lineY = -pslBoxConsts.bodyRectHeight / 2;
+    this.lineBody.lineStyle(
+      pslBoxConsts.bodyLineWidth,
+      pslBoxConsts.bodyLineColor
+    );
+    this.lineBody.moveTo(-pslBoxConsts.bodyRectWidth / 2, lineY);
+    this.lineBody.lineTo(pslBoxConsts.bodyRectWidth / 2, lineY);
+  }
+}
+
+export class PslBoxTemplate extends JlGraphicTemplate<PslBox> {
+  constructor(dataTemplate: IPslBox) {
+    super(PslBox.Type, { dataTemplate });
+  }
+  new(): PslBox {
+    const pslBox = new PslBox();
+    pslBox.loadData(this.datas);
+    return pslBox;
+  }
+}

src/graphics/pslBox/PslBoxDrawAssistant.ts

@@ -0,0 +1,106 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import { PslBox, PslBoxTemplate, IPslBox } from './PslBox';
+
+export interface IPslBoxDrawOptions {
+  newData: () => IPslBox;
+}
+export class PslBoxDraw extends GraphicDrawAssistant<PslBoxTemplate, IPslBox> {
+  _gatedBox: PslBox | null = null;
+  constructor(app: IDrawApp, template: PslBoxTemplate) {
+    super(app, template, 'svguse:../../drawIcon.svg#icon-gated-box', 'Psl');
+    PslBoxInteraction.init(app);
+  }
+  public get gatedBox(): PslBox {
+    if (!this._gatedBox) {
+      this._gatedBox = this.graphicTemplate.new();
+      this._gatedBox.loadData(this.graphicTemplate.datas);
+      this.container.addChild(this._gatedBox);
+    }
+    return this._gatedBox;
+  }
+
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    this.gatedBox.repaint();
+    this.container.position.set(p.x, p.y);
+  }
+
+  prepareData(data: IPslBox): boolean {
+    data.transform = this.container.saveTransform();
+    data.code = 'Psl';
+    return true;
+  }
+}
+/**
+ * 构建吸附线
+ * @param gatedBox
+ */
+function buildAbsorbablePositions(gatedBox: PslBox): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const gatedBoxs = gatedBox.queryStore.queryByType<PslBox>(PslBox.Type);
+  const canvas = gatedBox.getCanvas();
+  gatedBoxs.forEach((item) => {
+    if (item.id === gatedBox.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+  return aps;
+}
+
+export class PslBoxInteraction extends GraphicInteractionPlugin<PslBox> {
+  static Name = 'psl_box_transform';
+  constructor(app: IDrawApp) {
+    super(PslBoxInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new PslBoxInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): PslBox[] | undefined {
+    return grahpics
+      .filter((g) => g.type === PslBox.Type)
+      .map((g) => g as PslBox);
+  }
+  bind(g: PslBox): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: PslBox): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const gatedBox = target.getGraphic() as PslBox;
+    gatedBox.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(gatedBox),
+    });
+  }
+}

src/layouts/DrawLayout.vue

@@ -272,6 +272,8 @@ import OtherLineConfig from 'src/components/draw-app/properties/OtherLineConfig.
 import SectionDirectionConfig from 'src/components/draw-app/properties/SectionDirectionConfig.vue';
 import SignalDirectionConfig from 'src/components/draw-app/properties/SignalDirectionConfig.vue';
 import { distance2, JlGraphic } from 'jl-graphic';
+import { IbpBox } from 'src/graphics/ibpBox/IbpBox';
+import { PslBox } from 'src/graphics/pslBox/PslBox';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -435,6 +437,8 @@ onMounted(() => {
     CurvatureKiloMarker.Type,
     Polygon.Type,
     ConcentrationDividingLine.Type,
+    IbpBox.Type,
+    PslBox.Type,
   ];
   switch (drawStore.categoryType) {
     case CategoryType.TH:

src/protos/stationLayoutGraphics.ts

@@ -50,9 +50,11 @@ export namespace graphicData {
             autoReturnBoxs?: AutoReturnBox[];
             concentrationDividingLines?: ConcentrationDividingLine[];
             otherLineList?: OtherLine[];
+            ibpBoxs?: IbpBox[];
+            pslBoxs?: PslBox[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 25, 26, 27, 28, 29, 32, 33, 34, 35, 37, 39, 40, 41, 42], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 25, 26, 27, 28, 29, 32, 33, 34, 35, 37, 39, 40, 41, 42, 43, 44], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -165,6 +167,12 @@ export namespace graphicData {
                 if ("otherLineList" in data && data.otherLineList != undefined) {
                     this.otherLineList = data.otherLineList;
                 }
+                if ("ibpBoxs" in data && data.ibpBoxs != undefined) {
+                    this.ibpBoxs = data.ibpBoxs;
+                }
+                if ("pslBoxs" in data && data.pslBoxs != undefined) {
+                    this.pslBoxs = data.pslBoxs;
+                }
             }
         }
         get canvas() {
@@ -401,6 +409,18 @@ export namespace graphicData {
         set otherLineList(value: OtherLine[]) {
             pb_1.Message.setRepeatedWrapperField(this, 42, value);
         }
+        get ibpBoxs() {
+            return pb_1.Message.getRepeatedWrapperField(this, IbpBox, 43) as IbpBox[];
+        }
+        set ibpBoxs(value: IbpBox[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 43, value);
+        }
+        get pslBoxs() {
+            return pb_1.Message.getRepeatedWrapperField(this, PslBox, 44) as PslBox[];
+        }
+        set pslBoxs(value: PslBox[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 44, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof Canvas.prototype.toObject>;
             Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
@@ -439,6 +459,8 @@ export namespace graphicData {
             autoReturnBoxs?: ReturnType<typeof AutoReturnBox.prototype.toObject>[];
             concentrationDividingLines?: ReturnType<typeof ConcentrationDividingLine.prototype.toObject>[];
             otherLineList?: ReturnType<typeof OtherLine.prototype.toObject>[];
+            ibpBoxs?: ReturnType<typeof IbpBox.prototype.toObject>[];
+            pslBoxs?: ReturnType<typeof PslBox.prototype.toObject>[];
         }): RtssGraphicStorage {
             const message = new RtssGraphicStorage({});
             if (data.canvas != null) {
@@ -552,6 +574,12 @@ export namespace graphicData {
             if (data.otherLineList != null) {
                 message.otherLineList = data.otherLineList.map(item => OtherLine.fromObject(item));
             }
+            if (data.ibpBoxs != null) {
+                message.ibpBoxs = data.ibpBoxs.map(item => IbpBox.fromObject(item));
+            }
+            if (data.pslBoxs != null) {
+                message.pslBoxs = data.pslBoxs.map(item => PslBox.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -593,6 +621,8 @@ export namespace graphicData {
                 autoReturnBoxs?: ReturnType<typeof AutoReturnBox.prototype.toObject>[];
                 concentrationDividingLines?: ReturnType<typeof ConcentrationDividingLine.prototype.toObject>[];
                 otherLineList?: ReturnType<typeof OtherLine.prototype.toObject>[];
+                ibpBoxs?: ReturnType<typeof IbpBox.prototype.toObject>[];
+                pslBoxs?: ReturnType<typeof PslBox.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -705,6 +735,12 @@ export namespace graphicData {
             if (this.otherLineList != null) {
                 data.otherLineList = this.otherLineList.map((item: OtherLine) => item.toObject());
             }
+            if (this.ibpBoxs != null) {
+                data.ibpBoxs = this.ibpBoxs.map((item: IbpBox) => item.toObject());
+            }
+            if (this.pslBoxs != null) {
+                data.pslBoxs = this.pslBoxs.map((item: PslBox) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -785,6 +821,10 @@ export namespace graphicData {
                 writer.writeRepeatedMessage(41, this.concentrationDividingLines, (item: ConcentrationDividingLine) => item.serialize(writer));
             if (this.otherLineList.length)
                 writer.writeRepeatedMessage(42, this.otherLineList, (item: OtherLine) => item.serialize(writer));
+            if (this.ibpBoxs.length)
+                writer.writeRepeatedMessage(43, this.ibpBoxs, (item: IbpBox) => item.serialize(writer));
+            if (this.pslBoxs.length)
+                writer.writeRepeatedMessage(44, this.pslBoxs, (item: PslBox) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -905,6 +945,12 @@ export namespace graphicData {
                     case 42:
                         reader.readMessage(message.otherLineList, () => pb_1.Message.addToRepeatedWrapperField(message, 42, OtherLine.deserialize(reader), OtherLine));
                         break;
+                    case 43:
+                        reader.readMessage(message.ibpBoxs, () => pb_1.Message.addToRepeatedWrapperField(message, 43, IbpBox.deserialize(reader), IbpBox));
+                        break;
+                    case 44:
+                        reader.readMessage(message.pslBoxs, () => pb_1.Message.addToRepeatedWrapperField(message, 44, PslBox.deserialize(reader), PslBox));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -7259,6 +7305,284 @@ export namespace graphicData {
             return GatedBox.deserialize(bytes);
         }
     }
+    export class IbpBox extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: CommonInfo;
+            code?: string;
+            refIbpMapCode?: string;
+            refStationId?: number;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("refIbpMapCode" in data && data.refIbpMapCode != undefined) {
+                    this.refIbpMapCode = data.refIbpMapCode;
+                }
+                if ("refStationId" in data && data.refStationId != undefined) {
+                    this.refStationId = data.refStationId;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, CommonInfo, 1) as CommonInfo;
+        }
+        set common(value: CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get refIbpMapCode() {
+            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
+        }
+        set refIbpMapCode(value: string) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get refStationId() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set refStationId(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+            code?: string;
+            refIbpMapCode?: string;
+            refStationId?: number;
+        }): IbpBox {
+            const message = new IbpBox({});
+            if (data.common != null) {
+                message.common = CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.refIbpMapCode != null) {
+                message.refIbpMapCode = data.refIbpMapCode;
+            }
+            if (data.refStationId != null) {
+                message.refStationId = data.refStationId;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+                code?: string;
+                refIbpMapCode?: string;
+                refStationId?: number;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.refIbpMapCode != null) {
+                data.refIbpMapCode = this.refIbpMapCode;
+            }
+            if (this.refStationId != null) {
+                data.refStationId = this.refStationId;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (this.refIbpMapCode.length)
+                writer.writeString(3, this.refIbpMapCode);
+            if (this.refStationId != 0)
+                writer.writeUint32(4, this.refStationId);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): IbpBox {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new IbpBox();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    case 3:
+                        message.refIbpMapCode = reader.readString();
+                        break;
+                    case 4:
+                        message.refStationId = reader.readUint32();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): IbpBox {
+            return IbpBox.deserialize(bytes);
+        }
+    }
+    export class PslBox extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: CommonInfo;
+            code?: string;
+            refPslMapCode?: string;
+            refPlatformId?: number;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("refPslMapCode" in data && data.refPslMapCode != undefined) {
+                    this.refPslMapCode = data.refPslMapCode;
+                }
+                if ("refPlatformId" in data && data.refPlatformId != undefined) {
+                    this.refPlatformId = data.refPlatformId;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, CommonInfo, 1) as CommonInfo;
+        }
+        set common(value: CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get refPslMapCode() {
+            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
+        }
+        set refPslMapCode(value: string) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get refPlatformId() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set refPlatformId(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+            code?: string;
+            refPslMapCode?: string;
+            refPlatformId?: number;
+        }): PslBox {
+            const message = new PslBox({});
+            if (data.common != null) {
+                message.common = CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.refPslMapCode != null) {
+                message.refPslMapCode = data.refPslMapCode;
+            }
+            if (data.refPlatformId != null) {
+                message.refPlatformId = data.refPlatformId;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+                code?: string;
+                refPslMapCode?: string;
+                refPlatformId?: number;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.refPslMapCode != null) {
+                data.refPslMapCode = this.refPslMapCode;
+            }
+            if (this.refPlatformId != null) {
+                data.refPlatformId = this.refPlatformId;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (this.refPslMapCode.length)
+                writer.writeString(3, this.refPslMapCode);
+            if (this.refPlatformId != 0)
+                writer.writeUint32(4, this.refPlatformId);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): PslBox {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new PslBox();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    case 3:
+                        message.refPslMapCode = reader.readString();
+                        break;
+                    case 4:
+                        message.refPlatformId = reader.readUint32();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): PslBox {
+            return PslBox.deserialize(bytes);
+        }
+    }
     export class SlopeKiloMarker extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {