aldehyde 0.2.480 → 0.2.481

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

@@ -1,219 +1,219 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useEffect, useRef } from 'react';
-import { Carousel, Image } from 'antd';
-import HydrocarbonService from "../../tmpl/hcservice-v3";
-import { useLocale } from "../../locale/useLocale";
-import ProgramConfig from "../../units";
-import { DataConfigProps, OssConfig } from "../data";
-
-const defServerKey = "LowCodeOss";
-
-const renderEmpty = (height, translate) => <div style={{
-    color: '#9a9a9a',
-    height,
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-}}>
-    <div>{translate("${暂无数据}")}</div>
-</div>;
-
-// 处理本地图片地址
-const handleLocalImgUrl = (basePath: string) => {
-    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 handleValue = (val: string, ossConfig: OssConfig,) => {
-    if (!val) {
-        return;
-    }
-    if (val.startsWith("http")) {
-        return val;
-    }
-    let url = val;
-    if (url.includes("@R@")) {
-        url = val.split("@R@")[1];
-    }
-    try { // 处理JSON格式的URL(本地图片)
-        const values = JSON.parse(url || "{}");
-        if (values instanceof Array) {
-            return values.map((r) => handleLocalImgUrl(r.base?.path));
-        } else {
-            return handleLocalImgUrl(values.base?.path);
-        }
-    } catch {
-        if (!ossConfig) {
-            return;
-        }
-        return `http://${ossConfig.bucket}.${ossConfig.endpoint}/${val}`;
-    }
-};
-
-// 处理数据格式
-const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
-    if (!data?.length) {
-        return [];
-    }
-    const temData = data.map((item) => item.value?.map((r) => r["v1"]).filter(Boolean));
-    return temData[0] || [];
-};
-
-export interface ComponentStyle {
-    autoplay?: boolean;
-    autoplaySpeed?: number,
-    arrows?: boolean,
-    dots?: boolean,
-    dotPosition?: 'bottom' | "left" | "right" | "top",
-    draggable?: boolean,
-    fade?: boolean,
-    infinite?: boolean,
-    preview?: boolean,
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    data?: DataConfigProps;
-    isDesignMode?: boolean; // 是否编辑模式
-    base: { width: number, height: number },
-    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
-}
-
-export interface ComponentRef {
-    updateConfig: (newConfig: ComponentProps) => void;
-    destroy: () => void;
-}
-
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style, base: propsBase, data: propsData, isDesignMode } = props;
-    const [config, setConfig] = useState<ComponentStyle>(style || {});
-    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
-    const [data, setData] = useState<string[]>([]);
-    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
-    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
-    const [size, setSize] = useState<{ width: number, height: number }>(propsBase);
-    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
-    const { translate } = useLocale();
-
-    const getOssConfig = (serverKey: string) => {
-        const { accessKeyId, accessKeySecret, bucket, endpoint } = ProgramConfig.getExtendServers(serverKey) || {};
-        const temObj = { accessKeyId, accessKeySecret, bucket, endpoint }
-        return temObj;
-    }
-
-    const handleDestroy = () => {
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-    };
-
-    // 全局初始化请求数据处理
-    const handleInitData = (val: DataConfigProps) => {
-        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
-            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));
-            if (config?.requestMode === "polling") {
-                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
-            }
-        }
-    }
-
-    // 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;
-            setConfig({ ...(style || {}) });
-            setDataConfig(newDataConfig);
-            setSize({ width: base.width, height: base.height });
-            handleInitData(newDataConfig);
-            setSearchParams(newDataConfig.searchParams);
-            setInitSearchParams(newISParams);
-            handleWSData(newDataConfig);
-        },
-        destroy: handleDestroy,
-    }));
-
-    // 请求数据
-    const getData = async (params?: object) => {
-        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
-        const { config, value } = data || {};
-        const temVal = handleData(value);
-        const ossConfig = getOssConfig(config?.serverKey || defServerKey);
-        setData(temVal.map((r) => handleValue(r, ossConfig)).flat().filter(Boolean));
-        return config;
-    };
-
-    // 初始化请求数据
-    const getInitData = async (params?: object) => {
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-        const config = await getData(params);
-        if (config?.requestMode === "polling") {
-            pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
-        }
-    };
-
-    useEffect(() => {
-        return () => {
-            handleDestroy();
-        }
-    }, []);
-
-    // 静态数据处理
-    useEffect(() => {
-        if (dataConfig?.sourceType === 'staticData') {
-            setData(dataConfig.staticData || []);
-        }
-    }, [dataConfig?.sourceType, dataConfig?.staticData]);
-
-    /**
-     * 数据源数据请求
-     * 1、编辑态不请求数据
-     */
-    useEffect(() => {
-        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
-            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
-                initSearchParams && getInitData(initSearchParams);
-            } else {
-                getInitData();
-            }
-        } else if (dataConfig?.sourceType === 'sourceId') {
-            setData([]);
-        }
-    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
-
-    // 搜索参数变化时重新请求数据
-    useEffect(() => {
-        if (searchParams) {
-            const params = { ...(initSearchParams || {}), ...searchParams };
-            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
-                initSearchParams && getInitData(params);
-            } else {
-                getInitData(params);
-            }
-        }
-    }, [searchParams, initSearchParams]);
-
-    return <Carousel adaptiveHeight={true} {...config} autoplaySpeed={(config.autoplaySpeed || 3) * 1000}>
-        {data.length && data.map((r, index) => <div key={index}> <Image style={{ width: size.width, height: size.height }} src={r} preview={isDesignMode ? false : config.preview} /></div>)}
-        {!data.length && <div>{renderEmpty(size.height, translate)}</div>}
-    </Carousel>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useEffect, useRef } from 'react';
+import { Carousel, Image } from 'antd';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { useLocale } from "../../locale/useLocale";
+import ProgramConfig from "../../units";
+import { DataConfigProps, OssConfig } from "../data";
+
+const defServerKey = "LowCodeOss";
+
+const renderEmpty = (height, translate) => <div style={{
+    color: '#9a9a9a',
+    height,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+}}>
+    <div>{translate("${暂无数据}")}</div>
+</div>;
+
+// 处理本地图片地址
+const handleLocalImgUrl = (basePath: string) => {
+    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 handleValue = (val: string, ossConfig: OssConfig,) => {
+    if (!val) {
+        return;
+    }
+    if (val.startsWith("http")) {
+        return val;
+    }
+    let url = val;
+    if (url.includes("@R@")) {
+        url = val.split("@R@")[1];
+    }
+    try { // 处理JSON格式的URL(本地图片)
+        const values = JSON.parse(url || "{}");
+        if (values instanceof Array) {
+            return values.map((r) => handleLocalImgUrl(r.base?.path));
+        } else {
+            return handleLocalImgUrl(values.base?.path);
+        }
+    } catch {
+        if (!ossConfig) {
+            return;
+        }
+        return `http://${ossConfig.bucket}.${ossConfig.endpoint}/${val}`;
+    }
+};
+
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    if (!data?.length) {
+        return [];
+    }
+    const temData = data.map((item) => item.value?.map((r) => r["v1"]).filter(Boolean));
+    return temData[0] || [];
+};
+
+export interface ComponentStyle {
+    autoplay?: boolean;
+    autoplaySpeed?: number,
+    arrows?: boolean,
+    dots?: boolean,
+    dotPosition?: 'bottom' | "left" | "right" | "top",
+    draggable?: boolean,
+    fade?: boolean,
+    infinite?: boolean,
+    preview?: boolean,
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+    base: { width: number, height: number },
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, base: propsBase, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<string[]>([]);
+    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+    const [size, setSize] = useState<{ width: number, height: number }>(propsBase);
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const { translate } = useLocale();
+
+    const getOssConfig = (serverKey: string) => {
+        const { accessKeyId, accessKeySecret, bucket, endpoint } = ProgramConfig.getExtendServers(serverKey) || {};
+        const temObj = { accessKeyId, accessKeySecret, bucket, endpoint }
+        return temObj;
+    }
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+    };
+
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            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));
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
+    // 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;
+            setConfig({ ...(style || {}) });
+            setDataConfig(newDataConfig);
+            setSize({ width: base.width, height: base.height });
+            handleInitData(newDataConfig);
+            setSearchParams(newDataConfig.searchParams);
+            setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 请求数据
+    const getData = async (params?: object) => {
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        const { config, value } = data || {};
+        const temVal = handleData(value);
+        const ossConfig = getOssConfig(config?.serverKey || defServerKey);
+        setData(temVal.map((r) => handleValue(r, ossConfig)).flat().filter(Boolean));
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async (params?: object) => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData(params);
+        if (config?.requestMode === "polling") {
+            pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
+        }
+    };
+
+    useEffect(() => {
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            setData(dataConfig.staticData || []);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
+            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
+                initSearchParams && getInitData(initSearchParams);
+            } else {
+                getInitData();
+            }
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
+
+    // 搜索参数变化时重新请求数据
+    useEffect(() => {
+        if (searchParams) {
+            const params = { ...(initSearchParams || {}), ...searchParams };
+            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
+                initSearchParams && getInitData(params);
+            } else {
+                getInitData(params);
+            }
+        }
+    }, [searchParams, initSearchParams]);
+
+    return <Carousel adaptiveHeight={true} {...config} autoplaySpeed={(config.autoplaySpeed || 3) * 1000}>
+        {data.length && data.map((r, index) => <div key={index}> <Image style={{ width: size.width, height: size.height }} src={r} preview={isDesignMode ? false : config.preview} /></div>)}
+        {!data.length && <div>{renderEmpty(size.height, translate)}</div>}
+    </Carousel>;
+});
+
 export default Index;