Merge branch 'master' of https://git.code.tencent.com/xian-ncc-da/xian-ncc-da-client
This commit is contained in:
fan
commit
caed6c021d
45
index.html
45
index.html
@ -3,19 +3,42 @@
|
||||
<head>
|
||||
<title><%= productName %></title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="<%= productDescription %>">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="<%= productDescription %>" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
|
||||
/>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
|
||||
<link rel="icon" type="image/ico" href="favicon.ico">
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="128x128"
|
||||
href="icons/favicon-128x128.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="96x96"
|
||||
href="icons/favicon-96x96.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="icons/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="icons/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="icon" type="image/ico" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<body style="overflow: hidden">
|
||||
<!-- quasar:entry-point -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
import { GraphicApp, GraphicData, GraphicState } from 'src/jl-graphic';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
IGraphicApp,
|
||||
newGraphicApp,
|
||||
} from 'src/jl-graphic';
|
||||
import {
|
||||
TrainData,
|
||||
TrainOperateInteraction,
|
||||
@ -50,9 +55,6 @@ import {
|
||||
import { TrainWindowData } from './graphics/TrainWindowInteraction';
|
||||
import { SeparatorTemplate } from 'src/graphics/separator/Separator';
|
||||
import { SeparatorData } from './graphics/SeparatorInteraction';
|
||||
|
||||
let lineApp: GraphicApp | null = null;
|
||||
|
||||
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
|
||||
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
|
||||
import {
|
||||
@ -64,21 +66,11 @@ 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, 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(): GraphicApp | null {
|
||||
export function getLineApp() {
|
||||
return lineApp;
|
||||
}
|
||||
|
||||
@ -89,8 +81,79 @@ export function destroyLineApp(): void {
|
||||
}
|
||||
}
|
||||
|
||||
export function initLineApp(dom: HTMLElement): GraphicApp {
|
||||
lineApp = new GraphicApp(dom);
|
||||
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,
|
||||
boxSelectColor: '0xff0000',
|
||||
},
|
||||
dataLoader: lineAppDataLoader,
|
||||
});
|
||||
|
||||
const graphicTemplate = [
|
||||
new TrainTemplate(new TrainData(), new TrainState()),
|
||||
new SignalTemplate(new SignalData(), new SignalState()),
|
||||
@ -104,197 +167,91 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
|
||||
new TrainWindowTemplate(new TrainWindowData()),
|
||||
];
|
||||
lineApp.registerGraphicTemplates(...graphicTemplate);
|
||||
lineApp.setOptions({
|
||||
mouseToolOptions: {
|
||||
boxSelect: true,
|
||||
viewportDrag: true,
|
||||
wheelZoom: true,
|
||||
boxSelectColor: '0xff0000',
|
||||
},
|
||||
interactiveTypeOptions: {
|
||||
interactiveGraphicTypeIncludes: [
|
||||
Signal.Type,
|
||||
Platform.Type,
|
||||
Station.Type,
|
||||
Train.Type,
|
||||
LogicSection.Type,
|
||||
Turnout.Type,
|
||||
],
|
||||
},
|
||||
});
|
||||
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;
|
||||
},
|
||||
});
|
||||
|
||||
return lineApp;
|
||||
}
|
||||
|
||||
export async function loadLineDatas(app: GraphicApp) {
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
import { GraphicApp, GraphicData, GraphicState } from 'src/jl-graphic';
|
||||
import {
|
||||
IGraphicApp,
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
newGraphicApp,
|
||||
} from 'src/jl-graphic';
|
||||
import { getPublishLineNet } from 'src/api/PublishApi';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { state } from 'src/protos/ws_message';
|
||||
@ -28,11 +33,12 @@ 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: GraphicApp | null = null;
|
||||
let lineNetApp: IGraphicApp | null = null;
|
||||
|
||||
export function getLineNetApp(): GraphicApp | null {
|
||||
export function getLineNetApp(): IGraphicApp | null {
|
||||
return lineNetApp;
|
||||
}
|
||||
|
||||
@ -43,8 +49,55 @@ export function destroyLineNetApp(): void {
|
||||
}
|
||||
}
|
||||
|
||||
export function initLineNetApp(dom: HTMLElement): GraphicApp {
|
||||
lineNetApp = new GraphicApp(dom);
|
||||
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()),
|
||||
@ -53,98 +106,66 @@ export function initLineNetApp(dom: HTMLElement): GraphicApp {
|
||||
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 loadLineNetDatas(app: GraphicApp) {
|
||||
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([]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,95 +1,64 @@
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<q-header reveal class="bg-primary text-white">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title> {{ mapName }} </q-toolbar-title>
|
||||
<q-btn color="info" label="返回" @click="backConfirm" />
|
||||
</q-toolbar>
|
||||
<q-resize-observer @resize="onHeaderResize" />
|
||||
</q-header>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<q-page-container>
|
||||
<div id="line-app-container"></div>
|
||||
<q-header reveal class="bg-primary text-white">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title> {{ mapName }} </q-toolbar-title>
|
||||
<q-btn color="info" label="返回" @click="backConfirm" />
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
<div id="line-app-container" style="height: calc(100vh - 50px)"></div>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed } 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 { loadLineDatas, getLineApp } from 'src/drawApp/lineApp';
|
||||
import { loadLineNetDatas, getLineNetApp } from 'src/drawApp/lineNetApp';
|
||||
|
||||
const canvasWidth = ref(0);
|
||||
const canvasHeight = ref(0);
|
||||
const headerHeight = ref(0);
|
||||
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();
|
||||
|
||||
const mapName = computed(() => lineStore.lineName || lineNetStore.lineNetName);
|
||||
|
||||
function onResize() {
|
||||
const clientWidth = document.body.clientWidth;
|
||||
const clientHeight = document.body.clientHeight;
|
||||
canvasWidth.value = clientWidth;
|
||||
canvasHeight.value = clientHeight - headerHeight.value;
|
||||
const dom = document.getElementById('line-app-container');
|
||||
if (dom) {
|
||||
dom.style.width = canvasWidth.value + 'px';
|
||||
dom.style.height = canvasHeight.value + 'px';
|
||||
}
|
||||
let lineApp;
|
||||
if (mapType.value === 'Line') {
|
||||
lineApp = getLineApp();
|
||||
} else if (mapType.value === 'LineNetwork') {
|
||||
lineApp = getLineNetApp();
|
||||
}
|
||||
if (lineApp) {
|
||||
lineApp.onDomResize(canvasWidth.value, canvasHeight.value);
|
||||
}
|
||||
}
|
||||
|
||||
function onHeaderResize(size: { height: number; width: number }) {
|
||||
headerHeight.value = size.height;
|
||||
onResize();
|
||||
}
|
||||
|
||||
function backConfirm() {
|
||||
router.go(-1);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('line-app-container');
|
||||
if (dom) {
|
||||
if (mapType.value === 'Line') {
|
||||
lineStore.setLineId(+route.params.id as number);
|
||||
const lineApp = lineStore.initLineApp(dom);
|
||||
loadLineDatas(lineApp);
|
||||
// rangeConfigDrawer.value = true;
|
||||
} else if (mapType.value === 'LineNetwork') {
|
||||
const lineApp = lineNetStore.initLineNetApp(dom);
|
||||
loadLineNetDatas(lineApp);
|
||||
}
|
||||
onResize();
|
||||
} else {
|
||||
lineStore.setLineId(null);
|
||||
}
|
||||
});
|
||||
const lineId = Number(route.params.id);
|
||||
|
||||
// function openRangeList() {
|
||||
// const dialog = $q.dialog({
|
||||
// component: RangeList,
|
||||
// componentProps: {
|
||||
// onEditClick: (row: IAreaConfigListItem) => {
|
||||
// dialog.hide();
|
||||
// rangeConfigEdit.value?.searchById(row.id);
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
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>
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { JlCanvas, JlGraphic, GraphicApp } from 'src/jl-graphic';
|
||||
import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp';
|
||||
import { IJlCanvas, JlGraphic, IGraphicApp } from 'src/jl-graphic';
|
||||
import {
|
||||
initLineApp,
|
||||
getLineApp,
|
||||
destroyLineApp,
|
||||
bindLineAppTo,
|
||||
} from 'src/drawApp/lineApp';
|
||||
|
||||
export const useLineStore = defineStore('line', {
|
||||
state: () => ({
|
||||
@ -26,24 +31,28 @@ export const useLineStore = defineStore('line', {
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
getLineApp(): GraphicApp {
|
||||
getLineApp(): IGraphicApp {
|
||||
const app = getLineApp();
|
||||
if (app == null) {
|
||||
if (app === null) {
|
||||
throw new Error('未初始化app');
|
||||
}
|
||||
return app;
|
||||
},
|
||||
getJlCanvas(): JlCanvas {
|
||||
getJlCanvas(): IJlCanvas {
|
||||
return this.getLineApp().canvas;
|
||||
},
|
||||
initLineApp(dom: HTMLElement) {
|
||||
const app = initLineApp(dom);
|
||||
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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user