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

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

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { PhaseFailureProtectorData } from 'src/drawApp/relayCabinetGraphics/PhaseFailureProtectorInteraction';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { useFormData } from 'src/components/relayCabinetAppFormUtils';
+import { useFormData } from 'src/components/DrawAppFormUtils';
 
 const relayCabinetStore = useRelayCabinetStore();
 const { data: phaseFailureProtectorModel, onUpdate } = useFormData(

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

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { RelayData } from 'src/drawApp/relayCabinetGraphics/RelayInteraction';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { useFormData } from 'src/components/relayCabinetAppFormUtils';
+import { useFormData } from 'src/components/DrawAppFormUtils';
 import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
 
 const relayCabinetStore = useRelayCabinetStore();

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

@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { SignalFaultAlarmData } from 'src/drawApp/relayCabinetGraphics/SignalFaultAlarmInteraction';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { useFormData } from 'src/components/relayCabinetAppFormUtils';
+import { useFormData } from 'src/components/DrawAppFormUtils';
 
 const relayCabinetStore = useRelayCabinetStore();
 const { data: signalFaultAlarmModel, onUpdate } = useFormData(

src/components/relayCabinetAppFormUtils.ts

@@ -1,30 +0,0 @@
-import { type GraphicDataBase } from 'src/drawApp/graphics/GraphicDataBase';
-import { IDrawApp, JlGraphic } from 'src/jl-graphic';
-import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { onMounted, onUnmounted, reactive } from 'vue';
-
-const drawStore = useRelayCabinetStore();
-
-export function useFormData<T extends GraphicDataBase>(
-  source: T,
-  app: IDrawApp
-) {
-  const data = reactive<T>(source);
-
-  onMounted(() => {
-    app.bindFormData(data);
-  });
-
-  onUnmounted(() => {
-    app.unbindFormData(data);
-  });
-
-  function onUpdate() {
-    const graphic = drawStore.selectedGraphic as JlGraphic;
-    if (graphic) {
-      app.updateGraphicAndRecord(graphic, data);
-    }
-  }
-
-  return { data, onUpdate };
-}

src/drawApp/graphics/ZdwxEsbInteraction.ts

@@ -148,6 +148,7 @@ export class DrawZdwxEsbInteraction extends GraphicInteractionPlugin<ZdwxEsb> {
     this.app.updateSelected(esbButton);
     flipConfig.handler = () => {
       esbButton.datas.flip = !esbButton.datas.flip;
+      console.log(esbButton.datas, 'data');
       esbButton.repaint();
     };
     EsbButtonEditMenu.open(e.global);

src/drawApp/lineApp.ts

@@ -4,6 +4,8 @@ import { initLineScene } from './lineScene';
 import { initPslScene } from './pslScene';
 import { getWebsocketUrl } from 'src/configs/UrlManage';
 import { getOnlyToken } from 'src/configs/TokenManage';
+import { useLineStore } from 'src/stores/line-store';
+import { useTestManageStore } from 'src/stores/testManage-store';
 
 let lineApp: IGraphicApp | null = null;
 
@@ -25,6 +27,13 @@ export function initLineApp(): IGraphicApp {
     wsUrl: `${getWebsocketUrl()}`,
     token: getOnlyToken() as string,
   });
+  const lineStore = useLineStore();
+  const testManage = useTestManageStore();
+  const simulationId = lineStore.simulationId;
+  lineApp.subscribe({
+    destination: `simulation-${simulationId}-status`,
+    messageHandle: testManage.socketHandler,
+  });
   return lineApp;
 }
 

src/drawApp/zdwxApp.ts

@@ -41,7 +41,7 @@ import { SignalData, SignalState } from './graphics/SignalInteraction';
 import { getCategoryConsts } from './gategoryConsts';
 import { CategoryType } from 'src/components/CategoryType';
 import { ZdwxEsbDraw } from 'src/graphics/esbButton/ZdwxEsbDrawAssistant';
-import { ZdwxEsbTemplate } from 'src/graphics/esbButton/ZdwxEsb';
+import { ZdwxEsb, ZdwxEsbTemplate } from 'src/graphics/esbButton/ZdwxEsb';
 import {
   DrawZdwxEsbInteraction,
   ZdwxEsbData,
@@ -152,6 +152,9 @@ export async function loadZdwxDrawDatas(): Promise<IGraphicStorage> {
     storage.beacons.forEach((beacon) => {
       datas.push(new BeaconData(beacon));
     });
+    storage.esbButtons.forEach((esbButton) => {
+      datas.push(new ZdwxEsbData(esbButton));
+    });
     refDevicesList = storage.stationRelateDeviceList;
     return Promise.resolve({
       canvasProperty: storage.canvas,
@@ -180,6 +183,9 @@ export function saveZdwxDrawDatas(app: IDrawApp) {
     } else if (Beacon.Type === g.type) {
       const beaconData = (g as Beacon).saveData();
       storage.beacons.push((beaconData as BeaconData).data);
+    } else if (ZdwxEsb.Type === g.type) {
+      const zdwxEsbData = (g as ZdwxEsb).saveData();
+      storage.esbButtons.push((zdwxEsbData as ZdwxEsbData).data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());

src/graphics/esbButton/ZdwxEsb.ts

@@ -27,19 +27,19 @@ export interface IZdwxEsbState extends GraphicState {
   set down(v: boolean);
 }
 
-const zdwxEsbConsts = {
+export const zdwxEsbConsts = {
   codeFontSize: 12,
   codeColor: 0xffffff,
   bodyLineColor: 0xff0000,
-  bodyLineWidth: 2,
+  lineWidth: 2,
   bodyRectLineColor: 0xff0000,
   bodyRectLineWidth: 1,
   bodyRectWidth: 20,
   bodyRectHeight: 20,
   bodyCircleRadius: 4,
-  bodyCircleColor: 0xff0000,
-  bodyColor: 0x000000,
-  pressedColor: 0xff0000,
+  bodyColor: 0xff0000,
+  rectOffset1: -9,
+  rectOffset2: -12,
 };
 export class ZdwxEsb extends JlGraphic {
   static Type = 'esbButton';
@@ -76,17 +76,32 @@ export class ZdwxEsb extends JlGraphic {
       codeGraph.position.set(-30, 0);
     }
     this.circleBody.clear();
-    this.circleBody.lineStyle(
-      zdwxEsbConsts.bodyLineWidth,
-      zdwxEsbConsts.bodyCircleColor
+    this.circleBody.lineStyle(zdwxEsbConsts.lineWidth, zdwxEsbConsts.bodyColor);
+    if (this.datas.flip) {
+      this.circleBody.arc(0, 0, zdwxEsbConsts.bodyCircleRadius, 0, Math.PI);
+      this.circleBody.moveTo(0, 0);
+      this.circleBody.lineTo(0, -6);
+      this.circleBody.moveTo(-4, 0);
+      this.circleBody.lineTo(4, 0);
+    } else {
+      this.circleBody.arc(0, 0, zdwxEsbConsts.bodyCircleRadius, Math.PI, 0);
+      this.circleBody.moveTo(0, 0);
+      this.circleBody.lineTo(0, 6);
+      this.circleBody.moveTo(-4, 0);
+      this.circleBody.lineTo(4, 0);
+    }
+    this.circleBody.drawRect(
+      zdwxEsbConsts.rectOffset1,
+      zdwxEsbConsts.rectOffset1,
+      zdwxEsbConsts.bodyRectWidth,
+      zdwxEsbConsts.bodyRectHeight
+    );
+    this.circleBody.drawRect(
+      zdwxEsbConsts.rectOffset2,
+      zdwxEsbConsts.rectOffset2,
+      zdwxEsbConsts.bodyRectWidth,
+      zdwxEsbConsts.bodyRectHeight
     );
-    this.circleBody.arc(0, 0, zdwxEsbConsts.bodyCircleRadius, Math.PI, 0);
-    this.circleBody.moveTo(0, 0);
-    this.circleBody.lineTo(0, 6);
-    this.circleBody.moveTo(-4, 0);
-    this.circleBody.lineTo(4, 0);
-    this.circleBody.drawRect(-9, -9, 20, 20);
-    this.circleBody.drawRect(-12, -12, 20, 20);
   }
 }
 

src/graphics/esbButton/ZdwxEsbDrawAssistant.ts

@@ -1,4 +1,4 @@
-import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import { DisplayObject, FederatedMouseEvent, IHitArea, Point } from 'pixi.js';
 import {
   AbsorbableLine,
   AbsorbablePosition,
@@ -8,7 +8,12 @@ import {
   IDrawApp,
   JlGraphic,
 } from 'src/jl-graphic';
-import { ZdwxEsb, ZdwxEsbTemplate, IZdwxEsbData } from './ZdwxEsb';
+import {
+  ZdwxEsb,
+  ZdwxEsbTemplate,
+  IZdwxEsbData,
+  zdwxEsbConsts,
+} from './ZdwxEsb';
 
 export interface IZdwxEsbDataDrawOptions {
   newData: () => IZdwxEsbData;
@@ -78,6 +83,32 @@ function buildAbsorbablePositions(zdwxEsb: ZdwxEsb): AbsorbablePosition[] {
   return aps;
 }
 
+export class EsbBodyHitArea implements IHitArea {
+  zdwxEsb: ZdwxEsb;
+  constructor(zdwxEsb: ZdwxEsb) {
+    this.zdwxEsb = zdwxEsb;
+  }
+  contains(x: number, y: number): boolean {
+    let flag = false;
+    if (
+      x >= zdwxEsbConsts.rectOffset1 &&
+      x <= zdwxEsbConsts.rectOffset1 + zdwxEsbConsts.bodyRectWidth &&
+      y >= zdwxEsbConsts.rectOffset1 &&
+      y <= zdwxEsbConsts.rectOffset1 + zdwxEsbConsts.bodyRectHeight
+    ) {
+      flag = true;
+    } else if (
+      x >= zdwxEsbConsts.rectOffset2 &&
+      x <= zdwxEsbConsts.rectOffset2 + zdwxEsbConsts.bodyRectWidth &&
+      y >= zdwxEsbConsts.rectOffset2 &&
+      y <= zdwxEsbConsts.rectOffset2 + zdwxEsbConsts.bodyRectHeight
+    ) {
+      flag = true;
+    }
+    return flag;
+  }
+}
+
 export class ZdwxEsbInteraction extends GraphicInteractionPlugin<ZdwxEsb> {
   static Name = 'zdwx_esb_transform';
   constructor(app: IDrawApp) {
@@ -96,6 +127,7 @@ export class ZdwxEsbInteraction extends GraphicInteractionPlugin<ZdwxEsb> {
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
+    g.circleBody.hitArea = new EsbBodyHitArea(g);
     g.on('transformstart', this.transformstart, this);
   }
   unbind(g: ZdwxEsb): void {

src/layouts/LineLayout.vue

@@ -92,7 +92,7 @@ import { useQuasar } from 'quasar';
 import { LinkInfo, MapInfo, getProjectLinkInfo } from 'src/api/ProjectLinkApi';
 import { ApiError } from 'src/boot/axios';
 import { layerList } from 'src/drawApp/lineScene';
-import { IGraphicScene } from 'src/jl-graphic';
+import { IGraphicApp, IGraphicScene } from 'src/jl-graphic';
 import { ISceneName, getSceneName } from 'src/drawApp/lineApp';
 import { useTestManageStore } from 'src/stores/testManage-store';
 import { CategoryType } from 'src/components/CategoryType';
@@ -144,7 +144,7 @@ function backConfirm() {
   router.go(-1);
 }
 
-const lineApp = lineStore.initLineApp();
+let lineApp: IGraphicApp;
 let scene: null | IGraphicScene = null;
 
 onMounted(async () => {
@@ -152,7 +152,7 @@ onMounted(async () => {
   if (dom && defaultMapId && simulationId) {
     lineStore.setMapId(+defaultMapId);
     lineStore.setSimulationId(simulationId);
-    testManageStore.socketConnect();
+    lineApp = lineStore.initLineApp();
     try {
       if (projectId) {
         const res = await getProjectLinkInfo(+projectId);
@@ -211,7 +211,6 @@ onUnmounted(() => {
     echartsDialog.value.hide();
     lineStore.setEchartsTrainId('');
   }
-  testManageStore.socketClose();
   lineStore.clearTrainStateMap();
   lineStore.setSimulationId(null);
   lineStore.destroy();

src/stores/testManage-store.ts

@@ -1,13 +1,8 @@
 import { defineStore } from 'pinia';
-import { CentrifugeMessagingClient } from 'src/jl-graphic/message/CentrifugeBroker';
-import { getWebsocketUrl } from 'src/configs/UrlManage';
-import { getOnlyToken } from 'src/configs/TokenManage';
 import { state } from 'src/protos/device_state';
-import { useLineStore } from './line-store';
 
 export const useTestManageStore = defineStore('testManage', {
   state: () => ({
-    socket: null as CentrifugeMessagingClient | null, // 启动项目的socket
     socketInfo: new state.SimulationStatus(),
   }),
   actions: {
@@ -15,30 +10,5 @@ export const useTestManageStore = defineStore('testManage', {
       const storage = state.SimulationStatus.deserialize(message);
       this.socketInfo = storage;
     },
-    socketConnect() {
-      if (this.socket) return;
-      const lineStore = useLineStore();
-      const simulationId = lineStore.simulationId;
-      const destination = `simulation-${simulationId}-status`;
-      this.socket = new CentrifugeMessagingClient({
-        wsUrl: `${getWebsocketUrl()}`,
-        token: getOnlyToken() as string,
-        protocol: 'protobuf',
-      });
-      this.socket.on('connected', () => {
-        this.socket?.subscribe(destination, this.socketHandler);
-      });
-    },
-    socketClose() {
-      const lineStore = useLineStore();
-      const simulationId = lineStore.simulationId;
-      const destination = `simulation-${simulationId}-status`;
-      if (destination) {
-        this.socket?.unsubscribe0(destination);
-      }
-      this.socket?.close();
-      this.socket = null;
-      this.socketInfo = new state.SimulationStatus();
-    },
   },
 });