aldehyde 0.2.527 → 0.2.529

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/assets.ts

@@ -55,6 +55,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";
 
 interface ComponentItemConfig {
     baseInfo: BaseInfoType, // 基础信息
@@ -475,5 +476,12 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compName: "雷达图",
             compKey: "RadarChart"
         }
+    },
+    HeatmapChart: {
+        componentNode: HeatmapChart,
+        baseInfo: {
+            compName: "热力图",
+            compKey: "HeatmapChart"
+        }
     }
 };

package/src/aldehyde/module/dtmpl-edit-card.tsx

@@ -79,7 +79,6 @@ export default class DtmplEditCard extends React.PureComponent<
             if (prevProps.sourceId != this.props.sourceId || dtmplConfig == null || (!this.props.code && prevProps.code)) {
                 await this.loadConfigData();
             } else if (prevProps.sourceId != this.props.sourceId || queryingCode != code || !dtmplData) {
-                await this.handleBuildInFuncFields(dtmplConfig);
                 //防止反复请求 code
                 if (code) {
                     await this.loadCodeData(dtmplConfig, code);
@@ -115,7 +114,6 @@ export default class DtmplEditCard extends React.PureComponent<
                 addTmplId
             );
         }
-        await this.handleBuildInFuncFields(dtmplConfig);
         this.handleRelValueField(dtmplConfig);
         if (dtmplConfig.entity) {
             let dtmplData = dtmplConfig.entity;
@@ -125,12 +123,10 @@ export default class DtmplEditCard extends React.PureComponent<
             } else {
                 this.setState({ queryingCode: code, dtmplData, dtmplConfig, loading: false });
             }
+            setTimeout(() => this.handleBuildInFuncFields(dtmplConfig), 300);
         } else {
             await this.loadData(dtmplConfig);
-            this.setState({
-                dtmplConfig,
-                loading: false,
-            });
+            this.setState({ dtmplConfig, loading: false });
         }
     };
 

package/src/aldehyde/module/dtmpl-edit-page.tsx

@@ -121,7 +121,6 @@ export default class DtmplEditPage extends React.PureComponent<
       ) {
         await this.loadConfigData();
       } else {
-        await this.handleBuildInFuncFields(dtmplConfig);
         await this.loadData(dtmplConfig);
       }
     }
@@ -153,7 +152,6 @@ export default class DtmplEditPage extends React.PureComponent<
       );
     }
     this.handleRelValueField(dtmplConfig);
-    await this.handleBuildInFuncFields(dtmplConfig);
     // 直接复制
     if (dtmplConfig?.entity && dtmplConfig?.entity?.code == code) {
       let dtmplData = dtmplConfig.entity;
@@ -163,13 +161,11 @@ export default class DtmplEditPage extends React.PureComponent<
       } else {
         this.setState({ dtmplData, id: code, loading: false });
       }
+      setTimeout(() => this.handleBuildInFuncFields(), 300);
     } else {
       await this.loadData(dtmplConfig);
     }
-    this.setState({
-      dtmplConfig,
-      loading: false,
-    });
+    this.setState({ dtmplConfig, loading: false });
   };
 
   // 表单关联项secondCriterion处理start

package/src/aldehyde/module/ttmpl-table.tsx

