aldehyde 0.2.496 → 0.2.498

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

@@ -1,280 +1,280 @@
-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";
-import { Spin } from "antd";
-import layerBuilder from "./component/layer-builder";
-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";
-import { useLocale } from "../../index";
-import "./index.less";
-
-export const ControllerContext = createContext(null);
-
-// 处理背景图片地址
-const handleImgUrl = (basePath: string) => {
-    if (!basePath) {
-        return "";
-    }
-    if (basePath.startsWith("http")) {
-        return basePath;
-    }
-    const url = encodeURI(ProgramConfig.joinPath(
-        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
-        basePath
-    )) +
-        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
-    return url;
-}
-
-const fromBase64 = (base64: string) => {
-    const binaryString = atob(base64);
-    const utf8Array = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-        utf8Array[i] = binaryString.charCodeAt(i);
-    }
-    return new TextDecoder().decode(utf8Array);
-}
-
-
-const screenFitStyleMap: Record<string, CSSProperties> = {
-    "none": { overflow: "auto" },
-    'scale': { overflow: 'hidden' },
-    'full-screen': { overflow: 'hidden' },
-    'full-x': { overflow: 'hidden scroll' },
-    'full-y': { overflow: 'scroll hidden' }
-}
-
-// 非全屏-不同风格的页面高度
-const viewHeight = {
-    v2: "calc(100vh - 121px)",
-    v3: "calc(100vh - 230px)",
-    v4: "calc(100vh - 153px)",
-    v5: "calc(100vh - 88px)"
-}
-
-type DataSourceConfig = { sourceId: string, chartCode: string } & { [key: string]: any };
-
-interface Props {
-    isFullScreen: boolean,
-    ddpageId?: string,
-    layoutRootPath?: string,
-    // 组件数据源初始化查询参数；公共参数、指定组件参数：例：{公共参数key:value,指定组件Id(大屏编辑页获取):{参数key:value}}
-    initSearchParams?: { [key: string]: any },
-    style?: CSSProperties,
-    refresh?: boolean, // 刷新
-}
-
-const LowcodeView = (props: Props) => {
-    const { isFullScreen, layoutRootPath, ddpageId: propsDdpageId, initSearchParams, style = {}, refresh } = props;
-    const { ddpageId: urlDdpageId } = useParams();
-    const ddpageId = propsDdpageId || urlDdpageId;
-    const [loading, setLoading] = useState<boolean>(false);
-    const [layerManager, setLayerManager] = useState<LayerManagerDataType>();
-    const [canvasConfig, setCanvasConfig] = useState<CanvasConfig>();
-    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 { translate } = useLocale();
-
-    const backgroundImage = useMemo(() => handleImgUrl(canvasConfig?.backgroundImage), [canvasConfig]);
-
-    useEffect(() => {
-        //加载
-        abstractDesignerLoader.load();
-        return () => {
-            subscribeRef.current && subscribeRef.current.unsubscribe();
-        }
-    }, []);
-
-    // 获取画面数据
-    const getViewData = async () => {
-        setLoading(true);
-        const { entity } = await HcserviceV3.requestDDpageData(ddpageId);
-        const data = entity?.fieldMap || {};
-        const { layerManager, canvasManager } = data["内容"] ? JSON.parse(fromBase64(data["内容"]) || '{}') : {};
-        setLayerManager(layerManager);
-        setCanvasConfig(canvasManager);
-        setLoading(false);
-    }
-
-    // 更新画面，显隐
-    const updateLayer = (items: ILayerItem[]) => {
-        const { layerConfigs } = layerManager;
-        const temObj = {}
-        for (const item of items) {
-            const oldItem = layerConfigs[item.id + ""];
-            if (!isEqual(oldItem, item)) {
-                const temData = { ...merge(oldItem, item) };
-                temObj[item.id + ""] = temData;
-            }
-        }
-        setLayerManager({ ...layerManager, layerConfigs: { ...layerConfigs, ...temObj } });
-    };
-
-    // all(所有数据源组件)、init(初始化请求组件)
-    const handleDataSourceParams = () => {
-        const { elemConfigs } = layerManager;
-        const nodesIds = Object.keys(elemConfigs || {});
-        // publicParams 组件公共参数
-        const publicParams = Object.keys(initSearchParams || {}).reduce((total, next) => {
-            if (!nodesIds.includes(next)) {
-                total[next] = initSearchParams[next];
-            }
-            return total;
-        }, {});
-        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]) { // 组件数据源接收外部参数，更新参数
-                controllers[next].changeData({ ...elemConfigs[next], initSearchParams: temParams, type: "initSearchParams" });
-            }
-            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 => {
-            HcserviceV3.requestCharMultitData(null, JSON.stringify(i)).then(rs => {
-                const { status, ...data } = rs || {};
-                if (status === "success") {
-                    for (const item in data) {  // 更新组件数据
-                        controllers[item] && controllers[item].loadComponentData({ type: "initData", data: data[item] || {} });
-                    }
-                }
-            })
-        })
-    };
-
-    // 获取当前大屏数据源配置
-    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) {
-            const { allDataSource, initDataSource } = handleDataSourceParams();
-            getInitComponentData(initDataSource); // 初始化请求
-            webSocketComponentData(allDataSource); // ws订阅数据
-        }
-    }, [controllers, initSearchParams]);
-
-    useEffect(() => {
-        if (layerManager?.layerConfigs) {
-            // @ts-ignore
-            window.LC_VIEW = {
-                layerManager: { ...layerManager, updateLayer }
-            }
-        }
-        return () => {
-            // @ts-ignore
-            window.LC_VIEW = undefined;
-        }
-    }, [layerManager]);
-
-    useEffect(() => {
-        if (ddpageId) {
-            getViewData();
-        } else {
-            setLayerManager({});
-            setCanvasConfig({});
-        }
-    }, [ddpageId, refresh]);
-
-    // 搜索参数变化时，更新组件数据
-    useEffect(() => {
-        for (const key in searchParams) {
-            if (controllers[key]) {
-                controllers[key].changeData({ type: "searchParams", searchParams: searchParams[key] });
-            }
-        }
-    }, [controllers, searchParams])
-
-    const canvasDom = () => <div style={{
-        width,
-        height,
-        background: backgroundColor,
-        backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
-        backgroundSize: "100% 100%",
-        backgroundRepeat: 'no-repeat',
-        overflow: 'hidden',
-        position: "relative"
-    }}>
-        {layerBuilder.buildCanvasComponents(layerManager)}
-    </div>;
-
-    return (
-        <ControllerContext.Provider value={{ setControllers, setSearchParams }}>
-            <div className='lowcodeView' style={{
-                height: isFullScreen ? "100vh" : viewHeight[layoutRootPath || "v2"], ...screenFitStyleMap[adaptationType || "scale"],
-                background: backgroundColor,
-                backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
-                backgroundSize: "100% 100%",
-                backgroundRepeat: 'no-repeat',
-                ...style,
-            }}>
-                {loading || !layerManager ?
-                    <div style={{ width: "100%", textAlign: "center", padding: "24px 0" }}>
-                        <Spin spinning={true} description={translate("${加载中}...")} />
-                    </div>
-                    :
-                    (adaptationType === 'none' ? canvasDom() :
-                        <ScreenFit
-                            width={width}
-                            height={height}
-                            mode={adaptationType}
-                        >
-                            {canvasDom()}
-                        </ScreenFit>)
-                }
-            </div>
-        </ControllerContext.Provider>
-    );
-};
-
+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";
+import { Spin } from "antd";
+import layerBuilder from "./component/layer-builder";
+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";
+import { useLocale } from "../../index";
+import "./index.less";
+
+export const ControllerContext = createContext(null);
+
+// 处理背景图片地址
+const handleImgUrl = (basePath: string) => {
+    if (!basePath) {
+        return "";
+    }
+    if (basePath.startsWith("http")) {
+        return basePath;
+    }
+    const url = encodeURI(ProgramConfig.joinPath(
+        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+        basePath
+    )) +
+        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
+    return url;
+}
+
+const fromBase64 = (base64: string) => {
+    const binaryString = atob(base64);
+    const utf8Array = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        utf8Array[i] = binaryString.charCodeAt(i);
+    }
+    return new TextDecoder().decode(utf8Array);
+}
+
+
+const screenFitStyleMap: Record<string, CSSProperties> = {
+    "none": { overflow: "auto" },
+    'scale': { overflow: 'hidden' },
+    'full-screen': { overflow: 'hidden' },
+    'full-x': { overflow: 'hidden scroll' },
+    'full-y': { overflow: 'scroll hidden' }
+}
+
+// 非全屏-不同风格的页面高度
+const viewHeight = {
+    v2: "calc(100vh - 121px)",
+    v3: "calc(100vh - 230px)",
+    v4: "calc(100vh - 153px)",
+    v5: "calc(100vh - 88px)"
+}
+
+type DataSourceConfig = { sourceId: string, chartCode: string } & { [key: string]: any };
+
+interface Props {
+    isFullScreen: boolean,
+    ddpageId?: string,
+    layoutRootPath?: string,
+    // 组件数据源初始化查询参数；公共参数、指定组件参数：例：{公共参数key:value,指定组件Id(大屏编辑页获取):{参数key:value}}
+    initSearchParams?: { [key: string]: any },
+    style?: CSSProperties,
+    refresh?: boolean, // 刷新
+}
+
+const LowcodeView = (props: Props) => {
+    const { isFullScreen, layoutRootPath, ddpageId: propsDdpageId, initSearchParams, style = {}, refresh } = props;
+    const { ddpageId: urlDdpageId } = useParams();
+    const ddpageId = propsDdpageId || urlDdpageId;
+    const [loading, setLoading] = useState<boolean>(false);
+    const [layerManager, setLayerManager] = useState<LayerManagerDataType>();
+    const [canvasConfig, setCanvasConfig] = useState<CanvasConfig>();
+    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 { translate } = useLocale();
+
+    const backgroundImage = useMemo(() => handleImgUrl(canvasConfig?.backgroundImage), [canvasConfig]);
+
+    useEffect(() => {
+        //加载
+        abstractDesignerLoader.load();
+        return () => {
+            subscribeRef.current && subscribeRef.current.unsubscribe();
+        }
+    }, []);
+
+    // 获取画面数据
+    const getViewData = async () => {
+        setLoading(true);
+        const { entity } = await HcserviceV3.requestDDpageData(ddpageId);
+        const data = entity?.fieldMap || {};
+        const { layerManager, canvasManager } = data["内容"] ? JSON.parse(fromBase64(data["内容"]) || '{}') : {};
+        setLayerManager(layerManager);
+        setCanvasConfig(canvasManager);
+        setLoading(false);
+    }
+
+    // 更新画面，显隐
+    const updateLayer = (items: ILayerItem[]) => {
+        const { layerConfigs } = layerManager;
+        const temObj = {}
+        for (const item of items) {
+            const oldItem = layerConfigs[item.id + ""];
+            if (!isEqual(oldItem, item)) {
+                const temData = { ...merge(oldItem, item) };
+                temObj[item.id + ""] = temData;
+            }
+        }
+        setLayerManager({ ...layerManager, layerConfigs: { ...layerConfigs, ...temObj } });
+    };
+
+    // all(所有数据源组件)、init(初始化请求组件)
+    const handleDataSourceParams = () => {
+        const { elemConfigs } = layerManager;
+        const nodesIds = Object.keys(elemConfigs || {});
+        // publicParams 组件公共参数
+        const publicParams = Object.keys(initSearchParams || {}).reduce((total, next) => {
+            if (!nodesIds.includes(next)) {
+                total[next] = initSearchParams[next];
+            }
+            return total;
+        }, {});
+        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]) { // 组件数据源接收外部参数，更新参数
+                controllers[next].changeData({ ...elemConfigs[next], initSearchParams: temParams, type: "initSearchParams" });
+            }
+            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 => {
+            HcserviceV3.requestCharMultitData(null, JSON.stringify(i)).then(rs => {
+                const { status, ...data } = rs || {};
+                if (status === "success") {
+                    for (const item in data) {  // 更新组件数据
+                        controllers[item] && controllers[item].loadComponentData({ type: "initData", data: data[item] || {} });
+                    }
+                }
+            })
+        })
+    };
+
+    // 获取当前大屏数据源配置
+    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) {
+            const { allDataSource, initDataSource } = handleDataSourceParams();
+            getInitComponentData(initDataSource); // 初始化请求
+            webSocketComponentData(allDataSource); // ws订阅数据
+        }
+    }, [controllers, initSearchParams]);
+
+    useEffect(() => {
+        if (layerManager?.layerConfigs) {
+            // @ts-ignore
+            window.LC_VIEW = {
+                layerManager: { ...layerManager, updateLayer }
+            }
+        }
+        return () => {
+            // @ts-ignore
+            window.LC_VIEW = undefined;
+        }
+    }, [layerManager]);
+
+    useEffect(() => {
+        if (ddpageId) {
+            getViewData();
+        } else {
+            setLayerManager({});
+            setCanvasConfig({});
+        }
+    }, [ddpageId, refresh]);
+
+    // 搜索参数变化时，更新组件数据
+    useEffect(() => {
+        for (const key in searchParams) {
+            if (controllers[key]) {
+                controllers[key].changeData({ type: "searchParams", searchParams: searchParams[key] });
+            }
+        }
+    }, [controllers, searchParams])
+
+    const canvasDom = () => <div style={{
+        width,
+        height,
+        background: backgroundColor,
+        backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
+        backgroundSize: "100% 100%",
+        backgroundRepeat: 'no-repeat',
+        overflow: 'hidden',
+        position: "relative"
+    }}>
+        {layerBuilder.buildCanvasComponents(layerManager)}
+    </div>;
+
+    return (
+        <ControllerContext.Provider value={{ setControllers, setSearchParams }}>
+            <div className='lowcodeView' style={{
+                height: isFullScreen ? "100vh" : viewHeight[layoutRootPath || "v2"], ...screenFitStyleMap[adaptationType || "scale"],
+                background: backgroundColor,
+                backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
+                backgroundSize: "100% 100%",
+                backgroundRepeat: 'no-repeat',
+                ...style,
+            }}>
+                {loading || !layerManager ?
+                    <div style={{ width: "100%", textAlign: "center", padding: "24px 0" }}>
+                        <Spin spinning={true} description={translate("${加载中}...")} />
+                    </div>
+                    :
+                    (adaptationType === 'none' ? canvasDom() :
+                        <ScreenFit
+                            width={width}
+                            height={height}
+                            mode={adaptationType}
+                        >
+                            {canvasDom()}
+                        </ScreenFit>)
+                }
+            </div>
+        </ControllerContext.Provider>
+    );
+};
+
 export default LowcodeView;