canrd-main / canrd-erp-front · Commits

Commit c44ef0973e0c67d963c00e23c4bfb31ba0eaf537

Authored by zhongnanhuang
1 parent 7293426c

feat: update

Inline Side-by-side
Showing 8 changed files with 241 additions and 65 deletions
.umirc.ts
  View file @c44ef09
@@ -39,6 +39,12 @@ export default defineConfig({ @@ -39,6 +39,12 @@ export default defineConfig({
39 icon: 'ProfileOutlined', 39 icon: 'ProfileOutlined',
40 }, 40 },
41 { 41 {
  42 + name: '订单报表',
  43 + path: '/orderReport',
  44 + component: './OrderReport',
  45 + icon: 'LineChartOutlined',
  46 + },
  47 + {
42 name: '打印', 48 name: '打印',
43 path: '/print', 49 path: '/print',
44 component: './OrderPrint', 50 component: './OrderPrint',
package.json
  View file @c44ef09
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 "start": "npm run dev" 12 "start": "npm run dev"
13 }, 13 },
14 "dependencies": { 14 "dependencies": {
  15 + "@ant-design/charts": "^1.4.3",
15 "@ant-design/icons": "^5.2.6", 16 "@ant-design/icons": "^5.2.6",
16 "@ant-design/pro-components": "^2.6.32", 17 "@ant-design/pro-components": "^2.6.32",
17 "@inspir/assembly-css": "1.0.0-alpha", 18 "@inspir/assembly-css": "1.0.0-alpha",
src/assets/icons/down.svg 0 → 100644
  View file @c44ef09
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702266081134" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1723" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M866.742857 762.148571l-20.48-170.788571a6.948571 6.948571 0 0 0-11.702857-4.022857l-50.834286 51.2-232.594285-232.594286a14.262857 14.262857 0 0 0-19.382858 0l-87.04 87.04L207.36 256a6.948571 6.948571 0 0 0-9.508571 0L159.085714 294.765714a6.948571 6.948571 0 0 0 0 9.508572l275.748572 276.114285a13.531429 13.531429 0 0 0 19.382857 0l87.405714-87.405714 193.828572 193.828572-50.834286 50.834285a6.948571 6.948571 0 0 0 4.022857 11.702857l170.422857 20.48a6.582857 6.582857 0 0 0 7.68-7.68z" p-id="1724" fill="#1DB302"></path></svg>
0 \ No newline at end of file 2 \ No newline at end of file
src/assets/icons/up.svg 0 → 100644
  View file @c44ef09
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702266075667" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1549" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M859.062857 256l-170.788571 20.48a6.948571 6.948571 0 0 0-4.022857 11.702857l50.834285 49.005714-193.462857 193.828572-87.405714-87.405714a13.897143 13.897143 0 0 0-19.382857 0l-275.748572 275.748571a7.314286 7.314286 0 0 0 0 9.874286L197.851429 768a6.948571 6.948571 0 0 0 9.508571 0l237.348571-236.982857 87.04 87.04a14.262857 14.262857 0 0 0 19.382858 0l232.594285-232.594286 50.834286 50.834286a6.948571 6.948571 0 0 0 11.702857-4.022857l20.48-170.788572a6.582857 6.582857 0 0 0-7.68-5.485714z" p-id="1550" fill="#d81e06"></path></svg>
0 \ No newline at end of file 2 \ No newline at end of file
src/pages/OrderReport/components/OrderDualAxes.tsx 0 → 100644
  View file @c44ef09
  1 +import { DualAxes } from '@ant-design/charts';
  2 +
  3 +const OrderDualAxes = () => {
  4 + const uvBillData = [
  5 + {
  6 + time: '2019-03',
  7 + value: 300,
  8 + type: '指标',
  9 + },
  10 + {
  11 + time: '2019-04',
  12 + value: 300,
  13 + type: '指标',
  14 + },
  15 + {
  16 + time: '2019-05',
  17 + value: 300,
  18 + type: '指标',
  19 + },
  20 + {
  21 + time: '2019-06',
  22 + value: 300,
  23 + type: '指标',
  24 + },
  25 + {
  26 + time: '2019-07',
  27 + value: 300,
  28 + type: '指标',
  29 + },
  30 + {
  31 + time: '2019-03',
  32 + value: 220,
  33 + type: '营业额',
  34 + },
  35 + {
  36 + time: '2019-04',
  37 + value: 300,
  38 + type: '营业额',
  39 + },
  40 + {
  41 + time: '2019-05',
  42 + value: 250,
  43 + type: '营业额',
  44 + },
  45 + {
  46 + time: '2019-06',
  47 + value: 220,
  48 + type: '营业额',
  49 + },
  50 + {
  51 + time: '2019-07',
  52 + value: 362,
  53 + type: '营业额',
  54 + },
  55 + ];
  56 + const transformData = [
  57 + {
  58 + time: '2019-03',
  59 + count: 800,
  60 + name: '订单量',
  61 + },
  62 + {
  63 + time: '2019-04',
  64 + count: 600,
  65 + name: '订单量',
  66 + },
  67 + {
  68 + time: '2019-05',
  69 + count: 400,
  70 + name: '订单量',
  71 + },
  72 + {
  73 + time: '2019-06',
  74 + count: 380,
  75 + name: '订单量',
  76 + },
  77 + {
  78 + time: '2019-07',
  79 + count: 220,
  80 + name: '订单量',
  81 + },
  82 + ];
  83 + const config = {
  84 + data: [uvBillData, transformData],
  85 + xField: 'time',
  86 + yField: ['value', 'count'],
  87 + geometryOptions: [
  88 + {
  89 + geometry: 'line',
  90 + seriesField: 'type',
  91 + lineStyle: {
  92 + lineWidth: 3,
  93 + lineDash: [5, 5],
  94 + },
  95 + smooth: true,
  96 + },
  97 + {
  98 + geometry: 'line',
  99 + seriesField: 'name',
  100 + point: {},
  101 + },
  102 + ],
  103 + };
  104 + return <DualAxes {...config} />;
  105 +};
  106 +
  107 +export default OrderDualAxes;
src/pages/OrderReport/components/OrderStatisticCard.tsx 0 → 100644
  View file @c44ef09
  1 +import Icon from '@ant-design/icons';
  2 +import { ProCard } from '@ant-design/pro-components';
  3 +import { Flex } from 'antd';
  4 +
  5 +export default () => {
  6 + const HeartSvg = () => (
  7 + <svg width="200" height="200">
  8 + <path
  9 + d="M859.062857 256l-170.788571 20.48a6.948571 6.948571 0 0 0-4.022857 11.702857l50.834285 49.005714-193.462857 193.828572-87.405714-87.405714a13.897143 13.897143 0 0 0-19.382857 0l-275.748572 275.748571a7.314286 7.314286 0 0 0 0 9.874286L197.851429 768a6.948571 6.948571 0 0 0 9.508571 0l237.348571-236.982857 87.04 87.04a14.262857 14.262857 0 0 0 19.382858 0l232.594285-232.594286 50.834286 50.834286a6.948571 6.948571 0 0 0 11.702857-4.022857l20.48-170.788572a6.582857 6.582857 0 0 0-7.68-5.485714z"
  10 + fill="#d81e06"
  11 + ></path>
  12 + </svg>
  13 + );
  14 +
  15 + const CardTitle = ({ title }) => {
  16 + return <span className="text-sm text-stone-600">{title}</span>;
  17 + };
  18 +
  19 + const CardContent = ({ unit, content, icon }) => {
  20 + return (
  21 + <Flex vertical>
  22 + <Flex>
  23 + <div>
  24 + <span className="text-base">{unit}</span>
  25 + <span className="text-2xl">{content}</span>
  26 + </div>
  27 +
  28 + <Icon component={HeartSvg} />
  29 + </Flex>
  30 +
  31 + <div>
  32 + <span className="text-sm text-stone-600">{icon}</span>
  33 + </div>
  34 + </Flex>
  35 + );
  36 + };
  37 +
  38 + return (
  39 + <ProCard title="卡片组展开" ghost gutter={8} collapsible>
  40 + <ProCard bordered title={<CardTitle title={'总收入'} />}>
  41 + <CardContent unit="￥" content={19000} icon="" />
  42 + </ProCard>
  43 + <ProCard title={<CardTitle title={'指标'} />} bordered></ProCard>
  44 + <ProCard title={<CardTitle title={'总订单量'} />} bordered></ProCard>
  45 + <ProCard title={<CardTitle title={'未审核订单'} />} bordered></ProCard>
  46 +
  47 + <ProCard title={<CardTitle title={'未发货订单'} />} bordered></ProCard>
  48 + </ProCard>
  49 + );
  50 +};
src/pages/OrderReport/components/OrderStatisticSearch.tsx 0 → 100644
  View file @c44ef09
  1 +import {
  2 + ProFormDatePicker,
  3 + ProFormText,
  4 + QueryFilter,
  5 +} from '@ant-design/pro-components';
  6 +
  7 +const OrderStatisticSearch = () => {
  8 + return (
  9 + <QueryFilter defaultCollapsed split className="!p-0">
  10 + <ProFormText name="name" label="应用名称" />
  11 + <ProFormDatePicker name="createDate" label="创建时间" />
  12 + </QueryFilter>
  13 + );
  14 +};
  15 +
  16 +export default OrderStatisticSearch;
src/pages/OrderReport/index.tsx
  View file @c44ef09
1 -import { DualAxes } from '@ant-design/plots'; 1 +import { EllipsisOutlined } from '@ant-design/icons';
  2 +import { PageContainer, ProCard } from '@ant-design/pro-components';
  3 +import { Avatar, Button, Dropdown, Space, Tag } from 'antd';
  4 +import OrderDualAxes from './components/OrderDualAxes';
  5 +import OrderStatisticCard from './components/OrderStatisticCard';
  6 +import OrderStatisticSearch from './components/OrderStatisticSearch';
  7 +const userInfo = JSON.parse(localStorage.getItem('userInfo'));
2 8
3 -export default () => {  
4 - const data = [  
5 - {  
6 - year: '1991',  
7 - value: 3,  
8 - count: 10,  
9 - },  
10 - {  
11 - year: '1992',  
12 - value: 4,  
13 - count: 4,  
14 - },  
15 - {  
16 - year: '1993',  
17 - value: 3.5,  
18 - count: 5,  
19 - },  
20 - {  
21 - year: '1994',  
22 - value: 5,  
23 - count: 5,  
24 - },  
25 - {  
26 - year: '1995',  
27 - value: 4.9,  
28 - count: 4.9,  
29 - },  
30 - {  
31 - year: '1996',  
32 - value: 6,  
33 - count: 35,  
34 - },  
35 - {  
36 - year: '1997',  
37 - value: 7,  
38 - count: 7,  
39 - },  
40 - {  
41 - year: '1998',  
42 - value: 9,  
43 - count: 1,  
44 - },  
45 - {  
46 - year: '1999',  
47 - value: 13,  
48 - count: 20,  
49 - },  
50 - ];  
51 - const config = {  
52 - data: [data, data],  
53 - xField: 'year',  
54 - yField: ['value', 'count'],  
55 - geometryOptions: [  
56 - {  
57 - geometry: 'line',  
58 - color: '#5B8FF9',  
59 - },  
60 - {  
61 - geometry: 'line',  
62 - color: '#5AD8A6',  
63 - },  
64 - ],  
65 - };  
66 - return <DualAxes {...config} />; 9 +const OrderReportPage = () => {
  10 + return (
  11 + <PageContainer
  12 + className="order-page-container"
  13 + header={{
  14 + title: '订单汇总',
  15 + extra: [
  16 + <Avatar key="0" style={{ verticalAlign: 'middle' }} size="large">
  17 + {userInfo?.username}
  18 + </Avatar>,
  19 + <Tag key="nickName">{userInfo?.nickName}</Tag>,
  20 + <Dropdown
  21 + key="dropdown"
  22 + trigger={['click']}
  23 + menu={{
  24 + items: [
  25 + {
  26 + label: '退出登录',
  27 + key: '1',
  28 + onClick: () => {
  29 + localStorage.removeItem('token');
  30 + history.push('/login');
  31 + },
  32 + },
  33 + // {
  34 + // label: '修改密码',
  35 + // key: '2',
  36 + // },
  37 + ],
  38 + }}
  39 + >
  40 + <Button key="4" style={{ padding: '0 8px' }}>
  41 + <EllipsisOutlined />
  42 + </Button>
  43 + </Dropdown>,
  44 + ],
  45 + }}
  46 + >
  47 + <Space direction="vertical" size="middle" className="flex">
  48 + <OrderStatisticCard />
  49 + <ProCard tooltip="这是提示" bordered>
  50 + <OrderStatisticSearch />
  51 + </ProCard>
  52 +
  53 + <ProCard title="带卡片阴影" extra="extra" tooltip="这是提示" bordered>
  54 + <OrderDualAxes />
  55 + </ProCard>
  56 + </Space>
  57 + </PageContainer>
  58 + );
67 }; 59 };
  60 +
  61 +export default OrderReportPage;