Merge branch 'feat/component-subscribe-socket-message' into 'main_dev'

perf: 实现组件订阅socket消息

See merge request yunteng/thingskit-view!85

@@ -66,8 +66,7 @@ export const useChartDataSocket = () => {
 
   const socketStore = useSocketStore()
 
-  const initial = (targetComponent: CreateComponentType, useChartEditStore: ChartEditStoreType, updateCallback?: (...args: any) => any) => {
-
+  const initial = (targetComponent: CreateComponentType, useChartEditStore: ChartEditStoreType, updateCallback?: Fn) => {
     const { request } = targetComponent
     const { requestUrl, requestContentType } = request
 
@@ -75,7 +74,7 @@ export const useChartDataSocket = () => {
     const { send } = getSocketInstance(request!)
 
     onMounted(() => {
-      const message = socketStore.subscribe(targetComponent)
+      const message = socketStore.subscribe(targetComponent, updateCallback)
       if (!message) return
       const { subscribeMessage } = message
       send(JSON.stringify(subscribeMessage))

@@ -4,7 +4,8 @@ export enum SocketStoreEnum {
   SUBSCRIBE_POOL = 'subscribePool',
   CACHE_MESSAGE = 'cacheMessage',
   CURRENT_SUBSCRIBE_ID = 'currentSubscribeId',
-  UNSUBSCRIBE_POOL = 'unsubscribePool'
+  UNSUBSCRIBE_POOL = 'unsubscribePool',
+  COMPONENT_UPDATE_FN_POOL = 'componentUpdateFnPool'
 }
 
 export interface KeyBoundComponentList {
@@ -61,10 +62,15 @@ export interface UnsubscribePoolType {
   message: SocketSendMessageType 
 }
 
+export interface ComponentUpdateFnPoolType {
+  [key: string]: Fn
+}
+
 export interface SocketStoreType {
   [SocketStoreEnum.CONNECTION_POOL]: SocketConnectionPoolType,
   [SocketStoreEnum.SUBSCRIBE_POOL]: SubscribePoolType[],
   [SocketStoreEnum.CACHE_MESSAGE]: CacheMessageType,
   [SocketStoreEnum.CURRENT_SUBSCRIBE_ID]: number,
   [SocketStoreEnum.UNSUBSCRIBE_POOL]: UnsubscribePoolType[]
+  [SocketStoreEnum.COMPONENT_UPDATE_FN_POOL]: ComponentUpdateFnPoolType
 } 

@@ -17,7 +17,8 @@ export const useSocketStore = defineStore({
     subscribePool: [],
     cacheMessage: {},
     currentSubscribeId: 0,
-    unsubscribePool: []
+    unsubscribePool: [],
+    componentUpdateFnPool: {}
   }),
   getters: {
     /**
@@ -74,8 +75,8 @@ export const useSocketStore = defineStore({
          * 源代码 keys.forEach
          * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys  overrideKeys.forEach
          */
-        const overrideKeys = typeof keys==="string"?[keys]: keys
-      
+        const overrideKeys = typeof keys === "string" ? [keys] : keys
+
         overrideKeys.forEach(key => {
           Reflect.set(keysRecord, key, [{ componentId }])
         })
@@ -151,12 +152,13 @@ export const useSocketStore = defineStore({
      * @description 订阅
      * @param targetComponent 
      */
-    subscribe(targetComponent: CreateComponentType) {
+    subscribe(targetComponent: CreateComponentType, updateCallback?: Fn) {
       const { id: componentId, request } = targetComponent
       const { requestContentType, requestParams } = request
       if ((requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) {
         const { Params } = requestParams
         const { entityId = '', keys = [] } = Params
+        updateCallback && (this.componentUpdateFnPool[componentId] = updateCallback)
         return this.updateConnectionPool(entityId, keys as string[], componentId)
       }
     },
@@ -184,17 +186,17 @@ export const useSocketStore = defineStore({
      */
     getNeedUpdateComponentsIdBySubscribeId(subscribeId: number, keys: string[]) {
       const entityId = this.subscribePool.find(item => item.subscribeId === subscribeId)?.entityId
-       /**这里修改自定义tab切换传的单个属性问题
-         * ft
-         * 源代码 keys.map(key => keysRecord[key])
-         * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys   overrideKeys.map(key => keysRecord[key])
-         */
-      const overrideKeys = typeof keys==="string"?[keys]: keys
+      /**这里修改自定义tab切换传的单个属性问题
+        * ft
+        * 源代码 keys.map(key => keysRecord[key])
+        * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys   overrideKeys.map(key => keysRecord[key])
+        */
+      const overrideKeys = typeof keys === "string" ? [keys] : keys
 
       if (entityId) {
         const keysRecord = Reflect.get(this.connectionPool, entityId)
         const needUpdateComponents = overrideKeys.map(key => keysRecord[key])
-        const ids = needUpdateComponents
+        const ids: string[] = needUpdateComponents
           .reduce((prev, next) => [...prev, ...next], [])
           .map((item: KeyBoundComponentList) => item.componentId)
         return [...new Set(ids)]
@@ -217,7 +219,7 @@ export const useSocketStore = defineStore({
         * 源代码 keys as unknown as string[]
         * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys   overrideKeys as unknown as string[]
       */
-      const overrideKeys = typeof keys==="string"?[keys]: keys
+      const overrideKeys = typeof keys === "string" ? [keys] : keys
 
       const targetComponentBindKeys = overrideKeys as unknown as string[]
       //ft
@@ -261,6 +263,12 @@ export const useSocketStore = defineStore({
       const keys = Object.keys(data)
       const componentIds = this.getNeedUpdateComponentsIdBySubscribeId(subscriptionId, keys)
       componentIds?.forEach((targetComponentId) => {
+        const fn = this.componentUpdateFnPool[targetComponentId]
+        try {
+          fn?.(value)
+        } catch (error) {
+          throw `componentIds: ${componentIds} call update function happend error!`
+        }
         this.updateComponentById(targetComponentId as string, value)
       })
     },

@@ -115,7 +115,6 @@ watch(
     }
     setSelectOptions(packages.categorys)
     byKeyhideAside(hideAsideComponentsObj, packages.categorys)
-    console.log(packages.categorys)
     // 默认选中处理
     selectValue.value = packages.menuOptions[0]['key']
   },