aldehyde 0.2.332 → 0.2.334

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx

@@ -11,17 +11,14 @@ interface ScreenFitProps {
     delay?: number,
     mode?: AdaptationType,
     scaleChange?: (xScale: number, yScale: number) => void,
-    containerStyle: {
-        width: number,
-        height: number,
-    },
 }
 
 
 export default function ScreenFit(props: ScreenFitProps) {
-    const { width, height, bodyOverflowHidden = true, delay = 500, scaleChange, containerStyle } = props
+    const { width, height, bodyOverflowHidden = true, delay = 200, scaleChange } = props
     let bodyOverflow: string
-    const elRef = useRef<HTMLDivElement>(null)
+    const elRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef(null);
     const [size, setSize] = useState({ width, height, originalHeight: 0, originalWidth: 0 })
 
     let observer: MutationObserver;
@@ -38,8 +35,8 @@ export default function ScreenFit(props: ScreenFitProps) {
 
     function updateScale() {
         // 获取真实视口尺寸
-        const currentWidth = containerStyle.width || 0;
-        const currentHeight = containerStyle.height || 0;
+        const currentWidth = canvasRef.current?.clientWidth || 0;
+        const currentHeight = canvasRef.current?.clientHeight || 0;
         // 获取大屏最终的宽高
         const realWidth = size.width || size.originalWidth;
         const realHeight = size.height || size.originalHeight;
@@ -76,7 +73,7 @@ export default function ScreenFit(props: ScreenFitProps) {
     }
 
     const onResize = debounce(() => {
-        if (!elRef.current) return;
+        if (!elRef.current && !canvasRef.current) return;
         updateSize();
         updateScale();
     }, delay)
@@ -113,7 +110,7 @@ export default function ScreenFit(props: ScreenFitProps) {
     }, [])
 
     return (
-        <div className={'react-screen-box'}>
+        <div ref={canvasRef} className={'react-screen-box'}>
             <div className={'screen-wrapper'} ref={elRef}>
                 {props.children}
             </div>

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

@@ -1,6 +1,7 @@
-import React, { CSSProperties, useEffect, useState, useRef } from 'react'
+import React, { CSSProperties, useEffect, useState, createContext } from 'react'
 import { useParams } from 'react-router-dom';
 import isEqual from "lodash/isEqual";
+import chunk from "lodash/chunk";
 import Loading from "./component/loading";
 import layerBuilder from "./component/layer-builder";
 import './component/font/FontGlobal.css';
@@ -11,6 +12,8 @@ import abstractDesignerLoader from "./component/abstract-designer-loader";
 import { merge } from "./component/util";
 import "./index.less";
 
+export const ControllerContext = createContext(null);
+
 const fromBase64 = (base64: string) => {
     const binaryString = atob(base64);
     const utf8Array = new Uint8Array(binaryString.length);
@@ -36,10 +39,10 @@ interface Props {
 const LowcodeView = (props: Props) => {
     const { isFullScreen } = props;
     const { ddpageId } = useParams();
-    const canvasRef = useRef(null);
     const [loading, setLoading] = useState<boolean>(false);
     const [layerManager, setLayerManager] = useState<LayerManagerDataType>();
     const [canvasConfig, setCanvasConfig] = useState<CanvasConfig>();
+    const [controllers, setControllers] = useState<any>({});
     const { width, height, adaptationType, backgroundColor, backgroundImage } = canvasConfig || {};
 
     useEffect(() => {
@@ -70,7 +73,40 @@ const LowcodeView = (props: Props) => {
             }
         }
         setLayerManager({ ...layerManager, layerConfigs: { ...layerConfigs, ...temObj } });
-    }
+    };
+
+    // 获取初始化组件数据
+    const getInitComponentData = async () => {
+        const { elemConfigs } = layerManager;
+        const dataSourceConfigs = Object.keys(elemConfigs || {}).reduce((total, next) => {
+            const item = elemConfigs[next]?.data || {};
+            if (item.sourceType === "sourceId" && item.sourceId && item.isInit) {
+                total.push({ sourceId: item.sourceId, chartCode: next });
+            }
+            return total;
+        }, []);
+        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] || {} });
+                    }
+                }
+            })
+        })
+    };
+
+    useEffect(() => {
+        const cKeys = Object.keys(controllers);
+        const leKeys = Object.keys(layerManager?.elemConfigs || {});
+        // 判断组件实例是否加载完成（组件实例是否存在且与配置数量相等）
+        if (cKeys.length && cKeys.length === leKeys.length) {
+            getInitComponentData();
+        }
+    }, [controllers]);
 
     useEffect(() => {
         if (layerManager?.layerConfigs) {
@@ -92,7 +128,7 @@ const LowcodeView = (props: Props) => {
             setLayerManager({});
             setCanvasConfig({});
         }
-    }, [ddpageId])
+    }, [ddpageId]);
 
     const canvasDom = () => <div style={{
         width,
@@ -108,24 +144,22 @@ const LowcodeView = (props: Props) => {
     </div>;
 
     return (
-        <div ref={canvasRef} className='lowcodeView' style={{ height: isFullScreen ? "100vh" : "calc(100vh - 121px)", ...screenFitStyleMap[adaptationType || "scale"] }}>
-            {loading || !layerManager ?
-                <Loading />
-                :
-                (adaptationType === 'none' ? canvasDom() :
-                    <ScreenFit
-                        width={width}
-                        height={height}
-                        mode={adaptationType}
-                        containerStyle={{
-                            width: canvasRef.current?.clientWidth,
-                            height: canvasRef.current?.clientHeight
-                        }}
-                    >
-                        {canvasDom()}
-                    </ScreenFit>)
-            }
-        </div>
+        <ControllerContext.Provider value={{ setControllers }}>
+            <div className='lowcodeView' style={{ height: isFullScreen ? "100vh" : "calc(100vh - 121px)", ...screenFitStyleMap[adaptationType || "scale"] }}>
+                {loading || !layerManager ?
+                    <Loading />
+                    :
+                    (adaptationType === 'none' ? canvasDom() :
+                        <ScreenFit
+                            width={width}
+                            height={height}
+                            mode={adaptationType}
+                        >
+                            {canvasDom()}
+                        </ScreenFit>)
+                }
+            </div>
+        </ControllerContext.Provider>
     );
 };
 

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

@@ -147,6 +147,18 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         chart.current && chart.current.dispose();
     };
 
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig } = newConfig;
@@ -154,6 +166,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             setSize({ width: base.width, height: base.height });
             setDataConfig(newDataConfig);
             setRenderType(newStyle?.renderer || "svg");
