aldehyde 0.0.1

package/src/components/chart/antd/column-chart-sub.tsx

@@ -0,0 +1,67 @@
+import React , { useRef } from "react";
+import {Column}  from '@ant-design/charts';
+import {Plot,ColumnOptions} from '@antv/g2plot';
+import {Space} from 'antd';
+import {SubChartProps} from "../../tmpl/interface";
+
+interface ColumnChartProps extends SubChartProps {
+
+};
+
+const ColumnChart: React.FC<ColumnChartProps> = (paras) => {
+
+    // const ref = React.createRef<Plot<ColumnOptions>>();
+    const ref = useRef();
+
+    const downloadImage = () => {
+        if(ref.current){
+            // @ts-ignore
+            ref.current.downloadImage()
+        }
+    };
+
+    const config = {
+        data: paras.data,
+        height: 400,
+        xField: paras.config.xField,
+        yField: paras.config.yField,
+        point: {
+            size: 5,
+            shape: 'diamond',
+        },
+        xAxis: {
+            title: {
+                text: paras.config.xAxisTitle,
+                style: {fontSize: 14},
+            },
+        },
+        yAxis: {
+            title: {
+                text: paras.config.yAxisTitle,
+                style: {fontSize: 14},
+            },
+        },
+        label: {
+            style: {
+                fill: '#aaa',
+            },
+        },
+    };
+
+    return <div>
+        <Space direction="vertical" size={'middle'} style={{width: '100%'}}>
+            <button type="button" onClick={downloadImage} style={{marginRight: 24}}>
+                导出
+            </button>
+            <Column  {...config} onReady={(plot) => {
+                // @ts-ignore
+                ref.current = plot;
+            }}/>
+        </Space>
+
+    </div>
+
+}
+
+export default ColumnChart;
+

package/src/components/chart/antd/line-chart-sub.tsx

@@ -0,0 +1,65 @@
+import React, {useRef} from "react";
+import {Line } from '@ant-design/charts';
+import {Space} from 'antd';
+import {SubChartProps} from "../../tmpl/interface";
+
+interface LineChartProps extends SubChartProps {
+
+};
+
+const LineChart: React.FC<LineChartProps> = (paras) => {
+
+    const ref = useRef();
+
+    const downloadImage = () => {
+        if (ref.current) {
+            // @ts-ignore
+            ref.current.downloadImage(paras.config.xAxisTitle+"_"+paras.config.yAxisTitle)
+        }
+    };
+
+    const config = {
+        data: paras.data,
+        height: 400,
+        xField: paras.config.xField,
+        yField: paras.config.yField,
+        point: {
+            size: 5,
+            shape: 'diamond',
+        },
+        xAxis: {
+            title: {
+                text: paras.config.xAxisTitle,
+                style: { fontSize: 14 },
+            },
+        },
+        yAxis: {
+            title: {
+                text: paras.config.yAxisTitle,
+                style: { fontSize: 14 },
+            },
+        },
+        label: {
+            style: {
+                fill: '#aaa',
+            },
+        },
+    };
+
+    return <div>
+        <Space direction="vertical" size={'middle'}  style={{width:'100%'}}>
+            <button type="button" onClick={downloadImage} style={{marginRight: 24}}>
+                导出
+            </button>
+            <Line  {...config} onReady={(plot) => {
+                // @ts-ignore
+                ref.current = plot;
+            }}/>
+        </Space>
+
+    </div>
+
+}
+
+export default LineChart;
+

package/src/components/chart/antd/pie-chart-sub.tsx

