ibp

src/drawApp/IbpScene.ts

@@ -0,0 +1,79 @@
+import { toUint8Array } from 'js-base64';
+import { getPublishMapInfoByName } from 'src/api/PublishApi';
+import { GraphicData, IGraphicApp, IGraphicStorage } from 'src/jl-graphic';
+import { ibpGraphicData } from 'src/protos/ibpGraphics';
+import { useIbpStore } from 'src/stores/ibp-store';
+import { IbpLightData } from './graphics/IbpLightInteraction';
+import { IBPButtonData } from './graphics/IBPButtonInteraction';
+import { IbpTextData } from './graphics/IbpTextInteraction';
+import { IbpAlarmData } from './graphics/IbpAlarmInteraction';
+import { IbpKeyData } from './graphics/IbpKeyInteraction';
+import { ArrowData } from './graphics/ArrowInteraction';
+import { IBPButtonTemplate } from 'src/graphics/IBPButton/IBPButton';
+import { IbpLightTempalte } from 'src/graphics/ibpLight/IbpLight';
+import { IbpAlarmTemplate } from 'src/graphics/ibpAlarm/IbpAlarm';
+import { IbpKeyTemplate } from 'src/graphics/ibpKey/IbpKey';
+import { TextContentTemplate } from 'src/graphics/textContent/TextContent';
+import { ArrowTemplate } from 'src/graphics/arrow/Arrow';
+
+export function initIbpScene(lineApp: IGraphicApp, sceneName: string) {
+  const ibpScene = lineApp.initScene(sceneName, {
+    dataLoader: ibpSceneDataLoader,
+    mouseToolOptions: {
+      wheelZoom: false,
+    },
+  });
+
+  const graphicTemplate = [
+    new IBPButtonTemplate(new IBPButtonData()),
+    new IbpLightTempalte(new IbpLightData()),
+    new IbpAlarmTemplate(new IbpAlarmData()),
+    new IbpKeyTemplate(new IbpKeyData()),
+    new TextContentTemplate(new IbpTextData()),
+    new ArrowTemplate(new ArrowData()),
+  ];
+
+  ibpScene.registerGraphicTemplates(...graphicTemplate);
+
+  return ibpScene;
+}
+
+async function ibpSceneDataLoader(): Promise<IGraphicStorage> {
+  const ibpStore = useIbpStore();
+
+  const { proto } = await getPublishMapInfoByName({
+    name: ibpStore.ibpMapCode,
+    detail: true,
+  });
+
+  if (proto) {
+    const storage = ibpGraphicData.IBPGraphicStorage.deserialize(
+      toUint8Array(proto)
+    );
+    const datas: GraphicData[] = [];
+    storage.ibpLights.forEach((ibpLight) => {
+      datas.push(new IbpLightData(ibpLight));
+    });
+    storage.ibpButtons.forEach((ibpButton) => {
+      datas.push(new IBPButtonData(ibpButton));
+    });
+    storage.IBPTexts.forEach((ibpText) => {
+      datas.push(new IbpTextData(ibpText));
+    });
+    storage.ibpAlarms.forEach((ibpAlarm) => {
+      datas.push(new IbpAlarmData(ibpAlarm));
+    });
+    storage.ibpKeys.forEach((ibpKey) => {
+      datas.push(new IbpKeyData(ibpKey));
+    });
+    storage.ibpArrows.forEach((ibpArrow) => {
+      datas.push(new ArrowData(ibpArrow));
+    });
+    return {
+      canvasProperty: storage.canvas,
+      datas,
+    };
+  } else {
+    return Promise.resolve({ datas: [] });
+  }
+}

src/drawApp/graphics/PlatformInteraction.ts

@@ -13,7 +13,6 @@ import {
   JlGraphic,
 } from 'src/jl-graphic';
 import { useLineStore } from 'src/stores/line-store';
