From 6f65060cde69052be31c00606e2161371b45e9f4 Mon Sep 17 00:00:00 2001 From: dong <58670809@qq.com> Date: Fri, 1 Sep 2023 10:25:13 +0800 Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=8E=A7=E5=88=B6=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/drawApp/lineApp.ts | 295 +++++++++++++++++++++-------------------- 1 file changed, 150 insertions(+), 145 deletions(-) diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts index 5b42b40..f772259 100644 --- a/src/drawApp/lineApp.ts +++ b/src/drawApp/lineApp.ts @@ -5,7 +5,6 @@ import { IGraphicApp, newGraphicApp, IGraphicStorage, - IGraphicScene, } from 'src/jl-graphic'; import { TrainState } from './graphics/TrainInteraction'; import { Train, TrainTemplate } from 'src/graphics/train/Train'; @@ -172,6 +171,7 @@ export function initLineApp(): IGraphicApp { lineApp = newGraphicApp({ dataLoader: loadLineDatas, }); + lineApp.initScene('lineApp', {}); const graphicTemplate = [ new TrainTemplate(new TrainState()), new SignalTemplate(new SignalData(), new SignalState()), @@ -204,18 +204,16 @@ export function initLineApp(): IGraphicApp { // viewportDrag: true, // wheelZoom: true, // }, - // interactiveTypeOptions: { - // interactiveGraphicTypeIncludes: [ - // Signal.Type, - // Platform.Type, - // Station.Type, - // SectionLink.Type, - // Train.Type, - // Turnout.Type, - // Section.Type, - // Transponder.Type, - // ], - // }, + // interactiveGraphicTypeIncludes: [ + // Signal.Type, + // Platform.Type, + // Station.Type, + // SectionLink.Type, + // Train.Type, + // Turnout.Type, + // Section.Type, + // Transponder.Type, + // ], // }); SignalOperateInteraction.init(lineApp); PlatformOperateInteraction.init(lineApp); @@ -233,143 +231,150 @@ export function initLineApp(): IGraphicApp { }; DefaultCanvasMenu.open(e.global); }); - + handleEvent(lineApp); + lineApp.on('postdataloaded', () => { + ControlShowType(); + }); return lineApp; } -// function handleEvent(app: IGraphicScene) { -// // app.on('postdataloaded', () => { -// // storage.CalculateLink.forEach((link) => { -// // const linkData = new LinkData(link); -// // const template = app.getGraphicTemplatesByType(linkData.graphicType); -// // const g = template.new(); -// // linkData.id = g.id; -// // g.loadData(linkData); -// // app.addGraphics(g); -// // }); -// // }); +function handleEvent(app: IGraphicApp) { + // app.on('postdataloaded', () => { + // storage.CalculateLink.forEach((link) => { + // const linkData = new LinkData(link); + // const template = app.getGraphicTemplatesByType(linkData.graphicType); + // const g = template.new(); + // linkData.id = g.id; + // g.loadData(linkData); + // app.addGraphics(g); + // }); + // }); -// const route = useRoute(); -// const mapId = route.query.mapId as string; -// const simulationId = route.query.simulationId; -// const lineStore = useLineStore(); -// const showTypeList: string[] = []; -// layerList.forEach((item) => { -// if (item.defaultShow) { -// showTypeList.push(item.value); -// } -// }); -// if (lineApp) { -// const alllGraphic = (lineApp as IGraphicApp).queryStore.getAllGraphics(); -// alllGraphic.forEach((g) => { -// if (showTypeList.includes(g.type)) { -// g.visible = true; -// } else { -// g.visible = false; -// } -// if (g.type == Transponder.Type) { -// // 应答器不显示名称 -// (g as Transponder).labelGraphic.visible = false; -// } -// }); -// lineStore.setShowLayer(showTypeList); -// } -// app.enableWsMassaging({ -// engine: ClientEngine.Centrifugo, -// wsUrl: `${getWebsocketUrl()}`, -// token: getOnlyToken() as string, -// }); -// app.subscribe({ -// // destination: `/simulation/${simulationId}/devices/status`, -// destination: `simulation-${simulationId}-devices-status`, -// messageConverter: (message: Uint8Array) => { -// // console.log('收到消息', message); -// const states: GraphicState[] = []; -// const storage = state.PushedDevicesStatus.deserialize(message); -// if (storage.all) { -// storage.allStatus.sectionState.forEach((item) => { -// if (state.SectionType[item.type] == 'Axle') { -// //计轴区段 -// // states.push(new AxleCountingState(item)); -// } else if (state.SectionType[item.type] == 'Logic') { -// // 逻辑区段 -// // states.push(new LogicSectionState(item)); -// } else if (state.SectionType[item.type] == 'Physic') { -// // 物理区段 -// // states.push(new SectionState(item)); -// } -// }); -// storage.allStatus.switchState.forEach((item) => { -// // 道岔 -// states.push(new TurnoutStates(item)); -// }); -// storage.allStatus.trainState.forEach((item) => { -// // 列车 -// if (!item.show) { -// // 移除列车 -// const train = app.queryStore.queryByCodeAndType( -// item.id, -// Train.Type -// ); -// if (train) { -// app.deleteGraphics(train); -// } -// } else { -// states.push(new TrainState(item)); -// } -// }); -// } else { -// storage.varStatus.updatedSection.forEach((item) => { -// if (state.SectionType[item.type] == 'Axle') { -// //计轴区段 -// // states.push(new AxleCountingState(item)); -// } else if (state.SectionType[item.type] == 'Logic') { -// // 逻辑区段 -// // states.push(new LogicSectionState(item)); -// } else if (state.SectionType[item.type] == 'Physic') { -// // 物理区段 -// // states.push(new SectionState(item)); -// } -// }); -// storage.varStatus.updatedSwitch.forEach((item) => { -// // 道岔 -// states.push(new TurnoutStates(item)); -// }); -// storage.varStatus.updatedTrain.forEach((item) => { -// // 列车 -// states.push(new TrainState(item)); -// }); -// storage.varStatus.removedTrainId.forEach((item) => { -// // 移除列车 -// const train = app.queryStore.queryByCodeAndType(item, Train.Type); -// if (train) { -// app.deleteGraphics(train); -// } -// }); -// } -// if (states && states.length > 0) { -// lineStore.setSocketStates(states); -// } -// return states; -// }, -// }); + const route = useRoute(); + const simulationId = route.query.simulationId; + const lineStore = useLineStore(); -// 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; -// } -// }); -// } + app.enableWsMassaging({ + engine: ClientEngine.Centrifugo, + wsUrl: `${getWebsocketUrl()}`, + token: getOnlyToken() as string, + }); + app.subscribe({ + // destination: `/simulation/${simulationId}/devices/status`, + destination: `simulation-${simulationId}-devices-status`, + messageConverter: (message: Uint8Array) => { + // console.log('收到消息', message); + const states: GraphicState[] = []; + const storage = state.PushedDevicesStatus.deserialize(message); + if (storage.all) { + storage.allStatus.sectionState.forEach((item) => { + if (state.SectionType[item.type] == 'Axle') { + //计轴区段 + // states.push(new AxleCountingState(item)); + } else if (state.SectionType[item.type] == 'Logic') { + // 逻辑区段 + // states.push(new LogicSectionState(item)); + } else if (state.SectionType[item.type] == 'Physic') { + // 物理区段 + // states.push(new SectionState(item)); + } + }); + storage.allStatus.switchState.forEach((item) => { + // 道岔 + states.push(new TurnoutStates(item)); + }); + storage.allStatus.trainState.forEach((item) => { + // 列车 + if (!item.show) { + // 移除列车 + const train = app.queryStore.queryByCodeAndType( + item.id, + Train.Type + ); + if (train) { + app.deleteGraphics(train); + } + } else { + states.push(new TrainState(item)); + } + }); + } else { + storage.varStatus.updatedSection.forEach((item) => { + if (state.SectionType[item.type] == 'Axle') { + //计轴区段 + // states.push(new AxleCountingState(item)); + } else if (state.SectionType[item.type] == 'Logic') { + // 逻辑区段 + // states.push(new LogicSectionState(item)); + } else if (state.SectionType[item.type] == 'Physic') { + // 物理区段 + // states.push(new SectionState(item)); + } + }); + storage.varStatus.updatedSwitch.forEach((item) => { + // 道岔 + states.push(new TurnoutStates(item)); + }); + storage.varStatus.updatedTrain.forEach((item) => { + // 列车 + states.push(new TrainState(item)); + }); + storage.varStatus.removedTrainId.forEach((item) => { + // 移除列车 + const train = app.queryStore.queryByCodeAndType(item, Train.Type); + if (train) { + app.deleteGraphics(train); + } + }); + } + if (states && states.length > 0) { + lineStore.setSocketStates(states); + } + 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; + } + }); +} + +function ControlShowType() { + const lineStore = useLineStore(); + const showTypeList: string[] = []; + layerList.forEach((item) => { + if (item.defaultShow) { + showTypeList.push(item.value); + } + }); + if (lineApp) { + const alllGraphic = (lineApp as IGraphicApp).queryStore.getAllGraphics(); + alllGraphic.forEach((g) => { + if (showTypeList.includes(g.type)) { + g.visible = true; + } else { + g.visible = false; + } + if (g.type == Transponder.Type) { + // 应答器不显示名称 + (g as Transponder).labelGraphic.visible = false; + } + }); + lineStore.setShowLayer(showTypeList); + } +} export async function loadLineDatas(): Promise { const route = useRoute();