dashboard/src/charts/Customer_care_potential.js

import React, {useContext, useEffect} from 'react';
import {Row, Col, Button, Divider, Table, Space, Radio} from 'antd';
import {
    ContainerOutlined,
    SearchOutlined,
} from '@ant-design/icons';
import {stores_Context} from '../config'
import {Line} from "@ant-design/charts";
import {observer} from 'mobx-react';
import DatePickerCharts from '../charts/DatePickerCharts'
import {NavLink, useParams} from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import SiteSelect from "../charts/SiteSelect";
import GroupSelect from "../charts/GroupSelect";

const Customer_care_potential = () => {

    const {orders_store, date_picker_store, customer_store} = useContext(stores_Context);
    const potential_data = customer_store.potential_data;

    useEffect(() => {

    }, [])


    return (
        <div>
            <Row>
                <Col span={12}>
                    <h2>潜力客户</h2>
                </Col>
                <Col span={11}>
                    <Row>
                        <Col span={6}>
                            <SiteSelect store={potential_data} show_all={true}/>
                        </Col>
                        <Col span={18}> <GroupSelect store={potential_data}/></Col>
                        <Col span={10}>
                            <DatePickerCharts hide_vs={true}/>
                        </Col>
                        <Col span={14}>
                            <Space>
                                <Radio.Group value={potential_data.date_type}
                                             onChange={potential_data.onChange_datetype}>
                                    <Radio value="applyDate">预定日期</Radio>
                                    <Radio value="startDate">出发日期</Radio>
                                </Radio.Group>
                                <Button type="primary" icon={<SearchOutlined/>} loading={potential_data.loading}
                                        onClick={() => {
                                            potential_data.show_detail = false;
                                            potential_data.potential_customer_order();
                                        }}>统计</Button>
                                <Button type="primary" icon={<SearchOutlined/>} loading={potential_data.loading_detail}
                                        onClick={() => {
                                            potential_data.show_detail = true;
                                            potential_data.potential_customer_order();
                                        }}>详情</Button>
                            </Space>
                        </Col>
                    </Row>
                </Col>
                <Col span={1}></Col>
                <Col span={24}>
                    <Table dataSource={potential_data.data} columns={
                        [
                            {
                                title: '订单数',
                                dataIndex: 'OrderNum',
                                key: 'OrderNum',
                            },
                            {
                                title: '成行数',
                                dataIndex: 'SUCOrderNum',
                                key: 'SUCOrderNum',
                            },
                            {
                                title: '成行率',
                                dataIndex: 'SUCRate',
                                key: 'SUCRate',
                                render: (text, record) => <span>{text * 100}%</span>
                            },
                            {
                                title: '毛利',
                                dataIndex: 'ML',
                                key: 'ML',
                            },
                            {
                                title: '人数（含成人+儿童）',
                                dataIndex: 'PersonNum',
                                key: 'PersonNum',
                            },
                        ]
                    } size="small" pagination={false} rowKey={record => record.OrderNum}
                    />
                </Col>
                <Col span={24}>
                    <Divider orientation="right"><a
                        onClick={() => potential_data.onChange_show_detail_table()}>{potential_data.show_detail_table ? '隐藏列表' : '显示列表'}</a> |
                        导出excel</Divider>
                    {potential_data.show_detail_table ?
                        <Table dataSource={potential_data.data_detail} columns={
                            [
                                {
                                    title: '订单号',
                                    dataIndex: 'COLI_ID',
                                    key: 'COLI_ID',
                                },
                                {
                                    title: '预定日期',
                                    dataIndex: 'COLI_ApplyDate',
                                    key: 'COLI_ApplyDate',
                                },
                                {
                                    title: '订单状态',
                                    dataIndex: 'OrderState',
                                    key: 'OrderState',
                                },
                                {
                                    title: '毛利',
                                    dataIndex: 'ML',
                                    key: 'ML',
                                },
                                {
                                    title: '人数',
                                    dataIndex: 'PersonNum',
                                    key: 'PersonNum',
                                },
                                {
                                    title: '天数',
                                    dataIndex: 'COLI_Days',
                                    key: 'COLI_Days',
                                },
                                {
                                    title: '人天数',
                                    dataIndex: 'CGI_PersonDays',
                                    key: 'CGI_PersonDays',
                                },
                                {
                                    title: '走团日期',
                                    dataIndex: 'COLI_OrderStartDate',
                                    key: 'COLI_OrderStartDate',
                                },
                                {
                                    title: '小组',
                                    dataIndex: 'Department',
                                    key: 'Department',
                                },
                                {
                                    title: '老客户',
                                    dataIndex: 'COLI_IsOld',
                                    key: 'COLI_IsOld',
                                },
                                {
                                    title: '老客户推荐',
                                    dataIndex: 'COLI_IsCusCommend',
                                    key: 'COLI_IsCusCommend',
                                },
                                {
                                    title: '网站',
                                    dataIndex: 'COLI_WebCode',
                                    key: 'COLI_WebCode',
                                },
                                {
                                    title: '来源',
                                    dataIndex: 'SourceType',
                                    key: 'SourceType',
                                },
                                {
                                    title: '在华',
                                    dataIndex: 'ZH',
                                    key: 'ZH',
                                },
                            ]
                        } size="small"
                               rowKey={record => record.COLI_ID}
                        />
                        : ''}
                </Col>
            </Row>

        </div>
    );

}
export default observer(Customer_care_potential);