+            handleInitData(newDataConfig);
         },
         destroy: handleDestroy,
     }));
@@ -205,7 +218,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
      * 1、编辑态不请求数据
      */
     useEffect(() => {
-        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit) {
             getInitData();
         } else if (dataConfig?.sourceType === 'sourceId') {
             setData([]);

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

@@ -71,6 +71,12 @@ const defOption = {
     ]
 };
 
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    const temData = data?.[0]?.value?.[0]?.v1 || 0;
+    return temData;
+}
+
 export interface ComponentStyle {
     title?: { [key: string]: any };
     barWidth?: number;
@@ -114,6 +120,18 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         chart.current && chart.current.dispose();
     };
 
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig } = newConfig;
@@ -121,6 +139,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             setSize({ width: base.width, height: base.height });
             setDataConfig(newDataConfig);
             setRenderType(newStyle?.renderer || "svg");
+            handleInitData(newDataConfig);
         },
         destroy: handleDestroy,
     }));
@@ -146,7 +165,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const getData = async () => {
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId) || {};
         const { config, value } = data || {};
-        const temData = value?.[0]?.value?.[0]?.v1 || 0;
+        const temData = handleData(value);
         setData(temData);
         return config;
     };
@@ -173,7 +192,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
      * 1、编辑态不请求数据
      */
     useEffect(() => {
-        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit) {
             getInitData();
         } else if (dataConfig?.sourceType === 'sourceId') {
             setData(0);

package/src/aldehyde/lowcode-components/stroke-animation/index.tsx

@@ -4,6 +4,12 @@ import _ from 'lodash';
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    const temData = data?.[0]?.value?.[0]?.v1;
+    return temData;
+}
+
 export interface ComponentStyle {
     fontSize?: number;
     fontWeight?: number;
@@ -42,12 +48,25 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         chart.current && chart.current.dispose();
     };
 
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig } = newConfig;
             setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
             setDataConfig(newDataConfig);
+            handleInitData(newDataConfig);
         },
         destroy: handleDestroy,
     }));
@@ -69,7 +88,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const getData = async () => {
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId) || {};
         const { config, value } = data || {};
-        const temData = value?.[0]?.value?.[0]?.v1;
+        const temData = handleData(value);
         setData(temData);
         return config;
     };
@@ -96,7 +115,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
      * 1、编辑态不请求数据
      */
     useEffect(() => {
-        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit) {
             getInitData();
         } else if (dataConfig?.sourceType === 'sourceId') {
             setData("关键帧描边动画");

package/src/aldehyde/lowcode-components/text-scroller/index.tsx

@@ -4,6 +4,12 @@ import _ from "lodash";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    const temData = data?.[0]?.value?.[0]?.v1;
+    return temData;
+}
+
 export interface ComponentStyle {
     speed?: number;
     fontSize?: number;
@@ -40,12 +46,25 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
     };
 
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { style: newStyle, data: newDataConfig } = newConfig;
             setConfig({ ...(newStyle || {}) });
             setSpeed(newStyle?.speed || 5);
             setDataConfig({ ...newDataConfig });
+            handleInitData(newDataConfig);
         },
         destroy: handleDestroy,
     }));
@@ -76,7 +95,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const getData = async () => {
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId) || {};
         const { config, value } = data || {};
-        const temData = value?.[0]?.value?.[0]?.v1;
+        const temData = handleData(value);
         setData(temData);
         return config;
     };
@@ -103,7 +122,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
      * 1、编辑态不请求数据
      */
     useEffect(() => {
-        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit) {
             getInitData();
         } else if (dataConfig?.sourceType === 'sourceId') {
             setData("文本跑马灯");