aldehyde 0.2.283 → 0.2.285

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

@@ -27,6 +27,21 @@ import Border10 from "../../border/border10";
 import Border11 from "../../border/border11";
 import Border12 from "../../border/border12";
 import Border13 from "../../border/border13";
+import Decoration1 from "../../decoration/decoration1";
+import Decoration2 from "../../decoration/decoration2";
+import Decoration3 from "../../decoration/decoration3";
+import Decoration4 from "../../decoration/decoration4";
+import Decoration5 from "../../decoration/decoration5";
+import Decoration6 from "../../decoration/decoration6";
+import Decoration7 from "../../decoration/decoration7";
+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, // 基础信息
@@ -98,6 +113,13 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compKey: "ColumnChart",
         },
     },
+    StackColumnChart: {
+        componentNode: ColumnChart,
+        baseInfo: {
+            compName: "堆叠柱状图",
+            compKey: "StackColumnChart",
+        },
+    },
     BarChart: {
         componentNode: BarChart,
         baseInfo: {
@@ -112,6 +134,13 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compKey: "PieChart"
         }
     },
+    RoseChart: {
+        componentNode: PieChart,
+        baseInfo: {
+            compName: "玫瑰图",
+            compKey: "RoseChart"
+        }
+    },
     GaugeChart: {
         componentNode: GaugeChart,
         baseInfo: {
@@ -237,5 +266,110 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compName: "边框13",
             compKey: "Border13"
         }
+    },
+    Decoration1: {
+        componentNode: Decoration1,
+        baseInfo: {
+            compName: "装饰1",
+            compKey: "Decoration1"
+        }
+    },
+    Decoration2: {
+        componentNode: Decoration2,
+        baseInfo: {
+            compName: "装饰2",
+            compKey: "Decoration2"
+        }
+    },
+    Decoration3: {
+        componentNode: Decoration3,
+        baseInfo: {
+            compName: "装饰3",
+            compKey: "Decoration3"
+        }
+    },
+    Decoration4: {
+        componentNode: Decoration4,
+        baseInfo: {
+            compName: "装饰4",
+            compKey: "Decoration4"
+        }
+    },
+    Decoration5: {
+        componentNode: Decoration5,
+        baseInfo: {
+            compName: "装饰5",
+            compKey: "Decoration5"
+        }
+    },
+    Decoration6: {
+        componentNode: Decoration6,
+        baseInfo: {
+            compName: "装饰6",
+            compKey: "Decoration6"
+        }
+    },
+    Decoration7: {
+        componentNode: Decoration7,
+        baseInfo: {
+            compName: "装饰7",
+            compKey: "Decoration7"
+        }
+    },
+    Decoration8: {
+        componentNode: Decoration8,
+        baseInfo: {
+            compName: "装饰8",
+            compKey: "Decoration8"
+        }
+    },
+    Decoration9: {
+        componentNode: Decoration9,
+        baseInfo: {
+            compName: "装饰9",
+            compKey: "Decoration9"
+        }
+    },
+    Decoration10: {
+        componentNode: Decoration10,
+        baseInfo: {
+            compName: "装饰10",
+            compKey: "Decoration10"
+        }
+    },
+    Decoration11: {
+        componentNode: Decoration11,
+        baseInfo: {
+            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();
         }
     }, []);
 

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

@@ -1,8 +1,16 @@
 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 = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
     color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"],
     padAngle: 0,
     tooltip: {
@@ -14,15 +22,18 @@ const defOption = {
     },
     series: [
         {
-            name: 'Access From',
+            name: '数值',
             type: 'pie',
             radius: ["0%", "50%"],
+            padAngle: 0,
+            label: {},
+            labelLine: {},
             data: [
-                { value: 1048, name: 'Search Engine' },
-                { value: 735, name: 'Direct' },
-                { value: 580, name: 'Email' },
-                { value: 484, name: 'Union Ads' },
-                { value: 300, name: 'Video Ads' }
+                { value: 1048, name: 'Value1' },
+                { value: 735, name: 'Value2' },
+                { value: 580, name: 'Value3' },
+                { value: 484, name: 'Value4' },
+                { value: 300, name: 'Value5' }
             ]
         }
     ],
@@ -37,9 +48,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],
+                value: value[0]?.[r],
+            }))
+        };
+    });
+    return temData || [];
+};
 
