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

src/drawApp/lineApp.ts

@@ -26,9 +26,9 @@ import {
 } from './graphics/StationInteraction';
 import { Station, StationTemplate } from 'src/graphics/station/Station';
 import { TurnoutData, TurnoutStates } from './graphics/TurnoutInteraction';
-import { TurnoutTemplate } from 'src/graphics/turnout/Turnout';
+import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
 import { SectionData } from './graphics/SectionInteraction';
-import { SectionTemplate } from 'src/graphics/section/Section';
+import { Section, SectionTemplate } from 'src/graphics/section/Section';
 import { getPublishMapInfoByLineId } from 'src/api/PublishApi';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { useLineStore } from 'src/stores/line-store';
@@ -41,12 +41,22 @@ import {
   AxleCountingTemplate,
 } from 'src/graphics/axleCounting/AxleCounting';
 import { AxleCountingData } from './graphics/AxleCountingInteraction';
-import {
-  TrainWindow,
-  TrainWindowTemplate,
-} from 'src/graphics/trainWindow/TrainWindow';
+import { TrainWindowTemplate } from 'src/graphics/trainWindow/TrainWindow';
 import { TrainWindowData } from './graphics/TrainWindowInteraction';
 import { useRoute } from 'vue-router';
+import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+import { AxleCountingSectionTemplate } from 'src/graphics/axleCountingSection/AxleCountingSection';
+import { LogicSectionTemplate } from 'src/graphics/logicSection/LogicSection';
+import {
+  SectionLink,
+  SectionLinkTemplate,
+} from 'src/graphics/sectionLink/SectionLink';
+import { Separator, SeparatorTemplate } from 'src/graphics/separator/Separator';
+import { SeparatorData } from './graphics/SeparatorInteraction';
+import { SectionLinkData } from './graphics/SectionLinkInteraction';
+import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction';
+import { LogicSectionData } from './graphics/LogicSectionInteraction';
 
 let lineApp: GraphicApp | null = null;
 let msgBroker: AppWsMsgBroker | null = null;
@@ -65,6 +75,40 @@ export function destroyLineApp(): void {
   }
 }
 
+const PhysicsOptions: MenuItemOptions = {
+  name: '物理图层',
+};
+const linkOptions: MenuItemOptions = {
+  name: 'Link图层',
+};
+
+const layerOptions: MenuItemOptions = {
+  name: '图层',
+  subMenu: [
+    {
+      name: '图层菜单',
+      items: [PhysicsOptions, linkOptions],
+    },
+  ],
+};
+const DefaultCanvasMenu = new ContextMenu({
+  name: '图层选择',
+  groups: [
+    {
+      items: [layerOptions],
+    },
+  ],
+});
+const showType = [
+  Platform.Type,
+  Station.Type,
+  Turnout.Type,
+  Signal.Type,
+  Separator.Type,
+];
+const physicShowType = [...showType, Section.Type];
+const linkShowType = [...showType, SectionLink.Type, AxleCounting.Type];
+
 export function initLineApp(dom: HTMLElement): GraphicApp {
   lineApp = new GraphicApp(dom);
   const graphicTemplate = [
@@ -76,6 +120,10 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
     new SectionTemplate(new SectionData()),
     new AxleCountingTemplate(new AxleCountingData()),
     new TrainWindowTemplate(new TrainWindowData()),
+    new SeparatorTemplate(new SeparatorData()),
+    new SectionLinkTemplate(new SectionLinkData()),
+    new AxleCountingSectionTemplate(new AxleCountingSectionData()),
+    new LogicSectionTemplate(new LogicSectionData()),
   ];
   lineApp.registerGraphicTemplates(...graphicTemplate);
   lineApp.setOptions({
@@ -95,6 +143,30 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
   SignalOperateInteraction.init(lineApp);
   PlatformOperateInteraction.init(lineApp);
   StationOperateInteraction.init(lineApp);
+  // 画布右键菜单
+  lineApp.registerMenu(DefaultCanvasMenu);
+  lineApp.canvas.on('_rightclick', (e) => {
+    const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics();
+    PhysicsOptions.handler = () => {
+      alllGraphic.forEach((g) => {
+        if (physicShowType.includes(g.type)) {
+          g.visible = true;
+        } else {
+          g.visible = false;
+        }
+      });
+    };
+    linkOptions.handler = () => {
+      alllGraphic.forEach((g) => {
+        if (linkShowType.includes(g.type)) {
+          g.visible = true;
+        } else {
+          g.visible = false;
+        }
+      });
+    };
+    DefaultCanvasMenu.open(e.global);
+  });
   return lineApp;
 }
 
@@ -139,20 +211,30 @@ export async function loadLineDatas(app: GraphicApp) {
     storage.trainWindows.forEach((trainWindow) => {
       datas.push(new TrainWindowData(trainWindow));
     });
+    storage.separators.forEach((separator) => {
+      datas.push(new SeparatorData(separator));
+    });
+    storage.sectionLinks.forEach((sectionLink) => {
+      if (sectionLink.code) {
+        sectionLink.index = parseInt(sectionLink.code);
+      }
+      datas.push(new SectionLinkData(sectionLink));
+    });
+    storage.axleCountingSections.forEach((axleCountingSection) => {
+      datas.push(new AxleCountingSectionData(axleCountingSection));
+    });
+    storage.logicSections.forEach((logicSection) => {
+      datas.push(new LogicSectionData(logicSection));
+    });
     await app.loadGraphic(datas);
 
-    //隐藏计轴--和车次窗
-    const axleCountings = app.queryStore.queryByType<AxleCounting>(
-      AxleCounting.Type
-    );
-    axleCountings.forEach((axleCounting) => {
-      axleCounting.visible = false;
-    });
-    const trainWindows = app.queryStore.queryByType<TrainWindow>(
-      TrainWindow.Type
-    );
-    trainWindows.forEach((trainWindow) => {
-      trainWindow.visible = false;
+    const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics();
+    alllGraphic.forEach((g) => {
+      if (physicShowType.includes(g.type)) {
+        g.visible = true;
+      } else {
+        g.visible = false;
+      }
     });
 
     StompCli.new({
@@ -160,10 +242,10 @@ export async function loadLineDatas(app: GraphicApp) {
       token: getJwtToken() as string,
     });
     msgBroker = new AppWsMsgBroker(app);
-    const states: GraphicState[] = [];
     msgBroker.subscribe({
       destination: `/simulation/${simulationId}/devices/status`,
       messageConverter: (message: Uint8Array) => {
+        const states: GraphicState[] = [];
         const storage = state.PushedDevicesStatus.deserialize(message);
         if (storage.all) {
           storage.allStatus.sectionState.forEach((item) => {