aldehyde 0.2.284 → 0.2.285

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

@@ -1,6 +1,8 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
 
 const defOption = {
     tooltip: {
@@ -13,13 +15,13 @@ const defOption = {
             progress: { show: true },
             radius: "75%",
             data: [
-                { value: 50, }
+                { value: 50 }
             ]
         }
     ],
 };
 
-export interface ChartComponentStyle {
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     radius?: number;
     startAngle?: number;
@@ -35,27 +37,42 @@ export interface ChartComponentStyle {
     center?: { x: number, y: number };
 }
 
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
-    base: { width: number, height: number }
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
 }
 
-export interface ChartComponentRef {
-    updateConfig: (newConfig: ChartComponentProps) => void;
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
 }
 
-const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartComponentRef>) => {
-    const [config, setConfig] = useState<ChartComponentStyle>(props.style || {});
-    const [size, setSize] = useState<{ width: number, height: number }>()
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<number>(0);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
 
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
-            const { base, style } = newConfig;
-            setConfig({ ...(style || {}) });
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -67,16 +84,55 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartCom
         chart.current = echarts.init(chartRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
-            chart.current.dispose();
+            handleDestroy();
         }
     }, []);
 
+
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        const temData = value?.[0]?.value?.[0]?.v1;
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestType === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            const { value } = dataConfig.staticData || {};
+            setData(value);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData(0);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
     const renderChart = () => {
         const { tooltip, radius, startAngle, endAngle, min, max, axisLine, splitLine, axisTick, axisLabel, detail, progress, center } = config;
         const temAxisLine = { ...axisLine, lineStyle: { ...axisLine?.lineStyle, color: axisLine?.lineStyle?.color?.map(r => ([r.percentage, r.color])) } };
         const option = _.cloneDeep(defOption);
         option.tooltip = { trigger: "item", ...tooltip };
+        // 编辑态数据源类型显示默认数据50
+        const temData = isDesignMode && dataConfig?.sourceType === 'sourceId' ? 50 : (data || 0);
         option.series = option.series.map((r) => ({
             ...r,
             pointer: {
@@ -95,7 +151,8 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartCom
             splitLine,
             axisTick,
             axisLabel,
-            detail
+            detail,
+            data: [{ value: temData }]
         }));
         chart.current.setOption(option, true);
     }
@@ -103,7 +160,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartCom
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

package/src/aldehyde/lowcode-components/index.ts

@@ -36,6 +36,10 @@ import Decoration8 from "./decoration/decoration8";
 import Decoration9 from "./decoration/decoration9";
 import Decoration10 from "./decoration/decoration10";
 import Decoration11 from "./decoration/decoration11";
+import BaseTable from "./base-table";
+import TextScroller from "./text-scroller";
+import CapsuleBarChart from "./capsule-bar-chart";
+import CircularProgressChart from "./circular-progress-chart";
 
 
 type CompoundedComponent = {
@@ -77,6 +81,10 @@ type CompoundedComponent = {
     Decoration9?: typeof Decoration9;
     Decoration10?: typeof Decoration10;
     Decoration11?: typeof Decoration11;
+    BaseTable?: typeof BaseTable;
+    TextScroller?: typeof TextScroller;
+    CapsuleBarChart?: typeof CapsuleBarChart;
+    CircularProgressChart?: typeof CircularProgressChart
 };
 
 const LowcodeComponents: CompoundedComponent = {
@@ -86,7 +94,8 @@ const LowcodeComponents: CompoundedComponent = {
     Border1, Border2, Border3, Border4, Border5, Border6,
     Border7, Border8, Border9, Border10, Border11, Border12, Border13,
     Decoration1, Decoration2, Decoration3, Decoration4, Decoration5,
-    Decoration6, Decoration7, Decoration8, Decoration9, Decoration10, Decoration11
+    Decoration6, Decoration7, Decoration8, Decoration9, Decoration10, Decoration11,
+    BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart
 };
 
 export default LowcodeComponents;

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

@@ -1,15 +1,23 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
-import lodash from 'lodash';
+import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
 
 const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
     tooltip: { trigger: "axis" },
     grid: { top: 30, let: 30, right: 20, bottom: 30 },
     xAxis: {
         type: 'category',
         boundaryGap: true,
         axisTick: { show: true },
-        data: ['1990', '1991', '1992', '1993', '1994', '1995', '1996'],
     },
     yAxis: {
         type: 'value'
@@ -17,7 +25,7 @@ const defOption = {
     legend: { show: false },
     series: [
         {
-            data: [525, 459, 357, 414, 234, 250, 156],
+            data: [["1990", 525], ["1991", 459], ["1992", 357], ["1993", 414], ["1994", 234], ["1995", 250], ["1996", 156]],
             type: 'line',
         }
     ]
@@ -32,9 +40,28 @@ const legends = {
     rightTop: { right: 5 },
     leftBottom: { left: 5, bottom: 0 },
     rightBottom: { right: 5, bottom: 0 },
-}
+};
+
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    if (!data?.length) {
+        return [];
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                data: value.map((v) => [v["d1"], v[r]]),
+            }))
+        };
+    });
+    return temData[0]?.data || [];
+};
 