@@ -0,0 +1,54 @@
+import React, {useRef} from "react";
+import {Pie } from '@ant-design/charts';
+import {Space} from 'antd';
+import {SubChartProps} from "../../tmpl/interface";
+
+interface PieChartProps extends SubChartProps {
+
+};
+
+const PieChart: React.FC<PieChartProps> = (paras) => {
+
+    const ref = useRef();
+
+    const downloadImage = () => {
+        if (ref.current) {
+            // @ts-ignore
+            ref.current.downloadImage()
+        }
+    };
+
+    const config = {
+        appendPadding: 4,
+        data: paras.data,
+        angleField: paras.config.yField,
+        colorField: paras.config.xField,
+        radius: 0.75,
+        label: {
+            type: 'spider',
+            labelHeight: 28,
+            content: '{name}\n{percentage}',
+        },
+        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
+    };
+
+    return <div >
+        <Space direction="vertical" size={'middle'}  style={{width:'100%'}}>
+            <Space>
+            <button type="button" onClick={downloadImage} style={{marginRight: 24}}>
+                导出
+            </button>
+            <div style={{fontSize:'16px'}} >{paras.groupName+"-"+paras.config.xField+"-"+paras.config.yField}</div>
+            </Space>
+            <Pie  {...config} onReady={(plot) => {
+                // @ts-ignore
+                ref.current = plot;
+            }}/>
+        </Space>
+
+    </div>
+
+}
+
+export default PieChart;
+

package/src/components/chart/antd/statview-d2-chart.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import LineChart from './line-chart-sub';
+import ColumnChart from './column-chart-sub';
+import PieChart from './pie-chart-sub';
+import {Col, Divider, Row} from "antd";
+import chartUtils from "./chart-utils";
+import {ChartType, DtmplData, LtmplConfig} from "../../tmpl/interface";
+
+interface StatView2DChartProps {
+    ltmplConfig: LtmplConfig;
+    dataSource: DtmplData[];
+    hiddenColIds?:string[];
+};
+
+interface StatView2DChartStat {
+
+};
+
+class StatviewD2Chart extends React.PureComponent<StatView2DChartProps, StatView2DChartStat> {
+
+    initData = () => {
+        const {dataSource, ltmplConfig,hiddenColIds} = this.props;
+        let data_;
+
+        console.log("chart hiddenColIds:",hiddenColIds)
+        let firstDim = undefined, secondDim = undefined, dimensions = [], facts = [];
+        ltmplConfig.columns.forEach((col) => {
+            if(!hiddenColIds || !hiddenColIds.includes(col.id)){
+                if ("fact" == col.statColType) {
+                    facts.push(col);
+                } else if ("dimension" == col.statColType) {
+                    dimensions.push(col);
+                }
+            }
+        });
+        let lineData;
+        if (dimensions.length > 1) {
+            firstDim = dimensions[0];
+            secondDim = dimensions[1];
+            data_ = chartUtils.transValueFloatGroupByDim(ltmplConfig, dataSource, firstDim);
+            lineData = new Map();
+            for (let [key, data1] of data_) {
+                lineData.set(key, []);
+                facts.forEach((fact) => {
+                    let obj1 = {};
+                    obj1['data'] = data1;
+                    obj1['config'] = {
+                        xAxisTitle: key,
+                        yAxisTitle: fact.title,
+                        xField: secondDim.title,
+                        yField: fact.title
+                    };
+                    lineData.get(key).push(obj1);
+                })
+            }
+        } else if (dimensions.length == 1) {
+            lineData = [];
+            secondDim = dimensions[0];
+            data_ = chartUtils.transValueFloat(ltmplConfig, dataSource);
+            facts.forEach((fact) => {
+                let obj1 = {};
+                obj1['data'] = data_;
+                obj1['config'] = {
+                    xAxisTitle: secondDim.title,
+                    yAxisTitle: fact.title,
+                    xField: secondDim.title,
+                    yField: fact.title
+                };
+                lineData.push(obj1);
+            })
+        }
+        return lineData;
+    }
+
+    get2DimChart = (lineData) => {
+        let {ltmplConfig} = this.props;
+        let refL2ChartType:ChartType[] = ltmplConfig.chartType;
+        let list = [];
+        let that = this;
+        for (let [key, obj] of lineData) {
+            obj.map(function (val) {
+                list.push(<Col span={12} key={val.config.yAxisTitle+val.config.xAxisTitle}>
+                    {that.getChart1(refL2ChartType, val)}
+                    {/*<PieChart groupName={key} data={val.data} config={val.config}/>*/}
+                    <Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>
+                </Col>)
+            })
+        }
+        return list;
+    }
+
+    getChart1 = (refL2ChartType:ChartType[], val) => {
+        return refL2ChartType.includes('line')  ?
+             <LineChart data={val.data} config={val.config}/>
+            : refL2ChartType.includes('column') ?
+                <ColumnChart data={val.data} config={val.config}/>
+                :
+                refL2ChartType.includes('pie') ?
+                    <PieChart data={val.data} config={val.config}/> :
+                    <div>暂不支持的图形</div>
+    }
+
+    render() {
+        const {dataSource, ltmplConfig} = this.props;
+        let lineData = this.initData();
+        console.log("lineData:",lineData);
+        let refL2ChartType = ltmplConfig.chartType;
+        let that = this;
+        return (<div>
+            <Row style={{padding: '8px 0'}} gutter={[32, {xs: 8, sm: 16, md: 24, lg: 32}]}>
+                {lineData instanceof Map ?
+                    that.get2DimChart(lineData)
+                    : lineData ? lineData.map(function (val) {
+                        return <Col span={12} key={val.config.yAxisTitle+val.config.xAxisTitle}>
+                            {that.getChart1(refL2ChartType, val)}
+                            <Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>
+                        </Col>
+                    }) : ""
+                }
+            </Row>
+        </div>);
+    }
+}
+
+export default StatviewD2Chart;

