aldehyde 0.2.296 → 0.2.299

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

@@ -43,6 +43,10 @@ import CapsuleBarChart from "./capsule-bar-chart";
 import CircularProgressChart from "./circular-progress-chart";
 import ActTable from "./act-table";
 import ProgressChart from "./progress-chart";
+import LineBarChart from "./line-bar-chart";
+import Column3dChart from "./column-3d-chart";
+import StrokeAnimation from "./stroke-animation";
+import EffectScatterMap3D from "./effectScatter-map-3d";
 
 
 type CompoundedComponent = {
@@ -90,7 +94,11 @@ type CompoundedComponent = {
     CircularProgressChart?: typeof CircularProgressChart;
     ActTable?: typeof ActTable,
     ProgressChart?: typeof ProgressChart,
-    BaseMap?: typeof BaseMap
+    BaseMap?: typeof BaseMap,
+    LineBarChart?: typeof LineBarChart,
+    Column3dChart?: typeof Column3dChart,
+    StrokeAnimation?: typeof StrokeAnimation,
+    EffectScatterMap3D?: typeof EffectScatterMap3D
 };
 
 const LowcodeComponents: CompoundedComponent = {
@@ -101,7 +109,8 @@ const LowcodeComponents: CompoundedComponent = {
     Border7, Border8, Border9, Border10, Border11, Border12, Border13,
     Decoration1, Decoration2, Decoration3, Decoration4, Decoration5,
     Decoration6, Decoration7, Decoration8, Decoration9, Decoration10, Decoration11,
-    BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart, ActTable, ProgressChart
+    BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart, ActTable, ProgressChart,
+    LineBarChart, Column3dChart, StrokeAnimation, EffectScatterMap3D
 };
 
 export default LowcodeComponents;

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

@@ -0,0 +1,231 @@
+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, // 无数据时显示
+    },
+    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 },
+    barMaxWidth: 20,
+    series: [
+        {
+            data: [["1990", 225], ["1991", 359], ["1992", 57], ["1993", 214], ["1994", 134], ["1995", 250], ["1996", 156]],
+            type: 'line',
+        },
+        {
+            data: [["1990", 325], ["1991", 259], ["1992", 157], ["1993", 314], ["1994", 234], ["1995", 150], ["1996", 256]],
+            type: 'bar',
+        }
+    ]
+};
+
+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 || [];
+};
+
+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 };
+    markPoint?: { [key: string]: any };
+    smooth?: boolean;
+    lineStyle?: { [key: string]: any };
+    symbol?: { [key: string]: any };
+    step?: boolean; // 是否为阶梯折线图
+    isArea?: boolean; // 是否面积图
+    isGradient?: boolean; // 面积图是否渐变
+    areaStyle?: { opacity: number }; // 面积图样式
+    renderer?: "canvas" | "svg";
+    barMaxWidth?: number; //柱状图最大宽度
+}
+
+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 [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<{ 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 && 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(() => {
+        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, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, isGradient, areaStyle, barMaxWidth, symbol } = 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 };
+        option.title.show = !temData?.length;
+        option.series = temData.map((r, index) => (index === 0 ? {
+            type: "line",
+            ...r,
+            ...symbol, step, smooth,
+            itemStyle: symbol.showSymbol ? { color: color[index] } : undefined,
+            lineStyle: { ...lineStyle, color: color[index] },
+            areaStyle: isArea ? {
+                ...areaStyle,
+                color: isGradient ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: color[index] },
+                    { offset: 1, color: 'rgba(0, 0, 0, 0)' }
+                ]) : color[index]
+            } : undefined
+        } : {
+            type: "bar",
+            ...r,
+            itemStyle: { color: color[index] },
+        }));
+        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/line-chart/index.tsx

@@ -74,6 +74,7 @@ export interface ComponentStyle {
     symbol?: { [key: string]: any };
     step?: boolean; // 是否为阶梯折线图
     isArea?: boolean; // 是否面积图
+    isGradient?: boolean; // 面积图是否渐变
     areaStyle?: { opacity: number }; // 面积图样式
     renderer?: "canvas" | "svg";
 }