-export interface ChartComponentStyle {
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     color?: string[];
     grid?: { top: number, let: number, right: number, bottom: number };
@@ -50,27 +77,42 @@ export interface ChartComponentStyle {
     areaStyle?: { opacity: number } // 面积图样式
 }
 
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
-    base: { width: number, height: number }
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
 }
 
-export interface BaseTextComponentRef {
-    updateConfig: (newConfig: ChartComponentProps) => void;
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
 }
 
-const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
-    const [config, setConfig] = useState<ChartComponentStyle>(props.style || {});
-    const [size, setSize] = useState<{ width: number, height: number }>()
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
 
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
-            const { base, style } = newConfig;
-            setConfig({ ...(style || {}) });
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -82,32 +124,73 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         chart.current = echarts.init(chartRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
-            chart.current.dispose();
+            handleDestroy();
         }
     }, []);
 
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestType === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            setData(handleData(dataConfig.staticData));
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
     const renderChart = () => {
         const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, areaStyle, symbol: { itemStyle, ...symbol } } = config;
-        const option = lodash.cloneDeep(defOption);
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? option.series : data;
         option.grid = grid;
         option.legend = { ...legend, ...legends[legend?.position] };
         option.tooltip = { trigger: "axis", ...tooltip };
         option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
         option.yAxis = { ...option.yAxis, ...yAxis };
-        option.series = option.series.map((r, index) => ({
-            ...r, ...symbol, step, smooth,
+        option.title.show = !temData?.length;
+        option.series = temData.map((r, index) => ({
+            type: "line",
+            ...r,
+            ...symbol, step, smooth,
             itemStyle: symbol.showSymbol ? { color: itemStyle.color[index] || color[index] } : undefined,
             lineStyle: { ...lineStyle, color: color[index] },
             areaStyle: isArea ? { ...areaStyle, color: color[index] } : undefined
         }));
         chart.current.setOption(option, true);
-    }
+    };
+
     useEffect(() => {
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

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

@@ -2,6 +2,8 @@ import * as echarts from 'echarts';
 import 'echarts-liquidfill';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
 
 const defColor = {
     type: 'linear',
@@ -39,7 +41,7 @@ const defOption = {
     ],
 };
 
-export interface ChartComponentStyle {
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     radius?: number;
     center?: { x: number, y: number };
@@ -51,27 +53,42 @@ export interface ChartComponentStyle {
     label?: { position: { x: number, y: number }, textStyle: { fontSize: number, color: string, }, [key: string]: any }
 }
 
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
-    base: { width: number, height: number }
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
 }
 
-export interface ChartComponentRef {
-    updateConfig: (newConfig: ChartComponentProps) => void;
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
 }
 
-const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartComponentRef>) => {
-    const [config, setConfig] = useState<ChartComponentStyle>(props.style || {});
-    const [size, setSize] = useState<{ width: number, height: number }>()
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<number>(0);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
 
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
-            const { base, style } = newConfig;
-            setConfig({ ...(style || {}) });
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -83,15 +100,53 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartCom
         chart.current = echarts.init(chartRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
-            chart.current.dispose();
+            handleDestroy();
         }
     }, []);
 
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        const temData = value?.[0]?.value?.[0]?.v1;
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestType === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            const { value } = dataConfig.staticData || {};
+            setData(value);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData(0);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
     const renderChart = () => {
         const { tooltip, radius, center, shape, amplitude, dataNum, color, backgroundStyle, label } = config;
         const option = _.cloneDeep(defOption);
         option.tooltip = { trigger: "item", ...tooltip };
+        // 编辑态数据源类型显示默认数据0.5
+        const temData = isDesignMode && dataConfig?.sourceType === 'sourceId' ? 0.5 : (data || 0);
         option.series = option.series.map((r) => ({
             ...r,
             radius: `${radius}%`,
@@ -106,7 +161,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartCom
             }],
             backgroundStyle,
             label: { ...label, position: [`${label?.position?.x}%`, `${label?.position?.y}%`] },
-            data: Array(dataNum).fill(0.5),
+            data: Array(dataNum).fill(temData),
         }));
         chart.current.setOption(option, true);
     }
@@ -114,7 +169,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<ChartCom
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

package/src/aldehyde/lowcode-components/lowcode-view/component/assets.ts

@@ -38,6 +38,10 @@ import Decoration8 from "../../decoration/decoration8";
 import Decoration9 from "../../decoration/decoration9";
 import Decoration10 from "../../decoration/decoration10";
 import Decoration11 from "../../decoration/decoration11";
