Merge branch 'master' of http://120.46.212.6:3000/joylink/rts-sim-testing-client

src/api/TrainModelApi.ts

@@ -56,7 +56,8 @@ export interface TrainCreateParams {
   total_length: number;
   train_model: number;
   train_sets: string;
-  trainConfigData?: TrainConfigData
+  trainConfigData?: TrainConfigData;
+  trainControlMapId: number;
 }
 
 /**

src/components/draw-app/dialogs/AddTrainDialog.vue

@@ -163,6 +163,7 @@ function onCreate() {
         wheelDiameter: wheelDiameter.value,
         trainLength: trainConfig.value.total_length,
         configTrain: trainConfig.value.trainConfigData as TrainConfigData,
+        trainControlMapId: trainConfig.value.trainControlMapId,
         trainEndsA: {
           radarCheckSpeedDiff: 0,
           radarCheckTime: 0,
@@ -208,6 +209,7 @@ const trainConfig = ref<TrainConfigItem | null>({
   total_length: 0,
   train_model: 0,
   train_sets: '',
+  trainControlMapId: 0,
 });
 function setConfigVal(val: TrainConfigItem | null) {
   trainConfig.value = val || null;

src/components/line-app/infos/TrainInfo.vue

@@ -190,6 +190,7 @@ import SetTrainParam from 'src/components/draw-app/dialogs/SetTrainParam.vue';
 import { Dialog } from 'quasar';
 import { state } from 'src/protos/device_state';
 import SetTrainLink from 'src/components/draw-app/dialogs/SetTrainLink.vue';
+import { useTccStore } from 'src/stores/tcc-store';
 
 interface KeyType {
   label: string;
@@ -607,6 +608,10 @@ const options = [
     label: '列车连接',
     value: 2,
   },
+  {
+    label: '列车驾驶台',
+    value: 3,
+  },
 ];
 
 function doTrainOperation(option: { label: string; value: number }) {
@@ -614,6 +619,8 @@ function doTrainOperation(option: { label: string; value: number }) {
     setTrain();
   } else if (option.value == 2) {
     linkTrain();
+  } else if (option.value == 3) {
+    openTccDialog();
   }
 }
 
@@ -649,6 +656,14 @@ function setTrain() {
     persistent: true,
   });
 }
+
+function openTccDialog() {
+  const trainId = trainInfo.value?.id ? +trainInfo.value?.id : 0;
+  useTccStore().setTccParam(
+    trainId,
+    trainInfo.value?.trainControlMapId as number
+  );
+}
 </script>
 <style lang="scss" scoped>
 .q-item {

src/drawApp/graphics/TccButtonInteraction.ts

@@ -6,7 +6,11 @@ import { useLineStore } from 'src/stores/line-store';
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import { useTccStore } from 'src/stores/tcc-store';
 import { state } from 'src/protos/device_state';
-import { ITccButtonData, ITccButtonState, TccButton } from 'src/graphics/tccButton/TccButton';
+import {
+  ITccButtonData,
+  ITccButtonState,
+  TccButton,
+} from 'src/graphics/tccButton/TccButton';
 
 export class TccButtonData extends GraphicDataBase implements ITccButtonData {
   constructor(data?: tccGraphicData.TccButton) {
@@ -51,12 +55,12 @@ export class TccButtonState
   extends GraphicStateBase
   implements ITccButtonState
 {
-  constructor(proto?: state.ButtonState) {
+  constructor(proto?: state.TrainControlState.EmergentButton) {
     let states;
     if (proto) {
       states = proto;
     } else {
-      states = new state.ButtonState();
+      states = new state.TrainControlState.EmergentButton();
     }
     super(states, TccButton.Type);
   }
@@ -64,13 +68,13 @@ export class TccButtonState
     return this.states.id + '';
   }
   get down(): boolean {
-    return this.states.down;
+    return this.states.passed;
   }
   set down(v: boolean) {
-    this.states.down = v;
+    this.states.passed = v;
   }
-  get states(): state.ButtonState {
-    return this.getState<state.ButtonState>();
+  get states(): state.TrainControlState.EmergentButton {
+    return this.getState<state.TrainControlState.EmergentButton>();
   }
   clone(): TccButtonState {
     return new TccButtonState(this.states.cloneMessage());
@@ -97,47 +101,22 @@ export class TccButtonOperateInteraction extends GraphicInteractionPlugin<TccBut
       .map((g) => g as TccButton);
   }
   bind(g: TccButton): void {
-    g.eventMode = 'static';
-    g.cursor = 'pointer';
-    g.on('mousedown', this.onMouseDown, this);
-    g.on('mouseup', this.onMouseUp, this);
-    g.on('mouseout', this.onMouseOut, this);
+    g._tccButton.eventMode = 'static';
+    g._tccButton.cursor = 'pointer';
+    g._tccButton.on('_leftclick', this.onClick);
   }
 
   unbind(g: TccButton): void {
-    g.eventMode = 'none';
-    g.off('mousedown', this.onMouseDown, this);
-    g.on('mouseup', this.onMouseUp, this);
-    g.on('mouseout', this.onMouseOut, this);
+    g._tccButton.eventMode = 'none';
+    g._tccButton.off('_leftclick', this.onClick);
   }
-  onMouseOut(e: FederatedMouseEvent) {
+
+  onClick(e: FederatedMouseEvent): void {
     const target = e.target as DisplayObject;
-    const tccButton = target.getGraphic() as TccButton;
-    if (tccButton.states.down && tccButton.datas.isSelfReset) {
-      tccButton.states.down = false;
-      tccButton.doRepaint();
-    }
-  }
-  onMouseDown(e: FederatedMouseEvent) {
-    const simulationId = useLineStore().simulationId;
-    const mapId = useLineStore().mapId;
-    const tccId = useTccStore().tccId;
-    const target = e.target as DisplayObject;
-    const tccButton = target.getGraphic() as TccButton;
-    if (!simulationId || !mapId) {
-      return;
-    }
-    console.log('按钮按下');
-  }
-  onMouseUp(e: FederatedMouseEvent) {
-    const simulationId = useLineStore().simulationId;
-    const mapId = useLineStore().mapId;
-    const tccId = useTccStore().tccId;
-    const target = e.target as DisplayObject;
-    const tccButton = target.getGraphic() as TccButton;
-    if (!simulationId || !mapId || !tccButton.datas.isSelfReset) {
-      return;
-    }
-    console.log('按钮弹起');
+    const tccButton = target.getGraphic<TccButton>();
+    if (!tccButton) return;
+    tccButton.states.down = !tccButton.states.down;
+    tccButton.doRepaint();
+    console.log(tccButton.states.down);
   }
 }

src/drawApp/graphics/TccHandleInteraction.ts

@@ -8,7 +8,7 @@ import { tccGraphicData } from 'src/protos/tccGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { state } from 'src/protos/device_state';
 import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
-import { type FederatedMouseEvent } from 'pixi.js';
+import { type FederatedMouseEvent, DisplayObject } from 'pixi.js';
 import { useTccStore } from 'src/stores/tcc-store';
 
 export class TccHandleData extends GraphicDataBase implements ITccHandleData {
@@ -49,26 +49,26 @@ export class TccHandleState
   extends GraphicStateBase
   implements ITccHandleState
 {
-  constructor(data?: state.KeyState) {
+  constructor(data?: state.TrainControlState.PushHandler) {
     let tccHandleState;
     if (data) {
       tccHandleState = data;
     } else {
-      tccHandleState = new state.KeyState();
+      tccHandleState = new state.TrainControlState.PushHandler();
     }
     super(tccHandleState, TccHandle.Type);
   }
   get code(): string {
     return this.states.id + '';
   }
-  get states(): state.KeyState {
-    return this.getState<state.KeyState>();
+  get states(): state.TrainControlState.PushHandler {
+    return this.getState<state.TrainControlState.PushHandler>();
   }
   get gear(): number {
-    return this.states.gear;
+    return this.states.val;
   }
   set gear(v: number) {
-    this.states.gear = v;
+    this.states.val = v;
   }
   clone(): TccHandleState {
     return new TccHandleState(this.states.cloneMessage());
@@ -96,37 +96,52 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
     return grahpics.filter((g): g is TccHandle => g instanceof TccHandle);
   }
   bind(g: TccHandle): void {
-    g.eventMode = 'static';
-    g.cursor = 'pointer';
     g._tccHandle.eventMode = 'static';
-    g._tccHandle.cursor = 'pointer';
-    g._tccHandle.on('mousedown', this.onMouseDown);
-    g._tccHandle.on('mouseup', this.onMouseUp);
+    g._tccHandle.cursor = 'Move';
+    g._tccHandle.onmousedown = (e) => {
+      this.onMouseDown(e);
+    };
+    g._tccHandle.onmouseup = () => {
+      this.isMouseDown = false;
+    };
     g.onmousemove = (e) => {
-      this.onMouseOver(e);
+      this.onMouseMove(e);
+    };
+    g.onmouseleave = () => {
+      this.isMouseDown = false;
     };
   }
   unbind(g: TccHandle): void {
-    g.eventMode = 'none';
     g._tccHandle.eventMode = 'none';
-    g._tccHandle.off('mousedown', this.onMouseDown);
-    g._tccHandle.off('mouseup', this.onMouseUp);
+    g._tccHandle.onmousedown = null;
+    g._tccHandle.onmouseup = null;
     g.onmousemove = null;
+    g.onmouseleave = null;
   }
   onMouseDown(e: FederatedMouseEvent) {
-    const tccHandle = e.target as TccHandle;
+    const target = e.target as DisplayObject;
+    const tccHandle = target.getGraphic<TccHandle>();
+    if (!tccHandle) return;
     this.isMouseDown = true;
     this.mouseDownBeginPos = e.clientY;
     this.mouseDownTccHandleBeginPos = tccHandle._tccHandle.y;
   }
-  onMouseUp() {
-    this.isMouseDown = false;
-  }
-  onMouseOver(e: FederatedMouseEvent) {
-    const tccHandle = e.target as TccHandle;
-    if (this.isMouseDown) {
+  onMouseMove(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const tccHandle = target.getGraphic<TccHandle>();
+    if (!tccHandle) return;
+    if (
+      this.isMouseDown &&
+      tccHandle._tccHandle.y > -145 &&
+      tccHandle._tccHandle.y < 145
+    ) {
       tccHandle._tccHandle.y =
         this.mouseDownTccHandleBeginPos + e.clientY - this.mouseDownBeginPos;
+      if (tccHandle._tccHandle.y >= 145) {
+        tccHandle._tccHandle.y = 144;
+      } else if (tccHandle._tccHandle.y <= -145) {
+        tccHandle._tccHandle.y = -144;
+      }
     }
   }
 }

src/drawApp/graphics/TccKeyInteraction.ts

@@ -4,7 +4,7 @@ import { tccGraphicData } from 'src/protos/tccGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { state } from 'src/protos/device_state';
 import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
-import { type FederatedMouseEvent } from 'pixi.js';
+import { type FederatedMouseEvent, DisplayObject, Point } from 'pixi.js';
 import { useTccStore } from 'src/stores/tcc-store';
 
 export class TccKeyData extends GraphicDataBase implements ITccKeyData {
@@ -48,26 +48,26 @@ export class TccKeyData extends GraphicDataBase implements ITccKeyData {
 }
 
 export class TccKeyState extends GraphicStateBase implements ITccKeyState {
-  constructor(data?: state.KeyState) {
+  constructor(data?: state.TrainControlState.DirectionKeySwitch) {
     let tccKeyState;
     if (data) {
       tccKeyState = data;
     } else {
-      tccKeyState = new state.KeyState();
+      tccKeyState = new state.TrainControlState.DirectionKeySwitch();
     }
     super(tccKeyState, TccKey.Type);
   }
   get code(): string {
     return this.states.id + '';
   }
-  get states(): state.KeyState {
-    return this.getState<state.KeyState>();
+  get states(): state.TrainControlState.DirectionKeySwitch {
+    return this.getState<state.TrainControlState.DirectionKeySwitch>();
   }
-  get gear(): number {
-    return this.states.gear;
+  get position(): number {
+    return this.states.val;
   }
-  set gear(v: number) {
-    this.states.gear = v;
+  set position(v: number) {
+    this.states.val = v;
   }
   clone(): TccKeyState {
     return new TccKeyState(this.states.cloneMessage());
@@ -82,6 +82,9 @@ export class TccKeyState extends GraphicStateBase implements ITccKeyState {
 
 export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
   static Name = 'TccKeyInteraction';
+  isMouseDown = false;
+  changeOnce = false;
+  mouseDownBeginPos = new Point();
   constructor(app: IGraphicScene) {
     super(TccKeyInteraction.Name, app);
   }
@@ -92,17 +95,115 @@ export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
     return grahpics.filter((g): g is TccKey => g instanceof TccKey);
   }
   bind(g: TccKey): void {
-    g.eventMode = 'static';
-    g.cursor = 'pointer';
-    g.on('_leftclick', this.onClick);
+    g._tccKey.eventMode = 'static';
+    g._tccKey.cursor = 'pointer';
+    if (
+      g.datas.type ==
+      tccGraphicData.TccKey.TccKeyType.driverControllerActivationClint
+    ) {
+      g._tccKey.on('_leftclick', this.onClick);
+    } else {
+      g._tccKey.onmousedown = (e) => {
+        this.onMouseDown(e);
+      };
+      g._tccKey.onmouseup = () => {
+        this.isMouseDown = false;
+        this.changeOnce = false;
+      };
+      g.onmousemove = (e) => {
+        this.onMousemove(e);
+      };
+      g.onmouseleave = () => {
+        this.isMouseDown = false;
+        this.changeOnce = false;
+      };
+    }
   }
   unbind(g: TccKey): void {
-    g.eventMode = 'none';
-    g.off('_leftclick', this.onClick);
+    g._tccKey.eventMode = 'none';
+    if (
+      g.datas.type ==
+      tccGraphicData.TccKey.TccKeyType.driverControllerActivationClint
+    ) {
+      g._tccKey.off('_leftclick', this.onClick);
+    } else {
+      g._tccKey.onmousedown = null;
+      g._tccKey.onmouseup = null;
+      g.onmousemove = null;
+      g.onmouseleave = null;
+    }
   }
   onClick(e: FederatedMouseEvent): void {
-    const g = e.target as TccKey;
-    /* const changeState = useTccStore().tccKeyOperation;
-    changeState(g.datas.id, g.state.gear === 0 ? 1 : 0); */
+    const target = e.target as DisplayObject;
+    const tccKey = target.getGraphic<TccKey>();
+    if (!tccKey) return;
+    tccKey.state.position = tccKey?.state.position == 0 ? 1 : 0;
+    tccKey.doRepaint();
+  }
+  onMouseDown(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const tccKey = target.getGraphic<TccKey>();
+    if (!tccKey) return;
+    this.isMouseDown = true;
+    this.mouseDownBeginPos = tccKey
+      .getGraphicApp()
+      .getScene('tcc')
+      .toCanvasCoordinates(e.global);
+  }
+  onMousemove(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const tccKey = target.getGraphic<TccKey>();
+    if (!tccKey) return;
+    if (this.isMouseDown) {
+      const mouseEndPos = tccKey
+        .getGraphicApp()
+        .getScene('tcc')
+        .toCanvasCoordinates(e.global);
+      const { angle, direction } = calculateAngleAndDirection(
+        this.mouseDownBeginPos,
+        tccKey.position,
+        mouseEndPos
+      );
+      if (
+        direction == 'ssz' &&
+        ((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
+        (tccKey._tccKey.rotation == -Math.PI / 4 ||
+          tccKey._tccKey.rotation == 0)
+      ) {
+        this.changeOnce = true;
+        tccKey._tccKey.rotation += Math.PI / 4;
+      }
+      if (
+        direction == 'nsz' &&
+        ((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
+        (tccKey._tccKey.rotation == Math.PI / 4 || tccKey._tccKey.rotation == 0)
+      ) {
+        this.changeOnce = true;
+        tccKey._tccKey.rotation -= Math.PI / 4;
+      }
+    }
   }
 }
+
+function calculateAngleAndDirection(
+  pointA: Point,
+  pointO: Point,
+  pointB: Point
+) {
+  const vectorAO = { x: pointA.x - pointO.x, y: pointA.y - pointO.y };
+  const vectorOB = { x: pointB.x - pointO.x, y: pointB.y - pointO.y };
+  const dotProduct = vectorAO.x * vectorOB.x + vectorAO.y * vectorOB.y;
+  const magnitudeAO = Math.sqrt(vectorAO.x ** 2 + vectorAO.y ** 2);
+  const magnitudeOB = Math.sqrt(vectorOB.x ** 2 + vectorOB.y ** 2);
+  const angle =
+    Math.acos(dotProduct / (magnitudeAO * magnitudeOB)) * (180 / Math.PI);
+  const crossProduct = vectorAO.x * vectorOB.y - vectorAO.y * vectorOB.x;
+  let rotationDirection = '';
+  if (crossProduct > 0) {
+    rotationDirection = 'ssz';
+  } else {
+    rotationDirection = 'nsz';
+  }
+
+  return { angle: angle, direction: rotationDirection };
+}

src/drawApp/graphics/TrainInteraction.ts

@@ -673,6 +673,9 @@ export class TrainState extends GraphicStateBase implements ITrainState {
   set connType(v: state.TrainConnState.TrainConnType) {
     this.states.connState.connType = v;
   }
+  get trainControlMapId(): number {
+    return this.states.connState.TrainControlMapId;
+  }
   clone(): TrainState {
     return new TrainState(this.states.cloneMessage());
   }

src/drawApp/pslScene.ts

@@ -60,7 +60,7 @@ function handleSubscribe(pslScene: IGraphicScene) {
   const pslStore = usePslStore();
   const simulationId = lineStore.simulationId;
   const mapId = lineStore.mapId;
-  const pslId = pslStore.gatedBoxId;
+  const pslId = pslStore.pslId;
   const app = pslScene;
   app.subscribe({
     destination: `/rtsts/simulation/${simulationId}/psl/${mapId}/${pslId}`,

src/drawApp/tccApp.ts

@@ -31,11 +31,7 @@ import { TccKey, TccKeyTemplate } from 'src/graphics/tccKey/TccKey';
 import { TccKeyData, TccKeyState } from './graphics/TccKeyInteraction';
 import { TccHandleDraw } from 'src/graphics/tccHandle/TccHandleDrawAssistant';
 import { TccHandle, TccHandleTemplate } from 'src/graphics/tccHandle/TccHandle';
-import {
-  TccHandleData,
-  TccHandleInteraction,
-  TccHandleState,
-} from './graphics/TccHandleInteraction';
+import { TccHandleData, TccHandleState } from './graphics/TccHandleInteraction';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -91,7 +87,6 @@ export function initTccDrawApp(): IDrawApp {
     drawApp,
     new TccHandleTemplate(new TccHandleData(), new TccHandleState())
   );
-  TccHandleInteraction.init(app);
 
   // 画布右键菜单
   app.registerMenu(DefaultCanvasMenu);

src/drawApp/tccScene.ts

@@ -5,7 +5,7 @@ import {
   IGraphicScene,
   IGraphicStorage,
 } from 'jl-graphic';
-import { getPublishMapInfoByName } from 'src/api/PublishApi';
+import { getPublishMapInfoById } from 'src/api/PublishApi';
 import { useTccStore } from 'src/stores/tcc-store';
 import { toUint8Array } from 'js-base64';
 import { useLineStore } from 'src/stores/line-store';
@@ -37,7 +37,6 @@ export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
     dataLoader: loadTccDatas,
     mouseToolOptions: {
       boxSelect: false,
-      viewportDrag: false,
       wheelZoom: false,
     },
   });
@@ -54,13 +53,6 @@ export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
   tccScene.on('postdataloaded', () => {
     handleSubscribe(tccScene);
   });
-  tccScene.setOptions({
-    mouseToolOptions: {
-      boxSelect: false,
-      viewportDrag: false,
-      wheelZoom: false,
-    },
-  });
   return tccScene;
 }
 
@@ -68,34 +60,42 @@ function handleSubscribe(tccScene: IGraphicScene) {
   const lineStore = useLineStore();
   const tccStore = useTccStore();
   const simulationId = lineStore.simulationId;
-  const mapId = lineStore.mapId;
   const tccId = tccStore.tccId;
   const app = tccScene;
   app.subscribe({
-    destination: `/rtsts/simulation/${simulationId}/tcc/${mapId}/${tccId}`,
+    destination: `/rtsts/simulation/${simulationId}/train/control/${tccId}`,
     messageConverter: (message: Uint8Array) => {
-      // console.log('收到消息', message);
       const states: GraphicState[] = [];
-      const storage = state.PushedDevicesStatus.deserialize(message);
-      if (storage.all) {
-        //   storage.allStatus.buttonState.forEach((item) => {
-        //     if (item.id) {
-        //       states.push(new TccButtonState(item));
-        //     }
-        //   });
+      const storage = state.TrainControlState.deserialize(message);
+      if (storage.ebutton) {
+        states.push(new TccButtonState(storage.ebutton));
+      }
+      if (storage.dirKey) {
+        states.push(new TccKeyState(storage.dirKey));
+      }
+      storage?.driverKey.forEach((driverKey) => {
+        const data = new state.TrainControlState.DirectionKeySwitch({
+          id: driverKey.id,
+          val: driverKey.val ? 1 : 0,
+        });
+        states.push(new TccKeyState(data));
+      });
+      if (storage.pushHandler) {
+        states.push(new TccHandleState(storage.pushHandler));
       }
-      // console.log(states, 'states');
       return states;
     },
+    graphicQueryer: (state, store) => {
+      return store.queryById(+state.code);
+    },
   });
 }
 
 async function loadTccDatas(): Promise<IGraphicStorage> {
   const tccStore = useTccStore();
-  const { proto: base64 } = await getPublishMapInfoByName({
-    name: tccStore.tccMapCode,
-    detail: true,
-  });
+  const { proto: base64 } = await getPublishMapInfoById(
+    tccStore.trainControlMapId
+  );
   if (base64) {
     const storage = tccGraphicData.TccGraphicStorage.deserialize(
       toUint8Array(base64)

src/graphics/tccKey/TccKey.ts

@@ -24,8 +24,8 @@ export interface ITccKeyData extends GraphicData {
 }
 
 export interface ITccKeyState extends GraphicState {
-  get gear(): number;
-  set gear(v: number);
+  get position(): number;
+  set position(v: number);
 }
 
 export class TccKey extends JlGraphic {
@@ -58,13 +58,13 @@ export class TccKey extends JlGraphic {
     return this.getStates<ITccKeyState>();
   }
   doRepaint(): void {
-    //this._tccKey.rotation = (-Math.PI / 2) * this.state.gear;
     if (
       this.datas.type ==
       tccGraphicData.TccKey.TccKeyType.driverControllerActivationClint
     ) {
       this._tccKey.texture = this.tccKeyTextures.tccKey;
-      this._tccKey.rotation = Math.PI / 4;
+      this._tccKey.rotation =
+        this.state.position == 0 ? Math.PI / 4 : -Math.PI / 4;
     } else {
       this._tccKey.texture = this.tccKeyTextures.tccKnob;
       this._tccKey.scale.set(0.6);

src/graphics/train/Train.ts

@@ -240,6 +240,7 @@ export interface ITrainState extends GraphicState {
   set conn(v: boolean);
   get connType(): state.TrainConnState.TrainConnType;
   set connType(v: state.TrainConnState.TrainConnType);
+  get trainControlMapId(): number;
 }
 interface bodyWH {
   width: number; // 宽

src/layouts/LineLayout.vue

@@ -64,7 +64,7 @@
         style="width: 500px; height: 600px"
       ></div>
     </draggable-dialog>
-    <DraggableDialog
+    <draggable-dialog
       :title="`${ibpStore.stationCode}IBP`"
       v-model="ibpStore.isIbpDialogOpen"
       :width="1250"
@@ -76,7 +76,15 @@
         class="overflow-hidden"
         style="width: 1250px; height: 615px"
       />
-    </DraggableDialog>
+    </draggable-dialog>
+    <draggable-dialog
+      v-model="tccStore.isTccDialogOpen"
+      :width="tccCanvasWidth"
+      :height="tccCanvasHeight"
+      @hide="tccHide"
+    >
+      <div id="tcc-app-container" class="overflow-hidden"></div>
+    </draggable-dialog>
   </q-layout>
 </template>
 
@@ -113,6 +121,7 @@ import { state } from 'src/protos/device_state';
 import { PictureType } from 'src/protos/picture';
 import ConnectInfoDialog from 'src/components/line-app/dialogs/ConnectInfoDialog.vue';
 import { updataOnChangeScene } from 'src/drawApp/relayScene';
+import { useTccStore } from 'src/stores/tcc-store';
 
 const $q = useQuasar();
 const canvasWidth = ref(0);
@@ -225,6 +234,7 @@ onMounted(async () => {
   // drawerRight.value = false;
 });
 
+//psl盘
 const pslCanvasWidth = ref(500);
 const pslCanvasHeight = ref(600);
 watch(
@@ -252,6 +262,34 @@ function pslHide() {
   pslStore.clearPslParam();
   lineApp.getScene('psl').unbindDom();
 }
+//列车驾驶台Tcc
+const tccStore = useTccStore();
+const tccCanvasWidth = ref(1000);
+const tccCanvasHeight = ref(600);
+watch(
+  () => tccStore.isTccDialogOpen,
+  (val: boolean) => {
+    if (val === true) {
+      nextTick(async () => {
+        const container = document.getElementById('tcc-app-container');
+        if (!container) return;
+        const tccScene = tccStore.getTccScene();
+        tccScene?.bindDom(container);
+        await tccScene?.reload();
+        if (tccScene) {
+          container.style.width = tccCanvasWidth.value + 'px';
+          container.style.height = tccCanvasHeight.value + 'px';
+        }
+      });
+    }
+  }
+);
+
+function tccHide() {
+  tccStore.clearTccParam();
+  lineApp.getScene('tcc').unbindDom();
+}
+
 watch(
   () => lineStore.showTrainSearch,
   (val) => {

src/pages/PublishManage.vue

@@ -423,6 +423,7 @@ const pictureTypeList: { label: string; value: PictureType }[] = [
   { label: '继电器柜布置图', value: PictureType.RelayCabinetLayout },
   { label: 'IBP盘', value: PictureType.IBP },
   { label: '列车数据', value: PictureType.TrainData },
+  { label: '列车驾驶台', value: PictureType.TrainControlCab },
 ];
 
 function getTypeName(val?: number) {

src/pages/TrainModelManage.vue

@@ -156,6 +156,16 @@
                         hint=""
                       ></q-input>
                     </div>
+                    <div class="col-4 q-px-sm">
+                      <q-select
+                        outlined
+                        v-model="editInfo.trainControlMapId"
+                        emitValue
+                        mapOptions
+                        :options="tccNameList"
+                        label="关联驾驶台地图"
+                      />
+                    </div>
                     <div class="col-12 q-px-sm" style="padding-bottom: 10px">
                       <q-input
                         outlined
@@ -368,6 +378,8 @@ import {
 import { ApiError } from 'src/boot/axios';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { computed, onMounted, reactive, ref } from 'vue';
+import { getPublishList } from 'src/api/PublishApi';
+import { PictureType } from 'src/protos/picture';
 
 const $q = useQuasar();
 
@@ -381,10 +393,24 @@ const props = withDefaults(
 const tableHeight = computed(() => {
   return props.sizeHeight - 32;
 });
+const tccNameList = ref<{ label: string; value: number }[]>([]);
 
 onMounted(() => {
   getModelOption();
   tableRef.value.requestServerInteraction();
+  getPublishList({
+    type: PictureType.TrainControlCab,
+    category: null,
+  }).then((tccMapList) => {
+    if (tccMapList && tccMapList.length) {
+      tccMapList.forEach((item) => {
+        tccNameList.value.push({
+          label: item.name,
+          value: item.id,
+        });
+      });
+    }
+  });
 });
 
 const columnDefs: QTableColumn[] = [
@@ -502,6 +528,7 @@ function onCreate() {
           // max_diameter: editInfo.max_diameter,
           train_sets: editInfo.train_sets,
           trainConfigData: editInfo.trainConfigData,
+          trainControlMapId: editInfo.trainControlMapId,
         };
         if (editInfo.id) {
           await saveTrainData(+editInfo.id, params);
@@ -534,6 +561,7 @@ function onReset() {
   // editInfo.min_diameter = 0;
   // editInfo.max_diameter = 0;
   editInfo.train_sets = '';
+  editInfo.trainControlMapId = 0;
   editInfo.trainConfigData.davisParamA = 2.25;
   editInfo.trainConfigData.davisParamB = 0.019;
   editInfo.trainConfigData.davisParamC = 0.00032;
@@ -588,6 +616,7 @@ interface EditCreateItem extends TrainCreateParams {
   total_length: number;
   train_model: number;
   train_sets: string;
+  trainControlMapId: number;
   trainConfigData: {
     davisParamA: number;
     davisParamB: number;
@@ -619,6 +648,7 @@ const editInfo = reactive<EditCreateItem>({
   min_diameter: 0,
   max_diameter: 0,
   train_sets: '',
+  trainControlMapId: 0,
   trainConfigData: {
     davisParamA: 2.25,
     davisParamB: 0.019,
@@ -651,6 +681,7 @@ function editData(row: TrainItem) {
       // editInfo.min_diameter = res.min_diameter;
       // editInfo.max_diameter = res.max_diameter;
       editInfo.train_sets = res.train_sets;
+      editInfo.trainControlMapId = res.trainControlMapId;
       if (res.trainConfigData) {
         editInfo.trainConfigData.davisParamA = res.trainConfigData.davisParamA;
         editInfo.trainConfigData.davisParamB = res.trainConfigData.davisParamB;

src/stores/tcc-store.ts

@@ -4,7 +4,7 @@ import { getLineApp } from 'src/drawApp/lineApp';
 
 export const useTccStore = defineStore('tcc', {
   state: () => ({
-    tccMapCode: '',
+    trainControlMapId: 0,
     tccId: 0,
     isTccDialogOpen: false,
   }),
@@ -19,14 +19,14 @@ export const useTccStore = defineStore('tcc', {
         return tccScene;
       }
     },
-    setTccParam(tccId: number, tccMapCode: string) {
+    setTccParam(tccId: number, trainControlMapId: number) {
       this.tccId = tccId;
-      this.tccMapCode = tccMapCode;
+      this.trainControlMapId = trainControlMapId;
       this.isTccDialogOpen = true;
     },
     clearTccParam() {
       this.tccId = 0;
-      this.tccMapCode = '';
+      this.trainControlMapId = 0;
       this.isTccDialogOpen = false;
     },
   },