-export interface ChartComponentStyle {
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     color?: string[];
     grid?: { top: number, let: number, right: number, bottom: number };
@@ -49,29 +79,45 @@ export interface ChartComponentStyle {
     innerRadius?: number;
     label?: { [key: string]: any };
     labelLine?: { [key: string]: any };
+    roseType?: string; // 玫瑰图配置
 }
 
-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,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -83,23 +129,63 @@ 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 { legend, tooltip, radius, innerRadius, color, label, labelLine, padAngle } = config;
+        const { legend, tooltip, radius, innerRadius, color, label, labelLine, padAngle, roseType } = config;
         const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? option.series : data;
         option.legend = { ...legend, ...legends[legend?.position] };
         option.tooltip = { trigger: "item", ...tooltip };
         option.color = color;
-        option.series = option.series.map((r) => ({
-            ...r,
+        option.title.show = !temData?.length;
+        option.series = temData.map(r => ({
+            type: "pie",
             radius: [`${innerRadius}%`, `${radius}%`],
             padAngle,
             label,
-            labelLine
+            labelLine,
+            roseType,
+            ...r
         }));
         chart.current.setOption(option, true);
     }
@@ -107,7 +193,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

package/src/aldehyde/lowcode-components/text-scroller/index.less

@@ -0,0 +1,29 @@
+.text-scroller-container {
+  --speed: 10s;
+  --container-width: 320px;
+
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+
+  .text-scroller {
+    height: inherit;
+    position: absolute;
+    color: white;
+    animation: scrollText var(--speed) linear infinite;
+    display: flex;
+    align-items: center;
+  }
+
+  @keyframes scrollText {
+    0% {
+      transform: translateX(var(--container-width));
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+}

package/src/aldehyde/lowcode-components/text-scroller/index.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef, ForwardedRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import './index.less';
+import _ from "lodash";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+export interface ComponentStyle {
+    speed?: number;
+    fontSize?: number;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+    defaultValue?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [speed, setSpeed] = useState<number>(style?.speed || 5);
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<string>('');
+    const textScrollerRef = useRef<HTMLDivElement>(null);
+    const textContainerRef = useRef<HTMLDivElement>(null);
+    const resizeObserverRef = useRef<ResizeObserver | null>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        resizeObserverRef.current && resizeObserverRef.current.disconnect();
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+    };
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
+            setSpeed(newStyle?.speed || 5);
+            setDataConfig({ ...newDataConfig });
+        },
+        destroy: handleDestroy,
+    }));
+
+    useEffect(() => {
+        if (textContainerRef.current) {
+            resizeObserverRef.current = new ResizeObserver(_.debounce((entries) => {
+                for (const entry of entries) {
+                    const { width } = entry.contentRect;
+                    textContainerRef.current.style.setProperty('--container-width', `${width}px`);
+                }
+            }, 100));
+            // 开始观察
+            resizeObserverRef.current.observe(textContainerRef.current);
+        }
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    useEffect(() => {
+        if (textContainerRef.current) {
+            textContainerRef.current.style.setProperty('--speed', `${speed || 5}s`);
+        }
+    }, [speed]);
+
+    // 请求数据
+    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("文本跑马灯");
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
+
+    return (
+        <div className="text-scroller-container" ref={textContainerRef}>
+            <div className="text-scroller" style={{ ...config }} ref={textScrollerRef}>
+                {data}
+            </div>
+        </div>
+    );
+});
+
+export default Index;

package/src/aldehyde/table/act-table.tsx

@@ -1348,7 +1348,6 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
             title={
               <>
                 {!title ? ltmplConfig.title : title}
-
                 <ToolTipBar
                   content={tip ? tip : ltmplConfig ? ltmplConfig.tip : null}
                 />

package/src/aldehyde/table/query-table.tsx

@@ -181,8 +181,8 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
         return;
       } else {
         let dataSource: object[] = [];
-        pageInfo = queryData.pageInfo;
-        if (queryData.entities) {
+        pageInfo = queryData?.pageInfo;
+        if (queryData?.entities) {
           queryData.entities.forEach((item, index) => {
             let row = {
               key: item.code,
@@ -194,7 +194,7 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
           });
         }
 
-        let touchEnd = queryData.touchEnd;
+        let touchEnd = queryData?.touchEnd;
         //缓存数据
         queryCache.set(pageInfo?.pageNo + "_" + pageInfo?.pageSize, {
           dataSource,
@@ -524,7 +524,7 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
             })
           }else if(aggregateItems.length<aggregateShowSize){
             aggregateItems.push({key: av.fieldId,
-              label:  <div style={{fontSize:14}}>{av.fieldTitle}</div>,
+              label:  <div style={{fontSize:14}}>{translate("${"+av.fieldTitle+"}") }</div>,
               children: <Statistic  valueStyle={{fontSize:16}} value={av.value?av.value:0} />
               // <div style={{fontSize:24}}>{av.value}</div>
             })
@@ -534,7 +534,7 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
           aggregateVO.aggregates.forEach(av=> {
             aggregateItems.push({
               key: av.fieldId,
-              label: <div style={{fontSize: 14}}>{av.fieldTitle}</div>,
+              label: <div style={{fontSize: 14}}>{translate("${"+av.fieldTitle+"}") }</div>,
               children: <Statistic valueStyle={{fontSize:16}}  value={av.value ? av.value : 0}/>
             })
           });

package/src/aldehyde/table/relation-table.tsx

@@ -431,7 +431,6 @@ class RelationTable extends React.PureComponent<
         }
       }
     }
-    debugger
     //直接删除
     if(fieldGroupConfig.deleteData){
       let result: boolean = await HcserviceV3.deleteByCode(serverKey, fieldGroupConfig.id, [record.code]);
@@ -640,7 +639,6 @@ class RelationTable extends React.PureComponent<
 
     let editingCodes=[...editings];
     let i=0;
-    debugger
     for(let f of fieldMaps){
       let newData: DtmplData = {};
       newData.code=Date.now()+""+i++;

package/src/aldehyde/tmpl/control-type-supportor.tsx

@@ -29,6 +29,7 @@ SupportInputTypes.add('timerange-unorder');
 
 SupportInputTypes.add('text');
 SupportInputTypes.add('textarea');
+SupportInputTypes.add('text-view');
 SupportInputTypes.add('html');
 SupportInputTypes.add('steps');
 SupportInputTypes.add('progress');