+import BaseTable from "../../base-table";
+import TextScroller from "../../text-scroller";
+import CapsuleBarChart from "../../capsule-bar-chart";
+import CircularProgressChart from "../../circular-progress-chart";
 
 interface ComponentItemConfig {
     baseInfo: BaseInfoType, // 基础信息
@@ -109,6 +113,13 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compKey: "ColumnChart",
         },
     },
+    StackColumnChart: {
+        componentNode: ColumnChart,
+        baseInfo: {
+            compName: "堆叠柱状图",
+            compKey: "StackColumnChart",
+        },
+    },
     BarChart: {
         componentNode: BarChart,
         baseInfo: {
@@ -123,6 +134,13 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compKey: "PieChart"
         }
     },
+    RoseChart: {
+        componentNode: PieChart,
+        baseInfo: {
+            compName: "玫瑰图",
+            compKey: "RoseChart"
+        }
+    },
     GaugeChart: {
         componentNode: GaugeChart,
         baseInfo: {
@@ -325,5 +343,33 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compName: "装饰11",
             compKey: "Decoration11"
         }
+    },
+    BaseTable: {
+        componentNode: BaseTable,
+        baseInfo: {
+            compName: "基础表格",
+            compKey: "BaseTable"
+        }
+    },
+    TextScroller: {
+        componentNode: TextScroller,
+        baseInfo: {
+            compName: "文本跑马灯",
+            compKey: "TextScroller"
+        }
+    },
+    CapsuleBarChart: {
+        componentNode: CapsuleBarChart,
+        baseInfo: {
+            compName: "胶囊图",
+            compKey: "CapsuleBarChart"
+        }
+    },
+    CircularProgressChart: {
+        componentNode: CircularProgressChart,
+        baseInfo: {
+            compName: "环形进度图",
+            compKey: "CircularProgressChart"
+        }
     }
 };

package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx

@@ -20,40 +20,41 @@ export interface ComponentContainerProps {
 const ComponentContainer = memo((props: ComponentContainerProps) => {
     const { layer, layerManager } = props;
     const ref = useRef(null);
-    const [compController, setCompController] = useState<{ [key: string]: AbstractDesignerController }>({})
+    const [compController, setCompController] = useState<{ [key: string]: AbstractDesignerController }>({});
 
     useEffect(() => {
         //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
         const { elemConfigs } = layerManager;
         const componentDefine = abstractDesignerLoader.definitionMap[layer.type];
-        if (componentDefine) {
-            const Controller = componentDefine.getController() as any;
-            if (Controller) {
-                let config;
-                if (layer.id! in compController!) {
-                    //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
-                    config = compController![layer.id!].getConfig();
-                } else if (layer.id! in elemConfigs!) {
-                    config = elemConfigs![layer.id!];
-                }
-                /**
-                 * 此处注意，执行顺序尤为重要！！！
-                 * 第一步：动态代理绑定在前，
-                 * 第二步：赋值controller在后，
-                 * 第三步：最后才是执行create方法。
-                 */
-                //todo 此处逻辑应该使用设计模式优化，而非写死
-                registerProxy(layer.id!, Controller);
-                setCompController(val => ({ ...val, [layer.id]: Controller }))
-                Controller.create(ref.current!, config).then(() => {
-                    //在组件完全渲染完毕后进行数据的加载和事件的注册
-                    Controller.loadComponentData();
-                    //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
-                    Controller.updateFilter(Controller.getConfig()?.filter);
-                    //渲染后删除elemConfigs中的映射关系（需要观察是否会造成其他问题）
-                    delete elemConfigs![layer.id!];
-                });
+        const Controller = componentDefine?.getController() as any;
+        if (Controller) {
+            let config;
+            if (layer.id! in compController!) {
+                //重新编组后，被编组组件会重新渲染，需从之前的实例中获取原有数据
+                config = compController![layer.id!].getConfig();
+            } else if (layer.id! in elemConfigs!) {
+                config = elemConfigs![layer.id!];
             }
+            /**
+             * 此处注意，执行顺序尤为重要！！！
+             * 第一步：动态代理绑定在前，
+             * 第二步：赋值controller在后，
+             * 第三步：最后才是执行create方法。
+             */
+            //todo 此处逻辑应该使用设计模式优化，而非写死
+            registerProxy(layer.id!, Controller);
+            setCompController(val => ({ ...val, [layer.id]: Controller }))
+            Controller.create(ref.current!, config).then(() => {
+                //在组件完全渲染完毕后进行数据的加载和事件的注册
+                Controller.loadComponentData();
+                //设置组件滤镜效果（todo 考虑是否应该在此处设置？）
+                Controller.updateFilter(Controller.getConfig()?.filter);
+                //渲染后删除elemConfigs中的映射关系（需要观察是否会造成其他问题）
+                delete elemConfigs![layer.id!];
+            });
+        }
+        return () => {
+            Controller.destroy();
         }
     }, []);