diff --git a/index.html b/index.html
index 3c8c78f..661de38 100644
--- a/index.html
+++ b/index.html
@@ -3,19 +3,42 @@
<%= productName %>
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
+
diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts
index 0acef40..a0ac107 100644
--- a/src/drawApp/lineApp.ts
+++ b/src/drawApp/lineApp.ts
@@ -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.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 7379894..1c55b2a 100644
--- a/src/drawApp/lineNetApp.ts
+++ b/src/drawApp/lineNetApp.ts
@@ -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 | 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([]);
}
}
diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue
index 72c781f..010538b 100644
--- a/src/layouts/LineLayout.vue
+++ b/src/layouts/LineLayout.vue
@@ -1,95 +1,64 @@
-
-
- {{ mapName }}
-
-
-
-
-
-
+
+
+ {{ mapName }}
+
+
+
+
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 99e320c..30df460 100644
--- a/src/stores/line-store.ts
+++ b/src/stores/line-store.ts
@@ -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();