aldehyde 0.2.487 → 0.2.488

package/src/aldehyde/table/page-chart.tsx

@@ -0,0 +1,192 @@
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import { Row, Col, Empty } from "antd";
+import LowcodeComponents from "../lowcode-components/index";
+import { LtmplConfig } from "../tmpl/interface";
+import "./page-chart.less";
+
+const { LineChart, ColumnChart, Column3dChart, BarChart, PieChart, LineBarChart } = LowcodeComponents;
+
+const colors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"];
+
+const lineChart = { // 基础折线图配置
+    renderer: "svg",
+    step: false,
+    smooth: true,
+    isArea: false,
+    dataZoom: false,
+    slider: false,
+    connectNulls: false,
+    nullSetZero: false,
+    areaStyle: { opacity: 0.2 },
+    color: colors,
+    lineStyle: { width: 1 },
+    symbol: { symbolSize: 4, showSymbol: false, symbol: "circle", itemStyle: { color: colors } },
+    xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    grid: { top: 30, bottom: 30, left: 30, right: 20, },
+    legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+    tooltip: { show: true }
+};
+
+const columnChart = { // 基础柱状图配置
+    renderer: "svg",
+    color: colors,
+    barMaxWidth: 20,
+    lineStyle: { width: 1 },
+    dataZoom: false,
+    slider: false,
+    xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    grid: { top: 30, bottom: 30, left: 30, right: 20, },
+    legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+    tooltip: { show: true }
+};
+
+const pieChart = { // 基础饼图
+    isHalf: false,
+    renderer: "svg",
+    radius: 70, innerRadius: 0, color: colors,
+    padAngle: 0,
+    label: { show: true, position: "outside", formatter: "{b}", color: "#C6C6C6", fontStyle: "normal", fontWeight: "normal", fontSize: 12 },
+    labelLine: { show: true, smooth: false },
+    legend: { show: false, position: "top", orient: "horizontal", type: "plain", formatter: "a", space: 0, textStyle: { color: "#C6C6C6", fontSize: 14, padding: 12 } },
+    tooltip: { show: true },
+    center: { x: 50, y: 50 }
+};
+
+const styleConfig = {
+    lineChart,
+    areaChart: {
+        ...lineChart,
+        isArea: true,
+        isGradient: true,
+        color: colors,
+    },
+    stepLineChart: {
+        ...lineChart,
+        step: true,
+    },
+    lineBarChart: {
+        ...lineChart,
+        color: ["#91cc75", "#5470c6"],
+        barMaxWidth: 20,
+        smooth: false,
+        symbol: { symbolSize: 4, showSymbol: false, symbol: "circle" }
+    },
+    columnChart,
+    stackColumnChart: {
+        ...columnChart,
+        color: colors
+    },
+    column3DChart: {
+        renderer: "svg",
+        color: "#0687f3",
+        barWidth: 20,
+        isBackground: true,
+        dataZoom: false,
+        slider: false,
+        lineStyle: { width: 1 },
+        xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        grid: { top: 30, bottom: 30, left: 30, right: 20, },
+        legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+        tooltip: { show: true }
+    },
+    barChart: {
+        color: colors,
+        barMaxWidth: 20,
+        dataZoom: false,
+        xAxis: { type: "value", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        yAxis: { type: "category", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        grid: { top: 10, bottom: 30, left: 40, right: 20, },
+        legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+        tooltip: { show: true }
+    },
+    pieChart,
+    roseChart: {
+        ...pieChart,
+        roseType: "radius"
+    }
+}
+
+/**
+ * 展示图表
+ */
+
+interface Props {
+    ltmplConfig: LtmplConfig;
+    criteriaData: { [key: string]: any };
+}
+
+const Index = memo((props: Props) => {
+    const { ltmplConfig, criteriaData } = props;
+    const { pageChartConfigs, criteria } = ltmplConfig;
+    const childRefs = useRef<Map<number, any>>(new Map());
+
+    const temCriteriaData = useMemo(() => {
+        if (!criteriaData) {
+            return {};
+        }
+        return criteria.reduce((total, item) => { // 处理搜索条件
+            if (`c_${item.sourceId}` in criteriaData) {
+                total[`c_${item.sourceId}`] = criteriaData[`c_${item.sourceId}`];
+            }
+            return total;
+        }, {});
+    }, [criteriaData]);
+
+    useEffect(() => {
+        return () => {
+            childRefs.current.forEach((instance) => {
+                instance.destroy(); // 逐个销毁
+            });
+        };
+    }, []);
+
+    useEffect(() => {
+        childRefs.current.forEach((instance) => {
+            instance.updateSearchParams(temCriteriaData); // 逐个更新查询条件
+        });
+    }, [temCriteriaData]);
+
+    const renderChart = (item, index) => {
+        const chartProps = {
+            style: styleConfig[item.type],
+            data: { sourceType: "sourceId", sourceId: item.dataSourceId, isInitParams: true },
+            ref: (el: any) => { if (el) childRefs.current.set(index, el); },
+        };
+        switch (item.type) {
+            case "lineChart": // 基础折线图
+                return <LineChart {...chartProps} />;
+            case "areaChart": // 面积图
+                return <LineChart {...chartProps} />;
+            case "stepLineChart": // 阶梯图
+                return <LineChart {...chartProps} />;
+            case "lineBarChart": // 折柱混合图
+                return <LineBarChart {...chartProps} />;
+            case "columnChart": // 基础柱状图
+                return <ColumnChart base={{ type: "ColumnChart" }} {...chartProps} />;
+            case "stackColumnChart": // 堆叠柱状图
+                return <ColumnChart base={{ type: "StackColumnChart" }} {...chartProps} />;
+            case "column3DChart": // 立体柱状图
+                return <Column3dChart {...chartProps} />;
+            case "barChart": // 条形图
+                return <BarChart {...chartProps} />;
+            case "pieChart": // 饼图
+                return <PieChart {...chartProps} />;
+            case "roseChart": // 玫瑰图
+                return <PieChart {...chartProps} />;
+            default:
+                return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        }
+    };
+
+    return <Row>
+        {pageChartConfigs.map((item, index) =>
+            <Col key={index} span={item.colSpan || 24}>
+                <div className="page-chart">{renderChart(item, index)}</div>
+            </Col>)}
+    </Row>;
+});
+
+export default Index;

package/src/aldehyde/table/row-table.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement, memo } from "react";
+import { Row, Col } from "antd";
+import { LtmplConfig } from "../tmpl/interface";
+import { LtmplTable } from "../index";
+
+interface Props {
+    mainTable: ReactElement; // 表格列默认主表格
+    ltmplConfig: LtmplConfig;
+    tableNumber: number; // 表格数量
+    sourceId: string;
+}
+
+const Index = memo((props: Props) => {
+    const { mainTable, ltmplConfig, tableNumber, sourceId } = props;
+    const showTableNum = (tableNumber || ltmplConfig.defTableSize || 1) - 1;
+
+    return <Row>
+        <Col span={24}>{mainTable}</Col>
+        {Array(showTableNum).fill(1).map((_, index) => <Col span={24} key={index}></Col>)}
+    </Row>;
+});
+
+export default Index;

package/src/aldehyde/tmpl/interface.tsx

@@ -340,7 +340,7 @@ export type ButtonName =
   | "ltmplSelectAdd"
   | "reStat"
   | "drilling"
-  | "ratmplSelect" | "edit2D" | "view2D";
+  | "ratmplSelect" | "edit2D" | "view2D" | "showTableAdd";
 
 export type ChartType = "line" | "pie" | "column";
 export type GroupDisplayConfig =
@@ -453,6 +453,8 @@ export interface FieldConfig extends FieldBase {
   relValueField?: FieldConfig;
   subRelValueField?: FieldConfig;
   relValueField3?: FieldConfig;
+  relMinValueField?: FieldConfig;
+  relMaxValueField?: FieldConfig;
   hidden?: boolean;
   serverKey?: string;
   sourceId?: string;
@@ -581,6 +583,14 @@ export interface TtmplConfig extends TmplBase {
 //
 // }
 
+export interface PageChartConfig {
+  colSpan: number;
+  dataSourceId: string;
+  id: string;
+  title: string;
+  type: string;
+}
+
 export interface LtmplConfig extends SelectConfig {
   actions?: ActionConfig[];
   rowActions: ActionConfig[];
@@ -674,6 +684,8 @@ export interface LtmplConfig extends SelectConfig {
   splitTabShowType?: "tab" | "tag" | "radio"; // Tab拆解条件
   showSplitTabDataCount?: boolean; // tab拆解条件是否显示统计数据
   paginationPosition?: "left" | "middle" | "right"; // 分页组件位置
+  pageChartConfigs?: PageChartConfig[];   // 展示图表配置
+  defTableSize?: number; // 添加多表格默认表格数
 }
 
 export interface EnumItem {

package/src/aldehyde/tmpl/tmpl-config-analysis.tsx

@@ -337,7 +337,7 @@ TmplConfigAnalysis.buildInFuncFields = (dtmplConfig: DtmplConfig) => {
                 (field.requiredRuleCriteria &&
                     field.requiredRuleCriteria.length > 0) ||
                 (field.usableRuleCriteria && field.usableRuleCriteria.length > 0)
-                || field.relValueField || field.relValueField3
+                || field.relValueField || field.relValueField3 || field.relMinValueField || field.relMaxValueField
             ) {
                 field.shouldUpdate = true;
                 buildInFuncFields.push(field);