fix: 修复socket切换页面后无法获取实时数据

@@ -4289,7 +4289,6 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
     if (this.appIcon) {
     if (this.appIcon) {
       this.appIcon.style.backgroundImage = `url(${platformInfo?.logo || `${getProxyPrefix()}/logo.png`})`
       this.appIcon.style.backgroundImage = `url(${platformInfo?.logo || `${getProxyPrefix()}/logo.png`})`
     }
     }
-
     const handleLoadContent = async () => {
     const handleLoadContent = async () => {
       /**
       /**
        * @typedef ConfigurationContentListItemType
        * @typedef ConfigurationContentListItemType
@@ -4326,9 +4325,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
       if (success != null)
       if (success != null)
         success()
         success()
 
 
-
-
-      useLightboxModeService?.(this)
+      this.lightboxWebsocketService?.init?.()
     }
     }
 
 
     handleLoadContent()
     handleLoadContent()

@@ -168,13 +168,23 @@ LocalFile.prototype.saveFile = function (title, revision, success, error, useCur
 			const { doSaveConfigurationContent, configurationId } = useContentData()
 			const { doSaveConfigurationContent, configurationId } = useContentData()
 			try {
 			try {
 				const allCells = this.ui.editor.graph.getModel().cells || {}
 				const allCells = this.ui.editor.graph.getModel().cells || {}
+				// const allCells = this.shadowPages
+				// 	.map(item => {
+				// 		console.log(item)
+				// 		return this.ui.editor.graph.createCellLookup([item.root])
+				// 	})
+				// 	.map(obj => Object.values(obj))
+				// 	.reduce((prev, next) => [...prev, ...next], [])
+ 
 				await doSaveConfigurationContent({
 				await doSaveConfigurationContent({
 					configurationContentList: [
 					configurationContentList: [
 						{
 						{
 							id: this.ui.configurationContentId,
 							id: this.ui.configurationContentId,
 							content: savedData,
 							content: savedData,
-							contentId: this.ui.configurationContentId,
+							// contentId: this.ui.configurationContentId,
+							contentId: this.ui.currentPage.getId(),
 							type: 1,
 							type: 1,
+							// nodeIds: Array.from(new Set(allCells)),
 							nodeIds: Object.keys(allCells),
 							nodeIds: Object.keys(allCells),
 							name: this.ui.currentPage.getName()
 							name: this.ui.currentPage.getName()
 						}
 						}

@@ -482,11 +482,15 @@ EditorUi.prototype.initPages = function () {
 		this.editor.addListener('pageMoved', pagesChanged);
 		this.editor.addListener('pageMoved', pagesChanged);
 		this.editor.addListener('fileLoaded', pagesChanged);
 		this.editor.addListener('fileLoaded', pagesChanged);
 
 
+		// TODO Thingskit 预览模式连接socket
+		const lightboxWebsocketService = useLightboxModeService(this)
+		this.lightboxWebsocketService = lightboxWebsocketService
 		this.editor.addListener('pageSelected', mxUtils.bind(this, function (sender, evt) {
 		this.editor.addListener('pageSelected', mxUtils.bind(this, function (sender, evt) {
 			this.scrollToPage();
 			this.scrollToPage();
 			this.updateHashObject();
 			this.updateHashObject();
 			this.updateTabContainer();
 			this.updateTabContainer();
 			this.updateDocumentTitle();
 			this.updateDocumentTitle();
+			this.lightboxWebsocketService?.onSelectPageChange?.()
 
 
 			if (this.toolbar != null) {
 			if (this.toolbar != null) {
 				this.toolbar.updateZoom();
 				this.toolbar.updateZoom();
@@ -1751,8 +1755,8 @@ EditorUi.prototype.showPageLinkDialog = function (page) {
 			if (obj.relatedPage.viewState != null) {
 			if (obj.relatedPage.viewState != null) {
 				node.setAttribute('viewState', JSON.stringify(
 				node.setAttribute('viewState', JSON.stringify(
 					obj.relatedPage.viewState, function (key, value) {
 					obj.relatedPage.viewState, function (key, value) {
-					return (mxUtils.indexOf(EditorUi.transientViewStateProperties, key) < 0) ? value : undefined;
-				}));
+						return (mxUtils.indexOf(EditorUi.transientViewStateProperties, key) < 0) ? value : undefined;
+					}));
 			}
 			}
 
 
 			if (obj.relatedPage.root != null) {
 			if (obj.relatedPage.root != null) {

 import type { ThingsModel } from '@/api/device/model'
 import type { ThingsModel } from '@/api/device/model'
 import type { ImageSelectorDataType } from '@/core/Library/components/ImageSelector'
 import type { ImageSelectorDataType } from '@/core/Library/components/ImageSelector'
 import type { CommandWayEnum } from '@/enums/commandEnum'
 import type { CommandWayEnum } from '@/enums/commandEnum'
-import type { ActTypeEnum, AggregateTypeEnum, CommandDeliveryWayEnum, EventActionTypeEnum, EventTypeEnum, SocketSubscriberEnum } from '@/enums/datasource'
+import type { ActTypeEnum, AggregateTypeEnum, CommandDeliveryWayEnum, DeviceTypeEnum, EventActionTypeEnum, EventTypeEnum, SocketSubscriberEnum, TransportTypeEnum } from '@/enums/datasource'
 
 
 export enum DeleteNodeDataTypeEnum {
 export enum DeleteNodeDataTypeEnum {
   DATASOURCE = 'DATASOURCE',
   DATASOURCE = 'DATASOURCE',
@@ -82,6 +82,10 @@ export interface NodeDataDataSourceJsonType {
   deviceProfileId: string
   deviceProfileId: string
   attr: string
   attr: string
   attrInfo: ThingsModel
   attrInfo: ThingsModel
+
+  deviceType?: DeviceTypeEnum
+  transportType?: TransportTypeEnum
+
   enable: boolean
   enable: boolean
   chartOption?: ChartOptionType
   chartOption?: ChartOptionType
   videoOption?: VideoOptionType
   videoOption?: VideoOptionType

@@ -31,7 +31,7 @@ function removeCellSourceAttribute(cell: MxCell) {
 export function useNodeData({ cell, immediate = true }: UseNodeDataParamsType) {
 export function useNodeData({ cell, immediate = true }: UseNodeDataParamsType) {
   const nodeData = ref<NodeDataType>()
   const nodeData = ref<NodeDataType>()
 
 
-  const contentId = window.DrawApp.configurationContentId!
+  // const contentId = window.DrawApp.configurationContentId!
   const { configurationId } = useParseParams()
   const { configurationId } = useParseParams()
 
 
   const getCellID = () => {
   const getCellID = () => {
@@ -46,7 +46,7 @@ export function useNodeData({ cell, immediate = true }: UseNodeDataParamsType) {
   const basicNodeBindData = (type: ActionType): BasicNodeBindType => {
   const basicNodeBindData = (type: ActionType): BasicNodeBindType => {
     return {
     return {
       id: type === ActionType.GET ? getSourceCellID () || getCellID () : getCellID(),
       id: type === ActionType.GET ? getSourceCellID () || getCellID () : getCellID(),
-      contentId,
+      contentId: window.DrawApp.currentPage.getId(),
       configurationId,
       configurationId,
     }
     }
   }
   }

 import { LightboxModeWebsocketService } from '@/core/websocket/processor'
 import { LightboxModeWebsocketService } from '@/core/websocket/processor'
 import type { DrawApp } from '@/fitCore/types'
 import type { DrawApp } from '@/fitCore/types'
-import { useContentDataStoreWithOut } from '@/store/modules/contentData'
 import { isLightboxMode, isShareMode } from '@/utils/env'
 import { isLightboxMode, isShareMode } from '@/utils/env'
 
 
 export function useLightboxModeService(App: DrawApp) {
 export function useLightboxModeService(App: DrawApp) {
-  if (isShareMode() || isLightboxMode()) {
-    const contentDataStore = useContentDataStoreWithOut()
-    // eslint-disable-next-line no-new
-    new LightboxModeWebsocketService(App, contentDataStore.contentData)
-  }
+  if (isShareMode() || isLightboxMode())
+    return new LightboxModeWebsocketService(App)
 }
 }
 
 
 window.useLightboxModeService = useLightboxModeService
 window.useLightboxModeService = useLightboxModeService

@@ -7,13 +7,19 @@ interface MxEvent {
   state: MxState
   state: MxState
 }
 }
 
 
-type DispathFn = (eventName: EventTypeEnum, event: MxEvent) => void
-
 export class EventHandler {
 export class EventHandler {
-  constructor(public dispathEvent: DispathFn) {
+  constructor(public service: LightboxModeWebsocketService) {
     this.initEventListener()
     this.initEventListener()
   }
   }
 
 
+  get nodeUtils() {
+    return this.service.nodeUtils
+  }
+
+  get getDrawApp() {
+    return this.service.App
+  }
+
   initEventListener() {
   initEventListener() {
     this.addClickEventListener()
     this.addClickEventListener()
     this.addDbClickEventListener()
     this.addDbClickEventListener()
@@ -21,52 +27,43 @@ export class EventHandler {
   }
   }
 
 
   addDbClickEventListener() {
   addDbClickEventListener() {
-    const graphDblClick = window.DrawApp.editor.graph.dblClick
-    const dispathEvent = this.dispathEvent
-    window.DrawApp.editor.graph.dblClick = function (...args) {
+    const graphDblClick = this.getDrawApp.editor.graph.dblClick
+    const dispathEvent = this.dispathEvent.bind(this)
+    this.getDrawApp.editor.graph.dblClick = function (...args) {
       dispathEvent(EventTypeEnum.DOUBLE, args[0])
       dispathEvent(EventTypeEnum.DOUBLE, args[0])
       graphDblClick.apply(this, args)
       graphDblClick.apply(this, args)
     }
     }
   }
   }
 
 
   addClickEventListener() {
   addClickEventListener() {
-    const graphDblClick = window.DrawApp.editor.graph.click
-    const dispathEvent = this.dispathEvent
-    window.DrawApp.editor.graph.click = function (...args) {
+    const graphDblClick = this.getDrawApp.editor.graph.click
+    const dispathEvent = this.dispathEvent.bind(this)
+    this.getDrawApp.editor.graph.click = function (...args) {
       dispathEvent(EventTypeEnum.SINGLE, ...args)
       dispathEvent(EventTypeEnum.SINGLE, ...args)
       graphDblClick.apply(this, args)
       graphDblClick.apply(this, args)
     }
     }
   }
   }
 
 
   addMouseUpOrDownEventListener() {
   addMouseUpOrDownEventListener() {
-    const graphFireMouseEvent = window.DrawApp.editor.graph.fireMouseEvent
-    window.DrawApp.editor.graph.fireMouseEvent = (eventName, event, sender) => {
+    const graphFireMouseEvent = this.getDrawApp.editor.graph.fireMouseEvent
+    this.getDrawApp.editor.graph.fireMouseEvent = (eventName, event, sender) => {
       if (eventName === 'mouseUp')
       if (eventName === 'mouseUp')
         this.dispathEvent(EventTypeEnum.UP, event)
         this.dispathEvent(EventTypeEnum.UP, event)
 
 
       if (eventName === 'mouseDown')
       if (eventName === 'mouseDown')
         this.dispathEvent(EventTypeEnum.DOWN, event)
         this.dispathEvent(EventTypeEnum.DOWN, event)
 
 
-      graphFireMouseEvent.apply(window.DrawApp.editor.graph, [eventName, event, sender])
+      graphFireMouseEvent.apply(this.getDrawApp.editor.graph, [eventName, event, sender])
     }
     }
   }
   }
-}
-
-export class DispathEvent {
-  constructor(public service: LightboxModeWebsocketService) {
-  }
-
-  get nodeUtils() {
-    return this.service.nodeUtils
-  }
 
 
   dispathEvent(eventName: EventTypeEnum, event: MxEvent) {
   dispathEvent(eventName: EventTypeEnum, event: MxEvent) {
     const { state } = event
     const { state } = event
     if (!state) return
     if (!state) return
     const { cell } = state
     const { cell } = state
     if (!cell) return
     if (!cell) return
-
     const id = cell.getId()
     const id = cell.getId()
+
     const node = this.service.dataSource.find(item => item.id === id)
     const node = this.service.dataSource.find(item => item.id === id)
     if (node && node.eventJson) {
     if (node && node.eventJson) {
       const { handlerMouseDown, handlerMouseClick, handlerMouseDoubleClick, handlerMouseUp } = useNodeEvent(node.eventJson, node.dataSourceJson)
       const { handlerMouseDown, handlerMouseClick, handlerMouseDoubleClick, handlerMouseUp } = useNodeEvent(node.eventJson, node.dataSourceJson)

@@ -4,13 +4,14 @@ import { EntityType } from '../enum'
 import { SubscriptionUpdate, TelemetrySubscriber, TelemetryWebsockerService } from '../telemetry'
 import { SubscriptionUpdate, TelemetrySubscriber, TelemetryWebsockerService } from '../telemetry'
 import type { SubscriptionUpdateMsg, WebsocketDataMsg } from '../type/message'
 import type { SubscriptionUpdateMsg, WebsocketDataMsg } from '../type/message'
 import { MessageHandler } from './messageHandler'
 import { MessageHandler } from './messageHandler'
-import { DispathEvent, EventHandler } from './eventHandler'
+import { EventHandler } from './eventHandler'
 import type { DrawApp } from '@/fitCore/types'
 import type { DrawApp } from '@/fitCore/types'
 import { NodeUtils } from '@/hooks/business/useNodeUtils'
 import { NodeUtils } from '@/hooks/business/useNodeUtils'
 import type { NodeDataActJsonType, NodeDataDataSourceJsonType, NodeDataEventJsonType, NodeDataType } from '@/api/node/model'
 import type { NodeDataActJsonType, NodeDataDataSourceJsonType, NodeDataEventJsonType, NodeDataType } from '@/api/node/model'
 import type { EventTypeEnum } from '@/enums/datasource'
 import type { EventTypeEnum } from '@/enums/datasource'
 import { ActTypeEnum, DataSourceTypeEnum } from '@/enums/datasource'
 import { ActTypeEnum, DataSourceTypeEnum } from '@/enums/datasource'
 import { fetchComponentDataSubscribers } from '@/core/Library'
 import { fetchComponentDataSubscribers } from '@/core/Library'
+import { useContentDataStoreWithOut } from '@/store/modules/contentData'
 
 
 export type NodeDataActJsonItemType = NodeDataActJsonType[keyof NodeDataActJsonType]
 export type NodeDataActJsonItemType = NodeDataActJsonType[keyof NodeDataActJsonType]
 export type NodeDataEventJsonItemType = NodeDataEventJsonType[keyof NodeDataEventJsonType]
 export type NodeDataEventJsonItemType = NodeDataEventJsonType[keyof NodeDataEventJsonType]
@@ -25,25 +26,24 @@ export interface CommandSource {
 export class LightboxModeWebsocketService extends TelemetryWebsockerService {
 export class LightboxModeWebsocketService extends TelemetryWebsockerService {
   dataSource: NodeDataType[]
   dataSource: NodeDataType[]
 
 
-  // entityIdWithNodeRelationMap = new Map<string, Map<string, EntityAttrBindDataNode>>()
-
   nodeUtils: NodeUtils
   nodeUtils: NodeUtils
 
 
   messageHandler: MessageHandler
   messageHandler: MessageHandler
 
 
-  dispathEvent: DispathEvent
-
   eventHandler: EventHandler
   eventHandler: EventHandler
 
 
-  constructor(App: DrawApp, datasource: NodeDataType[]) {
+  constructor(public App: DrawApp) {
     super()
     super()
     this.nodeUtils = new NodeUtils(App)
     this.nodeUtils = new NodeUtils(App)
-    this.dataSource = toRaw(unref(datasource))
+    this.dataSource = []
     this.openSocket()
     this.openSocket()
-    this.dispathEvent = new DispathEvent(this)
     this.messageHandler = new MessageHandler(this)
     this.messageHandler = new MessageHandler(this)
-    this.eventHandler = new EventHandler(this.dispathEvent.dispathEvent.bind(this.dispathEvent))
+    this.eventHandler = new EventHandler(this)
+  }
 
 
+  init() {
+    this.unsubscribeCurrentPageData()
+    this.getSelectPageNodeData()
     this.getAllDataSubscribers()
     this.getAllDataSubscribers()
   }
   }
 
 
@@ -111,6 +111,21 @@ export class LightboxModeWebsocketService extends TelemetryWebsockerService {
     }
     }
   }
   }
 
 
+  unsubscribeCurrentPageData() {
+    const subscribers = Array.from(this.subscribersMap.values())
+    subscribers.forEach(subscriber => this.unsubscribe(subscriber))
+  }
+
+  getSelectPageNodeData() {
+    const contentDataStore = useContentDataStoreWithOut()
+    const contentId = this.App.currentPage.getId()
+    this.dataSource = toRaw(unref(contentDataStore.contentData)).filter(item => item.contentId === contentId)
+  }
+
+  onSelectPageChange() {
+    this.init()
+  }
+
   checkDataSourceNeedSubscribe(dataSource?: NodeDataDataSourceJsonType): dataSource is NodeDataDataSourceJsonType {
   checkDataSourceNeedSubscribe(dataSource?: NodeDataDataSourceJsonType): dataSource is NodeDataDataSourceJsonType {
     return !!(dataSource && isObject(dataSource) && dataSource.deviceId && dataSource.attr)
     return !!(dataSource && isObject(dataSource) && dataSource.deviceId && dataSource.attr)
   }
   }

@@ -197,7 +197,7 @@ export class TelemetryWebsockerService extends WebsocketService<TelemetrySubscri
   }
   }
 
 
   public unsubscribe(subscriber: TelemetrySubscriber): void {
   public unsubscribe(subscriber: TelemetrySubscriber): void {
-    if (unref(this.status) === 'CONNECTING') {
+    if (unref(this.status) === 'OPEN') {
       const subscriptionCmd = subscriber.subscriptionCommand
       const subscriptionCmd = subscriber.subscriptionCommand
       if (subscriptionCmd instanceof SubscriptionCmd) {
       if (subscriptionCmd instanceof SubscriptionCmd) {
         subscriptionCmd.unsubscribe = true
         subscriptionCmd.unsubscribe = true