aldehyde 0.2.296 → 0.2.299

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

@@ -0,0 +1,374 @@
+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 defData = [["1990", 52], ["1991", 45], ["1992", 35], ["1993", 41], ["1994", 23], ["1995", 25], ["1996", 15]];
+
+const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
+    color: [],
+    tooltip: { trigger: "axis" },
+    grid: { top: 30, let: 30, right: 20, bottom: 30 },
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: { show: true },
+    },
+    yAxis: {
+        type: 'value'
+    },
+    legend: { show: false },
+    series: []
+};
+
+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["d1"], v[r]]),
+            }))
+        };
+    });
+    return temData[0]?.data?.[0]?.data || [];
+};
+
+// 绘制左侧面
+const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+        x: 0,
+        y: 0
+    },
+    buildPath: (ctx, shape) => {
+        const barWidth = shape.barWidth || 20;
+        const offset = barWidth / 2;
+        const xAxisPoint = shape.xAxisPoint;
+        const c0 = [shape.x, shape.y];
+        const c1 = [shape.x - offset, shape.y - offset];
+        const c2 = [xAxisPoint[0] - offset, xAxisPoint[1] - offset];
+        const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        const moveTo: any = ctx.moveTo(c0[0], c0[1]);
+        moveTo.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
+    }
+});
+// 绘制右侧面
+const CubeRight = echarts.graphic.extendShape({
+    shape: {
+        x: 0,
+        y: 0
+    },
+    buildPath: (ctx, shape) => {
+        const barWidth = shape.barWidth || 20;
+        const offset2 = barWidth / 10;
+        const offset = barWidth / 2 + offset2;
+        const xAxisPoint = shape.xAxisPoint;
+        const c1 = [shape.x, shape.y];
+        const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        const c3 = [xAxisPoint[0] + offset, xAxisPoint[1] - offset + 3 * offset2];
+        const c4 = [shape.x + offset, shape.y - offset + 3 * offset2];
+        const moveTo: any = ctx.moveTo(c1[0], c1[1]);
+        moveTo.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+    }
+});
+// 绘制顶面
+const CubeTop = echarts.graphic.extendShape({
+    shape: {
+        x: 0,
+        y: 0,
+    },
+    buildPath: (ctx, shape) => {
+        const barWidth = shape.barWidth || 20;
+        const offset2 = barWidth / 10;
+        const offset = barWidth / 2;
+        const c1 = [shape.x, shape.y];
+        const c2 = [shape.x + offset + offset2, shape.y - offset + 2 * offset2];
+        const c3 = [shape.x + offset2, shape.y - 2 * offset + 2 * offset2];
+        const c4 = [shape.x - offset, shape.y - offset];
+        const moveTo: any = ctx.moveTo(c1[0], c1[1]);
+        moveTo.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+    }
+});
+
+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 };
+    barWidth?: number; // 柱状图宽度
+    isBackground?: boolean; // 是否显示背景
+    renderer?: "canvas" | "svg";
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number, type: string },
+    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 [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState([]);
+    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 && 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);
+            setRenderType(newStyle?.renderer || "svg");
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+
+    useEffect(() => {
+        // 注册三个面图形
+        echarts.graphic.registerShape('CubeLeft', CubeLeft);
+        echarts.graphic.registerShape('CubeRight', CubeRight);
+        echarts.graphic.registerShape('CubeTop', CubeTop);
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
+        window.addEventListener('resize', handleResize);
+    }, [renderType]);
+
+    // 请求数据
+    const getData = async () => {
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId) || {};
+        const { config, value } = data || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestMode === "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, barWidth, legend, tooltip, color, xAxis, yAxis, isBackground } = config;
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? defData : data;
+        // 背景数据
+        let bgData = [];
+        if (isBackground) {
+            const maxData = Math.max(...temData.map(r => r[1])) + 5;
+            bgData = temData.map(r => ([r[0], maxData]));
+        }
+        option.color = [color]
+        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.title.show = !temData?.length;
+        option.series = [{
+            type: 'custom',
+            tooltip: { show: false },
+            renderItem: (params, api) => {
+                const location = api.coord([api.value(0), api.value(1)]);
+                return {
+                    type: 'group',
+                    children: [{
+                        type: 'CubeLeft',
+                        shape: {
+                            api,
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: `${color}28` }
+                    },
+                    {
+                        type: 'CubeRight',
+                        shape: {
+                            api,
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: `${color}32` }
+                    },
+                    {
+                        type: 'CubeTop',
+                        shape: {
+                            api,
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: `${color}50` }
+                    }]
+                }
+            },
+            data: bgData
+        },
+        {
+            type: 'custom',
+            renderItem: (params, api) => {
+                const location = api.coord([api.value(0), api.value(1)]);
+                return {
+                    type: 'group',
+                    children: [{
+                        type: 'CubeLeft',
+                        shape: {
+                            api,
+                            xValue: api.value(0),
+                            yValue: api.value(1),
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: {
+                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color
+                            },
+                            {
+                                offset: 0.8,
+                                color: `${color}5A`
+                            }
+                            ])
+                        }
+                    }, {
+                        type: 'CubeRight',
+                        shape: {
+                            api,
+                            xValue: api.value(0),
+                            yValue: api.value(1),
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: {
+                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: `${color}5A`
+                            },
+                            {
+                                offset: 0.8,
+                                color: `${color}50`
+                            }
+                            ])
+                        }
+                    }, {
+                        type: 'CubeTop',
+                        shape: {
+                            api,
+                            xValue: api.value(0),
+                            yValue: api.value(1),
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: color }
+                    }]
+                }
+            },
+            data: temData
+        }];
+        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/effectScatter-map-3d/index.tsx

