aldehyde 0.2.421 → 0.2.422

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;

package/src/aldehyde/lowcode-components/effectScatter-map-3d/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";
@@ -195,7 +196,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
@@ -214,6 +215,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);
@@ -279,7 +281,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;
@@ -394,7 +398,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/gauge-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";
 
@@ -46,7 +47,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
@@ -66,6 +67,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);
@@ -121,7 +123,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);
@@ -227,7 +231,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/line-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";
 
@@ -92,7 +93,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
@@ -112,6 +113,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);
@@ -167,7 +169,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);
@@ -264,7 +268,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/line-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";
 
@@ -86,7 +87,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, 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);
@@ -161,7 +163,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);
@@ -253,7 +257,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/liquid-chart/index.tsx

@@ -2,6 +2,7 @@ import * as echarts from 'echarts';
 import 'echarts-liquidfill';
 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";
 
@@ -62,7 +63,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
@@ -82,6 +83,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);
@@ -137,7 +139,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);
@@ -225,7 +229,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/lowcode-view/index.less

@@ -4,6 +4,13 @@
     /* IE和Edge */
     scrollbar-width: none;
     /* Firefox */
+
+    .ant-spin-nested-loading,
+    .ant-spin-container {
+        width: 100%;
+        height: 100%;
+    }
+
 }
 
 .lowcodeView::-webkit-scrollbar {

package/src/aldehyde/lowcode-components/pie-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";
 
@@ -120,7 +121,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
@@ -140,6 +141,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);
@@ -195,7 +197,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);
@@ -310,7 +314,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/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";
 
@@ -93,7 +94,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
@@ -113,6 +114,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);
@@ -168,7 +170,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);
@@ -270,7 +274,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/table/act-table.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode } from "react";
 import {
   Button, Card, Checkbox, Col, Divider, Popover, Row, Space, Drawer, Tooltip,
-  message, Layout, Table, Form as AntdForm, FormInstance, Modal, Input, Alert, Tabs, Radio
+  message, Layout, Table, Form as AntdForm, FormInstance, Modal, Input, Alert, Tabs, Radio, Typography
 } from "antd";
 import {
   ExportOutlined, FundOutlined, LineChartOutlined,
   PlusCircleOutlined, PlusOutlined, ReloadOutlined, RetweetOutlined, SearchOutlined,
-  TableOutlined, ImportOutlined, SyncOutlined
+  TableOutlined, ImportOutlined
 } from "@ant-design/icons";
 import "./index.css";
 import {
@@ -38,6 +38,8 @@ import Icon from "../icon/aliIcon";
 import PageConfigButton from "./page-config-button";
 
 const { Content, Sider } = Layout;
+const { Text } = Typography;
+
 type Level = "l1" | "l2";
 
 const enumTypes = ["select", "multiselect", "texttags", "checkbox", "radio", "steps"];
@@ -1425,7 +1427,12 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
           <div style={{ width: "calc(100% - 40px)" }}>
             <p className="title">{item.fieldTitle}</p>
             <div className="value">
-              <span className="number">{item.value}</span>
+              <Text
+                style={{ maxWidth: "100%" }}
+                ellipsis={{ tooltip: item.value }}
+              >
+                <span className="number">{item.value}</span>
+              </Text>
               {dataUnit ? <span className="unit">{dataUnit}</span> : ""}
             </div>
           </div>

package/src/aldehyde/table/column/column-builder.tsx

@@ -427,31 +427,24 @@ export default {
 
         let actionButtons: any[] = [];
 
-        if (buttons.includes("detail") &&
-            showView &&
-            ActionUtils.isShow(
-                ltmplConfig.buttonViewAction?.preposes,
-                [record],
-                undefined
-            )) {
-            actionButtons.push(<ViewButton
-                showView={showView}
-                data={record}
-                ltmplConfig={ltmplConfig}></ViewButton>);
-        }
-        if (buttons.includes("customDetail") &&
-            showView &&
-            ActionUtils.isShow(
-                ltmplConfig.buttonViewAction?.preposes,
-                [record],
-                undefined
-            )) {
+        const isShowDetail = buttons.includes("detail") && showView && ActionUtils.isShow(ltmplConfig.buttonViewAction?.preposes, [record], undefined);
+        const isShowCustomDetail = buttons.includes("customDetail") && showView && ActionUtils.isShow(ltmplConfig.buttonViewAction?.preposes, [record], undefined);
+
+        if (isShowCustomDetail) { // 自定义详情
             actionButtons.push(<Button
                 size="small"
                 type="primary"
                 icon={<AlignLeftOutlined />}
                 onClick={() => showView({ code: record.code, toCustomPage: true, })}
-            ></Button>)
+            />)
+        }
+
+        if (isShowDetail) { // 默认详情
+            actionButtons.push(<ViewButton
+                showView={showView}
+                data={record}
+                ltmplConfig={ltmplConfig}
+                buttonType={isShowCustomDetail ? "default" : "primary"} />);
         }
 
         if (buttons.includes("dtmplEdit") && doEdit && !readOnly) {

package/src/aldehyde/table/index.css

@@ -127,8 +127,6 @@
   font-size: 28px;
   line-height: 32px;
   font-weight: 700;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .aggregate-card .value .unit {