aldehyde 0.2.479 → 0.2.481

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

@@ -1,221 +1,221 @@
-
-import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useState, useRef } from 'react';
-import HydrocarbonService from "../../tmpl/hcservice-v3";
-import ProgramConfig from "../../units";
-import { DataConfigProps } from "../data";
-import LowcodeConstant from "../assets/lowcode-constant";
-
-const { serverKey, sourceId } = LowcodeConstant.fileUpload;
-
-// 处理图片地址
-const handleImgUrl = (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 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]?.[0] || "";
-};
-
-export interface BaseImageComponentProps {
-    style: {
-        opacity: number,
-        type: string,
-        src: string,
-        localImgCode: string
-    },
-    data?: DataConfigProps;
-    isDesignMode?: boolean; // 是否编辑模式
-    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
-}
-
-export interface BaseCompImageonentRef {
-    updateConfig: (newConfig: BaseImageComponentProps) => void;
-}
-
-const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: ForwardedRef<BaseCompImageonentRef>) => {
-    const { data: propsData, isDesignMode } = props;
-    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
-    const [config, setConfig] = useState<{ src: string, opacity: number }>();
-    const [defImgSrc, setDefImgSrc] = useState<string>();
-    const [imgSrc, setImgSrc] = useState<string>();
-    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
-    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
-    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
-    const [localImgCode, setLocalImgCode] = useState<string>();
-    const [localImgDel, setLocalImgDel] = useState<boolean>(false);
-    const [loading, setLoading] = useState<boolean>(true);
-
-    // 处理数据源图片地址
-    const handleDataImgSrc = (val) => {
-        setLoading(false);
-        const src = handleData(val);
-        if (!src) {
-            setImgSrc("");
-            return;
-        }
-        if (src.startsWith('http')) {
-            setImgSrc(src);
-            return;
-        }
-        let text = src;
-        if (src.includes("@R@")) {
-            text = src.split("@R@")[1];
-        }
-        const basePath = JSON.parse(text || "{}").base?.path;
-        const url = handleImgUrl(basePath);
-        setImgSrc(url);
-    }
-
-    // 处理默认图片地址
-    const handleDefImgSrc = (style) => {
-        setConfig({ ...style });
-        if (style.type === 'local' && !style.src.startsWith('http')) { // 本地图片
-            const url = style.src ? handleImgUrl(style.src) : undefined;
-            setDefImgSrc(url);
-            setLocalImgCode(style.localImgCode); // 本地图片code
-        } else { // OSS图片、网络图片
-            setDefImgSrc(style.src);
-            setLocalImgCode(undefined);
-        }
-    }
-
-    const handleDestroy = () => {
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-    };
-
-    // 全局初始化请求数据处理
-    const handleInitData = (val: DataConfigProps) => {
-        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
-            const { config, value } = val.initData;
-            handleDataImgSrc(value);
-            if (config?.requestMode === "polling") {
-                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
-            }
-        }
-    }
-
-    // ws订阅数据更新
-    const handleWSData = (val: DataConfigProps) => {
-        if (val.sourceType === "sourceId" && val.wsData) {
-            const { value } = val.initData;
-            handleDataImgSrc(value);
-        }
-    }
-
-    useEffect(() => {
-        if (props) {
-            handleDefImgSrc(props.style || {});
-        }
-    }, [props]);
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            const { data: newDataConfig, initSearchParams: newISParams } = newConfig;
-            setDataConfig(newDataConfig);
-            handleDefImgSrc(newConfig.style || {});
-            setSearchParams(newDataConfig?.searchParams);
-            setInitSearchParams(newISParams);
-            handleInitData(newDataConfig);
-            handleWSData(newDataConfig);
-        },
-        destroy: handleDestroy,
-    }));
-
-    // 请求数据
-    const getData = async (params?: object) => {
-        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
-        const { config, value } = data || {};
-        handleDataImgSrc(value);
-        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();
-        }
-    }, []);
-
-    /**
-     * 数据源数据请求
-     * 1、编辑态不请求数据
-     */
-    useEffect(() => {
-        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
-            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
-                initSearchParams && getInitData(initSearchParams);
-            } else {
-                getInitData();
-            }
-        } else {
-            setImgSrc("");
-            setLoading(false);
-        }
-    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
-
-    // 搜索参数变化时重新请求数据
-    useEffect(() => {
-        if (searchParams) {
-            const params = { ...(initSearchParams || {}), ...searchParams };
-            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
-                initSearchParams && getInitData(params);
-            } else {
-                getInitData(params);
-            }
-        }
-    }, [searchParams, initSearchParams]);
-
-    //  编辑页判断本地图片是否存在
-    const handleDesignModeLocalImg = async () => {
-        const { entity } = await HydrocarbonService.requestDtmplConfig(serverKey, sourceId, localImgCode);
-        setLocalImgDel(!entity);
-    }
-
-    useEffect(() => {
-        if (isDesignMode && localImgCode) {
-            handleDesignModeLocalImg();
-        }
-    }, [localImgCode]);
-
-    // 编辑页本地图片已删除提示
-    const renderLocalImgDel = <div style={{ width: "100%", height: "100%", position: "relative" }}>
-        <div style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.5)", display: "flex", justifyContent: "center", alignItems: "center", color: "red" }}>该图片已删除，请重新上传</div>
-        <img alt={'图片组件'} style={{ opacity: config?.opacity }} width={'100%'} height={'100%'} src={imgSrc || defImgSrc} />
-    </div>;
-
-    // 无数据
-    const emptyImg = <div style={{ color: '#9a9a9a', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-        <div>请配置图片或上传图片</div>
-    </div>;
-
-    return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {(loading || !(imgSrc || defImgSrc)) ? emptyImg :
-                isDesignMode && localImgDel ? renderLocalImgDel :
-                    <img alt={'图片组件'} style={{ opacity: config?.opacity }} width={'100%'} height={'100%'} src={imgSrc || defImgSrc} />}
-        </div>
-    );
-});
-
+
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useState, useRef } from 'react';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import ProgramConfig from "../../units";
+import { DataConfigProps } from "../data";
+import LowcodeConstant from "../assets/lowcode-constant";
+
+const { serverKey, sourceId } = LowcodeConstant.fileUpload;
+
+// 处理图片地址
+const handleImgUrl = (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 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]?.[0] || "";
+};
+
+export interface BaseImageComponentProps {
+    style: {
+        opacity: number,
+        type: string,
+        src: string,
+        localImgCode: string
+    },
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+}
+
+export interface BaseCompImageonentRef {
+    updateConfig: (newConfig: BaseImageComponentProps) => void;
+}
+
+const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: ForwardedRef<BaseCompImageonentRef>) => {
+    const { data: propsData, isDesignMode } = props;
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [config, setConfig] = useState<{ src: string, opacity: number }>();
+    const [defImgSrc, setDefImgSrc] = useState<string>();
+    const [imgSrc, setImgSrc] = useState<string>();
+    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [localImgCode, setLocalImgCode] = useState<string>();
+    const [localImgDel, setLocalImgDel] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    // 处理数据源图片地址
+    const handleDataImgSrc = (val) => {
+        setLoading(false);
+        const src = handleData(val);
+        if (!src) {
+            setImgSrc("");
+            return;
+        }
+        if (src.startsWith('http')) {
+            setImgSrc(src);
+            return;
+        }
+        let text = src;
+        if (src.includes("@R@")) {
+            text = src.split("@R@")[1];
+        }
+        const basePath = JSON.parse(text || "{}").base?.path;
+        const url = handleImgUrl(basePath);
+        setImgSrc(url);
+    }
+
+    // 处理默认图片地址
+    const handleDefImgSrc = (style) => {
+        setConfig({ ...style });
+        if (style.type === 'local' && !style.src.startsWith('http')) { // 本地图片
+            const url = style.src ? handleImgUrl(style.src) : undefined;
+            setDefImgSrc(url);
+            setLocalImgCode(style.localImgCode); // 本地图片code
+        } else { // OSS图片、网络图片
+            setDefImgSrc(style.src);
+            setLocalImgCode(undefined);
+        }
+    }
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+    };
+
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            handleDataImgSrc(value);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            handleDataImgSrc(value);
+        }
+    }
+
+    useEffect(() => {
+        if (props) {
+            handleDefImgSrc(props.style || {});
+        }
+    }, [props]);
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { data: newDataConfig, initSearchParams: newISParams } = newConfig;
+            setDataConfig(newDataConfig);
+            handleDefImgSrc(newConfig.style || {});
+            setSearchParams(newDataConfig?.searchParams);
+            setInitSearchParams(newISParams);
+            handleInitData(newDataConfig);
+            handleWSData(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 请求数据
+    const getData = async (params?: object) => {
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        const { config, value } = data || {};
+        handleDataImgSrc(value);
+        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();
+        }
+    }, []);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
+            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
+                initSearchParams && getInitData(initSearchParams);
+            } else {
+                getInitData();
+            }
+        } else {
+            setImgSrc("");
+            setLoading(false);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
+
+    // 搜索参数变化时重新请求数据
+    useEffect(() => {
+        if (searchParams) {
+            const params = { ...(initSearchParams || {}), ...searchParams };
+            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
+                initSearchParams && getInitData(params);
+            } else {
+                getInitData(params);
+            }
+        }
+    }, [searchParams, initSearchParams]);
+
+    //  编辑页判断本地图片是否存在
+    const handleDesignModeLocalImg = async () => {
+        const { entity } = await HydrocarbonService.requestDtmplConfig(serverKey, sourceId, localImgCode);
+        setLocalImgDel(!entity);
+    }
+
+    useEffect(() => {
+        if (isDesignMode && localImgCode) {
+            handleDesignModeLocalImg();
+        }
+    }, [localImgCode]);
+
+    // 编辑页本地图片已删除提示
+    const renderLocalImgDel = <div style={{ width: "100%", height: "100%", position: "relative" }}>
+        <div style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.5)", display: "flex", justifyContent: "center", alignItems: "center", color: "red" }}>该图片已删除，请重新上传</div>
+        <img alt={'图片组件'} style={{ opacity: config?.opacity }} width={'100%'} height={'100%'} src={imgSrc || defImgSrc} />
+    </div>;
+
+    // 无数据
+    const emptyImg = <div style={{ color: '#9a9a9a', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <div>请配置图片或上传图片</div>
+    </div>;
+
+    return (
+        <div style={{ width: '100%', height: '100%' }}>
+            {(loading || !(imgSrc || defImgSrc)) ? emptyImg :
+                isDesignMode && localImgDel ? renderLocalImgDel :
+                    <img alt={'图片组件'} style={{ opacity: config?.opacity }} width={'100%'} height={'100%'} src={imgSrc || defImgSrc} />}
+        </div>
+    );
+});
+
 export default BaseImageComponent;