@@ -48,6 +48,9 @@ export interface TtmplTableProps {
     bordered?: boolean; // 表格是否显示边框
     showHeader?: boolean; // 表格是否显示表头
     ettmplConfig?: EttmplConfig; // 展开树配置
+    ettmplRootSourceId?: string; // 展开树配置根 sourceId
+    isRecursion?: boolean; // 是否递归
+    recursionSourceId?: string; // 递归 sourceId
 }
 
 const TtmplTable = (props: TtmplTableProps) => {
@@ -80,7 +83,8 @@ const TtmplTable = (props: TtmplTableProps) => {
         hideOnSinglePage,
         bordered,
         showHeader,
-        ettmplConfig: pEttmplConfig
+        ettmplConfig: pEttmplConfig,
+        ettmplRootSourceId, isRecursion = false, recursionSourceId
     } = props;
     const { translate } = useContext(LocaleContext);
     const [ltmplConfigRes, setLtmplConfigRes] = useState<LtmplConfigRes>();
@@ -99,6 +103,7 @@ const TtmplTable = (props: TtmplTableProps) => {
     const [drawerSize, setDrawerSize] = useState<number | string>("92vw"); // 抽屉组件
     const [isCopy, setIsCopy] = useState<boolean>(false); // 是否复制
     const [ettmplConfig, setEttmplConfig] = useState<EttmplConfig>(pEttmplConfig); // 展开树配置
+    const [treeAddData, setTreeAddData] = useState<{ [key: string]: any }>(); // 展开树添加递归及关联关系配置
     const { token } = useToken();
 
     const toCriteriaData = (values: object) => {
@@ -113,11 +118,11 @@ const TtmplTable = (props: TtmplTableProps) => {
     };
 
     const loadLtmplConfig = async () => {
-        const res: LtmplConfigRes = await HCDataSource.requestLtmplConfig(serverKey, sourceId);
         if (!pEttmplConfig) {
             const ettmplConfig_: EttmplConfig = await HCDataSource.requestEttmplConfig(serverKey, sourceId);
             setEttmplConfig(ettmplConfig_);
         }
+        const res: LtmplConfigRes = await HCDataSource.requestEttmplLtmplConfig(serverKey, ettmplRootSourceId, isRecursion ? recursionSourceId : sourceId);
         let criteriaData_: object;
         let defCriteriaValue = {};
         //提取 过滤条件的默认值
@@ -191,6 +196,14 @@ const TtmplTable = (props: TtmplTableProps) => {
         }
     };
 
+
+    // 展开树行操作添加按钮
+    const doAddRaction = (ractionId: string, mainCode: string) => {
+        setSelectedCode(null);
+        setShowDtmplEdit(true);
+        setTreeAddData({ ractionId, mainCode });
+    }
+
     const doSearch = (params_?: object) => {
         let params = { ...(criteriaData || {}), ...params_ };
         //追加过滤条件，hiddenColIds，innerQueryKey
@@ -222,11 +235,14 @@ const TtmplTable = (props: TtmplTableProps) => {
 
     // 嵌套表格配置
     const expandedRowRender = (val: { [key: string]: any }) => {
-        const { subNodes, recursiveRatmplId } = ettmplConfig;
+        const { subNodes, recursiveRatmplId, sourceId: ettmplSourceId } = ettmplConfig;
         return <div style={{ marginLeft: "24px", background: token.colorBgContainer }}>
             {recursiveRatmplId ?
                 <TtmplTable
+                    isRecursion={true}
+                    recursionSourceId={ettmplSourceId}
                     ettmplConfig={ettmplConfig}
+                    ettmplRootSourceId={ettmplRootSourceId}
                     hideOnSinglePage={true}
                     funcMode="simple"
                     serverKey={serverKey}
@@ -237,6 +253,7 @@ const TtmplTable = (props: TtmplTableProps) => {
                 {subNodes.length > 1 ? <h4 style={{ padding: "12px 0 0 12px" }}>{item.title}</h4> : ""}
                 <TtmplTable
                     ettmplConfig={item}
+                    ettmplRootSourceId={ettmplRootSourceId}
                     hideOnSinglePage={true}
                     funcMode="simple"
                     serverKey={serverKey}
@@ -283,6 +300,7 @@ const TtmplTable = (props: TtmplTableProps) => {
                     showHeader={showHeader}
                     expandable={(subNodes?.length || recursiveRatmplId) ? { expandedRowRender } : undefined} // 嵌套表格
                     showEmpty={false}
+                    doAddRaction={doAddRaction}
                 />
                 {buttons.includes("detail") && showDtmplView ? (
                     <ModalDtmplView
@@ -301,8 +319,8 @@ const TtmplTable = (props: TtmplTableProps) => {
                         serverKey={serverKey}
                         open={showDtmplEdit}
                         onCancel={() => setShowDtmplEdit(false)}
-                        sourceId={dtmplSourceId ? dtmplSourceId : sourceId}
-                        mainCode={mainCode}
+                        sourceId={treeAddData?.ractionId || (dtmplSourceId ? dtmplSourceId : sourceId)}
+                        mainCode={treeAddData?.mainCode || mainCode}
                         code={selectedCode}
                         onOk={handleDtmplEdit}
                         isCopy={isCopy}
@@ -317,8 +335,8 @@ const TtmplTable = (props: TtmplTableProps) => {
                             setShowDtmplCustomEdit(false);
                         }}
                         customPath={customEditPagePath}
-                        sourceId={sourceId}
-                        mainCode={mainCode}
+                        sourceId={treeAddData?.ractionId || sourceId}
+                        mainCode={treeAddData?.mainCode || mainCode}
                         code={selectedCode}
                         isCopy={isCopy}
                     />