@@ -0,0 +1,301 @@
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import chinaJson from "../assets/china.json";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+const defData = [{ name: '北京', value: [116.41, 40.19, 100] }];
+
+const defOption = {
+    tooltip: {
+        trigger: 'item',
+    },
+    geo: [
+        { // 边框 map
+            zlevel: 6,
+            map: "china",
+            // 取消一些交互
+            select: { disabled: false },
+            emphasis: { disabled: true, },
+            silent: true,
+            // 位置大小调整
+            layoutCenter: ["50%", "50%"], //位置
+            layoutSize: "125%", //大小
+            aspectScale: 0.84,
+            // 框颜色
+            itemStyle: {
+                color: "transparent",
+                opacity: 1,
+                borderWidth: 1,
+                borderColor: "#92C1F0",
+                borderCap: "round",
+                shadowBlur: 20,
+                shadowColor: "#92C1F0",
+                borderType: "solid"
+            },
+            label: {
+                show: false
+            }
+        },
+        {   // 顶层map
+            map: "china",
+            zlevel: 5,
+            z: 4,
+            select: { disabled: false },
+            emphasis: { disabled: true, },
+            silent: true,
+            layoutCenter: ["50%", "50%"], //位置
+            layoutSize: "125%", //大小
+            aspectScale: 0.84,
+            // 调整颜色
+            itemStyle: { areaColor: "#02142A" },
+        },
+        {   // 第二层，下层地图，防3d效果
+            zlevel: 5,
+            z: 3,
+            map: "china",
+            select: { disabled: false },
+            emphasis: { disabled: true, },
+            silent: true,
+            layoutCenter: ["50%", "50.6%"], //位置
+            layoutSize: "125%", //大小
+            aspectScale: 0.84,
+            // 颜色
+            itemStyle: {
+                borderWidth: 0,
+                borderCap: "round",
+                areaColor: "#38609B",
+            },
+            regions: [{
+                name: '南海诸岛',
+                itemStyle: { opacity: 0 },
+                label: { show: false }
+            }]
+        },
+        {   // 第三层，下层地图，防3d效果
+            zlevel: 5,
+            z: 2,
+            map: "china",
+            select: { disabled: false },
+            emphasis: { disabled: true, },
+            silent: true,
+            layoutCenter: ["50%", "51%"], //位置
+            layoutSize: "125%", //大小
+            aspectScale: 0.84,
+            // 颜色
+            itemStyle: {
+                borderWidth: 0,
+                borderCap: "round",
+                areaColor: "#38609B",
+            },
+            regions: [{
+                name: '南海诸岛',
+                itemStyle: { opacity: 0 },
+                label: { show: false }
+            }]
+        },
+        {   // 第四层,下层地图，防3d效果
+            zlevel: 5,
+            z: 1,
+            map: "china",
+            select: { disabled: false },
+            emphasis: { disabled: true, },
+            silent: true,
+            layoutCenter: ["50%", "51.3%"], //位置
+            layoutSize: "124.5%", //大小
+            aspectScale: 0.84,
+            // 颜色
+            itemStyle: {
+                borderColor: "rgba(0, 0, 0, 0.3)",
+                borderWidth: 1,
+                borderCap: "round",
+                areaColor: "#38609B",
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.6)",
+            },
+            regions: [{
+                name: '南海诸岛',
+                itemStyle: { opacity: 0 },
+                label: { show: false }
+            }]
+        },
+    ],
+    series: [
+        {
+            type: 'effectScatter',
+            coordinateSystem: "geo",
+            showEffectOn: 'render',
+            rippleEffect: { brushType: 'stroke' },
+            label: {
+                formatter: '{b}',
+                position: 'right',
+                show: true,
+            },
+            itemStyle: {
+                color: '#f4e925',
+            },
+            zlevel: 6,
+            encode: { value: 2 },
+            data: defData
+        }
+    ]
+};
+
+// 处理数据格式
+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 temVal = value.filter(v => v["v2"]);
+        return {
+            name: config.v1,
+            data: temVal.map(v => {
+                const lonLat = v["v2"].split(",") || []; // 坐标经纬度；value:[经度，纬度，数值]
+                return { name: v["d1"], value: [lonLat[0], lonLat[1], v["v1"]] };
+            })
+        };
+    });
+    return temData[0]?.data || [];
+};
+
+export interface ComponentStyle {
+    tooltip?: { show: boolean };
+    effectScatter?: { [key: string]: any };
+    areaColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    borderType?: string;
+    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, value: number[] }[]>([]);
+    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(() => {
+        echarts.registerMap('china', chinaJson as any);
+        chart.current = echarts.init(chartRef.current, null, { renderer: "svg" });
+        window.addEventListener('resize', handleResize);
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    // 请求数据
+    const getData = async () => {
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId) || {};
+        const { config, value } = data || {};
+        setData(handleData(value));
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestMode === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            setData(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 { tooltip, areaColor, backgroundColor, borderColor, borderWidth, borderType, label, effectScatter } = config
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? defData : data;
+        option.tooltip = { trigger: "item", ...tooltip };
+        option.geo = option.geo.map((r, index) => {
+            switch (index) {
+                case 0:
+                    return { ...r, label, itemStyle: { ...r.itemStyle, borderWidth, borderColor, shadowColor: borderColor, borderType } };
+                case 1:
+                    return { ...r, itemStyle: { areaColor } };
+                case 2:
+                case 3:
+                case 4:
+                    return { ...r, itemStyle: { ...r.itemStyle, areaColor: backgroundColor } };
+                default:
+                    return r;
+            }
+        }) as any;
+        option.series = option.series.map((item: any) => ({ ...item, ...effectScatter, data: temData }));
+        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/gauge-chart/index.tsx

@@ -140,11 +140,23 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         option.tooltip = { trigger: "item", ...tooltip };
         // 编辑态数据源类型显示默认数据50
         const temData = isDesignMode && dataConfig?.sourceType === 'sourceId' ? 50 : (data || 0);
+        // 进度条配置
+        const color1 = progress?.itemStyle?.color[0];
+        const color2 = progress?.itemStyle?.color[1];
+        const progressConfig = progress ? {
+            ...progress, itemStyle: {
+                ...progress?.itemStyle,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: color2 || color1 },
+                    { offset: 1, color: color1 }
+                ])
+            }
+        } : undefined
         option.series = option.series.map((r) => ({
             ...r,
             pointer: {
                 itemStyle: {
-                    color: progress?.show ? progress?.itemStyle?.color : 'auto'
+                    color: progress?.show ? color1 : 'auto'
                 }
             },
             radius: `${radius}%`,
@@ -153,7 +165,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             endAngle,
             min,
             max,
-            progress,
+            progress: progressConfig,
             axisLine: temAxisLine,
             splitLine,
             axisTick,