dashboard/src/charts/MobileDeal.js

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


class MobileDeal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            mobile_deal_data: []
        };
        this.group_ids = React.createRef();
        this.data = {
            date_type: 'applyDate',
            applydate_check: 1,
            startdate_check: 0,
            startdate: moment().subtract(8, 'days'),//上周一
            enddate: moment().subtract(2, 'days'),//上周日
        }
    }

    componentDidMount() {
        //this.asyncFetch();
    }

    asyncFetch = () => {
        this.setState({loading: true});
        let url = '/service-tourdesign/CountYDOrder?DEI_SNList=' + this.group_ids.current.state.data.toString();
        if (this.data.date_type == 'applyDate') {
            url += '&ApplydateCheck=1&OrderStartdateCheck=0';
        } else {
            url += '&ApplydateCheck=0&OrderStartdateCheck=1';
        }
        url += '&ApplydateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&ApplydateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
        url += '&OrderStartdateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&OrderStartdateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
        fetch(config.HT_HOST + url)
            .then((response) => response.json())
            .then((json) => {
                let table_data = []
                json && json.map((item, index) => {
                    table_data.push({
                        key: index,
                        department_name: item.DEI_DepartmentName,
                        mobile_order: item.YDOrderNum + '/' + item.OrderNum + ' (' + (item.OrderNumRate * 100).toFixed(1) + '%)',
                        mobile_deal: item.YDOrderNumSUC + ' / ' + item.OrderNumSUC + ' (' + (item.OrderNumSUCRate * 100).toFixed(1) + '%)',
                        mobile_gross: item.YDML + ' / ' + item.ML + ' (' + (item.MLRate * 100).toFixed(1) + '%)',
                    })
                })
                this.setState({mobile_deal_data: table_data});
                this.setState({loading: false});
            })
            .catch((error) => {
                this.setState({loading: false});
                console.log('fetch data failed', error);
            });
    };
    onChange_datetype = (e) => {
        this.data.date_type = e.target.value;
    };
    onChange_dataPicker = (dates) => {
        this.data.startdate = dates[0];
        this.data.enddate = dates[1];
    }

    render() {

        const columns = [
            {
                title: '市场',
                dataIndex: 'department_name',
                key: 'department_name',
            },
            {
                title: '移动订单/总订单',
                dataIndex: 'mobile_order',
                key: 'mobile_order',
            },
            {
                title: '移动成交/总成交',
                dataIndex: 'mobile_deal',
                key: 'mobile_deal',
            },
            {
                title: '移动毛利/总毛利',
                dataIndex: 'mobile_gross',
                key: 'mobile_gross',
            },
        ];

        return (
            <div>
                <h2>移动成交</h2>
                <GroupSelect ref={this.group_ids} defaultValue={['1', '2', '28', '7', '8', '9', '11', '12', '20', '21']} />
                <Space size="large">
                    <DatePicker.RangePicker format={config.DATE_FORMAT}
                                            defaultValue={[this.data.startdate, this.data.enddate]}
                                            onChange={this.onChange_dataPicker}/>
                    <Radio.Group defaultValue={this.data.date_type} onChange={this.onChange_datetype}>
                        <Radio value="applyDate">预定日期</Radio>
                        <Radio value="startDate">出发日期</Radio>
                    </Radio.Group>
                    <Button type="primary" icon={<SearchOutlined/>} loading={this.state.loading} onClick={() => {
                        this.asyncFetch();
                    }}>统计</Button>
                </Space>
                <Table dataSource={this.state.mobile_deal_data} columns={columns} pagination={false} size="small"/>
            </div>
        );
    }
}

export default MobileDeal;