aldehyde 0.2.486 → 0.2.488

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

@@ -6,7 +6,7 @@ import {
 import {
   ExportOutlined, FundOutlined, LineChartOutlined,
   PlusCircleOutlined, PlusOutlined, ReloadOutlined, RetweetOutlined, SearchOutlined,
-  TableOutlined, ImportOutlined
+  TableOutlined, ImportOutlined, AppstoreAddOutlined
 } from "@ant-design/icons";
 import _ from "lodash";
 import "./index.css";
@@ -36,6 +36,8 @@ import DraggableModal from "../module/draggable-modal";
 import Icon from "../icon/aliIcon";
 import PageConfigButton from "./page-config-button";
 import { defPageSizeOptions } from "./pagination"; // 默认分页数
+import PageChart from "./page-chart"; // 展示图表
+import RowTable from "./row-table";
 
 const { Content, Sider } = Layout;
 const { Text } = Typography;
@@ -118,6 +120,7 @@ interface ActTableStat {
   tabActiveKey?: string; // Tabs选中项
   pageSizeOptions?: number[]; // 设备分页数
   customDrawerSize?: number | string; // 自定义页面抽屉宽度
+  tableNumber?: number; // 添加多表格-显示表格数量
 }
 let serial_number = new Date().getTime();
 let busyReminderTime = 0;
@@ -154,7 +157,8 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
     tabsOptions: [],
     tabActiveKey: "all",
     pageSizeOptions: defPageSizeOptions,
-    customDrawerSize: undefined
+    customDrawerSize: undefined,
+    tableNumber: undefined,
   };
 
   static contextType = LocaleContext;
@@ -1028,6 +1032,10 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
       <>
         <Space>
           {userPageConfig && allowUserConfig ? <PageConfigButton menuCode={menuId} handleResetUserPageConfig={this.handleResetUserPageConfig} handleUpdateUserPageConfig={this.handleUpdateUserPageConfig} userCriteriaData={userCriteriaData} /> : ""}
+          {buttons.includes("showTableAdd") ?
+            <Tooltip title={translate("${添加列表}")}>
+              <Button onClick={() => { }}><AppstoreAddOutlined /></Button>
+            </Tooltip> : ""}
           {funcMode == "common" && this.criteriaFormUseful() ? (
             <Popover trigger="click" content={this.renderCriteriaForm()}>
               <Button>
@@ -1516,7 +1524,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
   renderContent = () => {
     let {
       queryKey, loading, selectedRows, hiddenRowCodes, viewModels, sortedColConfigs, hiddenColIds, showL2ActTable,
-      pageInfo, editings, userCriteriaData, tabsOptions, tabActiveKey, pageSizeOptions
+      pageInfo, editings, userCriteriaData, tabsOptions, tabActiveKey, pageSizeOptions, tableNumber
     } = this.state;
     let {
       mainCode, sourceId, ltmplConfig, funcMode, operatable,
@@ -1633,6 +1641,25 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
       {splitTabShowType === "radio" ? <div className="split-tab" ><div className="split-tab-left"><Radio.Group onChange={(e) => this.doTabSearch(e.target.value)} value={tabActiveKey} options={tabsOptions} /></div><div className="split-tab-right">{this.renderHeaderButtons()}</div></div> : ""}
     </>;
 
+    const renderTable = <Layout hasSider style={{ backgroundColor: "#fff" }}>
+      <Sider
+        width={ltreeEntitySelect ? 260 : 0}
+        theme={"light"}
+        style={{ paddingRight: ltreeEntitySelect ? '10px' : "0px" }}
+      >
+        {ltreeEntitySelect ?
+          <EntryControl style={{ width: "300px" }} onChange={this.ltreeValueChange} fieldConfig={ltreeEntitySelect}></EntryControl> : null}
+      </Sider>
+      <Layout style={{ backgroundColor: "#fff" }}>
+        <Content style={{ overflow: "initial" }}>
+          {showAggregates ? this.renderAggregates() : ""}
+          {displayCriteriaCard ? this.renderCriteriaForm() : null}
+          {buttons.includes("rowEdit") ? <AntdForm ref={this.formRef} component={false} onValuesChange={this.doRowEditFormChange}>{renderActTable}</AntdForm> : renderActTable}
+          <PageChart ltmplConfig={ltmplConfig} criteriaData={userCriteriaData} />
+        </Content>
+      </Layout>
+    </Layout>;
+
     return (
       <>
         {buttons.includes("analysis") && showL2ActTable ? (
@@ -1678,28 +1705,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
                 )}
               </Col>
             </Row> : null}
-          {(<Row><Col span={24}><Layout hasSider style={{ backgroundColor: "#fff" }}>
-            <Sider
-              width={ltreeEntitySelect ? 260 : 0}
-              theme={"light"}
-              style={{
-                paddingRight: ltreeEntitySelect ? '10px' : "0px"
-              }}
-            >
-              {ltreeEntitySelect ?
-                <EntryControl style={{ width: "300px" }} onChange={this.ltreeValueChange} fieldConfig={ltreeEntitySelect}></EntryControl>
-                //     <NavigationTree fieldConfig={ltreeEntitySelect} />
-                : null}
-            </Sider>
-            <Layout style={{ backgroundColor: "#fff" }}>
-              <Content style={{ overflow: "initial" }}>
-                {showAggregates ? this.renderAggregates() : ""}
-                {displayCriteriaCard ? this.renderCriteriaForm() : null}
-                {buttons.includes("rowEdit") ? <AntdForm ref={this.formRef} component={false} onValuesChange={this.doRowEditFormChange}>{renderActTable}</AntdForm> : renderActTable}
-              </Content>
-            </Layout>
-          </Layout></Col></Row>
-          )}
+          {buttons.includes("showTableAdd") ? <RowTable mainTable={renderTable} ltmplConfig={ltmplConfig} tableNumber={tableNumber} sourceId={sourceId} /> : renderTable}
           {/*此处放页脚*/}
           {ltmplConfig.footer ? (
             <div

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

@@ -0,0 +1,10 @@
+.page-chart {
+    width: 100%;
+    height: 240px;
+
+    .ant-spin,
+    .ant-spin-container {
+        width: 100%;
+        height: 100%;
+    }
+}

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);