aldehyde 0.2.283 → 0.2.285

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

@@ -0,0 +1,233 @@
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import _ from "lodash";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+import './index.less';
+
+const defColumns = [
+    { title: "姓名", dataIndex: "name" },
+    { title: "年龄", dataIndex: "age" },
+    { title: "性别", dataIndex: "sex" }
+];
+
+const defData = [
+    { name: "张三", age: 18, sex: "男" },
+    { name: "李四", age: 20, sex: "女" },
+    { name: "王五", age: 22, sex: "男" }
+];
+
+export interface ITableColumn {
+    dataIndex: string;
+    title: string;
+    colWidth?: number;
+    valueAlign?: 'left' | 'center' | 'right';
+}
+
+export interface ITableHeaderStyle {
+    show?: boolean;
+    height?: number;
+    background?: string;
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+}
+
+export interface ITableBodyStyle {
+    background?: string;
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+    pageSize?: number;
+}
+
+export interface ComponentStyle {
+    columns?: ITableColumn[];
+    data?: object[];
+    header?: ITableHeaderStyle;
+    body?: ITableBodyStyle;
+    carousel?: { speed: number, enable: boolean };
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    isDesignMode?: boolean; // 是否编辑模式
+    data?: DataConfigProps;
+    request?: { pollingInterval: number, polling: boolean, pageSize: number };
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, isDesignMode, data: propsData, request } = props;
+    const [headerStyle, setHeaderStyle] = useState<ITableHeaderStyle>({ ...style?.header });
+    const [bodyStyle, setBodyStyle] = useState<ITableBodyStyle>({ ...style?.body });
+    const [carousel, setCarousel] = useState<{ speed: number, enable: boolean }>({ ...style?.carousel });
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData });
+    const [columns, setColumns] = useState<ITableColumn[]>(isDesignMode ? defColumns : []);
+    const [data, setData] = useState<{ [key: string]: any }[]>(isDesignMode ? defData : []);
+    const tableRef = useRef<HTMLDivElement | null>(null);
+    const theadRef = useRef<HTMLTableSectionElement | null>(null);
+    const resizeObserverRef = useRef<ResizeObserver | null>(null);
+    const contentHeightRef = useRef<number>(0);
+    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, data: newDataConfig } = newConfig;
+            setHeaderStyle({ ...style?.header });
+            setBodyStyle({ ...style?.body });
+            setCarousel({ ...style?.carousel });
+            setDataConfig({ ...newDataConfig });
+        },
+        destroy: handleDestroy
+    }));
+
+
+    useEffect(() => {
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    const changeTableTrHeight = () => {
+        const { pageSize = 0 } = bodyStyle;
+        if (pageSize && data?.length) {
+            const tableBodyTds = tableRef.current?.getElementsByClassName('base-table-tr') || [];
+            const tdHeight = contentHeightRef.current / pageSize;
+            for (let i = 0; i < tableBodyTds.length; i++) {
+                tableBodyTds[i].style.height = `${tdHeight}px`;
+            }
+        }
+    };
+
+    useEffect(() => {
+        resizeObserverRef.current && resizeObserverRef.current.disconnect();
+        if (tableRef.current && data?.length) {
+            contentHeightRef.current = tableRef.current.clientHeight - (theadRef.current?.clientHeight || 0);
+            resizeObserverRef.current = new ResizeObserver(_.debounce((entries) => {
+                for (const entry of entries) {
+                    const { height } = entry.contentRect;
+                    contentHeightRef.current = height - (theadRef.current?.clientHeight || 0);
+                }
+                changeTableTrHeight();
+            }, 100));
+            // 开始观察
+            resizeObserverRef.current.observe(tableRef.current);
+            changeTableTrHeight();
+        }
+    }, [headerStyle?.show, data]);
+
+    useEffect(() => {
+        if (bodyStyle.pageSize) {
+            changeTableTrHeight();
+        }
+    }, [bodyStyle.pageSize]);
+
+    // 获取数据源表格配置
+    const getLtmplConfig = async () => {
+        const { ltmplConfig } = await HcserviceV3.requestLtmplConfig(dataConfig?.serverKey || null, dataConfig?.sourceId) || {};
+        const temColumns = ltmplConfig?.columns?.map((item) => ({ ...item, dataIndex: item.id }))?.filter((item) => !item.hidden);
+        setColumns(temColumns || []);
+    };
+
+    // 请求数据
+    const getData = async () => {
+        const pageInfo = { pageNo: 1, pageSize: request?.pageSize || 100 };
+        const queryKey = await HcserviceV3.requestLtmplQueryKey(dataConfig?.serverKey || null, dataConfig?.sourceId, pageInfo);
+        if (!queryKey?.key) {
+            setData([]);
+            return;
+        }
+        const { entities } = await HcserviceV3.requestQueryData(dataConfig?.serverKey || null, queryKey.key, pageInfo);
+        const temData = entities?.map((item) => item?.fieldMap) || [];
+        setData(temData);
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        await getData();
+        if (request?.polling) {
+            pollingIntervalRef.current = setInterval(() => { getData(); }, request?.pollingInterval * 1000 || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            const { columns: temColumns, data } = dataConfig?.staticData || {};
+            setColumns(temColumns || defColumns);
+            setData(temColumns ? data : defData);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态请求表头信息，不请求数据
+     */
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            setData([]);
+            getLtmplConfig();
+            !isDesignMode && getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+            setColumns([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
+    const renderEmpty = () => <div className={'base-table-empty'} style={{ ...bodyStyle }}>暂无数据</div>;
+
+    return (
+        <div className={'base-table'} ref={tableRef} >
+            {columns?.length === 0 ? renderEmpty() :
+                <table>
+                    {headerStyle?.show &&
+                        <thead style={{ ...headerStyle }} ref={theadRef}>
+                            <tr>
+                                {columns?.map((column: ITableColumn, index: number) => <th key={index}
+                                    style={{
+                                        width: column.colWidth,
+                                        fontWeight: headerStyle?.fontWeight,
+                                        textAlign: column.valueAlign,
+                                    }}>{column.title}</th>)}
+                            </tr>
+                        </thead>
+                    }
+                    {data?.length === 0 ? <tbody >
+                        <tr >
+                            <td colSpan={columns?.length}>{renderEmpty()}</td>
+                        </tr>
+                    </tbody> : <>
+                        <tbody style={{ ...bodyStyle, animation: carousel.enable && data?.length > bodyStyle.pageSize ? `scroll ${carousel.speed || 3}s linear infinite` : `none` }} className="scroll-body" >
+                            {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
+                                {columns?.map((column: ITableColumn, i: number) =>
+                                    <td key={i} style={{ textAlign: column.valueAlign }}>{item[column.dataIndex]}</td>)}
+                            </tr>)}
+                        </tbody>
+                        {data?.length > bodyStyle.pageSize &&
+                            <tbody style={{ ...bodyStyle, animation: carousel.enable ? `scroll ${carousel.speed || 3}s linear infinite` : `none` }} className="scroll-body" >
+                                {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
+                                    {columns?.map((column: ITableColumn, i: number) =>
+                                        <td key={i} style={{ textAlign: column.valueAlign }}>{item[column.dataIndex]}</td>)}
+                                </tr>)}
+                            </tbody>
+                        }
+                    </>}
+                </table>
+            }
+        </div>
+    );
+})
+
+export default Index;

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

@@ -0,0 +1,219 @@
+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 defSeriesConfig = {
+    itemStyle: {
+        borderRadius: 20
+    },
+    showBackground: true,
+    backgroundStyle: {
+        color: "transparent",
+        borderColor: "rgba(255, 255, 255, 0.5)",
+        borderWidth: 0.3,
+        borderRadius: 20,
+        shadowColor: 'rgba(255, 255, 255, 0.5)',
+        shadowBlur: 8,
+    }
+};
+
+const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
+    tooltip: { trigger: "axis" },
+    grid: { top: 30, let: 30, right: 20, bottom: 30 },
+    yAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: { show: true },
+    },
+    xAxis: {
+        type: 'value',
+        axisTick: { show: true },
+    },
+    legend: { show: false },
+    barMaxWidth: 20,
+    series: [
+        {
+            data: [[525, "1990"], [459, "1991"], [357, "1992"], [414, "1993"], [234, "1994"]],
+            type: 'bar',
+            ...defSeriesConfig
+        }
+    ]
+};
+
+const legends = {
+    top: { top: 0 },
+    bottom: { bottom: 0 },
+    left: { left: 5, top: "center" },
+    right: { right: 5, top: "center" },
+    leftTop: { left: 5 },
+    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[r], v["d1"]]),
+            }))
+        };
+    });
+    return temData[0]?.data || [];
+};
+
+export interface ComponentStyle {
+    tooltip?: { show: boolean };
+    color?: string[];
+    grid?: { top: number, let: number, right: number, bottom: number };
+    xAxis?: { [key: string]: any };
+    yAxis?: { [key: string]: any };
+    legend?: { [key: string]: any };
+    barMaxWidth?: number;
+    label?: { [key: string]: any };
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    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 [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: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+
+    useEffect(() => {
+        chart.current = echarts.init(chartRef.current);
+        window.addEventListener('resize', handleResize);
+        return () => {
+            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, barMaxWidth, legend, tooltip, color, xAxis, yAxis, label } = config
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? option.series : data;
+        option.barMaxWidth = barMaxWidth;
+        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, axisTick: { show: yAxis?.axisLine?.show } };
+        option.title.show = !temData?.length;
+        option.series = temData.map((r) => ({
+            type: "bar",
+            ...defSeriesConfig,
+            ...r,
+            label: label,
+            itemStyle: {
+                borderRadius: 20, color: (params) => color[params.dataIndex] || "#63b2ee"
+            },
+        }));
+        chart.current.setOption(option, true);
+    }
+    useEffect(() => {
+        if (config) {
+            renderChart();
+        }
+    }, [config, data]);
+
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+
+    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+});
+
+export default Index;
+

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