-// import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 
 export class PlatformData extends GraphicDataBase implements IPlatformData {
   constructor(data?: graphicData.Platform) {

src/drawApp/graphics/StationInteraction.ts

@@ -17,6 +17,9 @@ import {
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import { KilometerSystem } from 'src/graphics/signal/Signal';
 import { useLineStore } from 'src/stores/line-store';
+import { useIbpStore } from 'src/stores/ibp-store';
+
+const ibpStore = useIbpStore();
 
 export class StationData extends GraphicDataBase implements IStationData {
   constructor(data?: graphicData.Station) {
@@ -132,28 +135,14 @@ export class StationState extends GraphicStateBase implements IStationState {
   }
 }
 
-const emergencyStationControlConfig: MenuItemOptions = {
-  name: '紧急站控',
-};
-const centralControlConfig: MenuItemOptions = {
-  name: '中控',
-};
-const stationControlConfig: MenuItemOptions = {
-  name: '站控',
-};
-const interlockControlConfig: MenuItemOptions = {
-  name: '联锁控',
+const openIbpMenuItem: MenuItemOptions = {
+  name: '打开IBP',
 };
 const StationOperateMenu: ContextMenu = ContextMenu.init({
   name: '车站操作菜单',
   groups: [
     {
-      items: [
-        emergencyStationControlConfig,
-        centralControlConfig,
-        stationControlConfig,
-        interlockControlConfig,
-      ],
+      items: [openIbpMenuItem],
     },
   ],
 });
@@ -194,30 +183,9 @@ export class StationOperateInteraction extends GraphicInteractionPlugin<Station>
     const target = e.target as DisplayObject;
     const station = target.getGraphic() as Station;
     this.app.updateSelected(station);
-    // emergencyStationControlConfig.handler = () => {
-    //   station.states.ipRtuStusInEmergencyCtrl = true;
-    //   station.states.ipRtuStusInLocalCtrl = false;
-    //   station.states.ipRtuStusInCentralCtrl = false;
-    //   station.doRepaint();
-    // };
-    // stationControlConfig.handler = () => {
-    //   station.states.ipRtuStusInEmergencyCtrl = false;
-    //   station.states.ipRtuStusInCentralCtrl = false;
-    //   station.states.ipRtuStusInLocalCtrl = true;
-    //   station.doRepaint();
-    // };
-    // centralControlConfig.handler = () => {
-    //   station.states.ipRtuStusInEmergencyCtrl = false;
-    //   station.states.ipRtuStusInLocalCtrl = false;
-    //   station.states.ipRtuStusInCentralCtrl = true;
-    //   station.doRepaint();
-    // };
-    // interlockControlConfig.handler = () => {
-    //   station.states.ipRtuStusInEmergencyCtrl = false;
-    //   station.states.ipRtuStusInLocalCtrl = false;
-    //   station.states.ipRtuStusInCentralCtrl = false;
-    //   station.doRepaint();
-    // };
-    // StationOperateMenu.open(e.global);
+    openIbpMenuItem.handler = () => {
+      ibpStore.setIbpParam(station.datas.code, station.datas.refIbpMapCode);
+    };
+    StationOperateMenu.open(e.global);
   }
 }

src/drawApp/lineApp.ts

@@ -20,7 +20,7 @@ export function destroyLineApp(): void {
 
 export function initLineApp(): IGraphicApp {
   lineApp = newGraphicApp({});
-  lineApp?.enableWsMassaging({
+  lineApp.enableWsMassaging({
     engine: ClientEngine.Centrifugo,
     wsUrl: `${getWebsocketUrl()}`,
     token: getOnlyToken() as string,

src/drawApp/lineScene.ts

@@ -198,7 +198,7 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
   const lineScene = lineApp.initScene(sceneName, options);
   const categoryType = useLineStore().categoryType;
   if (!categoryType) {
-    throw new Error('为获取到厂商信息');
+    throw new Error('未获取到厂商信息');
   }
   const getTypeConsts = getCategoryConsts(categoryType);
   const graphicTemplate = [

src/graphics/textContent/TextContent.ts

@@ -26,7 +26,7 @@ const textContentConsts = {
 };
 export class TextContent extends JlGraphic {
   static Type = 'textContent';
-  contentGraph: VectorText = new VectorText(''); //车站名
+  contentGraph: VectorText = new VectorText('');
   constructor() {
     super(TextContent.Type);
     this.addChild(this.contentGraph);

src/layouts/LineLayout.vue

@@ -42,11 +42,32 @@
         <div id="psl-app-container" class="overflow-hidden"></div>
       </q-page-container>
     </q-dialog>
+    <DraggableDialog
+      :title="`${ibpStore.stationCode}IBP`"
+      v-model="ibpStore.isIbpDialogOpen"
+      :width="1250"
+      :height="800"
+    >
+      <div
+        id="ibp-app-container"
+        class="overflow-hidden"
+        style="width: 1250px; height: 800px"
+      ></div>
+    </DraggableDialog>
   </q-layout>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed, onUnmounted, watch, reactive } from 'vue';
+import {
+  onMounted,
+  ref,
+  computed,
+  onUnmounted,
+  watch,
+  reactive,
+  nextTick,
+} from 'vue';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import { useLineStore } from 'src/stores/line-store';
 import { usePslStore } from 'src/stores/psl-store';
 import { useRoute, useRouter } from 'vue-router';
@@ -64,6 +85,7 @@ import { CategoryType } from 'src/components/CategoryType';
 import TrainInfoEcharts from 'src/components/line-app/infos/TrainInfoEcharts.vue';
 import { GatedBox } from 'src/graphics/gatedBox/GatedBox';
 import { getPublishMapInfoByName } from 'src/api/PublishApi';
+import { useIbpStore } from 'src/stores/ibp-store';
 
 const $q = useQuasar();
 const canvasWidth = ref(0);
@@ -72,6 +94,7 @@ const headerHeight = ref(0);
 const route = useRoute();
 const router = useRouter();
 const lineStore = useLineStore();
+const ibpStore = useIbpStore();
 const testManageStore = useTestManageStore();
 const pslDialog = ref(false);
 const simulationId = (route.query.simulationId as string) || '';
@@ -317,6 +340,22 @@ function pslHide() {
   pslDialog.value = false;
 }
 
+watch(
+  () => ibpStore.isIbpDialogOpen,
+  (val) => {
+    if (val === true) {
+      nextTick(() => {
+        const container = document.getElementById('ibp-app-container');
+        console.log(container);
+        if (!container) return;
+        const ibpScene = ibpStore.getIbpScene();
+        ibpScene?.bindDom(container);
+        ibpScene?.reload();
+      });
+    }
+  }
+);
+
 interface LinkParams extends Omit<LinkInfo, 'pid' | 'code'> {
   name: string;
   pid: string;

src/stores/ibp-store.ts

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import { initIbpScene } from 'src/drawApp/IbpScene';
+import { getLineApp } from 'src/drawApp/lineApp';
+
+export const useIbpStore = defineStore('ibp', {
+  state: () => ({
+    lineId: NaN,
+    lineName: '',
+    stationCode: '',
+    ibpMapCode: '',
+    isIbpDialogOpen: false,
+  }),
+  actions: {
+    getIbpScene() {
+      const lineApp = getLineApp();
+      if (!lineApp) return;
+      const ibpScene = initIbpScene(lineApp, 'ibp');
+      return ibpScene;
+    },
+    setIbpParam(stationCode: string, ibpMapCode: string) {
+      this.stationCode = stationCode;
+      this.ibpMapCode = ibpMapCode;
+      this.isIbpDialogOpen = true;
+    },
+  },
+});