aldehyde 0.2.420 → 0.2.422

package/src/aldehyde/layout3/sider.tsx

@@ -10,13 +10,14 @@ import { useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import IconFont from "../layout2/components/icon-font";
-import { UserInfo } from "../tmpl/interface";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
 import Units from "../units";
 import "./css/sider.less"
 
 type SiderPropsType = {
   menuList: MenuType[];
   collapsed: boolean;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -42,7 +43,7 @@ const getSecoundFloorMenuList = (
   return secoundFloorMenuList;
 };
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
@@ -75,7 +76,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
-      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
       if (disabled)
         return (
           <div

package/src/aldehyde/layout4/header.tsx

@@ -16,6 +16,7 @@ import headerBgImg from "./imgs/header-bg.png";
 import menuItemBgImg from "./imgs/menu-item-bg.png";
 import userImg from "./imgs/user.png";
 import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/header.less";
 
 // 查找当前选中菜单的顶层菜单id
@@ -49,11 +50,12 @@ type HeaderPropsType = {
   menuList: MenuType[];
   style?: any;
   logoImg?: string;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
 
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) => {
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const [menu, setMenu] = useState<MenuItem[]>([]);
@@ -77,7 +79,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
 
   const renderMenuItem = (menuItem) => {
     const { label, id, disabled, icon } = menuItem;
-    const renderIcon = icon ? <IconFont type={icon} className="menu-icon" /> : "";
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} className="menu-icon" /> : "";
     return <div className={`menu-item ${disabled ? "menu-disabled" : ""} ${selParentId === id ? "menu-item-selected" : ""}`} style={{ backgroundImage: selParentId === id ? `url(${menuItemBgImg})` : undefined }}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div>;
   }
 
@@ -86,7 +88,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
     if (disabled) {
       return renderMenuItem(menuItem);
     }
-    const renderIcon = icon ? <IconFont type={icon} /> : "";
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
     const { path, target } = getLeftMostRouteInfo(menuItem);
     if (floor === 0) {
       return path === null ? (
@@ -171,7 +173,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
               style={toolbarStyle}
             /> */}
             <div className="header-user">
-              <UserButton logoutUrl="/login4" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
+              <UserButton themeConfig={themeConfig} layoutRootPath="v4" logoutUrl="/login4" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
             </div>
           </Space>
         </div>

package/src/aldehyde/layout4/page.tsx

@@ -14,6 +14,7 @@ import { useLocale } from "../locale/useLocale";
 import { KeepAliveTab } from "../hooks/use-tabs";
 import { getMenuConfig } from "../layout2/page";
 import homePng from "./imgs/home.png";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/main.less";
 
 const { useToken } = theme;
@@ -27,6 +28,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { logo } = props;
   const [systemName, setSystemName] = useState("");
   const [systemLogo, setSystemLogo] = useState("");
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const [menu, setMenu] = useState<MenuType[]>([]);
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
   //清空缓存
@@ -36,12 +38,13 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { token: { colorPrimary } } = useToken();
 
   const getThemeConfigAndMenuConfig = async () => {
-    const themeConfig = await Units.getThemeConfig();
+    const tConfig = await Units.getThemeConfig();
     const menuConfig = await getMenuConfig("v4");
-    setSystemName(themeConfig?.programName || menuConfig?.systemName);
-    setSystemLogo(themeConfig?.programIcon || homePng);
+    setSystemName(tConfig?.programName || menuConfig?.systemName);
+    setSystemLogo(tConfig?.programIcon || homePng);
     setMenu(menuConfig?.menu);
     updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+    setThemeConfig(tConfig);
   };
 
   useEffect(() => {
@@ -84,9 +87,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           card={{ className: "v4-antd-card" }}
         >
           <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Header logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
+            <Header themeConfig={themeConfig} logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
             <Layout>
-              <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+              <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
               <Main>{props.children}</Main>
             </Layout>
           </Layout>

package/src/aldehyde/layout4/sider.tsx

@@ -10,13 +10,14 @@ import { useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import IconFont from "../layout2/components/icon-font";
-import { UserInfo } from "../tmpl/interface";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
 import Units from "../units";
 import "./css/sider.less"
 
 type SiderPropsType = {
   menuList: MenuType[];
   collapsed: boolean;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -44,7 +45,7 @@ const getSecoundFloorMenuList = (
 
 const { useToken } = theme;
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
@@ -78,7 +79,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
-      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
       if (disabled)
         return (
           <div

package/src/aldehyde/layout5/header.tsx

@@ -13,6 +13,7 @@ import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
 import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/header.less";
 
 const { useToken } = theme;
@@ -43,10 +44,11 @@ const findPathToRoot = (menus, targetId) => {
 
 type HeaderPropsType = {
   menuList: MenuType[];
+  themeConfig?: ThemeConfig;
 };
 type MenuItem = Required<MenuProps>["items"][number];
 
-const Header: React.FC<HeaderPropsType> = ({ menuList }) => {
+const Header: React.FC<HeaderPropsType> = ({ menuList, themeConfig }) => {
   const { token: { colorPrimary } } = useToken();
   const { translate, getLocale } = useLocale();
   const { changeSiderCollapsed, getSiderCollapsed } = useLocale();
@@ -189,7 +191,7 @@ const Header: React.FC<HeaderPropsType> = ({ menuList }) => {
           type="link"
           style={toolbarStyle}
         /> */}
-        <UserButton logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
+        <UserButton themeConfig={themeConfig} layoutRootPath="v5" logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
       </Space>
     </Layout.Header>
   );

package/src/aldehyde/layout5/page.tsx

@@ -13,6 +13,7 @@ import Units from '../units';
 import { useLocale } from "../locale/useLocale";
 import { KeepAliveTab } from "../hooks/use-tabs";
 import { getMenuConfig } from "../layout2/page";
+import { ThemeConfig } from "../tmpl/interface";
 import homePng from "./imgs/home.png";
 
 const { useToken } = theme;
@@ -26,6 +27,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { logo } = props;
   const [systemName, setSystemName] = useState("");
   const [systemLogo, setSystemLogo] = useState("");
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const [menu, setMenu] = useState<MenuType[]>([]);
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
   //清空缓存
@@ -35,12 +37,13 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { token: { colorPrimary } } = useToken();
 
   const getThemeConfigAndMenuConfig = async () => {
-    const themeConfig = await Units.getThemeConfig();
+    const tConfig = await Units.getThemeConfig();
     const menuConfig = await getMenuConfig("v5");
-    setSystemName(themeConfig?.programName || menuConfig?.systemName);
-    setSystemLogo(themeConfig?.programIcon || homePng);
+    setSystemName(tConfig?.programName || menuConfig?.systemName);
+    setSystemLogo(tConfig?.programIcon || homePng);
     setMenu(menuConfig?.menu);
     updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+    setThemeConfig(tConfig);
   };
 
   useEffect(() => {
@@ -65,9 +68,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
             algorithm: compactTheme ? [theme.compactAlgorithm] : [],
           }}>
           <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Sider logoImg={logo || systemLogo} menuList={menu} collapsed={getSiderCollapsed()} systemName={systemName ? systemName : Units.programName_NavLeft()} />
+            <Sider themeConfig={themeConfig} logoImg={logo || systemLogo} menuList={menu} collapsed={getSiderCollapsed()} systemName={systemName ? systemName : Units.programName_NavLeft()} />
             <Layout>
-              <Header menuList={menu} />
+              <Header themeConfig={themeConfig} menuList={menu} />
               <Main>{props.children}</Main>
             </Layout>
           </Layout>

package/src/aldehyde/layout5/sider.tsx

@@ -11,7 +11,7 @@ import { useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import IconFont from "../layout2/components/icon-font";
-import { UserInfo } from "../tmpl/interface";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
 import Units from "../units";
 import "./css/sider.less";
 
@@ -20,6 +20,7 @@ type SiderPropsType = {
   collapsed: boolean;
   systemName: string;
   logoImg?: string;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -47,7 +48,7 @@ const getSecoundFloorMenuList = (
 
 const { useToken } = theme;
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logoImg }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logoImg, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
@@ -82,7 +83,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logo
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
-      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
       if (disabled)
         return (
           <div

package/src/aldehyde/list/card-list/card-list-item.tsx

@@ -37,7 +37,7 @@ const Index = (props: Props) => {
             });
         }
         const value = item[itemConfig.id];
-        const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={type === "mainPicture" ? { ...itemConfig, preview: false } : itemConfig} />;
+        const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={type === "mainPicture" ? { ...itemConfig, isFallback: true, preview: false } : itemConfig} />;
         const title = itemConfig.title;
         return { element, value, title };
     }

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

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -79,7 +80,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -99,6 +100,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -155,7 +157,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -238,7 +242,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

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

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import ProgramConfig from "../../units";
 import chinaJson from "../assets/china.json";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
@@ -87,7 +88,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -106,6 +107,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, value: number[] }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -157,7 +159,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         setData(handleData(value));
         return config;
@@ -267,7 +271,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

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

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -97,7 +98,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -117,6 +118,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -173,7 +175,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -260,7 +264,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

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

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -84,7 +85,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -104,6 +105,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<number>(0);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -160,7 +162,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = value?.[0]?.value?.[0]?.v1 || 0;
         setData(temData * 100);
@@ -238,7 +242,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

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

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -133,7 +134,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number, type: string },
+    base: { width: number, height: number, type: string };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -153,6 +154,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -212,7 +214,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -407,7 +411,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

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

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -101,7 +102,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number, type: string },
+    base: { width: number, height: number, type: string };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -121,6 +122,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -177,7 +179,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -261,7 +265,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

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

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import ProgramConfig from "../../units";
 import chinaJson from "../assets/china.json";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
@@ -113,7 +114,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -132,6 +133,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, value: number[] }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -183,7 +185,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         setData(handleData(value));
         return config;
@@ -290,7 +294,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;