@@ -173,7 +174,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     }, [dataConfig?.sourceType, dataConfig?.sourceId]);
 
     const renderChart = () => {
-        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, areaStyle, symbol: { itemStyle, ...symbol } } = config;
+        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, isGradient, areaStyle, symbol: { itemStyle, ...symbol } } = config;
         const option = _.cloneDeep(defOption);
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !data?.length ? option.series : data;
@@ -189,7 +190,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             ...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
+            areaStyle: isArea ? {
+                ...areaStyle,
+                color: isGradient ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: color[index] },
+                    { offset: 1, color: 'rgba(0, 0, 0, 0)' }
+                ]) : color[index]
+            } : undefined
         }));
         chart.current.setOption(option, true);
     };

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts

@@ -1,6 +1,7 @@
 import { AbstractDefinition } from "./abstract-definition";
 import { compsConfig } from "./assets";
 import ComponentDefinition from "./component-definition";
+import GroupDefinition from "./group-layer/definition";
 
 class AbstractDesignerLoader {
 
@@ -25,7 +26,9 @@ class AbstractDesignerLoader {
             if (compKey) {
                 this.definitionMap[compKey] = definition;
             }
-        })
+        });
+        // 编组组件信息挂载
+        this.definitionMap["group"] = new GroupDefinition();
     }
 
 }

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

@@ -44,6 +44,10 @@ import CapsuleBarChart from "../../capsule-bar-chart";
 import CircularProgressChart from "../../circular-progress-chart";
 import ActTable from "../../act-table";
 import ProgressChart from "../../progress-chart";
+import LineBarChart from "../../line-bar-chart";
+import Column3dChart from "../../column-3d-chart";
+import StrokeAnimation from "../../stroke-animation";
+import EffectScatterMap3D from "../../effectScatter-map-3d";
 
 interface ComponentItemConfig {
     baseInfo: BaseInfoType, // 基础信息
@@ -387,5 +391,33 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compName: "进度条",
             compKey: "ProgressChart"
         }
+    },
+    LineBarChart: {
+        componentNode: LineBarChart,
+        baseInfo: {
+            compName: "折柱混合图",
+            compKey: "LineBarChart"
+        }
+    },
+    Column3DChart: {
+        componentNode: Column3dChart,
+        baseInfo: {
+            compName: "立体柱状图",
+            compKey: "Column3DChart"
+        }
+    },
+    StrokeAnimation: {
+        componentNode: StrokeAnimation,
+        baseInfo: {
+            compName: "关键帧描边动画",
+            compKey: "StrokeAnimation"
+        }
+    },
+    EffectScatterMap3D: {
+        componentNode: EffectScatterMap3D,
+        baseInfo: {
+            compName: "立体散点地图",
+            compKey: "EffectScatterMap3D"
+        }
     }
 };

package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts

@@ -0,0 +1,37 @@
+import { ComponentInfoType } from "../../interface";
+import GroupLayer from "./index";
+import AbstractDesignerController from "../abstract-controller";
+
+export interface GroupLayerProps {
+    base: ComponentInfoType;
+}
+
+export default class GroupLayerController extends AbstractDesignerController<GroupLayer, GroupLayerProps> {
+
+    constructor(container: HTMLElement, config: GroupLayerProps, instance: GroupLayer) {
+        super();
+        this.container = container;
+        this.config = config;
+        this.instance = instance;
+    }
+
+    async create(container: HTMLElement, config: GroupLayerProps): Promise<void> {
+    }
+
+    public getConfig(): GroupLayerProps | null {
+        return this.config;
+    }
+
+    public update(): void {
+    }
+
+    public show(): void {
+        this.instance?.setState({ load: true })
+    }
+
+    public hide(): void {
+        this.instance?.setState({ load: false })
+    }
+
+
+}

package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts

@@ -0,0 +1,54 @@
+import {
+    AbstractDefinition,
+    ActionInfo,
+    BaseInfoType
+} from "../abstract-definition";
+import GroupLayerController, { GroupLayerProps } from "./controller";
+import AbstractController from "../abstract-controller";
+
+export default class GroupLayerDefinition extends AbstractDefinition<GroupLayerController, GroupLayerProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "",
+            compKey: "group",
+        };
+    }
+
+    getChartImg(): string | null {
+        return null;
+    }
+
+    getController() {
+        return null;
+    }
+
+    getInitConfig(): GroupLayerProps {
+        return {
+            base: {
+                id: "",
+                name: '分组图层',
+                type: 'group',
+            }
+        };
+    }
+
+    getActionList(): ActionInfo[] {
+        return [
+            {
+                name: "显示",
+                id: "show",
+                handler: (controller: AbstractController) => {
+                    (controller as GroupLayerController).show();
+                }
+            },
+            {
+                name: "隐藏",
+                id: "hide",
+                handler: (controller: AbstractController) => {
+                    (controller as GroupLayerController).hide();
+                }
+            }
+        ];
+    }
+
+}

package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export interface GroupLayerStyleProps {
+    children?: React.ReactNode;
+}
+
+export default class GroupLayer extends React.PureComponent<GroupLayerStyleProps> {
+    state = {
+        load: true
+    }
+
+    render() {
+        const { load } = this.state;
+        return load ? <div style={{ position: 'absolute' }}>{this.props.children}</div> : "";
+    }
+}

package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx

@@ -2,6 +2,7 @@ import { createElement, ReactElement } from "react";
 import cloneDeep from "lodash/cloneDeep";
 import ComponentContainer from "./component-container";
 import { ILayerItem, LayerManagerDataType, } from "../interface";
+import GroupLayer from "./group-layer";
 
 export enum LayerOrder {
     ASC,
@@ -77,12 +78,19 @@ class LayerBuilder {
     }
 
     private buildComponents = (layerManager: LayerManagerDataType, layer: ILayerItem): ReactElement => {
+        const { type, children } = layer;
         const { layerConfigs } = layerManager;
         const targetLayer = layerConfigs[layer.id!];
         //给每个图层重新设置排序编号,用于在图层移动的过程中提供更好的体验
         if (targetLayer)
             targetLayer.order = this.order++;
-        return createElement(ComponentContainer, { layer, key: layer.id, layerManager });
+        if (type === 'group') {
+            //先生成子元素再包裹groupItem
+            const childDomArr: ReactElement[] = children?.map((item: ILayerItem) => this.buildComponents(layerManager, item));
+            return createElement(GroupLayer, { key: layer.id }, ...childDomArr);
+        } else {
+            return createElement(ComponentContainer, { layer, key: layer.id, layerManager });
+        }
     }
 
 }

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

@@ -51,6 +51,11 @@ const legends = {
     rightBottom: { right: 5, bottom: 0 },
 };
 
+const halfConifg = {
+    startAngle: 180,
+    endAngle: 360,
+};
+
 // 处理数据格式
 const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
     if (!data?.length) {
@@ -79,6 +84,7 @@ export interface ComponentStyle {
     center?: { x: number, y: number };
     roseType?: string; // 玫瑰图配置
     renderer?: "canvas" | "svg";
+    isHalf?: boolean; // 是否半扇形/环形图
 }
 
 export interface ComponentProps {
@@ -176,7 +182,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     }, [dataConfig?.sourceType, dataConfig?.sourceId]);
 
     const renderChart = () => {
-        const { legend, tooltip, radius, innerRadius, color, label, labelLine, padAngle, roseType, center } = config;
+        const { legend, tooltip, radius, innerRadius, color, label, labelLine, padAngle, roseType, center, isHalf } = config;
         const option = _.cloneDeep(defOption);
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !data?.length ? option.series : data;
@@ -186,6 +192,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         option.title.show = !temData?.length;
         option.series = temData.map(r => ({
             ...r,
+            ...(isHalf ? halfConifg : {}),
             type: "pie",
             radius: [`${innerRadius}%`, `${radius}%`],
             center: [`${center?.x}%`, `${center?.y}%`],