package/src/components/chart/statview-l2-chart.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import {DtmplData, LtmplConfig, QueryData} from "../tmpl/interface";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import StatView2DChartProps from './antd/statview-d2-chart'
+
+interface StatViewL2ChartProps {
+    queryKey: string;
+    ltmplConfig:LtmplConfig;
+    hiddenColIds?:string[];
+    hiddenRowCodes?:string[];
+};
+
+interface StatViewL2ChartStat {
+    dataSource: DtmplData[],
+};
+
+
+class StatViewL2Chart extends React.PureComponent<StatViewL2ChartProps, StatViewL2ChartStat> {
+    state = {
+        dataSource: undefined,
+    }
+
+    loadData = async () => {
+        const {queryKey} = this.props;
+        if(queryKey) {
+            let queryData: QueryData = await HcserviceV3.requestQueryData(queryKey, {pageNo: 1, pageSize: 10000});
+            this.setState({
+                dataSource: queryData.entities,
+            })
+        }
+    }
+
+    async componentDidMount() {
+        this.loadData();
+    }
+
+    async componentDidUpdate(prevProps) {
+        const {queryKey} = this.props;
+        let {queryKey: preQueryKey} = prevProps;
+
+        if (queryKey && queryKey!=preQueryKey ){
+            this.loadData();
+        }
+    }
+
+    getDataSource=()=>{//过滤
+        let {hiddenRowCodes} = this.props;
+        let {dataSource} = this.state;
+        let ds=[];
+        for(let d of dataSource){
+            if(!hiddenRowCodes || !hiddenRowCodes.includes(d.code)){
+                ds.push(d);
+            }
+        }
+        return ds;
+    }
+
+    render() {
+        let {dataSource} = this.state;
+        let {ltmplConfig,hiddenColIds} = this.props;
+        return (
+            ltmplConfig && dataSource ?
+                <StatView2DChartProps hiddenColIds={hiddenColIds} dataSource={this.getDataSource()}
+                          ltmplConfig={ltmplConfig}/> : ""
+         );
+    }
+}
+
+export default StatViewL2Chart;

package/src/components/controls/action/index.css

@@ -0,0 +1,9 @@
+
+.collapse .ant-card-body {
+    padding:0px
+}
+
+.ant-card-head-title button{
+    font-size: 16px;
+    padding:0px;
+}

package/src/components/controls/action/index.tsx

