From bad9c90983642eebb52329bc5b8b13d0ceaef0fc Mon Sep 17 00:00:00 2001 From: Yuan Date: Fri, 1 Sep 2023 17:14:08 +0800 Subject: [PATCH] lineNetApp --- src/drawApp/lineApp.ts | 308 +++++++++------------------------- src/drawApp/lineNetApp.ts | 186 ++++++++++---------- src/layouts/LineLayout.vue | 50 +++--- src/pages/LineMonitorPage.vue | 14 +- src/pages/MonitorPage.vue | 8 +- src/stores/line-net-store.ts | 14 +- src/stores/line-store.ts | 17 +- 7 files changed, 239 insertions(+), 358 deletions(-) diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts index 35bb09b..a0ac107 100644 --- a/src/drawApp/lineApp.ts +++ b/src/drawApp/lineApp.ts @@ -55,9 +55,6 @@ import { import { TrainWindowData } from './graphics/TrainWindowInteraction'; import { SeparatorTemplate } from 'src/graphics/separator/Separator'; import { SeparatorData } from './graphics/SeparatorInteraction'; - -let lineApp: IGraphicApp; - import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; import { MenuItemOptions } from 'src/jl-graphic/ui/Menu'; import { @@ -69,24 +66,9 @@ import { LogicSectionOperationPlugin, LogicSectionState, } from './graphics/LogicSectionInteraction'; -import { alert } from 'src/protos/alertInfo'; -import { useLineNetStore } from 'src/stores/line-net-store'; -import { QNotifyUpdateOptions, Notify } from 'quasar'; -import { - CanvasData, - ICanvasProperties, - IGraphicAppConfig, -} from 'src/jl-graphic/app/JlGraphicApp'; +import { CanvasData, IGraphicAppConfig } from 'src/jl-graphic/app/JlGraphicApp'; -// const QuickJumpMenu = new ContextMenu({ -// name: '快捷跳转', -// groups: [ -// { -// items: [], -// }, -// ], -// }); -// let QuickJumpMenu: ContextMenu = new ContextMenu(); +let lineApp: IGraphicApp | null = null; export function getLineApp() { return lineApp; @@ -95,10 +77,12 @@ export function getLineApp() { export function destroyLineApp(): void { if (lineApp) { lineApp.destroy(); + lineApp = null; } } -export function initLineApp(): IGraphicApp { +export function initLineApp(lineId: number): IGraphicApp { + if (lineApp) return lineApp; const lineAppDataLoader: IGraphicAppConfig['dataLoader'] = async () => { const lineStore = useLineStore(); const lineId = lineStore.lineId; @@ -121,19 +105,8 @@ export function initLineApp(): IGraphicApp { const g = new PlatformData(platform); datas.push(g); }); - const quickJumpMenuItem: MenuItemOptions[] = []; storage.stations.forEach((station) => { datas.push(new StationData(station)); - const item: MenuItemOptions = { - name: station.name, - handler: () => { - const g = lineApp.queryStore.queryById(station.common.id); - if (g) { - lineApp.makeGraphicCenterShow(g); - } - }, - }; - quickJumpMenuItem.push(item); }); storage.train.forEach((train) => { datas.push(new TrainData(train)); @@ -201,207 +174,84 @@ export function initLineApp(): IGraphicApp { TurnoutOperationPlugin.init(lineApp); LogicSectionOperationPlugin.init(lineApp); - // lineApp.registerMenu( - // new ContextMenu({ - // name: '快捷跳转', - // groups: [ - // { - // items: lineApp.queryStore - // .queryByType(Station.Type) - // .map((station) => { - // console.log(station.name); - // return { - // name: station.name ?? '', - // handler: () => { - // lineApp.makeGraphicCenterShow(station); - // }, - // }; - // }), - // }, - // ], - // }) - // ); + lineApp.enableWsMassaging({ + wsUrl: getWebsocketUrl(), + token: getJwtToken() as string, + }); - // const axleCountings = lineApp.queryStore.queryByType( - // AxleCounting.Type - // ); - // axleCountings.forEach((axleCounting) => { - // axleCounting.visible = false; - // }); - // const trainWindows = lineApp.queryStore.queryByType( - // TrainWindow.Type - // ); - // trainWindows.forEach((trainWindow) => { - // trainWindow.visible = false; - // }); + 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; + }, + }); return lineApp; } -export async function loadLineDatas(app: IGraphicApp) { - const lineStore = useLineStore(); - const lineId = lineStore.lineId; - if (!lineId) { - return; - } - const { proto: base64, name: lineName } = await getPublishMapInfoByLineId( - lineId, - 'line' +export async function bindLineAppTo(dom: HTMLElement) { + if (!lineApp) throw Error('请先初始化LineApp'); + lineApp.bindDom(dom); + + await lineApp.reload(); + + const quickJumpMenu = new ContextMenu({ + name: '快捷跳转', + groups: [ + { + items: lineApp.queryStore + .queryByType(Station.Type) + .map((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.Type ); - lineStore.setLineName(lineName); - if (base64) { - const storage = graphicData.RtssGraphicStorage.deserialize( - toUint8Array(base64) - ); - console.log('加载数据', storage); - // app.updateCanvas(storage.canvas); - const datas: GraphicData[] = []; - storage.Platforms.forEach((platform) => { - const g = new PlatformData(platform); - datas.push(g); - }); - const quickJumpMenuItem: MenuItemOptions[] = []; - storage.stations.forEach((station) => { - datas.push(new StationData(station)); - const item: MenuItemOptions = { - name: station.name, - handler: () => { - const g = app.queryStore.queryById(station.common.id); - if (g) { - app.makeGraphicCenterShow(g); - } - }, - }; - quickJumpMenuItem.push(item); - }); - 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)); - }); - // await app.loadGraphic(datas); - - //隐藏计轴--和车次窗 - const axleCountings = app.queryStore.queryByType( - AxleCounting.Type - ); - axleCountings.forEach((axleCounting) => { - axleCounting.visible = false; - }); - const trainWindows = app.queryStore.queryByType( - TrainWindow.Type - ); - trainWindows.forEach((trainWindow) => { - trainWindow.visible = false; - }); - const QuickJumpMenu = new ContextMenu({ - name: '快捷跳转', - groups: [ - { - items: quickJumpMenuItem, - }, - ], - }); - app.registerMenu(QuickJumpMenu); - app.canvas.on('_rightclick', (e) => { - QuickJumpMenu.open(e.global); - }); - - app.enableWsMassaging({ - wsUrl: `${getWebsocketUrl()}`, - token: getJwtToken() as string, - }); - app.subscribe({ - destination: `/queue/line/${lineId}/device`, - messageConverter: (message: Uint8Array) => { - const states: GraphicState[] = []; - const storage = state.WsLineMessage.deserialize(message); - // console.log(storage, '1111'); - 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; - }, - }); - app.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; - app.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(); - app.subscribe({ - destination: '/queue/xian/ncc/alert', - messageHandle: (message: Uint8Array) => { - const storage = alert.NccAlertInfoMessage.deserialize(message); - lineNetStore.setAlarmInfo(storage.messages as []); - }, - }); - } else { - app.loadGraphic([]); - } + axleCountings.forEach((axleCounting) => { + axleCounting.visible = false; + }); + const trainWindows = lineApp.queryStore.queryByType( + TrainWindow.Type + ); + trainWindows.forEach((trainWindow) => { + trainWindow.visible = false; + }); } diff --git a/src/drawApp/lineNetApp.ts b/src/drawApp/lineNetApp.ts index d78159d..1c55b2a 100644 --- a/src/drawApp/lineNetApp.ts +++ b/src/drawApp/lineNetApp.ts @@ -33,7 +33,8 @@ import { toUint8Array } from 'js-base64'; import { getWebsocketUrl } from 'src/configs/UrlManage'; import { getJwtToken } from 'src/configs/TokenManage'; import { alert } from 'src/protos/alertInfo'; -import { QNotifyUpdateOptions, Notify } from 'quasar'; +import { Notify } from 'quasar'; +import { CanvasData, IGraphicAppConfig } from 'src/jl-graphic/app/JlGraphicApp'; let lineNetApp: IGraphicApp | null = null; @@ -48,8 +49,55 @@ export function destroyLineNetApp(): void { } } -export function initLineNetApp(dom: HTMLElement): IGraphicApp { - lineNetApp = newGraphicApp(); +export function initLineNetApp(): IGraphicApp { + const lineNetStore = useLineNetStore(); + const lineNetAppDataLoader: IGraphicAppConfig['dataLoader'] = async () => { + const { proto: base64, name: lineNetName } = await getPublishLineNet(); + lineNetStore.setLineNetName(lineNetName); + const datas: GraphicData[] = []; + const canvasProperty = new CanvasData(); + if (base64) { + const storage = graphicData.RtssGraphicStorage.deserialize( + toUint8Array(base64) + ); + canvasProperty.copyFrom(storage.canvas); + storage.runLines.forEach((runLine) => { + const g = new RunLineData(runLine); + datas.push(g); + }); + storage.pathLines.forEach((pathLine) => { + const g = new PathLineData(pathLine); + datas.push(g); + }); + storage.stationLines.forEach((stationLine) => { + const g = new StationLineData(stationLine); + datas.push(g); + }); + storage.trainLines.forEach((trainLine) => { + const g = new TrainLineData(trainLine); + datas.push(g); + }); + storage.rects.forEach((rect) => { + const g = new RectData(rect); + datas.push(g); + }); + } + return { datas, canvasProperty }; + }; + + lineNetApp = newGraphicApp({ + interactiveGraphicTypeIncludes: [ + RunLine.Type, + StationLine.Type, + TrainLine.Type, + ], + mouseToolOptions: { + boxSelect: false, + viewportDrag: true, + wheelZoom: true, + }, + dataLoader: lineNetAppDataLoader, + }); const graphicTemplate = [ new RunLineTemplate(new RunLineData()), new PathLineTemplate(new PathLineData()), @@ -58,98 +106,66 @@ export function initLineNetApp(dom: HTMLElement): IGraphicApp { new RectTemplate(new RectData()), ]; lineNetApp.registerGraphicTemplates(...graphicTemplate); - lineNetApp.setOptions({ - mouseToolOptions: { - boxSelect: false, - viewportDrag: true, - wheelZoom: true, - }, - interactiveTypeOptions: { - interactiveGraphicTypeIncludes: [ - RunLine.Type, - StationLine.Type, - TrainLine.Type, - ], + + RunLineOperateInteraction.init(lineNetApp); + + lineNetApp.enableWsMassaging({ + wsUrl: `${getWebsocketUrl()}`, + token: getJwtToken() as string, + }); + lineNetApp.subscribe({ + destination: '/queue/lineNet', + messageConverter: (message: Uint8Array) => { + const storage = state.WsLineNetMessage.deserialize(message); + const states: GraphicState[] = []; + storage.offset.forEach((item) => { + states.push(new TrainLineState(item)); + }); + return states; }, }); - RunLineOperateInteraction.init(lineNetApp); + lineNetApp.subscribe({ + destination: '/queue/xian/ncc/alert', + messageHandle: (message: Uint8Array) => { + const storage = alert.NccAlertInfoMessage.deserialize(message); + lineNetStore.setAlarmInfo(storage.messages as []); + }, + }); + + let msgNotify: ReturnType | null = null; + lineNetApp.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; + } + }); return lineNetApp; } +export async function bindLineNetAppTo(dom: HTMLElement) { + if (!lineNetApp) throw Error('请先初始化LineApp'); + lineNetApp.bindDom(dom); + + await lineNetApp.reload(); + + const pathLineList = lineNetApp.queryStore.queryByType(PathLine.Type); + pathLineList.forEach((pathLine) => { + pathLine.visible = false; + }); +} + export async function loadLineNetDatas(app: IGraphicApp) { const lineNetStore = useLineNetStore(); const { proto: base64, name: lineNetName } = await getPublishLineNet(); lineNetStore.setLineNetName(lineNetName); if (base64) { - const storage = graphicData.RtssGraphicStorage.deserialize( - toUint8Array(base64) - ); - console.log('加载数据', storage); - app.updateCanvas(storage.canvas); - const datas: GraphicData[] = []; - storage.runLines.forEach((runLine) => { - const g = new RunLineData(runLine); - datas.push(g); - }); - storage.pathLines.forEach((pathLine) => { - const g = new PathLineData(pathLine); - datas.push(g); - }); - storage.stationLines.forEach((stationLine) => { - const g = new StationLineData(stationLine); - datas.push(g); - }); - storage.trainLines.forEach((trainLine) => { - const g = new TrainLineData(trainLine); - datas.push(g); - }); - storage.rects.forEach((rect) => { - const g = new RectData(rect); - datas.push(g); - }); - await app.loadGraphic(datas); - const pathLineList = app.queryStore.queryByType(PathLine.Type); - pathLineList.forEach((pathLine) => { - pathLine.visible = false; - }); - app.enableWsMassaging({ - wsUrl: `${getWebsocketUrl()}`, - token: getJwtToken() as string, - }); - app.subscribe({ - destination: '/queue/lineNet', - messageConverter: (message: Uint8Array) => { - const storage = state.WsLineNetMessage.deserialize(message); - const states: GraphicState[] = []; - storage.offset.forEach((item) => { - states.push(new TrainLineState(item)); - }); - return states; - }, - }); - app.subscribe({ - destination: '/queue/xian/ncc/alert', - messageHandle: (message: Uint8Array) => { - const storage = alert.NccAlertInfoMessage.deserialize(message); - lineNetStore.setAlarmInfo(storage.messages as []); - }, - }); - let msgNotify: null | ((props?: QNotifyUpdateOptions | undefined) => void) = - null; - app.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; - } - }); } else { - app.loadGraphic([]); } } diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue index 028ca09..010538b 100644 --- a/src/layouts/LineLayout.vue +++ b/src/layouts/LineLayout.vue @@ -13,15 +13,16 @@ diff --git a/src/pages/LineMonitorPage.vue b/src/pages/LineMonitorPage.vue index 8c8759d..c1ca729 100644 --- a/src/pages/LineMonitorPage.vue +++ b/src/pages/LineMonitorPage.vue @@ -15,7 +15,6 @@ import { onMounted, ref, watch, onUnmounted } from 'vue'; import { useLineStore } from 'src/stores/line-store'; import { useRoute } from 'vue-router'; import { useLineNetStore } from 'src/stores/line-net-store'; -import { loadLineDatas, getLineApp } from 'src/drawApp/lineApp'; import StateProperties from 'src/components/state-app/StateProperties.vue'; import { JlGraphic } from 'src/jl-graphic'; @@ -61,27 +60,22 @@ function onResize() { dom.style.width = props.sizeWidth + 'px'; dom.style.height = props.sizeHeight + 50 + 'px'; } - const lineApp = getLineApp(); - if (lineApp) { - lineApp.onDomResize(props.sizeWidth, props.sizeHeight - 32); - } } +const lineId = Number(route.params.lineId); +const lineApp = lineStore.initLineApp(lineId); + onMounted(() => { const dom = document.getElementById('line-app-container'); if (dom) { lineStore.setLineId(+route.params.lineId as number); - const lineApp = lineStore.initLineApp(dom); - loadLineDatas(lineApp); + lineStore.bindDom(dom); onResize(); - } else { - lineStore.setLineId(null); } drawerRight.value = false; setTimeout(() => { if (lineNetStore.alarmInfo.length) { try { - const lineApp = getLineApp(); if (lineApp) { const deviceId = lineNetStore.alarmInfo[0].locator_device_id; const faultDevice = lineApp.queryStore.queryById( diff --git a/src/pages/MonitorPage.vue b/src/pages/MonitorPage.vue index 18ae015..9908f5e 100644 --- a/src/pages/MonitorPage.vue +++ b/src/pages/MonitorPage.vue @@ -61,17 +61,13 @@ function onResize() { dom.style.width = props.sizeWidth + 'px'; dom.style.height = props.sizeHeight + 'px'; } - const lineNetApp = getLineNetApp(); - if (lineNetApp) { - lineNetApp.onDomResize(props.sizeWidth, props.sizeHeight); - } } onMounted(() => { const dom = document.getElementById('line-app-container'); if (dom) { - const lineApp = lineNetStore.initLineNetApp(dom); - loadLineNetDatas(lineApp); + lineNetStore.initLineNetApp(); + lineNetStore.bindDom(dom); onResize(); } }); diff --git a/src/stores/line-net-store.ts b/src/stores/line-net-store.ts index 136c08d..bd2bff4 100644 --- a/src/stores/line-net-store.ts +++ b/src/stores/line-net-store.ts @@ -1,9 +1,10 @@ import { defineStore } from 'pinia'; -import { JlCanvas, JlGraphic, GraphicApp } from 'src/jl-graphic'; +import { IJlCanvas, JlGraphic, IGraphicApp } from 'src/jl-graphic'; import { initLineNetApp, getLineNetApp, destroyLineNetApp, + bindLineNetAppTo, } from 'src/drawApp/lineNetApp'; export interface AlarmInfo { id: string; @@ -45,24 +46,27 @@ export const useLineNetStore = defineStore('lineNet', { }, }, actions: { - getLineNetApp(): GraphicApp { + getLineNetApp(): IGraphicApp { const app = getLineNetApp(); if (app == null) { throw new Error('未初始化app'); } return app; }, - getJlCanvas(): JlCanvas { + getJlCanvas(): IJlCanvas { return this.getLineNetApp().canvas; }, - initLineNetApp(dom: HTMLElement) { - const app = initLineNetApp(dom); + initLineNetApp() { + const app = initLineNetApp(); app.on('graphicselectedchange', () => { this.selectedGraphics = app.selectedGraphics; }); this.selectedGraphics = []; return app; }, + bindDom(dom: HTMLElement) { + bindLineNetAppTo(dom); + }, destroy() { this.selectedGraphics = null; destroyLineNetApp(); diff --git a/src/stores/line-store.ts b/src/stores/line-store.ts index 277fc71..30df460 100644 --- a/src/stores/line-store.ts +++ b/src/stores/line-store.ts @@ -1,6 +1,11 @@ import { defineStore } from 'pinia'; import { IJlCanvas, JlGraphic, IGraphicApp } from 'src/jl-graphic'; -import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp'; +import { + initLineApp, + getLineApp, + destroyLineApp, + bindLineAppTo, +} from 'src/drawApp/lineApp'; export const useLineStore = defineStore('line', { state: () => ({ @@ -28,7 +33,7 @@ export const useLineStore = defineStore('line', { actions: { getLineApp(): IGraphicApp { const app = getLineApp(); - if (app == null) { + if (app === null) { throw new Error('未初始化app'); } return app; @@ -36,14 +41,18 @@ export const useLineStore = defineStore('line', { getJlCanvas(): IJlCanvas { return this.getLineApp().canvas; }, - initLineApp() { - const app = initLineApp(); + initLineApp(lineId: number) { + const app = initLineApp(lineId); + this.setLineId(lineId); app.on('graphicselectedchange', () => { this.selectedGraphics = app.selectedGraphics; }); this.selectedGraphics = []; return app; }, + bindDom(dom: HTMLElement) { + bindLineAppTo(dom); + }, destroy() { this.selectedGraphics = null; destroyLineApp();