dashboard/src/charts/OrdersTempTable.js

import React, {Component} from 'react';
import {Table, Button, DatePicker, Space, Tooltip} from 'antd';
import {Line} from '@ant-design/charts';
import GroupSelect from './GroupSelect';
import SiteSelect from './SiteSelect';
import {SearchOutlined} from '@ant-design/icons';
import * as config from '../config' ;
import moment from "moment";


class OrdersTempTable extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            table: [],
            show_table: false,
            loading: false,
            loading_detail: false
        };
        this.website_codes = React.createRef();
        this.data = {
            startdate: moment().subtract(7, 'days'),//上周一
            enddate: moment().subtract(0, 'days'),//上周日
        }
    }

    componentDidMount() {
    }

    asyncFetch = () => {
        this.setState({loading: true});
        this.setState({show_table: false});
        let url = '/service-baseinfo/QueryWebData?type=orders_temp&db=1';
        const website_code = "'" + this.website_codes.current.state.data.join("','") + "'";
        url += '&WebSite=' + website_code + '&ApplyDateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
        fetch(config.HT_HOST + url)
            .then((response) => response.json())
            .then((json) => {
                this.setState({data: json.data})
                this.setState({loading: false});
            })
            .catch((error) => {
                this.setState({loading: false});
                console.log('fetch data failed', error);
            });
    };

    asyncFetch_detail = () => {
        this.setState({loading_detail: true});
        this.setState({show_table: true});
        let url = '/service-baseinfo/QueryWebData?type=orders_temp_detail&db=1';
        const website_code = "'" + this.website_codes.current.state.data.join("','") + "'";
        url += '&WebSite=' + website_code + '&ApplyDateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
        fetch(config.HT_HOST + url)
            .then((response) => response.json())
            .then((json) => {
                this.setState({table: json.data})
                this.setState({loading_detail: false});
            })
            .catch((error) => {
                this.setState({loading_detail: false});
                console.log('fetch data failed', error);
            });
    };


    onChange_dataPicker = (dates) => {
        this.data.startdate = dates[0];
        this.data.enddate = dates[1];
    }


    render() {
        const config = {
            data: this.state.data,
            padding: 'auto',
            xField: 'order_date',
            yField: 'order_count',
            seriesField: 'order_sitecode',
            xAxis: {
                type: 'timeCat',
            },
            smooth: true,
        };

        const columns = [
            {
                title: '订单号',
                dataIndex: 'COLI_ID',
                key: 'COLI_ID',
            },
            {
                title: '设备',
                dataIndex: 'COLI_OrderSource',
                key: 'COLI_OrderSource',
            },
            {
                title: '类型',
                dataIndex: 'COLI_SourceType',
                key: 'COLI_SourceType',
            },
            {
                title: '网站',
                dataIndex: 'COLI_WebCode',
                key: 'COLI_WebCode',
            },
            {
                title: 'IP',
                dataIndex: 'COLI_SenderIP',
                key: 'COLI_SenderIP',
            },
            {
                title: '预定时间',
                dataIndex: 'COLI_ApplyDate',
                key: 'COLI_ApplyDate',
            },
            {
                title: '订单内容',
                dataIndex: 'COLI_OrderDetailText',
                key: 'COLI_OrderDetailText',
                ellipsis: true,
            },
        ];

        return (
            <div>
                <h2>临时订单数量</h2>
                <SiteSelect ref={this.website_codes} multiple={"multiple"}
                            defaultValue={['CHT', 'AH']}/>
                <Space>
                    <DatePicker.RangePicker format={config.DATE_FORMAT}
                                            defaultValue={[this.data.startdate, this.data.enddate]}
                                            onChange={this.onChange_dataPicker}/>
                    <Button type="primary" icon={<SearchOutlined/>} loading={this.state.loading} onClick={() => {
                        this.asyncFetch();
                    }}>统计</Button>
                    <Button type="primary" icon={<SearchOutlined/>} loading={this.state.loading_detail} onClick={() => {
                        this.asyncFetch_detail();
                    }}>查看详情</Button>
                </Space>
                {this.state.show_table ? (
                    <Table dataSource={this.state.table} columns={columns} size="small"/>
                ) : (
                    <Line {...config} />
                )}
            </div>
        );
    }
}

export default OrdersTempTable;