aldehyde 0.2.527 → 0.2.528

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

@@ -0,0 +1,362 @@
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import { Spin } from "antd";
+import { useLocale } from "../../locale/useLocale";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+/**
+ * 热力图组件
+ * x轴：维度1（d1）
+ * y轴：维度2（d2）
+ * 数值：事实1（v1）
+ * 状态-颜色：事实2（v2）
+ */
+
+const defData = [
+    ['01', 'A', 0],
+    ['02', 'A', 0],
+    ['03', 'A', 0],
+    ['04', 'A', 2.3],
+    ['05', 'A', 3.5],
+    ['06', 'A', 0],
+    ['01', 'B', 2.820],
+    ['02', 'B', 2.950],
+    ['03', 'B', 0],
+    ['04', 'B', 3.620],
+    ['05', 'B', 3.710],
+    ['06', 'B', 4.650],
+    ['01', 'C', 3.210],
+    ['02', 'C', 3.350],
+    ['03', 'C', 3.660],
+    ['04', 'C', 0],
+    ['05', 'C', 3.920],
+    ['06', 'C', 4.100],
+    ['01', 'D', 4.600],
+    ['02', 'D', 4.750],
+    ['03', 'D', 3.910],
+    ['04', 'D', 3.820],
+    ['05', 'D', 0],
+    ['06', 'D', 3.640]
+];
+
+const defVisualMap: any = {// 默认分段视觉映射
+    show: false,
+    type: 'piecewise',
+    left: 'left',
+    bottom: '5%',
+    textStyle: { color: '#fff' },
+    pieces: [
+        { min: 0, max: 0, color: '#666e7f', label: '停工无生产' },
+        { min: 0.001, lt: 3.5, color: '#00c878', label: '优(<3.5)' },
+        { min: 3.5, lt: 4.5, color: '#ffd040', label: '良(3.5~4.5)' },
+        { min: 4.5, color: '#ff3b30', label: '差(≥4.5)' }
+    ]
+};
+
+const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
+    tooltip: { trigger: "axis", formatter: undefined },
+    grid: { top: 30, left: 30, right: 20, bottom: 30 },
+    visualMap: {     // 分段视觉映射
+        show: false
+    },
+    xAxis: {
+        type: 'category',
+        data: ['01', '02', '03', '04', '05', '06'],
+    },
+    yAxis: {
+        type: 'category',
+        data: ['A', 'B', 'C', 'D'],
+    },
+    series: [
+        {
+            type: 'heatmap',
+            data: defData,
+            itemStyle: {
+                borderColor: '#aaaaaa',
+                borderWidth: 1
+            },
+            label: {
+                show: true,
+                color: '#fff',
+                fontSize: 9,
+            },
+        }
+    ]
+};
+
+// 处理关系字段显示
+const handleRelationVal = (val: string) => {
+    if (!val) {
+        return val;
+    }
+    if (typeof val === "string" && val?.includes("@R@")) {
+        return val.split("@R@")[1];
+    } else {
+        return val;
+    }
+}
+
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    if (!data?.length) {
+        return { xAxisData: [], yAxisData: [], data: [] };
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        // 维度字段 (d1、d2等)
+        const dNames = Object.keys(config).filter((r) => r.startsWith("d") && !r.includes("-")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        // 事实字段 (v1、v2等) v1数值，v2颜色
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v") && !r.includes("-")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return value.map((r) => ({ value: [handleRelationVal(r["d1"]), handleRelationVal(r["d2"]), r["v1"]], itemStyle: { color: r["v2-color"] }, otherData: [...dNames.map(v => ({ name: config[v], value: handleRelationVal(r[v]), key: v })), ...vNames.map(v => ({ name: config[v], value: r[v], key: v, color: r[v + "-color"] }))] }));
+    });
+    let xAxisData = [], yAxisData = [];
+    temData[0].forEach((r) => {
+        if (!xAxisData.includes(r.value[0])) xAxisData.push(r.value[0]);
+        if (!yAxisData.includes(r.value[1])) yAxisData.push(r.value[1]);
+    });
+    return { xAxisData, yAxisData, data: temData[0] };
+};
+
+export interface ComponentStyle {
+    tooltip?: { show: boolean };
+    grid?: { top: number, left: number, right: number, bottom: number };
+    xAxis?: { [key: string]: any };
+    yAxis?: { [key: string]: any };
+    renderer?: "canvas" | "svg";
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width: number, height: number };
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+    updateSearchParams: (params: { [key: string]: any }) => 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<{ [key: string]: any }[]>([]);
+    const [xAxisData, setXAxisData] = useState<string[]>([]);
+    const [yAxisData, setYAxisData] = useState<string[]>([]);
+    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const chartRef = useRef<HTMLDivElement>(null);
+    const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+    const resizeObserverRef = useRef<any>(null);
+    const { translate } = useLocale();
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        resizeObserverRef.current && resizeObserverRef.current.disconnect();
+        chart.current && chart.current.dispose();
+    };
+
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config: dataConfig, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData.data || []);
+            setXAxisData(temData.xAxisData || []);
+            setYAxisData(temData.yAxisData || []);
+            if (dataConfig?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, dataConfig?.pollingInterval || 60000);
+            }
+        }
+    }
+
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData.data || []);
+            setXAxisData(temData.xAxisData || []);
+            setYAxisData(temData.yAxisData || []);
+        }
+    }
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
+            setConfig({ ...(newStyle || {}) });
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+            setRenderType(newStyle?.renderer || "svg");
+            handleInitData(newDataConfig);
+            setSearchParams(newDataConfig.searchParams);
+            setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
+        },
+        updateSearchParams: (params) => {
+            setInitSearchParams(params);
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        const container = chartRef.current;
+        if (!container || container.offsetWidth === 0 || container.offsetHeight === 0) return;
+        if (chart.current) {
+            requestAnimationFrame(() => {
+                chart.current.resize({ animation: { duration: 500 } });
+            });
+        }
+    };
+
+    useEffect(() => {
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType, useDirtyRect: true });
+        // 监听容器尺寸变化：页面从隐藏（如切到其他 tab）变为可见时，图表自动重新适应
+        resizeObserverRef.current = new ResizeObserver(() => handleResize());
+        resizeObserverRef.current.observe(chartRef.current);
+    }, [renderType]);
+
+    // 请求数据
+    const getData = async (params?: object) => {
+        setLoading(true);
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
+        const temData = handleData(data?.value);
+        setData(temData.data || []);
+        setXAxisData(temData.xAxisData || []);
+        setYAxisData(temData.yAxisData || []);
+        return data?.config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async (params?: object) => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData(params);
+        if (config?.requestMode === "polling") {
+            pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            const temData = handleData(dataConfig.staticData);
+            setData(temData.data || []);
+            setXAxisData(temData.xAxisData || []);
+            setYAxisData(temData.yAxisData || []);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
+            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
+                initSearchParams && getInitData(initSearchParams);
+            } else {
+                getInitData();
+            }
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
+
+    // 搜索参数变化时重新请求数据
+    useEffect(() => {
+        if (searchParams) {
+            const params = { ...(initSearchParams || {}), ...searchParams };
+            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
+                initSearchParams && getInitData(params);
+            } else {
+                getInitData(params);
+            }
+        }
+    }, [searchParams, initSearchParams]);
+
+    const renderChart = (tData) => {
+        const { grid, tooltip, xAxis, yAxis } = config;
+        const option = _.cloneDeep(defOption);
+        const isDefaultData = isDesignMode && !tData?.length;
+        // 编辑态无数据显示默认数据
+        const temData = isDefaultData ? defData : tData;
+        option.grid = grid;
+        option.tooltip = {
+            trigger: "axis",
+            ...tooltip,
+            formatter: (params) => {
+                const temData = params[0]?.data?.otherData || [];
+                if (!temData?.length) {
+                    return undefined;
+                }
+                return temData.map(item => `<div style="margin-bottom: 6px;"><span style="font-weight: bold;font-size: 15px;">${item.name}</span>：<span style=${item.color ? `color:${item.color}` : ""}>${item.value}</span></div>`).join('');
+            }
+        };
+        option.xAxis = { ...option.xAxis, ...xAxis, data: isDefaultData ? option.xAxis.data : xAxisData || [] };
+        option.yAxis = { ...option.yAxis, ...yAxis, data: isDefaultData ? option.yAxis.data : yAxisData || [] };
+        option.title.text = translate("${暂无数据}");
+        option.title.show = !temData?.length;
+        option.visualMap = isDefaultData ? defVisualMap : { show: false };
+        option.series = [{
+            type: "heatmap",
+            data: temData,
+            itemStyle: {
+                borderColor: "#000",
+                borderWidth: 1,
+            },
+            label: {
+                show: true,
+                color: "#fff",
+                fontSize: 12,
+            },
+        }];
+        chart.current.setOption(option, true);
+    };
+
+    useEffect(() => {
+        if (config) {
+            renderChart(data);
+        }
+    }, [config, data]);
+
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
+});
+
+export default Index;
+

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

