index.tsx 1.87 KB
import { EllipsisOutlined } from '@ant-design/icons';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Avatar, Button, Dropdown, Space, Tag } from 'antd';
import OrderDualAxes from './components/OrderDualAxes';
import OrderStatisticCard from './components/OrderStatisticCard';
import OrderStatisticSearch from './components/OrderStatisticSearch';
const userInfo = JSON.parse(localStorage.getItem('userInfo'));

const OrderReportPage = () => {
  return (
    <PageContainer
      className="order-page-container"
      header={{
        title: '订单汇总',
        extra: [
          <Avatar key="0" style={{ verticalAlign: 'middle' }} size="large">
            {userInfo?.username}
          </Avatar>,
          <Tag key="nickName">{userInfo?.nickName}</Tag>,
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items: [
                {
                  label: '退出登录',
                  key: '1',
                  onClick: () => {
                    localStorage.removeItem('token');
                    history.push('/login');
                  },
                },
                // {
                //   label: '修改密码',
                //   key: '2',
                // },
              ],
            }}
          >
            <Button key="4" style={{ padding: '0 8px' }}>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ],
      }}
    >
      <Space direction="vertical" size="middle" className="flex">
        <OrderStatisticCard />
        <ProCard tooltip="这是提示" bordered>
          <OrderStatisticSearch />
        </ProCard>

        <ProCard title="带卡片阴影" extra="extra" tooltip="这是提示" bordered>
          <OrderDualAxes />
        </ProCard>
      </Space>
    </PageContainer>
  );
};

export default OrderReportPage;