应答器调整

2024-01-10 15:30:36 +08:00 · 2024-01-10 15:30:36 +08:00 · 8fd0277338
commit 8fd0277338
parent a59d32f9a2
15 changed files with 913 additions and 10526 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit b68103fcf0d9a505a605675b8cebb6ca1bf5c533
+Subproject commit 19d48ccabcf1aa93ba5c65e61f7b623fe584bb77
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/api/Simulation.ts
+++ b/src/api/Simulation.ts
@ -243,3 +243,60 @@ export async function screenDoorOperate(data: {
 }) {
  return await api.post(`${UriBase}/psd/operation`, data);
 }
+
+/**
+ * 应答器修改报文
+ */
+export async function updateMessageTransponder(data: {
+  simulationId: string;
+  mapId: number;
+  telegram: number[];
+  baliseId: number;
+}) {
+  return await api.put(`${UriBase}/balise/telegram/modify`, data);
+}
+
+/**
+ * 重置应答器报文
+ */
+export async function resetMessageTransponder(data: {
+  simulationId: string;
+  mapId: number;
+  baliseId: number;
+}) {
+  return await api.put(`${UriBase}/balise/telegram/reset`, data);
+}
+
+/**
+ * 修改应答器位置
+ */
+export async function updatePositionTransponder(data: {
+  simulationId: string;
+  mapId: number;
+  baliseId: number;
+  km: {
+    coordinateSystem: string;
+    kilometer: number;
+    direction: number;
+  };
+}) {
+  return await api.put(`${UriBase}/balise/position/modify`, data);
+}
+
+/**
+ * 重置应答器位置
+ */
+export async function resetPositionTransponder(data: {
+  simulationId: string;
+  mapId: number;
+  baliseId: number;
+}) {
+  return await api.put(`${UriBase}/balise/position/reset`, data);
+}
+
+/**
+ * 初始化所有应答器状态
+ */
+export async function initTranspondersState(simulationId: string) {
+  return await api.put(`${UriBase}/balise/reset?simulationId=${simulationId}`);
+}
--- a/src/components/draw-app/dialogs/MoveTransponder.vue
+++ b/src/components/draw-app/dialogs/MoveTransponder.vue
@ -0,0 +1,93 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <q-dialog ref="dialogRef">
+    <q-card style="width: 300px">
+      <q-card-section>
+        <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
+          <div class="text-h6">移动应答器位置</div>
+          <q-input
+            dense
+            outlined
+            readonly
+            label="应答器"
+            v-model="props.code"
+          />
+          <q-input
+            outlined
+            style="margin-top: 10px"
+            v-model="props.coordinateSystem"
+            readonly
+            label="坐标系"
+          ></q-input>
+          <q-input
+            outlined
+            style="margin-top: 10px"
+            v-model.number="km"
+            type="number"
+            label="公里标(mm):"
+          />
+          <q-select
+            outlined
+            v-model="props.direction"
+            :options="directionOptions"
+            readonly
+            :map-options="true"
+            :emit-value="true"
+            label="方向"
+          ></q-select>
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="取消" @click="onDialogCancel" v-close-popup />
+            <q-btn flat label="确认" type="submit" />
+          </q-card-actions>
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { QForm, useDialogPluginComponent } from 'quasar';
+import { ref, onMounted } from 'vue';
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+  coordinateSystem: {
+    type: String,
+    required: true,
+  },
+  kilometer: {
+    type: Number,
+    default: 0,
+  },
+  direction: {
+    type: Number,
+    required: true,
+  },
+});
+const km = ref(0);
+onMounted(() => {
+  km.value = props.kilometer;
+});
+
+const directionOptions = [
+  { label: '左行', value: 0 },
+  { label: '右行', value: 1 },
+];
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+const myForm = ref<QForm | null>(null);
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      onDialogOK(km.value);
+    }
+  });
+}
+</script>
+<style scoped></style>
--- a/src/components/draw-app/dialogs/transpondersDialog.vue
+++ b/src/components/draw-app/dialogs/transpondersDialog.vue
@ -0,0 +1,72 @@
+<template>
+  <DraggableDialog seamless title="应答器列表">
+    <q-card class="q-pa-sm">
+      <q-card-section class="row justify-center">
+        <div class="row">
+          <div
+            class="col-3 text"
+            style=""
+            v-for="(item, index) in transponderNames"
+            :key="index"
+            @dblclick="findTransponders(item.id)"
+          >
+            {{ item.code }}
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </DraggableDialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { IDrawApp, IGraphicApp } from 'jl-graphic';
+import { Transponder } from 'src/graphics/transponder/Transponder';
+import { useLineStore } from 'src/stores/line-store';
+
+interface ItemData {
+  code: string;
+  id: number;
+}
+
+const props = defineProps<{
+  showDialog: boolean;
+  layerList: ItemData[];
+  showLayer: string[];
+  app: IDrawApp | IGraphicApp;
+  noSelect?: boolean; // 没有选择tab
+}>();
+
+const transponderNames = ref<ItemData[]>([]);
+
+onMounted(() => {
+  if (props.showDialog) {
+    const transponderList = props.app.queryStore.queryByType<Transponder>(
+      Transponder.Type
+    );
+    const list: ItemData[] = [];
+    transponderList.forEach((item) => {
+      list.push({ code: item.datas.code, id: item.datas.id });
+    });
+    transponderNames.value = list;
+  }
+});
+
+function findTransponders(id: number) {
+  const device = props.app.queryStore.queryById(id);
+  props.app.makeGraphicCenterShow(device);
+  props.app.updateSelected(device);
+  useLineStore().setShowTranspondersDialog(false);
+}
+</script>
+<style scoped>
+.text {
+  cursor: pointer;
+  color: #000;
+  padding: 5px;
+}
+.text:hover {
+  color: #09f;
+}
+</style>
--- a/src/configs/UrlManage.ts
+++ b/src/configs/UrlManage.ts
@ -7,7 +7,7 @@ function getHost(): string {
  // return '192.168.3.7:9091';
  // return '192.168.3.47:9091';
  // return '192.168.3.37:9091';
-  // return '192.168.3.15:9091';
+  return '192.168.3.15:9091';
  // return '192.168.3.5:9091';
  // return '192.168.3.37:9091'; //卫志宏
  return '192.168.3.233:9091';
--- a/src/drawApp/commonApp.ts
+++ b/src/drawApp/commonApp.ts
@ -1,7 +1,12 @@
 import { TrainTemplate } from 'src/graphics/train/Train';
 import { TrainDraw } from 'src/graphics/train/TrainDrawAssistant';
 import { Signal, SignalTemplate } from 'src/graphics/signal/Signal';
-import { GraphicData, IDrawApp, ContextMenu, MenuItemOptions } from 'jl-graphic';
+import {
+  GraphicData,
+  IDrawApp,
+  ContextMenu,
+  MenuItemOptions,
+} from 'jl-graphic';
 import { TrainState } from './graphics/TrainInteraction';
 import {
  SignalData,
@ -95,7 +100,10 @@ import {
  Transponder,
  TransponderTemplate,
 } from 'src/graphics/transponder/Transponder';
-import { TransponderData } from './graphics/TransponderInteraction';
+import {
+  TransponderData,
+  TransponderState,
+} from './graphics/TransponderInteraction';
 import { SlopeKiloMarkerDrawAssistant } from 'src/graphics/slopeKiloMarker/SlopeKiloMarkerDrawAssistant';
 import {
  SlopeKiloMarker,
@ -181,7 +189,10 @@ export function initCommonDrawApp(app: IDrawApp) {
  new OneClickGenerateDraw(app, new OneClickGenerateTemplate());
  new AxleCountingDraw(app, new AxleCountingTemplate(new AxleCountingData()));
  new SeparatorDraw(app, new SeparatorTemplate(new SeparatorData()));
-  new TransponderDraw(app, new TransponderTemplate(new TransponderData()));
+  new TransponderDraw(
+    app,
+    new TransponderTemplate(new TransponderData(), new TransponderState())
+  );
  new StopPositionDraw(app, new StopPositionTemplate(new StopPositionData()));
  new SpksSwitchDraw(app, new SpksSwitchTemplate(new SpksSwitchData()));
  new GatedBoxDraw(app, new GatedBoxTemplate(new GatedBoxData()));
--- a/src/drawApp/graphics/TransponderInteraction.ts
+++ b/src/drawApp/graphics/TransponderInteraction.ts
@ -1,12 +1,33 @@
 import * as pb_1 from 'google-protobuf';
 import {
  ITransponderData,
+  ITransponderState,
  Transponder,
  TransponderTypeEnum,
 } from 'src/graphics/transponder/Transponder';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { GraphicDataBase } from './GraphicDataBase';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { KilometerSystem } from 'src/graphics/signal/Signal';
+import {
+  ContextMenu,
+  GraphicInteractionPlugin,
+  IGraphicScene,
+  JlGraphic,
+  MenuItemOptions,
+  VectorText,
+} from 'jl-graphic';
+import { FederatedMouseEvent, DisplayObject, Graphics } from 'pixi.js';
+import { useLineStore } from 'src/stores/line-store';
+import { Dialog } from 'quasar';
+import MoveTranspondere from '../../components/draw-app/dialogs/MoveTransponder.vue';
+import {
+  updateMessageTransponder,
+  resetMessageTransponder,
+  updatePositionTransponder,
+  resetPositionTransponder,
+} from 'src/api/Simulation';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
+import { state } from 'src/protos/device_state';

 export class TransponderData
  extends GraphicDataBase
@ -76,3 +97,231 @@ export class TransponderData
    return pb_1.Message.equals(this.data, other.data);
  }
 }
+
+const movePosition: MenuItemOptions = { name: '移动应答器位置' };
+const recoverPosition: MenuItemOptions = { name: '复位应答器' };
+const modifyMessage: MenuItemOptions = { name: '修改报文' };
+const resetMessage: MenuItemOptions = { name: '重置报文' };
+// const sendMessage: MenuItemOptions = { name: '发送报文' };
+const TransponderOperationMenu: ContextMenu = ContextMenu.init({
+  name: '应答器操作',
+  groups: [
+    { items: [movePosition, recoverPosition, modifyMessage, resetMessage] },
+  ],
+});
+
+export class TransponderState
+  extends GraphicStateBase
+  implements ITransponderState
+{
+  constructor(proto?: state.BaliseState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.BaliseState();
+    }
+    super(states, Transponder.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get km(): graphicData.KilometerSystem {
+    return this.states.km;
+  }
+  set km(v: graphicData.KilometerSystem) {
+    this.states.km = new graphicData.KilometerSystem(v);
+  }
+  get telegram(): Uint8Array {
+    return this.states.telegram;
+  }
+  set telegram(v: Uint8Array) {
+    this.states.telegram = v;
+  }
+  get states(): state.BaliseState {
+    return this.getState<state.BaliseState>();
+  }
+  clone(): TransponderState {
+    return new TransponderState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+export class TransponderOperationPlugin extends GraphicInteractionPlugin<Transponder> {
+  static Name = 'transponder_operate_menu';
+  private stayTimer: NodeJS.Timeout | null = null;
+  constructor(app: IGraphicScene) {
+    super(TransponderOperationPlugin.Name, app);
+    app.registerMenu(TransponderOperationMenu);
+  }
+  static init(app: IGraphicScene) {
+    return new TransponderOperationPlugin(app);
+  }
+  filter(...grahpics: JlGraphic[]): Transponder[] | undefined {
+    return grahpics.filter<Transponder>(
+      (g): g is Transponder => g instanceof Transponder
+    );
+  }
+  bind(g: Transponder): void {
+    g.polygonGraphic.eventMode = 'static';
+    g.polygonGraphic.cursor = 'pointer';
+    g.polygonGraphic.scalable = true;
+    g.labelGraphic.selectable = true;
+    g.labelGraphic.eventMode = 'static';
+    g.on('mouseenter', this.onMouseEnter);
+    g.on('mouseleave', this.onMouseLeave);
+    g.on('_rightclick', this.onContextMenu);
+  }
+  unbind(g: Transponder): void {
+    g.polygonGraphic.eventMode = 'none';
+    g.polygonGraphic.scalable = false;
+    g.polygonGraphic.rotatable = false;
+    g.labelGraphic.selectable = false;
+    g.labelGraphic.eventMode = 'none';
+    g.off('mouseenter', this.onMouseEnter);
+    g.off('mouseleave', this.onMouseLeave);
+    g.off('_rightclick', this.onContextMenu);
+  }
+  onMouseEnter(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const transponder = target.getGraphic<Transponder>();
+    this.stayTimer = setTimeout(() => {
+      let type = '固定应答器';
+      if (transponder?.datas.type === TransponderTypeEnum.DB) {
+        type = '休眠唤醒应答器';
+      } else if (transponder?.datas.type === TransponderTypeEnum.WB) {
+        type = '休眠唤醒应答器';
+      } else if (transponder?.datas.type === TransponderTypeEnum.VB) {
+        type = '主信号应答器';
+      } else if (transponder?.datas.type === TransponderTypeEnum.IB) {
+        type = '预告应答器';
+      }
+      let kilometer = '';
+      if (
+        transponder?.states.km &&
+        transponder?.states.km.direction ===
+          graphicData.KilometerSystem.Direction.LEFT
+      ) {
+        kilometer =
+          'ZSSK' +
+          Math.floor(transponder.states.km.kilometer / 1000000) +
+          '+' +
+          ((transponder.states.km.kilometer % 1000000) / 1000).toFixed(2);
+      } else if (
+        transponder?.states.km &&
+        transponder?.states.km.direction ===
+          graphicData.KilometerSystem.Direction.RIGHT
+      ) {
+        kilometer =
+          'YSSK' +
+          Math.floor(transponder.states.km.kilometer / 1000000) +
+          '+' +
+          ((transponder.states.km.kilometer % 1000000) / 1000).toFixed(2);
+      }
+      const tipRect = new Graphics();
+      const tip = new VectorText(
+        ` 应答器编号:${transponder?.datas.code}；\n 应答器类型：${type}；\n 应答器位置：${kilometer}；\n 应答器报文：；\n 工作状态：应答器正常；`
+      );
+      tip.setVectorFontSize(16);
+      tipRect.beginFill('#FFFF00', 1);
+      tipRect.drawRect(0, 0, tip.getBounds().width, tip.getBounds().height + 2);
+      tip.style.fill = '#000000';
+      tipRect.endFill();
+      transponder?.addChild(tipRect);
+      transponder?.addChild(tip);
+      if (transponder) {
+        transponder.zIndex = 99;
+      }
+    }, 1000);
+  }
+  onMouseLeave(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const transponder = target.getGraphic<Transponder>();
+    if (this.stayTimer) {
+      clearTimeout(this.stayTimer);
+    }
+    if (transponder && transponder.children.length > 2) {
+      transponder?.removeChildAt(3);
+      transponder?.removeChildAt(2);
+      transponder.zIndex = 0;
+    }
+  }
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const transponder = target.getGraphic<Transponder>();
+    if (!transponder) return;
+    const simulationId = useLineStore().simulationId || '';
+    const mapId = useLineStore().mapId as number;
+    TransponderOperationMenu.open(e.global);
+    movePosition.handler = async () => {
+      Dialog.create({
+        title: '移动应答器位置',
+        message: '',
+        component: MoveTranspondere,
+        componentProps: {
+          code: transponder.datas.code,
+          coordinateSystem: transponder.datas.kilometerSystem.coordinateSystem,
+          kilometer: transponder.datas.kilometerSystem.kilometer,
+          direction: transponder.datas.kilometerSystem.direction,
+        },
+        cancel: true,
+        persistent: true,
+      }).onOk((data) => {
+        updatePositionTransponder({
+          simulationId,
+          mapId,
+          baliseId: transponder.datas.id,
+          km: {
+            coordinateSystem:
+              transponder.datas.kilometerSystem.coordinateSystem,
+            kilometer: data,
+            direction: transponder.datas.kilometerSystem.direction,
+          },
+        })
+          .then(() => successNotify('移动应答器成功！'))
+          .catch((e) => errorNotify('移动应答器失败！', e));
+      });
+    };
+    recoverPosition.handler = () => {
+      resetPositionTransponder({
+        simulationId,
+        mapId,
+        baliseId: transponder.datas.id,
+      })
+        .then(() => {
+          successNotify('复位应答器成功！');
+        })
+        .catch((e) => {
+          errorNotify('复位应答器失败！', e);
+        });
+    };
+    modifyMessage.handler = () => {
+      updateMessageTransponder({
+        simulationId,
+        mapId,
+        baliseId: transponder.datas.id,
+        telegram: [0],
+      });
+    };
+    resetMessage.handler = () => {
+      resetMessageTransponder({
+        simulationId,
+        mapId,
+        baliseId: transponder.datas.id,
+      })
+        .then(() => successNotify('重置应答器报文成功！'))
+        .catch((e) => errorNotify('重置应答器报文失败！', e));
+    };
+  }
+}
--- a/src/drawApp/lineScene.ts
+++ b/src/drawApp/lineScene.ts
@ -55,6 +55,7 @@ import {
 } from './graphics/SectionInteraction';
 import { Section, SectionTemplate } from 'src/graphics/section/Section';
 import { getPublishMapInfoByLineId } from 'src/api/PublishApi';
+import { initTranspondersState } from 'src/api/Simulation';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { useLineStore } from 'src/stores/line-store';
 import { toUint8Array } from 'js-base64';
@ -115,7 +116,11 @@ import {
  Transponder,
  TransponderTemplate,
 } from 'src/graphics/transponder/Transponder';
-import { TransponderData } from './graphics/TransponderInteraction';
+import {
+  TransponderData,
+  TransponderOperationPlugin,
+  TransponderState,
+} from './graphics/TransponderInteraction';
 import {
  SlopeKiloMarker,
  SlopeKiloMarkerTemplate,
@ -153,16 +158,35 @@ import {
  AutoReturnBoxOperationInteraction,
  AutoReturnBoxState,
 } from './graphics/AutoReturnBoxInteraction';
+import { errorNotify } from 'src/utils/CommonNotify';

 const showOptions: MenuItemOptions = {
  name: '显示控制',
 };
+const transponderListOptions: MenuItemOptions = {
+  name: '列表',
+};
+const initTranspondersOptions: MenuItemOptions = {
+  name: '一键恢复',
+};
+
+const transponderOptions: MenuItemOptions = {
+  name: '应答器',
+  subMenu: {
+    name: '应答器',
+    groups: [
+      {
+        items: [transponderListOptions, initTranspondersOptions],
+      },
+    ],
+  },
+};

 const DefaultCanvasMenu = new ContextMenu({
  name: '图层选择',
  groups: [
    {
-      items: [showOptions],
+      items: [showOptions, transponderOptions],
    },
  ],
 });
@ -248,7 +272,7 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
    new SpksSwitchTemplate(new SpksSwitchData()),
    new GatedBoxTemplate(new GatedBoxData()),
    new EsbButtonTemplate(new EsbButtonData(), new EsbButtonState()),
-    new TransponderTemplate(new TransponderData()),
+    new TransponderTemplate(new TransponderData(), new TransponderState()),
    new SlopeKiloMarkerTemplate(new SlopeKiloMarkerData()),
    // new LinkTemplate(new LinkData()),
    new TrainWindowTemplate(new TrainWindowData()),
@ -271,6 +295,7 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
  SectionOperateInteraction.init(lineScene);
  TrainOperateInteraction.init(lineScene);
  TurnoutOperationPlugin.init(lineScene);
+  TransponderOperationPlugin.init(lineScene);
  EsbButtonOperationInteraction.init(lineScene);
  SpksSwitchOperationInteraction.init(lineScene);
  AutoReturnBoxOperationInteraction.init(lineScene);
@ -284,6 +309,17 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
    showOptions.handler = () => {
      lineStore.setShowLayerDialog(true);
    };
+    transponderListOptions.handler = () => {
+      lineStore.setShowTranspondersDialog(true);
+    };
+    initTranspondersOptions.handler = () => {
+      if (!lineStore.simulationId) {
+        return;
+      }
+      initTranspondersState(lineStore.simulationId).catch((e) =>
+        errorNotify('一键恢复应答器失败！', e)
+      );
+    };
    DefaultCanvasMenu.open(e.global);
  });
  lineScene.on('postdataloaded', () => {
@ -339,6 +375,11 @@ function handleSubscribe(lineScene: IGraphicScene) {
            states.push(new PlatformState(item));
          }
        });
+        storage.allStatus.baliseState.forEach((item) => {
+          if (item.id) {
+            states.push(new TransponderState(item));
+          }
+        });
        storage.allStatus.trainState.forEach((item) => {
          // 列车
          if (!item.show) {
--- a/src/graphics/transponder/Transponder.ts
+++ b/src/graphics/transponder/Transponder.ts
@ -2,6 +2,7 @@ import { Container, Graphics, Point } from 'pixi.js';
 import {
  GraphicData,
  GraphicRelationParam,
+  GraphicState,
  JlGraphic,
  JlGraphicTemplate,
  VectorText,
@ -39,6 +40,12 @@ export interface ITransponderData extends GraphicData {
  eq(other: ITransponderData): boolean;
 }

+export interface ITransponderState extends GraphicState {
+  id?: number;
+  km?: KilometerSystem;
+  telegram?: Uint8Array;
+}
+
 export enum TransponderTypeEnum {
  FB, // 固定应答器
  WB, // 轮径校正应答器
@ -159,6 +166,9 @@ export class Transponder extends JlGraphic {
  get datas(): ITransponderData {
    return this.getDatas<ITransponderData>();
  }
+  get states(): ITransponderState {
+    return this.getStates<ITransponderState>();
+  }
  clear() {
    this.polygonGraphic.clear();
    this.labelGraphic.clear();
@ -311,14 +321,19 @@ export class Transponder extends JlGraphic {
 }

 export class TransponderTemplate extends JlGraphicTemplate<Transponder> {
-  constructor(dataTemplate: ITransponderData) {
+  constructor(
+    dataTemplate: ITransponderData,
+    stateTemplate?: ITransponderState
+  ) {
    super(Transponder.Type, {
      dataTemplate,
+      stateTemplate,
    });
  }
  new(): Transponder {
    const transponder = new Transponder();
    transponder.loadData(this.datas);
+    transponder.loadState(this.states);
    return transponder;
  }
 }
--- a/src/layouts/LineLayout.vue
+++ b/src/layouts/LineLayout.vue
@ -88,6 +88,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { destroySimulation } from 'src/api/Simulation';
 import StateProperties from 'src/components/line-app/StateProperties.vue';
 import LayerControlDialog from 'src/components/draw-app/dialogs/LayerControlDialog.vue';
+import TransponderDialog from 'src/components/draw-app/dialogs/transpondersDialog.vue';
 import { useQuasar } from 'quasar';
 import { LinkInfo, MapInfo, getProjectLinkInfo } from 'src/api/ProjectLinkApi';
 import { ApiError } from 'src/boot/axios';
@ -211,6 +212,9 @@ onUnmounted(() => {
  if (dialogInstance.value && lineStore.showLayerDialog) {
    dialogInstance.value.hide();
  }
+  if (transpondersDialog.value) {
+    transpondersDialog.value.hide();
+  }
  lineStore.setCategoryType(null);
  if (echartsDialog.value) {
    echartsDialog.value.hide();
@ -249,6 +253,30 @@ function pslHide() {
  lineApp.getScene('psl').unbindDom();
 }

+const transpondersDialog = ref();
+
+watch(
+  () => lineStore.showTranspondersDialog,
+  (val) => {
+    if (!val) {
+      transpondersDialog.value?.hide();
+      return;
+    }
+    transpondersDialog.value = $q
+      .dialog({
+        component: TransponderDialog,
+        componentProps: {
+          showDialog: val,
+          app: scene,
+        },
+      })
+      .onCancel(() => {
+        transpondersDialog.value = null;
+        lineStore.setShowTranspondersDialog(false);
+      });
+  }
+);
+
 const dialogInstance = ref();

 watch(
--- a/src/protos/device_state.ts
+++ b/src/protos/device_state.ts
@ -3,6 +3,7 @@
 * compiler version: 4.23.1
 * source: device_state.proto
 * git: https://github.com/thesayyn/protoc-gen-ts */
+import * as dependency_1 from "./stationLayoutGraphics";
 import * as pb_1 from "google-protobuf";
 export namespace state {
    export enum SectionType {
@ -4889,6 +4890,122 @@ export namespace state {
            return MkxJState.deserialize(bytes);
        }
    }
+    export class BaliseState extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            id?: number;
+            km?: dependency_1.graphicData.KilometerSystem;
+            telegram?: Uint8Array;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("id" in data && data.id != undefined) {
+                    this.id = data.id;
+                }
+                if ("km" in data && data.km != undefined) {
+                    this.km = data.km;
+                }
+                if ("telegram" in data && data.telegram != undefined) {
+                    this.telegram = data.telegram;
+                }
+            }
+        }
+        get id() {
+            return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
+        }
+        set id(value: number) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get km() {
+            return pb_1.Message.getWrapperField(this, dependency_1.graphicData.KilometerSystem, 2) as dependency_1.graphicData.KilometerSystem;
+        }
+        set km(value: dependency_1.graphicData.KilometerSystem) {
+            pb_1.Message.setWrapperField(this, 2, value);
+        }
+        get has_km() {
+            return pb_1.Message.getField(this, 2) != null;
+        }
+        get telegram() {
+            return pb_1.Message.getFieldWithDefault(this, 3, new Uint8Array(0)) as Uint8Array;
+        }
+        set telegram(value: Uint8Array) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        static fromObject(data: {
+            id?: number;
+            km?: ReturnType<typeof dependency_1.graphicData.KilometerSystem.prototype.toObject>;
+            telegram?: Uint8Array;
+        }): BaliseState {
+            const message = new BaliseState({});
+            if (data.id != null) {
+                message.id = data.id;
+            }
+            if (data.km != null) {
+                message.km = dependency_1.graphicData.KilometerSystem.fromObject(data.km);
+            }
+            if (data.telegram != null) {
+                message.telegram = data.telegram;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                id?: number;
+                km?: ReturnType<typeof dependency_1.graphicData.KilometerSystem.prototype.toObject>;
+                telegram?: Uint8Array;
+            } = {};
+            if (this.id != null) {
+                data.id = this.id;
+            }
+            if (this.km != null) {
+                data.km = this.km.toObject();
+            }
+            if (this.telegram != null) {
+                data.telegram = this.telegram;
+            }
+            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.id != 0)
+                writer.writeUint32(1, this.id);
+            if (this.has_km)
+                writer.writeMessage(2, this.km, () => this.km.serialize(writer));
+            if (this.telegram.length)
+                writer.writeBytes(3, this.telegram);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): BaliseState {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new BaliseState();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.id = reader.readUint32();
+                        break;
+                    case 2:
+                        reader.readMessage(message.km, () => message.km = dependency_1.graphicData.KilometerSystem.deserialize(reader));
+                        break;
+                    case 3:
+                        message.telegram = reader.readBytes();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): BaliseState {
+            return BaliseState.deserialize(bytes);
+        }
+    }
    export class VariationStatus extends pb_1.Message {
        #one_of_decls: number[][] = [];
        constructor(data?: any[] | {
@ -5062,9 +5179,10 @@ export namespace state {
            psdState?: PsdState[];
            KeyState?: KeyState[];
            platformState?: PlatformState[];
+            baliseState?: BaliseState[];
        }) {
            super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], this.#one_of_decls);
            if (!Array.isArray(data) && typeof data == "object") {
                if ("trainState" in data && data.trainState != undefined) {
                    this.trainState = data.trainState;
@ -5099,6 +5217,9 @@ export namespace state {
                if ("platformState" in data && data.platformState != undefined) {
                    this.platformState = data.platformState;
                }
+                if ("baliseState" in data && data.baliseState != undefined) {
+                    this.baliseState = data.baliseState;
+                }
            }
        }
        get trainState() {
@ -5167,6 +5288,12 @@ export namespace state {
        set platformState(value: PlatformState[]) {
            pb_1.Message.setRepeatedWrapperField(this, 11, value);
        }
+        get baliseState() {
+            return pb_1.Message.getRepeatedWrapperField(this, BaliseState, 12) as BaliseState[];
+        }
+        set baliseState(value: BaliseState[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 12, value);
+        }
        static fromObject(data: {
            trainState?: ReturnType<typeof TrainMapState.prototype.toObject>[];
            switchState?: ReturnType<typeof SwitchState.prototype.toObject>[];
@ -5179,6 +5306,7 @@ export namespace state {
            psdState?: ReturnType<typeof PsdState.prototype.toObject>[];
            KeyState?: ReturnType<typeof KeyState.prototype.toObject>[];
            platformState?: ReturnType<typeof PlatformState.prototype.toObject>[];
+            baliseState?: ReturnType<typeof BaliseState.prototype.toObject>[];
        }): AllDevicesStatus {
            const message = new AllDevicesStatus({});
            if (data.trainState != null) {
@ -5214,6 +5342,9 @@ export namespace state {
            if (data.platformState != null) {
                message.platformState = data.platformState.map(item => PlatformState.fromObject(item));
            }
+            if (data.baliseState != null) {
+                message.baliseState = data.baliseState.map(item => BaliseState.fromObject(item));
+            }
            return message;
        }
        toObject() {
@ -5229,6 +5360,7 @@ export namespace state {
                psdState?: ReturnType<typeof PsdState.prototype.toObject>[];
                KeyState?: ReturnType<typeof KeyState.prototype.toObject>[];
                platformState?: ReturnType<typeof PlatformState.prototype.toObject>[];
+                baliseState?: ReturnType<typeof BaliseState.prototype.toObject>[];
            } = {};
            if (this.trainState != null) {
                data.trainState = this.trainState.map((item: TrainMapState) => item.toObject());
@ -5263,6 +5395,9 @@ export namespace state {
            if (this.platformState != null) {
                data.platformState = this.platformState.map((item: PlatformState) => item.toObject());
            }
+            if (this.baliseState != null) {
+                data.baliseState = this.baliseState.map((item: BaliseState) => item.toObject());
+            }
            return data;
        }
        serialize(): Uint8Array;
@ -5291,6 +5426,8 @@ export namespace state {
                writer.writeRepeatedMessage(10, this.KeyState, (item: KeyState) => item.serialize(writer));
            if (this.platformState.length)
                writer.writeRepeatedMessage(11, this.platformState, (item: PlatformState) => item.serialize(writer));
+            if (this.baliseState.length)
+                writer.writeRepeatedMessage(12, this.baliseState, (item: BaliseState) => item.serialize(writer));
            if (!w)
                return writer.getResultBuffer();
        }
@ -5333,6 +5470,9 @@ export namespace state {
                    case 11:
                        reader.readMessage(message.platformState, () => pb_1.Message.addToRepeatedWrapperField(message, 11, PlatformState.deserialize(reader), PlatformState));
                        break;
+                    case 12:
+                        reader.readMessage(message.baliseState, () => pb_1.Message.addToRepeatedWrapperField(message, 12, BaliseState.deserialize(reader), BaliseState));
+                        break;
                    default: reader.skipField();
                }
            }
--- a/src/protos/request.ts
+++ b/src/protos/request.ts
@ -5,6 +5,190 @@
 * git: https://github.com/thesayyn/protoc-gen-ts */
 import * as pb_1 from "google-protobuf";
 export namespace request {
+    export class Relay extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {}) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") { }
+        }
+        static fromObject(data: {}): Relay {
+            const message = new Relay({});
+            return message;
+        }
+        toObject() {
+            const data: {} = {};
+            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 (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Relay {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Relay();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Relay {
+            return Relay.deserialize(bytes);
+        }
+    }
+    export namespace Relay {
+        export enum Operation {
+            Undefined = 0,
+            ForceQw = 1,
+            ForceHw = 2,
+            CancelForce = 3
+        }
+    }
+    export class RelayOperationReq extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            simulationId?: string;
+            mapId?: number;
+            deviceId?: number;
+            operation?: Relay.Operation;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("simulationId" in data && data.simulationId != undefined) {
+                    this.simulationId = data.simulationId;
+                }
+                if ("mapId" in data && data.mapId != undefined) {
+                    this.mapId = data.mapId;
+                }
+                if ("deviceId" in data && data.deviceId != undefined) {
+                    this.deviceId = data.deviceId;
+                }
+                if ("operation" in data && data.operation != undefined) {
+                    this.operation = data.operation;
+                }
+            }
+        }
+        get simulationId() {
+            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
+        }
+        set simulationId(value: string) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get mapId() {
+            return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
+        }
+        set mapId(value: number) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get deviceId() {
+            return pb_1.Message.getFieldWithDefault(this, 3, 0) as number;
+        }
+        set deviceId(value: number) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get operation() {
+            return pb_1.Message.getFieldWithDefault(this, 4, Relay.Operation.Undefined) as Relay.Operation;
+        }
+        set operation(value: Relay.Operation) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        static fromObject(data: {
+            simulationId?: string;
+            mapId?: number;
+            deviceId?: number;
+            operation?: Relay.Operation;
+        }): RelayOperationReq {
+            const message = new RelayOperationReq({});
+            if (data.simulationId != null) {
+                message.simulationId = data.simulationId;
+            }
+            if (data.mapId != null) {
+                message.mapId = data.mapId;
+            }
+            if (data.deviceId != null) {
+                message.deviceId = data.deviceId;
+            }
+            if (data.operation != null) {
+                message.operation = data.operation;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                simulationId?: string;
+                mapId?: number;
+                deviceId?: number;
+                operation?: Relay.Operation;
+            } = {};
+            if (this.simulationId != null) {
+                data.simulationId = this.simulationId;
+            }
+            if (this.mapId != null) {
+                data.mapId = this.mapId;
+            }
+            if (this.deviceId != null) {
+                data.deviceId = this.deviceId;
+            }
+            if (this.operation != null) {
+                data.operation = this.operation;
+            }
+            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.simulationId.length)
+                writer.writeString(1, this.simulationId);
+            if (this.mapId != 0)
+                writer.writeInt32(2, this.mapId);
+            if (this.deviceId != 0)
+                writer.writeUint32(3, this.deviceId);
+            if (this.operation != Relay.Operation.Undefined)
+                writer.writeEnum(4, this.operation);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): RelayOperationReq {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new RelayOperationReq();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.simulationId = reader.readString();
+                        break;
+                    case 2:
+                        message.mapId = reader.readInt32();
+                        break;
+                    case 3:
+                        message.deviceId = reader.readUint32();
+                        break;
+                    case 4:
+                        message.operation = reader.readEnum();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): RelayOperationReq {
+            return RelayOperationReq.deserialize(bytes);
+        }
+    }
    export class Turnout extends pb_1.Message {
        #one_of_decls: number[][] = [];
        constructor(data?: any[] | {}) {
--- a/src/stores/line-store.ts
+++ b/src/stores/line-store.ts
@ -1,10 +1,5 @@
 import { defineStore } from 'pinia';
-import {
-  IJlCanvas,
-  JlGraphic,
-  IGraphicApp,
-  GraphicState,
-} from 'jl-graphic';
+import { IJlCanvas, JlGraphic, IGraphicApp, GraphicState } from 'jl-graphic';
 import {
  initLineApp,
  getLineApp,
@ -31,6 +26,7 @@ export const useLineStore = defineStore('line', {
    stateProCount: 0,
    showLayer: [] as string[], // 显示的图层（草稿和发布图公用）
    showLayerDialog: false, // 显示图层控制弹窗（草稿和发布图公用）
+    showTranspondersDialog: false, // 应答器列表
    mapId: null as number | null,
    sceneName: '', // 场景名称
    categoryType: null as CategoryType | null,
@ -128,6 +124,9 @@ export const useLineStore = defineStore('line', {
    setShowLayerDialog(v: boolean) {
      this.showLayerDialog = v;
    },
+    setShowTranspondersDialog(v: boolean) {
+      this.showTranspondersDialog = v;
+    },
    setMapId(id: number | null) {
      this.mapId = id;
    },
--- a/yarn.lock
+++ b/yarn.lock
@ -1449,9 +1449,9 @@ ee-first@1.1.1:
  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==

 electron-to-chromium@^1.4.601:
-  version "1.4.612"
-  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.612.tgz#350c6fd4201d677307519b931949fa64dae6a5cc"
-  integrity sha512-dM8BMtXtlH237ecSMnYdYuCkib2QHq0kpWfUnavjdYsyr/6OsAwg5ZGUfnQ9KD1Ga4QgB2sqXlB2NT8zy2GnVg==
+  version "1.4.613"
+  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.613.tgz#529e4fc65576ecfd055d7d4619fade4fac446af2"
+  integrity sha512-r4x5+FowKG6q+/Wj0W9nidx7QO31BJwmR2uEo+Qh3YLGQ8SbBAFuDFpTxzly/I2gsbrFwBuIjrMp423L3O5U3w==

 elementtree@0.1.7:
  version "0.1.7"
@ -3750,10 +3750,10 @@ typedarray@^0.0.6:
  resolved "https://registry.npmmirror.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==

-typescript@^4.5.4:
-  version "4.9.5"
-  resolved "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.3.2:
+  version "5.3.3"
+  resolved "https://registry.npmmirror.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==

 uglify-js@^3.5.1:
  version "3.17.4"