@@ -0,0 +1,228 @@
+import * as React from 'react'
+import {RefObject} from 'react'
+import {Button, Checkbox as AntdCheckbox, Popconfirm, Popover,} from 'antd'
+import './index.css'
+import {ActionConfig, Comparator, DtmplData} from "../../tmpl/interface";
+import {FormInstance} from "antd/lib/form/hooks/useForm";
+import {ButtonType} from "antd/lib/button/button";
+import FieldsEditCard from "../../detail/edit/fields-edit-card"
+import {SizeType} from "antd/lib/config-provider/SizeContext";
+import ActionUtils from './utils';
+
+const CheckboxGroup = AntdCheckbox.Group;
+
+export  type ActionButtonType = 'primary-block' | 'dashed' | 'primary'
+export  type ActionButtonHiddenType = 'hidden' | 'disabled'
+
+interface ActionProps {
+    disabled?: boolean,
+    actionConfig: ActionConfig,
+    data?: DtmplData[] |object[],
+    formRef?: RefObject<FormInstance>,
+    doAction: (string, Array, object) => void,
+    serial?: number,
+    buttonType?: ActionButtonType,
+    hiddenType?: ActionButtonHiddenType,
+    buttonSize?: SizeType,
+};
+
+interface ActionState {
+    popoverVisible: boolean,
+
+};
+
+export default class Action extends React.PureComponent<ActionProps, ActionState> {
+
+    static defaultProps = {
+        buttonType: 'dashed',
+        hiddenType: 'hidden',
+        buttonSize: undefined,
+    }
+
+    state = {
+        popoverVisible: false,
+    }
+
+    componentDidMount() {
+        const {} = this.props;
+        this.setState({})
+    }
+
+    componentDidUpdate(prevProps) {
+        const {} = this.props;
+        if (this.props != prevProps) {
+            // this.setState({collapse:!this.state.collapse})
+        }
+    }
+
+
+    isShow = () => {
+        const {actionConfig, data, formRef} = this.props;
+        return ActionUtils.isShow(actionConfig, data, formRef);
+    }
+
+
+    getValue = () => {
+        const {data, formRef, actionConfig} = this.props;
+        let value = {};
+        //从 dtmplData 与 ref
+        //dtmplData取第一个
+        let dtmplValue = data ? data[0] : undefined;
+        let upperFormValue = formRef ? formRef.current : undefined;
+        for (let fieldConfig of actionConfig.writes) {
+            if(!fieldConfig){
+                continue;
+            }
+            if (upperFormValue) {
+                if (upperFormValue.getFieldValue(fieldConfig.id)) {
+                    value[fieldConfig.id] = ActionUtils.getFormRefValue(formRef, fieldConfig.id);
+                }else{
+                    if(dtmplValue){
+                        if(dtmplValue['fieldMap']){
+                            value[fieldConfig.id] = dtmplValue ?dtmplValue['fieldMap'][fieldConfig.id] : undefined;
+                        }else{
+                            value[fieldConfig.id] = dtmplValue ?dtmplValue[fieldConfig.id] : undefined;
+                        }
+                    }
+                }
+            }else{
+                if(dtmplValue) {
+                    if (dtmplValue['fieldMap']) {
+                        value[fieldConfig.id] = dtmplValue ? dtmplValue['fieldMap'][fieldConfig.id] : undefined;
+                    } else {
+                        value[fieldConfig.id] = dtmplValue ? dtmplValue[fieldConfig.id] : undefined;
+                    }
+                }
+            }
+        }
+        console.log("actionValue:",value);
+        return value;
+    }
+    onOk = (value: object) => {
+        console.log('action form value:', value);
+        const {actionConfig, doAction, data, disabled, buttonType} = this.props;
+        this.setState({
+            popoverVisible: false,
+        })
+        doAction(actionConfig.id, this.getCodes(), value);
+    }
+    onCancel = () => {
+        this.setState({
+            popoverVisible: false,
+        })
+    }
+    onValuesChange = (value: object) => {
+        const {actionConfig, doAction, data, formRef} = this.props;
+        if (formRef && formRef.current) {
+            formRef.current.setFieldsValue(value);
+        }
+    }
+
+
+    getButtonType = () => {
+        const {buttonType} = this.props;
+        let bType: ButtonType = !buttonType ? "dashed" : buttonType.split("-")[0] == "dashed" ? "dashed" : "primary";
+        return bType;
+    }
+
+    blockButton = (): boolean => {
+        const {buttonType} = this.props;
+        let block = buttonType && buttonType.includes('block');
+        return block;
+    }
+
+
+    formButton = () => {
+        const {popoverVisible} = this.state;
+        const {actionConfig, doAction, data, disabled, buttonType,hiddenType, buttonSize} = this.props;
+        let disabled_ = disabled;
+        if (!this.isShow()) {
+            if (!hiddenType || hiddenType == 'hidden') {
+                return null;
+            } else {
+                disabled_ = true;
+            }
+        }
+        return <Popover placement="leftBottom" visible={popoverVisible} trigger="click" content={
+            <FieldsEditCard okDanger={actionConfig.beforeExeConfirm == 'danger'} needConfirm={true} title={actionConfig.title} onCancel={() => this.onCancel()} fields={actionConfig.writes}
+                            value={this.getValue()} onOk={this.onOk}
+                            onValuesChange={this.onValuesChange}/>}>
+            <Button danger={actionConfig.beforeExeConfirm == 'danger'} type={this.getButtonType()} block={this.blockButton()} size={buttonSize}
+                    onClick={() => this.setState({popoverVisible: !popoverVisible})}
+                    disabled={disabled_} >{actionConfig.title}</Button>
+        </Popover>
+    }
+
+
+    getCodes = () => {
+        const {data,} = this.props;
+        let codes = [];
+        if (data) {
+            if (data instanceof Array) {
+                for (let d of data) {
+                    if (d) {
+                        codes.push(d['code']);
+                    }
+                }
+            }
+        }
+        return codes;
+    }
+
+    withoutFormButton = () => {
+        const {actionConfig, doAction, data, disabled, buttonType, hiddenType, buttonSize} = this.props;
+        let disabled_ = disabled;
+        if (!this.isShow()) {
+            if (!hiddenType || hiddenType == 'hidden') {
+                return null;
+            } else {
+                disabled_ = true;
+            }
+        }
+        let codes = this.getCodes();
+        let block = this.blockButton();
+        let bType = this.getButtonType();
+        return !actionConfig.beforeExeConfirm || actionConfig.beforeExeConfirm == 'default' ?
+            <Popconfirm key={actionConfig.id}
+                        placement="rightBottom"
+                        title={`确定要执行【${actionConfig.title}】吗？`}
+                        onConfirm={() => {
+                            doAction(actionConfig.id, codes, {})
+                        }}
+                        disabled={disabled_}
+                        okText="确定"
+                        cancelText="取消"
+            >
+                <Button size={buttonSize} type={bType} block={block} disabled={disabled_}
+                >{actionConfig.title}</Button>
+            </Popconfirm> :
+            actionConfig.beforeExeConfirm == 'danger' ?
+                <Popconfirm key={actionConfig.id}
+                            placement="rightBottom"
+                            title={`确定要执行【${actionConfig.title}】吗？`}
+                            onConfirm={() => {
+                                doAction(actionConfig.id, codes, {})
+                            }}
+                            disabled={disabled_}
+                            okText="确定"
+                            cancelText="取消"
+                            okType={'danger'}
+                >
+                    <Button type={bType} block={block} danger={true} size={buttonSize} disabled={disabled_}
+                    >{actionConfig.title}</Button>
+                </Popconfirm> :
+                <Button type={bType} block={block} size={buttonSize}
+                        onClick={() => doAction(actionConfig.id, codes, {})}
+                        disabled={disabled_}
+                >{actionConfig.title}</Button>
+    }
+
+    render() {
+        const {} = this.state;
+        const {actionConfig, doAction, data, disabled, buttonType} = this.props;
+        return <>
+            {actionConfig.writes && actionConfig.writes.length > 0 ? this.formButton() : this.withoutFormButton()}
+        </>;
+    }
+
+}