joylink/xian-ncc-da-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lineNetApp

Browse Source
This commit is contained in:
Yuan 2023-09-01 17:14:08 +08:00
parent f63ec5b12c
commit bad9c90983
7 changed files with 239 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

308
src/drawApp/lineApp.ts
View File

@ -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>(Station.Type)
// .map<MenuItemOptions>((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>(
// AxleCounting.Type
// );
// axleCountings.forEach((axleCounting) => {
// axleCounting.visible = false;
// });
// const trainWindows = lineApp.queryStore.queryByType<TrainWindow>(
// 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>(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
);
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>(
AxleCounting.Type
);
axleCountings.forEach((axleCounting) => {
axleCounting.visible = false;
});
const trainWindows = app.queryStore.queryByType<TrainWindow>(
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>(
TrainWindow.Type
);
trainWindows.forEach((trainWindow) => {
trainWindow.visible = false;
});
}

186
src/drawApp/lineNetApp.ts
View File

@ -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<Notify['create']> | 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([]);
}
}

50
src/layouts/LineLayout.vue
View File

@ -13,15 +13,16 @@
</template>
<script setup lang="ts">
import { onMounted, ref, computed, nextTick } from 'vue';
import { onMounted, ref, computed, onUnmounted } from 'vue';
import { useLineStore } from 'src/stores/line-store';
import { useLineNetStore } from 'src/stores/line-net-store';
import { useRoute, useRouter } from 'vue-router';
import { Station } from 'src/graphics/station/Station';
type MapType = 'Line' | 'LineNetwork';
const route = useRoute();
const router = useRouter();
const mapType = ref(route.params.type as string);
const mapType = route.params.type as MapType;
const lineStore = useLineStore();
const lineNetStore = useLineNetStore();
@ -31,22 +32,33 @@ function backConfirm() {
router.go(-1);
}
const lineApp = lineStore.initLineApp();
const lineId = Number(route.params.id);
onMounted(() => {
const dom = document.getElementById('line-app-container');
if (dom) {
if (mapType.value === 'Line') {
lineStore.setLineId(Number(route.params.id));
lineApp.bindDom(dom);
lineApp.reload().then(() => {
console.log(lineApp.queryStore.queryByType(Station.Type));
});
} else if (mapType.value === 'LineNetwork') {
const lineApp = lineNetStore.initLineNetApp(dom);
}
} else {
lineStore.setLineId(null);
useGraphicApp(lineId);
function useGraphicApp(mapId: number) {
if (mapType === 'Line') {
lineStore.initLineApp(mapId);
onMounted(() => {
const dom = document.getElementById('line-app-container');
if (dom) {
lineStore.bindDom(dom);
}
});
onUnmounted(() => {
lineStore.destroy();
});
} else if (mapType === 'LineNetwork') {
lineNetStore.initLineNetApp();
onMounted(() => {
const dom = document.getElementById('line-app-container');
if (dom) {
lineNetStore.bindDom(dom);
}
});
onUnmounted(() => {
lineNetStore.destroy();
});
}
});
}
</script>

14
src/pages/LineMonitorPage.vue
View File

@ -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(

8
src/pages/MonitorPage.vue
View File

@ -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();
}
});

14
src/stores/line-net-store.ts
View File

@ -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();

17
src/stores/line-store.ts
View File

@ -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();