@@ -54,6 +54,7 @@ import Carousel from "./carousel";
 import SearchForm from "./search-form";
 import BaseRadio from "./base-radio";
 import RadarChart from "./radar-chart";
+import HeatmapChart from "./heatmap-chart";
 
 
 type CompoundedComponent = {
@@ -112,7 +113,8 @@ type CompoundedComponent = {
     Carousel?: typeof Carousel,
     SearchForm?: typeof SearchForm,
     BaseRadio?: typeof BaseRadio,
-    RadarChart?: typeof RadarChart
+    RadarChart?: typeof RadarChart,
+    HeatmapChart?: typeof HeatmapChart,
 };
 
 const LowcodeComponents: CompoundedComponent = {
@@ -125,7 +127,7 @@ const LowcodeComponents: CompoundedComponent = {
     Decoration6, Decoration7, Decoration8, Decoration9, Decoration10, Decoration11,
     BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart, ActTable, ProgressChart,
     LineBarChart, Column3dChart, StrokeAnimation, EffectScatterMap3D, BaseButton, BaseTabs,
-    PlaceholderComponent, Carousel, SearchForm, BaseRadio, RadarChart
+    PlaceholderComponent, Carousel, SearchForm, BaseRadio, RadarChart, HeatmapChart
 };
 
 export default LowcodeComponents;

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

@@ -1,64 +1,64 @@
-export interface UpdateOptions {
-    reRender: boolean;
-}
-
-/**
- * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
- * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
- * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
- * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
- * @param C 组件配置类型，即组件的完整属性类型
- */
-abstract class AbstractController<I = any, C = any> {
-
-    /**
-     * 组件实例引用
-     * @protected
-     */
-    protected instance: I | null = null;
-    /**
-     * 组件配置(包括组件数据)
-     * @protected
-     */
-    public config: C | null = null;
-    /**
-     * 组件所处容器的dom元素
-     * @protected
-     */
-    public container: HTMLElement | null = null;
-
-    /******************生命周期******************/
-
-    /**
-     * 创建组件并将组件挂载到指定的容器中
-     * @param container 容器
-     * @param config 组件配置
-     */
-    public abstract create(container: HTMLElement, config: C): Promise<void>;
-
-    /**
-     * 更新组件配置，并触发组件重新渲染
-     * @param config 组件属性（参数）
-     * @param upOp 操作类型
-     */
-    public abstract update(config: C, upOp?: UpdateOptions): void;
-
-    /**
-     * 销毁组件
-     */
-    public destroy(): void {
-        this.instance = null;
-        this.config = null;
-        this.container = null;
-    }
-
-
-    /******************普通方法******************/
-    /**
-     * 获取组件配置数据
-     */
-    public abstract getConfig(): C | null;
-
-}
-
-export default AbstractController;
+export interface UpdateOptions {
+    reRender: boolean;
+}
+
+/**
+ * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
+ * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
+ * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
+ * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
+ * @param C 组件配置类型，即组件的完整属性类型
+ */
+abstract class AbstractController<I = any, C = any> {
+
+    /**
+     * 组件实例引用
+     * @protected
+     */
+    protected instance: I | null = null;
+    /**
+     * 组件配置(包括组件数据)
+     * @protected
+     */
+    public config: C | null = null;
+    /**
+     * 组件所处容器的dom元素
+     * @protected
+     */
+    public container: HTMLElement | null = null;
+
+    /******************生命周期******************/
+
+    /**
+     * 创建组件并将组件挂载到指定的容器中
+     * @param container 容器
+     * @param config 组件配置
+     */
+    public abstract create(container: HTMLElement, config: C): Promise<void>;
+
+    /**
+     * 更新组件配置，并触发组件重新渲染
+     * @param config 组件属性（参数）
+     * @param upOp 操作类型
+     */
+    public abstract update(config: C, upOp?: UpdateOptions): void;
+
+    /**
+     * 销毁组件
+     */
+    public destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.container = null;
+    }
+
+
+    /******************普通方法******************/
+    /**
+     * 获取组件配置数据
+     */
+    public abstract getConfig(): C | null;
+
+}
+
+export default AbstractController;

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

@@ -1,77 +1,77 @@
-import AbstractController from "./abstract-controller";
-import React, { ComponentType } from "react";
-import ComponentController from "./component-controller";
-
-export type ClazzTemplate<C> = new () => C | null;
-
-export interface ActionInfo {
-    name: string;
-    id: string;
-    handler: (controller: ComponentController, params?: any) => void;
-}
-
-export interface ICategorize {
-    key: string;
-    name: string;
-    icon?: ComponentType;
-    parentKey?: string;
-    iconType?: string;
-}
-
-/**
- * 组件基础信息
- */
-export interface BaseInfoType {
-    /**
-     * 组件显示名称
-     */
-    compName: string;
-    /**
-     * 组件标识
-     */
-    compKey: string;
-    /**
-     * 主分类
-     */
-    categorize?: string;
-    /**
-     * 子分类
-     */
-    subCategorize?: string;
-    /**
-     * 版本
-     */
-    version?: string;
-    /**
-     * 初始宽度
-     */
-    width?: number;
-    /**
-     * 初始高度
-     */
-    height?: number;
-}
-
-/**
- * 自动扫描抽象组件定义核心类。
- * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
- * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
- *
- * 泛型说明：
- * C: 组件控制器类，用于指定当前组件定义对应的控制器类
- * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
- */
-export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
-
-    /**
-     * 返回组件基础信息，用于在组件列表中展示
-     */
-    abstract getBaseInfo(): BaseInfoType;
-
-    /**
-     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
-     * 后续将通过该控制器的实例对象来控制组件的生命周期
-     */
-    abstract getController(): ClazzTemplate<C> | null;
-}
-
+import AbstractController from "./abstract-controller";
+import React, { ComponentType } from "react";
+import ComponentController from "./component-controller";
+
+export type ClazzTemplate<C> = new () => C | null;
+
+export interface ActionInfo {
+    name: string;
+    id: string;
+    handler: (controller: ComponentController, params?: any) => void;
+}
+
+export interface ICategorize {
+    key: string;
+    name: string;
+    icon?: ComponentType;
+    parentKey?: string;
+    iconType?: string;
+}
+
+/**
+ * 组件基础信息
+ */
+export interface BaseInfoType {
+    /**
+     * 组件显示名称
+     */
+    compName: string;
+    /**
+     * 组件标识
+     */
+    compKey: string;
+    /**
+     * 主分类
+     */
+    categorize?: string;
+    /**
+     * 子分类
+     */
+    subCategorize?: string;
+    /**
+     * 版本
+     */
+    version?: string;
+    /**
+     * 初始宽度
+     */
+    width?: number;
+    /**
+     * 初始高度
+     */
+    height?: number;
+}
+
+/**
+ * 自动扫描抽象组件定义核心类。
+ * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
+ * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
+ *
+ * 泛型说明：
+ * C: 组件控制器类，用于指定当前组件定义对应的控制器类
+ * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
+ */
+export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
+
+    /**
+     * 返回组件基础信息，用于在组件列表中展示
+     */
+    abstract getBaseInfo(): BaseInfoType;
+
+    /**
+     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
+     * 后续将通过该控制器的实例对象来控制组件的生命周期
+     */
+    abstract getController(): ClazzTemplate<C> | null;
+}
+