dashboard/src/charts/Customer_care_regular.jsx

import React, { useContext, useState } from 'react';
import { Row, Col, Divider, Table, Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { utils, writeFileXLSX } from 'xlsx';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import SearchForm from './../components/search/SearchForm';
import LineWithAvg from '../components/LineWithAvg';
import { flow } from 'mobx';

const Customer_care_regular = () => {
  const { orders_store, date_picker_store, customer_store } = useContext(stores_Context);
  const regular_data = customer_store.regular_data;

  // useEffect(() => {}, []);

  return (
    <div>
      <Row gutter={16} className={date_picker_store.siderBroken ? '' : 'sticky-top'}>
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...date_picker_store.formValues,
                ...regular_data.searchValues,
              },
              shows: ['DateType', 'DepartmentList', 'WebCode', 'dates', 'IncludeTickets'],
              fieldProps: {
                DepartmentList: { show_all: false, mode: 'multiple' },
                WebCode: { show_all: false, mode: 'multiple' },
                years: { hide_vs: true },
              },
            }}
            onSubmit={async (_err, obj, form, str) => {
              customer_store.setSearchValues(obj, form, 'regular_data');
              regular_data.data_compare=[];
              if (obj.DateDiff1 && obj.DateDiff2){
                regular_data.isCompareLine=true;
                regular_data.showCompareSum=true;
                await customer_store.regular_customer_order();
                customer_store.regular_customer_order(false,true);
                customer_store.regular_customer_order(true,false,true);
                customer_store.regular_customer_order(true,true,true);
              }
              else{
                regular_data.isCompareLine=false;
                regular_data.showCompareSum=false;
                customer_store.regular_customer_order();
                customer_store.regular_customer_order(true);
              }
            }}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <h2>老客户</h2>
        </Col>
        <Col span={24}>
          <Table
            dataSource={regular_data.data}
            loading={regular_data.loading}
            columns={[
              {
                title: '统计条目',
                dataIndex: 'ItemName',
                key: 'ItemName',
              },
              {
                title: () => (
                  <>
                    订单数{' '}
                    <Tooltip key='total_data_tips_title' title="总订单: 当同时勾选老客户和推荐时, 将重复计数">
                      <InfoCircleOutlined />
                    </Tooltip>
                  </>
                ),
                dataIndex: 'OrderNum',
                key: 'OrderNum',
                render: (text, record, index) => (
                  <>
                    <span>{text}</span>&nbsp;&nbsp;
                    {<Tooltip key='total_data_tips' title={regular_data.total_data_tips}>
                      {index === 0 && regular_data.total_data_tips!=='' && <InfoCircleOutlined className='ant-tag-gold' />}
                    </Tooltip>}
                  </>
                ),
              },
              {
                title: '订单数占比',
                dataIndex: 'OrderRate',
                key: 'OrderRate',
                render: (text) => typeof text === 'number'?<span>{parseFloat((text * 100).toFixed(2))}%</span>:text,
              },
              {
                title: '成行数',
                dataIndex: 'SUCOrderNum',
                key: 'SUCOrderNum',
              },
              {
                title: '成行率',
                dataIndex: 'SUCRate',
                key: 'SUCRate',
                render: (text) => typeof text === 'number'?<span>{Math.round(text * 100)}%</span>:text,
              },
              {
                title: '毛利',
                dataIndex: 'ML',
                key: 'ML',
              },
              {
                title: '毛利占比',
                dataIndex: 'OrderMLRate',
                key: 'OrderMLRate',
                render: (text) => typeof text === 'number'?<span>{parseFloat((text * 100).toFixed(2))}%</span>:text,
              },
              {
                title: '人数（含成人+儿童）',
                dataIndex: 'PersonNum',
                key: 'PersonNum',
              },
            ]}
            size="small"
            pagination={false}
            rowKey={(record) => record.ItemName}
          />
        </Col>

        <Col span={24}>
          <LineWithAvg dataSource={regular_data.pivotData} loading={regular_data.detail_loading} xField={regular_data.pivotX} yField={regular_data.pivotY} 
          seriesField='_ylabel' showCompareSum={regular_data.showCompareSum} solidLineTime={regular_data.solidLineTime} solidLineCompareTime={regular_data.solidLineCompareTime}
          solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/>
        </Col>

        <Col span={24}>
          <Divider orientation="right" plain>
            <a
              onClick={() => {
                const wb = utils.table_to_book(document.getElementById('table_to_xlsx').getElementsByTagName('table')[0]);
                writeFileXLSX(wb, '老客户.xlsx');
              }}
            >
              导出excel
            </a>
          </Divider>
          <Table
            id="table_to_xlsx"
            pagination={false}
            loading={regular_data.detail_loading}
            dataSource={regular_data.data_detail}
            scroll={{ x: 1200 }}
            columns={[
              {
                title: '订单号',
                dataIndex: 'COLI_ID',
                key: 'COLI_ID',
              },
              {
                title: '预定日期',
                dataIndex: 'COLI_ApplyDate',
                key: 'COLI_ApplyDate',
              },
              {
                title: '订单状态',width: '4rem',
                dataIndex: 'OrderState',
                key: 'OrderState',
                render: (text, record) => <span>{text == 1 ? '成行' : '未成行'}</span>,
                sorter: (a, b) => b.OrderState - a.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: 'COLI_LineClass',
                key: 'COLI_LineClass',
              },
              { title: '上次 订单号', dataIndex: 'coli_id_Last', key: 'coli_id_Last', width: '4em',
                render: (_, r) => ({
                  props: { style: { backgroundColor: '#5B8FF9'+'1A' } },
                  children: _,
                }), },
              { title: '上次 走团日期', dataIndex: 'COLI_OrderStartDate_Last', key: 'COLI_OrderStartDate_Last',width: '4em',
                render: (_, r) => ({
                  props: { style: { backgroundColor: '#5B8FF9'+'1A' } },
                  children: _,
                }), },
              { title: '上次 小组', dataIndex: 'Department_Last', key: 'Department_Last',width: '4em',
                render: (_, r) => ({
                  props: { style: { backgroundColor: '#5B8FF9'+'1A' } },
                  children: _,
                }), },
            ]}
            size="small"
            rowKey={(record) => record.COLI_ID}
          />
        </Col>
      </Row>
    </div>
  );
};
export default observer(Customer_care_regular);