WEB/src/pages/Statistics/Customer/index.tsx

import { statisticscontrollerGetcustomerorders } from '@/servers/api/statistics';
import {
  PageContainer,
  ProDescriptions,
  ProForm,
  ProFormDateMonthRangePicker,
} from '@ant-design/pro-components';
import { Space } from 'antd';
import { useState } from 'react';

const ListPage: React.FC = () => {
  const [month, setMonth] = useState('');
  return (
    <PageContainer ghost>
      <Space direction="vertical" size={30}>
        <ProForm
          layout="inline"
          onFinish={async (values) => {
            setMonth(values.month);
          }}
        >
          <ProFormDateMonthRangePicker label="日期" name="month" />
        </ProForm>
        <ProDescriptions
          params={{ month }}
          request={async (params) => {
            const { data, success } =
              await statisticscontrollerGetcustomerorders(params);
            return { data };
          }}
        >
          <ProDescriptions.Item label="总用户数" dataIndex="users" />
          <ProDescriptions.Item label="3MG订单数" dataIndex="order_with_3mg" />
          <ProDescriptions.Item label="6MG订单数" dataIndex="order_with_6mg" />
          <ProDescriptions.Item label="9MG订单数" dataIndex="order_with_9mg" />
          <ProDescriptions.Item
            label="12MG订单数"
            dataIndex="order_with_12mg"
          />
          <ProDescriptions.Item
            label="15MG订单数"
            dataIndex="order_with_15mg"
          />
          <ProDescriptions.Item
            label="ZYN3MG订单数"
            dataIndex="zyn_3mg_orders"
          />
          <ProDescriptions.Item
            label="ZYN6MG订单数"
            dataIndex="zyn_6mg_orders"
          />
          <ProDescriptions.Item
            label="ZOLT订单数"
            dataIndex="zolt_15mg_orders"
          />
          <ProDescriptions.Item
            label="一购用户数"
            dataIndex="users_one_purchase"
          />
          <ProDescriptions.Item
            label="二购用户数"
            dataIndex="users_two_purchases"
          />
          <ProDescriptions.Item
            label="三购用户数"
            dataIndex="users_three_purchases"
          />
          <ProDescriptions.Item
            label="YOONE一购用户数"
            dataIndex="users_with_yoone_one_purchase"
          />
          <ProDescriptions.Item
            label="YOONE二购用户数"
            dataIndex="users_with_yoone_two_purchases"
          />
          <ProDescriptions.Item
            label="YOONE三购用户数"
            dataIndex="users_with_yoone_three_purchases"
          />
          <ProDescriptions.Item
            label="YOONE 3MG一购用户数"
            dataIndex="users_with_yoone_3mg_one_purchase"
          />
          <ProDescriptions.Item
            label="YOONE 3MG二购用户数"
            dataIndex="users_with_yoone_3mg_two_purchases"
          />
          <ProDescriptions.Item
            label="YOON 3MG三购用户数"
            dataIndex="users_with_yoone_3mg_three_purchases"
          />
          <ProDescriptions.Item
            label="YOONE 6MG一购用户数"
            dataIndex="users_with_yoone_6mg_one_purchase"
          />
          <ProDescriptions.Item
            label="YOONE 6MG二购用户数"
            dataIndex="users_with_yoone_6mg_two_purchases"
          />
          <ProDescriptions.Item
            label="YOON 6MG三购用户数"
            dataIndex="users_with_yoone_6mg_three_purchases"
          />
          <ProDescriptions.Item
            label="YOONE 9MG一购用户数"
            dataIndex="users_with_yoone_9mg_one_purchase"
          />
          <ProDescriptions.Item
            label="YOONE 9MG二购用户数"
            dataIndex="users_with_yoone_9mg_two_purchases"
          />
          <ProDescriptions.Item
            label="YOON 9MG三购用户数"
            dataIndex="users_with_yoone_9mg_three_purchases"
          />
          <ProDescriptions.Item
            label="YOONE 12MG一购用户数"
            dataIndex="users_with_yoone_12mg_one_purchase"
          />
          <ProDescriptions.Item
            label="YOONE 12MG二购用户数"
            dataIndex="users_with_yoone_12mg_two_purchases"
          />
          <ProDescriptions.Item
            label="YOON 12MG三购用户数"
            dataIndex="users_with_yoone_12mg_three_purchases"
          />
          <ProDescriptions.Item
            label="YOONE 15MG一购用户数"
            dataIndex="users_with_yoone_15mg_one_purchase"
          />
          <ProDescriptions.Item
            label="YOONE 15MG二购用户数"
            dataIndex="users_with_yoone_15mg_two_purchases"
          />
          <ProDescriptions.Item
            label="YOON 15MG三购用户数"
            dataIndex="users_with_yoone_15mg_three_purchases"
          />
          <ProDescriptions.Item
            label="ZYN一购用户数"
            dataIndex="users_with_zyn_one_purchase"
          />
          <ProDescriptions.Item
            label="ZYN二购用户数"
            dataIndex="users_with_zyn_two_purchases"
          />
          <ProDescriptions.Item
            label="ZYN三购用户数"
            dataIndex="users_with_zyn_three_purchases"
          />
          <ProDescriptions.Item
            label="ZYN 3MG一购用户数"
            dataIndex="users_with_zyn_3mg_one_purchase"
          />
          <ProDescriptions.Item
            label="ZYN 3MG二购用户数"
            dataIndex="users_with_zyn_3mg_two_purchases"
          />
          <ProDescriptions.Item
            label="ZYN 3MG三购用户数"
            dataIndex="users_with_zyn_3mg_three_purchases"
          />
          <ProDescriptions.Item
            label="ZYN 6G一购用户数"
            dataIndex="users_with_zyn_6mg_one_purchase"
          />
          <ProDescriptions.Item
            label="ZYN 6G二购用户数"
            dataIndex="users_with_zyn_6mg_two_purchases"
          />
          <ProDescriptions.Item
            label="ZYN 6G三购用户数"
            dataIndex="users_with_zyn_6mg_three_purchases"
          />
          <ProDescriptions.Item
            label="ZOLT一购用户数"
            dataIndex="users_with_zolt_one_purchase"
          />
          <ProDescriptions.Item
            label="ZOLT二购用户数"
            dataIndex="users_with_zolt_two_purchases"
          />
          <ProDescriptions.Item
            label="ZOLT三购用户数"
            dataIndex="users_with_zolt_three_purchases"
          />
          <ProDescriptions.Item
            label="一购产品"
            render={(_, record) => {
              return (
                <div>
                  {record?.first_hot_purchase?.map((v) => (
                    <div>
                      产品名称:{v.name} 用户数:{v.user_count}
                    </div>
                  ))}
                </div>
              );
            }}
          />
          <ProDescriptions.Item
            label="二购产品"
            render={(_, record) => {
              return (
                <div>
                  {record?.second_hot_purchase?.map((v) => (
                    <div>
                      产品名称:{v.name} 用户数:{v.user_count}
                    </div>
                  ))}
                </div>
              );
            }}
          />
          <ProDescriptions.Item
            label="三购产品"
            render={(_, record) => {
              return (
                <div>
                  {record?.third_hot_purchase?.map((v) => (
                    <div>
                      产品名称:{v.name} 用户数:{v.user_count}
                    </div>
                  ))}
                </div>
              );
            }}
          />
        </ProDescriptions>
      </Space>
    </PageContainer>
  );
};

export default ListPage;