@@ -0,0 +1,201 @@
+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: {
+        show: true,
+        text: "30 %",
+        x: 'center',
+        y: 'center',
+        textStyle: {
+            color: '#ffffff',
+            fontSize: 24,
+        },
+    },
+    angleAxis: {
+        axisLine: {
+            show: false,
+        },
+        axisLabel: {
+            show: false,
+        },
+        splitLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        min: 0,
+        max: 100,
+        startAngle: 90,
+    },
+    radiusAxis: {
+        type: 'category',
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            show: true,
+        },
+        data: [],
+    },
+    polar: {
+        radius: '150%',
+        center: ['50%', '50%'],
+    },
+    series: [
+        // 极坐标系下柱状图
+        { // 实际值
+            type: 'bar',
+            data: [30],
+            z: 1,
+            coordinateSystem: 'polar',
+            barWidth: 24,
+            roundCap: 1,
+            color: "#446bf5"
+        },
+        {  // 背景图形
+            type: 'bar',
+            data: [100],
+            z: 0,
+            silent: true,
+            coordinateSystem: 'polar',
+            barWidth: 24,
+            roundCap: true,
+            color: '#E8EDF3',
+            barGap: '-100%',
+        },
+    ],
+};
+
+export interface ComponentStyle {
+    title?: { [key: string]: any };
+    barWidth?: number;
+    color?: string;
+    backgroundColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    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 [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: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+
+    useEffect(() => {
+        chart.current = echarts.init(chartRef.current);
+        window.addEventListener('resize', handleResize);
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        const temData = value?.[0]?.value?.[0]?.v1 || 0;
+        setData(temData * 100);
+        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 || 0) * 100);
+        }
+    }, [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 { title, color, backgroundColor, barWidth } = config;
+        const option = _.cloneDeep(defOption);
+        // 编辑态数据源类型显示默认数据30
+        const temData = isDesignMode && dataConfig?.sourceType === 'sourceId' ? 30 : (data || 0);
+        option.title = { ...option.title, ...title, text: `${temData || "-"}%` };
+        option.series = option.series.map((item: any, index) => {
+            index === 0 && (item.data = [temData]);
+            item.color = index === 0 ? color : backgroundColor;
+            item.barWidth = barWidth;
+            return item;
+        });
+        chart.current.setOption(option, true);
+    }
+    useEffect(() => {
+        if (config) {
+            renderChart();
+        }
+    }, [config, data]);
+
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+
+    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+});
+
+export default Index;