aldehyde 0.2.454 → 0.2.455

package/src/aldehyde/layout/menu/message-bar.less

@@ -1,6 +1,7 @@
 .ripple-dot .ant-badge-count {
     overflow: revert;
     box-shadow: none;
+    padding: 0 4px;
 
     .ant-scroll-number-only {
         display: flex;
@@ -13,6 +14,10 @@
         height: 100%;
         line-height: 12px;
     }
+
+    bdi {
+        display: flex;
+    }
 }
 
 .ripple-dot .ant-badge-count::before {

package/src/aldehyde/lowcode-components/bar-chart/index.tsx

@@ -125,6 +125,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -135,6 +144,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/base-image/index.tsx

@@ -107,6 +107,14 @@ const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: Forw
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            handleDataImgSrc(value);
+        }
+    }
+
     useEffect(() => {
         if (props) {
             handleDefImgSrc(props.style || {});
@@ -121,6 +129,7 @@ const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: Forw
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
             handleInitData(newDataConfig);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/base-map/index.tsx

@@ -130,6 +130,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -139,6 +148,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/capsule-bar-chart/index.tsx

@@ -143,6 +143,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -153,6 +162,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/carousel/index.tsx

@@ -126,6 +126,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { config, value } = val.initData;
+            const temVal = handleData(value);
+            const ossConfig = getOssConfig(config?.serverKey || defServerKey);
+            setData(temVal.map((r) => handleValue(r, ossConfig)).flat().filter(Boolean));
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => { // 组件更新配置
             const { base, style, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -135,6 +145,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/circular-progress-chart/index.tsx

@@ -128,6 +128,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = value?.[0]?.value?.[0]?.v1 || 0;
+            setData(temData * 100);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -138,6 +147,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/column-3d-chart/index.tsx

@@ -179,6 +179,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -189,6 +198,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/column-chart/index.tsx

@@ -148,6 +148,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -158,6 +168,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/data-number/index.tsx

@@ -110,6 +110,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { config, value } = val.wsData;
+            const temData = handleData(value, config?.defaultValue);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({ // 暴露到外部func
         updateConfig: (newConfig) => { // 组件更新配置
             const { style: { defaultValue, enume: newEnume, ...style }, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -120,6 +129,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy
     }));

package/src/aldehyde/lowcode-components/data.d.ts

@@ -8,6 +8,7 @@ export interface DataConfigProps {
     searchParams?: { [key: string]: any };
     isInitParams?: boolean;
     isDefRequest?: boolean;
+    wsData?: any;
 }
 
 export interface OssConfig {

package/src/aldehyde/lowcode-components/effectScatter-map/index.tsx

@@ -156,6 +156,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -165,6 +174,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/effectScatter-map-3d/index.tsx

@@ -238,6 +238,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -247,6 +256,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/gauge-chart/index.tsx

@@ -90,6 +90,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -100,6 +109,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/line-bar-chart/index.tsx

@@ -141,6 +141,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const { nullSetZero } = config || {};
+            const temData = handleData(value, nullSetZero);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -151,6 +161,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/line-chart/index.tsx

@@ -136,6 +136,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const { nullSetZero } = config || {};
+            const temData = handleData(value, nullSetZero);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -146,6 +156,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/liquid-chart/index.tsx

@@ -106,6 +106,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -116,6 +125,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts

@@ -1,13 +1,13 @@
 import AbstractController from "./abstract-controller";
 import React, { ComponentType } from "react";
-import AbstractDesignerController from "./abstract-designer-controller";
+import ComponentController from "./component-controller";
 
 export type ClazzTemplate<C> = new () => C | null;
 
 export interface ActionInfo {
     name: string;
     id: string;
-    handler: (controller: AbstractDesignerController, params?: any) => void;
+    handler: (controller: ComponentController, params?: any) => void;
 }
 
 export interface ICategorize {

package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx

@@ -1,12 +1,12 @@
 import React, { memo, Suspense, useEffect, useRef, useState, useContext } from "react";
 import Loading from "./loading";
 import { ILayerItem, LayerManagerDataType } from "../interface";
-import AbstractDesignerController from "./abstract-designer-controller";
+import ComponentController from "./component-controller";
 import abstractDesignerLoader from "./abstract-designer-loader";
 import { useNavigate } from "react-router-dom";
 import { ControllerContext } from "../index";
 
-const registerProxy = (compId: string, controller: AbstractDesignerController) => {
+const registerProxy = (compId: string, controller: ComponentController) => {
     controller.changeData = new Proxy(controller.changeData, {
         apply(target, thisArg, argus) {
             return target.apply(thisArg, argus as any);
@@ -22,7 +22,7 @@ export interface ComponentContainerProps {
 const ComponentContainer = memo((props: ComponentContainerProps) => {
     const { layer, layerManager } = props;
     const ref = useRef(null);
-    const [compController, setCompController] = useState<{ [key: string]: AbstractDesignerController }>({});
+    const [compController, setCompController] = useState<{ [key: string]: ComponentController }>({});
     const navigate = useNavigate();
     const { setControllers, setSearchParams } = useContext(ControllerContext);
 

package/src/aldehyde/lowcode-components/lowcode-view/component/component-controller.ts

@@ -2,7 +2,8 @@ import { ComponentType, ClassType, createElement } from "react";
 import { createRoot } from "react-dom/client";
 import { message } from "antd";
 import { UpdateOptions } from "./abstract-controller";
-import AbstractDesignerController from "./abstract-designer-controller";
+import AbstractController from "./abstract-controller";
+import { ComponentBaseProps, IFilterConfigType } from "../interface";
 
 const merge = (originalData: any, newData: any): any => {
     if (!originalData && newData)
@@ -51,7 +52,7 @@ class ComponentUtil {
 }
 
 
-export class ComponentController extends AbstractDesignerController {
+export class ComponentController extends AbstractController {
 
     private componentNode: ComponentType; // 组件实例
     private componentType: string; // 组件类型
@@ -88,6 +89,9 @@ export class ComponentController extends AbstractDesignerController {
 
 
     changeData(data: any) {
+        if (!this.config) {
+            return;
+        }
         if (this.componentType === "BaseText" && typeof data !== 'string') { // 文本组件数据更新
             message.warning('数据类型错误, 基础文本仅接受字符串类型的数据: ', data);
             this.config.data.staticData = "";
@@ -108,8 +112,43 @@ export class ComponentController extends AbstractDesignerController {
             this.instance?.updateConfig(this.config);
             return;
         }
+        if (data?.type === "wsData") { // ws组件订阅数据更新
+            this.config.data.wsData = data;
+            this.instance?.updateConfig(this.config);
+            return;
+        }
         // 默认组件静态数据更新
         this.config.data.staticData = data;
         this.instance?.updateConfig(this.config);
     }
-}
+
+    // 更新组件数据
+    public loadComponentData({ type, data }: { type: string, data: any }): void {
+        switch (type) {
+            case "initData":
+                // 初始化数据加载逻辑
+                this.changeData({ ...data, type: "initData" });
+                break;
+            case "wsData": // 订阅数据更新
+                this.changeData({ ...data, type: "wsData" });
+                break;
+            default:
+                break;
+        }
+    }
+
+    // 设置滤镜效果
+    public updateFilter(filter: IFilterConfigType): void {
+        if (this.config && (this.config as ComponentBaseProps).filter)
+            (this.config as ComponentBaseProps)!.filter = filter;
+        if (!this.container)
+            return;
+        if (filter?.enable) {
+            this.container.style.filter = `blur(${filter.blur}px) brightness(${filter.brightness}) contrast(${filter.contrast}) opacity(${filter.opacity}) saturate(${filter.saturate}) hue-rotate(${filter.hueRotate}deg)`
+        } else {
+            this.container.style.filter = 'none';
+        }
+    }
+}
+
+export default ComponentController;

package/src/aldehyde/lowcode-components/lowcode-view/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useState, createContext, useMemo } from 'react'
+import React, { CSSProperties, useEffect, useState, createContext, useMemo, useRef } from 'react'
 import { useParams } from 'react-router-dom';
 import isEqual from "lodash/isEqual";
 import chunk from "lodash/chunk";
@@ -8,6 +8,7 @@ import './component/font/FontGlobal.css';
 import ScreenFit from "./component/screen-fit";
 import { LayerManagerDataType, CanvasConfig, ILayerItem } from "./interface";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
+import WebSocket from "../../tmpl/web-socket";
 import abstractDesignerLoader from "./component/abstract-designer-loader";
 import { merge } from "./component/util";
 import ProgramConfig from ".././../units";
@@ -57,6 +58,8 @@ const viewHeight = {
     v5: "calc(100vh - 88px)"
 }
 
+type DataSourceConfig = { sourceId: string, chartCode: string } & { [key: string]: any };
+
 interface Props {
     isFullScreen: boolean,
     ddpageId?: string,
@@ -76,12 +79,17 @@ const LowcodeView = (props: Props) => {
     const [controllers, setControllers] = useState<any>({});
     const [searchParams, setSearchParams] = useState<any>({}); // 全局搜索参数，用于组件间通信
     const { width, height, adaptationType, backgroundColor } = canvasConfig || {};
+    const wsRef = useRef(undefined); // 实时数据websocket连接
+    const subscribeRef = useRef(undefined); // 实时数据订阅
 
     const backgroundImage = useMemo(() => handleImgUrl(canvasConfig?.backgroundImage), [canvasConfig]);
 
     useEffect(() => {
         //加载
         abstractDesignerLoader.load();
+        return () => {
+            subscribeRef.current && subscribeRef.current.unsubscribe();
+        }
     }, []);
 
     // 获取画面数据
@@ -109,8 +117,8 @@ const LowcodeView = (props: Props) => {
         setLayerManager({ ...layerManager, layerConfigs: { ...layerConfigs, ...temObj } });
     };
 
-    // 获取初始化组件数据
-    const getInitComponentData = async () => {
+    // all(所有数据源组件)、init(初始化请求组件)
+    const handleDataSourceParams = () => {
         const { elemConfigs } = layerManager;
         const nodesIds = Object.keys(elemConfigs || {});
         // publicParams 组件公共参数
@@ -123,14 +131,23 @@ const LowcodeView = (props: Props) => {
         const dataSourceConfigs = nodesIds.reduce((total, next) => {
             const { data: item = {}, base } = elemConfigs[next] || {};
             const temParams = { ...publicParams, ...(initSearchParams?.[next] || {}) }; // 指定组件传参,指定传参可覆盖公共
-            if ((item.isInitParams || base.type === "PlaceholderComponent") && controllers[next]) {
+            if ((item.isInitParams || base.type === "PlaceholderComponent") && controllers[next]) { // 组件数据源接收外部参数，更新参数
                 controllers[next].changeData({ ...elemConfigs[next], initSearchParams: temParams, type: "initSearchParams" });
             }
-            if (item.sourceType === "sourceId" && item.sourceId && item.isInit) {
-                total.push({ sourceId: item.sourceId, chartCode: next, ...(item.isInitParams ? temParams : {}) });
+            if (item.sourceType === "sourceId" && item.sourceId) { // 整合初始化请求/ws请求参数
+                const itemConfig = { sourceId: item.sourceId, chartCode: next, ...(item.isInitParams ? temParams : {}) };
+                if (item.isInit) { // 初始化请求
+                    total.initDataSource.push(itemConfig);
+                }
+                total.allDataSource.push(itemConfig);
             }
             return total;
-        }, []);
+        }, { allDataSource: [], initDataSource: [] });
+        return dataSourceConfigs;
+    }
+
+    // 获取初始化组件数据
+    const getInitComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
         if (!dataSourceConfigs.length) return;
         const temSourceConfigs = chunk(dataSourceConfigs, 10); // 每批处理10个组件数据
         temSourceConfigs.forEach(i => {
@@ -145,12 +162,42 @@ const LowcodeView = (props: Props) => {
         })
     };
 
+    // 获取当前大屏数据源配置
+    const getCharWSConfig = async (dataSourceConfigs: DataSourceConfig[]) => {
+        if (!dataSourceConfigs.length) return;
+        const sourceIds = dataSourceConfigs.map(r => r.sourceId);
+        const res = await HcserviceV3.requestCharWSConfig(null, sourceIds);
+        const wsSourceIds = Object.keys(res?.config || {});
+        if (!wsSourceIds?.length) {
+            return;
+        }
+        return dataSourceConfigs.filter(r => wsSourceIds.includes(r.sourceId));
+    }
+
+    // 实时订阅组件数据
+    const webSocketComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
+        if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
+        const temArr = await getCharWSConfig(dataSourceConfigs);
+        if (!temArr?.length) {
+            return;
+        }
+        wsRef.current = WebSocket.getInstance("v3/kk-ws");
+        // 订阅大屏数据
+        subscribeRef.current = await wsRef.current.subscribe(`/user/queue/chart-data/${ddpageId}`, { dataSourceConfigs: JSON.stringify(temArr) }, (data) => {
+            for (const item in data) {  // 更新组件数据
+                controllers[item] && controllers[item].loadComponentData({ type: "wsData", data: data[item] || {} });
+            }
+        });
+    }
+
     useEffect(() => {
         const cKeys = Object.keys(controllers);
         const leKeys = Object.values(layerManager?.elemConfigs || {}).filter(item => item.base?.type !== "group").map(item => item.id);
         // 判断组件实例是否加载完成（组件实例是否存在且与配置数量相等）
         if (cKeys.length && cKeys.length === leKeys.length) {
-            getInitComponentData();
+            const { allDataSource, initDataSource } = handleDataSourceParams();
+            getInitComponentData(initDataSource); // 初始化请求
+            webSocketComponentData(allDataSource); // ws订阅数据
         }
     }, [controllers, initSearchParams]);
 

package/src/aldehyde/lowcode-components/pie-chart/index.tsx

@@ -174,6 +174,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -184,6 +193,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));