xian-ncc-da-client/src/drawApp/lineApp.ts

import {
  GraphicData,
  GraphicState,
  IGraphicApp,
  newGraphicApp,
} from 'src/jl-graphic';
import {
  TrainData,
  TrainOperateInteraction,
  TrainState,
} from './graphics/TrainInteraction';
import { Train, TrainTemplate } from 'src/graphics/train/Train';
import {
  SignalData,
  SignalOperateInteraction,
  SignalState,
} from './graphics/SignalInteraction';
import { SignalTemplate, Signal } from 'src/graphics/signal/Signal';
import {
  PlatformData,
  PlatformOperateInteraction,
  PlatformState,
} from './graphics/PlatformInteraction';
import { PlatformTemplate, Platform } from 'src/graphics/platform/Platform';
import {
  StationData,
  StationOperateInteraction,
  StationState,
} from './graphics/StationInteraction';
import { Station, StationTemplate } from 'src/graphics/station/Station';
import {
  TurnoutData,
  TurnoutOperationPlugin,
  TurnoutStates,
} from './graphics/TurnoutInteraction';
import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
import { SectionData } from './graphics/SectionInteraction';
import { 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';
import { toUint8Array } from 'js-base64';
import { getWebsocketUrl } from 'src/configs/UrlManage';
import { getJwtToken } from 'src/configs/TokenManage';
import { state } from 'src/protos/ws_message';
import {
  AxleCounting,
  AxleCountingTemplate,
} from 'src/graphics/axleCounting/AxleCounting';
import { AxleCountingData } from './graphics/AxleCountingInteraction';
import {
  TrainWindow,
  TrainWindowTemplate,
} from 'src/graphics/trainWindow/TrainWindow';
import { TrainWindowData } from './graphics/TrainWindowInteraction';
import { SeparatorTemplate } from 'src/graphics/separator/Separator';
import { SeparatorData } from './graphics/SeparatorInteraction';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import {
  LogicSection,
  LogicSectionTemplate,
} from 'src/graphics/logicSection/LogicSection';
import {
  LogicSectionData,
  LogicSectionOperationPlugin,
  LogicSectionState,
} from './graphics/LogicSectionInteraction';
import { CanvasData, IGraphicAppConfig } from 'src/jl-graphic/app/JlGraphicApp';
import { Notify, QNotifyUpdateOptions } from 'quasar';
import { useLineNetStore } from 'src/stores/line-net-store';
import { alert } from 'src/protos/alertInfo';

let lineApp: IGraphicApp | null = null;

export function getLineApp() {
  return lineApp;
}

export function destroyLineApp(): void {
  if (lineApp) {
    lineApp.destroy();
    lineApp = null;
  }
}

export function initLineApp(lineId: number): IGraphicApp {
  if (lineApp) return lineApp;
  const lineAppDataLoader: IGraphicAppConfig['dataLoader'] = async () => {
    const lineStore = useLineStore();
    const lineId = lineStore.lineId;
    if (!lineId) {
      throw Error('请先选择线路');
    }
    const { proto: base64, name: lineName } = await getPublishMapInfoByLineId(
      lineId,
      'line'
    );
    lineStore.setLineName(lineName);
    const datas: GraphicData[] = [];
    const canvasProperty = new CanvasData();
    if (base64) {
      const storage = graphicData.RtssGraphicStorage.deserialize(
        toUint8Array(base64)
      );
      canvasProperty.copyFrom(storage.canvas);
      storage.Platforms.forEach((platform) => {
        const g = new PlatformData(platform);
        datas.push(g);
      });
      storage.stations.forEach((station) => {
        datas.push(new StationData(station));
      });
      storage.train.forEach((train) => {
        datas.push(new TrainData(train));
      });
      storage.turnouts.forEach((turnout) => {
        datas.push(new TurnoutData(turnout));
      });
      storage.signals.forEach((signal) => {
        datas.push(new SignalData(signal));
      });
      storage.section.forEach((section) => {
        datas.push(new SectionData(section));
      });
      storage.logicSections.forEach((section) => {
        datas.push(new LogicSectionData(section));
      });
      storage.separators.forEach((separator) => {
        datas.push(new SeparatorData(separator));
      });
      storage.axleCountings.forEach((axleCounting) => {
        datas.push(new AxleCountingData(axleCounting));
      });
      storage.trainWindows.forEach((trainWindow) => {
        datas.push(new TrainWindowData(trainWindow));
      });
    }
    return { datas, canvasProperty };
  };

  lineApp = newGraphicApp({
    interactiveGraphicTypeIncludes: [
      Signal.Type,
      Platform.Type,
      Station.Type,
      Train.Type,
      LogicSection.Type,
      Turnout.Type,
    ],
    mouseToolOptions: {
      boxSelect: true,
      viewportDrag: true,
      wheelZoom: true,
    },
    dataLoader: lineAppDataLoader,
  });

  const graphicTemplate = [
    new TrainTemplate(new TrainData(), new TrainState()),
    new SignalTemplate(new SignalData(), new SignalState()),
    new PlatformTemplate(new PlatformData(), new PlatformState()),
    new StationTemplate(new StationData(), new StationState()),
    new TurnoutTemplate(new TurnoutData(), new TurnoutStates()),
    new SectionTemplate(new SectionData()),
    new LogicSectionTemplate(new LogicSectionData(), new LogicSectionState()),
    new SeparatorTemplate(new SeparatorData()),
    new AxleCountingTemplate(new AxleCountingData()),
    new TrainWindowTemplate(new TrainWindowData()),
  ];
  lineApp.registerGraphicTemplates(...graphicTemplate);
  SignalOperateInteraction.init(lineApp);
  PlatformOperateInteraction.init(lineApp);
  StationOperateInteraction.init(lineApp);
  TrainOperateInteraction.init(lineApp);
  TurnoutOperationPlugin.init(lineApp);
  LogicSectionOperationPlugin.init(lineApp);

  lineApp.enableWsMassaging({
    wsUrl: getWebsocketUrl(),
    token: getJwtToken() as string,
  });

  lineApp.subscribe({
    destination: `/queue/line/${lineId}/device`,
    messageConverter: (message: Uint8Array) => {
      const states: GraphicState[] = [];
      const storage = state.WsLineMessage.deserialize(message);
      storage.signal.forEach((item) => {
        if (item.rtuId !== 81 && item.rtuId !== 82 && item.rtuId) {
          states.push(new SignalState(item));
        }
      });
      storage.platform.forEach((item) => {
        if (item.rtuId !== 81 && item.rtuId !== 82 && item.rtuId) {
          states.push(new PlatformState(item));
        }
      });
      storage.rtu.forEach((item) => {
        if (item.rtuId !== 81 && item.rtuId !== 82 && item.rtuId) {
          states.push(new StationState(item));
        }
      });
      storage.switch.forEach((item) => {
        if (item.rtuId !== 81 && item.rtuId !== 82 && item.rtuId) {
          states.push(new TurnoutStates(item));
        }
      });
      storage.track.forEach((item) => {
        if (item.rtuId !== 81 && item.rtuId !== 82 && item.rtuId) {
          states.push(new LogicSectionState(item));
        }
      });
      return states;
    },
  });
  lineApp.subscribe({
    destination: `/queue/line/${lineId}/train`,
    messageConverter: (message: Uint8Array) => {
      const states: GraphicState[] = [];
      const trainStorage = state.WsLineTrainMessage.deserialize(message);
      // console.log(trainStorage, '222');
      trainStorage.trainInfo.forEach((item) => {
        if (item.rtuId !== 81 && item.rtuId !== 82 && item.rtuId) {
          states.push(new TrainState(item));
        }
      });
      return states;
    },
  });
  let msgNotify: null | ((props?: QNotifyUpdateOptions | undefined) => void) =
    null;
  lineApp.on('websocket-connect-state-change', (connected) => {
    if (!connected && !msgNotify) {
      msgNotify = Notify.create({
        type: 'negative',
        timeout: 0,
        position: 'top-right',
        message: '通信链接已断开！',
      });
    } else if (msgNotify && connected) {
      msgNotify();
      msgNotify = null;
    }
  });
  const lineNetStore = useLineNetStore();
  lineApp.subscribe({
    destination: '/queue/xian/ncc/alert',
    messageHandle: (message: Uint8Array) => {
      const storage = alert.NccAlertInfoMessage.deserialize(message);
      lineNetStore.setAlarmInfo(storage.messages as []);
    },
  });

  lineApp.reload().then(() => {
    if (!lineApp) return;
    const quickJumpMenu = new ContextMenu({
      name: '快捷跳转',
      groups: [
        {
          items: lineApp.queryStore
            .queryByType<Station>(Station.Type)
            .map<MenuItemOptions>((station) => ({
              name: station.datas.name ?? '',
              handler: () => {
                lineApp?.makeGraphicCenterShow(station);
              },
            })),
        },
      ],
    });
    lineApp.registerMenu(quickJumpMenu);
    lineApp.canvas.on('_rightclick', (e) => {
      quickJumpMenu.open(e.global);
    });

    const axleCountings = lineApp.queryStore.queryByType<AxleCounting>(
      AxleCounting.Type
    );
    axleCountings.forEach((axleCounting) => {
      axleCounting.visible = false;
    });
    const trainWindows = lineApp.queryStore.queryByType<TrainWindow>(
      TrainWindow.Type
    );
    trainWindows.forEach((trainWindow) => {
      trainWindow.visible = false;
    });
  });

  return lineApp;
}