canrd-main / canrd-erp-front · Commits

Commit 1f86602ea8a3806f525b55e53ec9341fde12e2d4

Authored by zhongnanhuang
1 parent c44ef097

feat: update

Inline Side-by-side
Showing 3 changed files with 156 additions and 23 deletions
src/app.ts
  View file @1f86602
... ... @@ -24,7 +24,7 @@ export const layout = () => {
24 24 // rightContentRender: () => <RightContent />,
25 25 // footerRender: () => <Footer />,
26 26 },
27   - collapsed: true,
  27 + // collapsed: true,
28 28 };
29 29 };
30 30  
... ...
src/pages/OrderReport/components/OrderStatisticCard.tsx
  View file @1f86602
1   -import Icon from '@ant-design/icons';
  1 +import Icon, { CheckCircleTwoTone, EditTwoTone } from '@ant-design/icons';
2 2 import { ProCard } from '@ant-design/pro-components';
3   -import { Flex } from 'antd';
  3 +import { Flex, InputNumber } from 'antd';
  4 +import { useState } from 'react';
4 5  
5 6 export default () => {
6   - const HeartSvg = () => (
7   - <svg width="200" height="200">
  7 + const [edit, setEdit] = useState(false);
  8 +
  9 + const UpBig = () => (
  10 + <svg width="44" height="auto" fill="#d81e06" viewBox="0 0 1024 1024">
8 11 <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"
  12 + d="M255.857413 855.291523h-58.175337c-16.996324 0-30.798708-13.802384-30.798707-30.798708V166.084884c0-16.996324 13.802384-30.798708 30.798707-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v658.293862c0 16.996324-13.916453 30.912777-30.798708 30.912777z m-54.867327-34.220787h51.331179V169.506962h-51.331179v651.563774zM442.816977 855.291523h-58.175337c-16.996324 0-30.798708-13.802384-30.798708-30.798708V348.367606c0-16.996324 13.802384-30.798708 30.798708-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v476.01114c0 16.996324-13.802384 30.912777-30.798708 30.912777z m-54.753259-34.220787h51.33118V351.789685h-51.33118v469.281051zM629.890609 855.291523h-58.175337c-16.996324 0-30.798708-13.802384-30.798707-30.798708V525.517211c0-16.996324 13.802384-30.798708 30.798707-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v298.975604c0 16.882255-13.802384 30.798708-30.798708 30.798708z m-54.753258-34.220787h51.33118V528.939289h-51.33118v292.131447zM816.964242 855.291523h-58.175337c-16.996324 0-30.798708-13.802384-30.798708-30.798708V702.552746c0-16.996324 13.802384-30.798708 30.798708-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v121.940069c0 16.882255-13.802384 30.798708-30.798708 30.798708z m-54.753258-34.220787h51.331179V705.974825h-51.331179v115.095911zM830.652557 589.167873c-6.38788 0-12.547622-3.650217-15.513424-9.809958l-71.977721-152.168431-162.206527-45.855854c-6.844157-1.939178-11.863206-7.98485-12.433553-15.057146l-10.950651-133.803275-143.271026-77.567116c-8.327058-4.448702-11.406929-14.829007-6.844158-23.156065 4.448702-8.327058 14.829007-11.406929 23.156066-6.844157l151.484015 82.015818c5.133118 2.737663 8.441127 7.870781 8.897404 13.688314l10.722513 131.179682 158.328172 44.715161c4.79091 1.368831 8.669266 4.676841 10.836583 9.125543l75.28573 159.126657c3.992425 8.555197 0.342208 18.707363-8.09892 22.813857-2.509524 1.026624-5.019049 1.59697-7.414503 1.59697z"
10 13 fill="#d81e06"
11 14 ></path>
  15 + <path d="M456.163083 261.903086c-6.844157 0-13.232037-4.106494-15.855631-10.722513l-42.433775-106.426646c-1.825109-4.676841-1.59697-10.038097 0.798485-14.4868 2.395455-4.448702 6.616019-7.642642 11.635068-8.669266l130.153057-26.692213c9.239612-1.939178 18.251086 4.106494 20.190264 13.346106 1.939178 9.239612-4.106494 18.251086-13.346106 20.190264l-110.076863 22.58572 34.905202 87.377074c3.536148 8.783335-0.798485 18.707363-9.58182 22.243511-2.053247 0.798485-4.220564 1.254762-6.387881 1.254763z" />
  16 + </svg>
  17 + );
  18 +
  19 + const DownBig = () => (
  20 + <svg width="44" height="auto" fill="#1DB302" viewBox="0 0 1024 1024">
  21 + <path
  22 + d="M727.990197 852.667929V194.374067c0-16.996324 13.802384-30.798708 30.798708-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v658.293862c0 16.996324-13.802384 30.798708-30.798708 30.798708h-58.175337c-16.996324 0-30.798708-13.802384-30.798708-30.798708z m85.551966-654.871783h-51.331179v651.449705h51.331179V197.796146zM540.916565 852.667929V376.65679c0-16.996324 13.802384-30.798708 30.798707-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v476.011139c0 16.996324-13.802384 30.798708-30.798708 30.798708h-58.175337c-16.996324 0-30.798708-13.802384-30.798707-30.798708z m85.551966-472.589061h-51.33118v469.166983h51.33118V380.078868zM353.842932 852.667929v-298.861535c0-16.996324 13.802384-30.798708 30.798708-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v298.975604c0 16.996324-13.802384 30.798708-30.798708 30.798708h-58.175337c-16.996324-0.114069-30.798708-13.916453-30.798708-30.912777z m85.551966-295.439456h-51.33118v292.131447h51.33118V557.228473zM166.769299 852.667929V730.72786c0-16.996324 13.802384-30.798708 30.798708-30.798708h58.175337c16.996324 0 30.798708 13.802384 30.798708 30.798708v121.940069c0 16.996324-13.802384 30.798708-30.798708 30.798708h-58.175337c-16.882255 0-30.798708-13.802384-30.798708-30.798708z m85.666036-118.51799h-51.33118v115.095912h51.33118V734.149939zM660.347109 189.012811c-0.684416 6.38788-4.904979 12.091345-11.406929 14.37273l-158.898518 55.437674-62.738108 156.503063c-2.623594 6.616019-9.125543 10.950652-16.311909 10.722513l-134.145483-3.308009-92.282054 134.259552c-5.361257 7.756712-15.9697 9.809959-23.840481 4.448702-7.756712-5.361257-9.809959-15.9697-4.448702-23.840481l97.529241-141.902194c3.308009-4.79091 8.783335-7.528573 14.4868-7.414504l131.521889 3.308009 61.255208-152.738777c1.825109-4.562772 5.589395-8.212989 10.266236-9.809958L637.647321 171.103932c8.897404-3.079871 18.707363 1.59697 21.787234 10.494375 0.912554 2.509524 1.140693 5.019049 0.912554 7.414504z"
  23 + fill="#1DB302"
  24 + ></path>
  25 + <path
  26 + d="M295.211318 526.771973c-0.684416 6.730088-5.475326 12.77576-12.433553 14.714938l-110.305001 30.912777c-4.904979 1.368831-10.152167 0.456277-14.258661-2.395455-4.220564-2.851732-6.844157-7.414504-7.414504-12.433552l-12.661691-132.206305c-0.912554-9.353682 6.045672-17.794809 15.399354-18.707364 9.353682-0.912554 17.794809 6.045672 18.707363 15.399354l10.722513 111.901972 90.571015-25.437451c9.125543-2.509524 18.593294 2.737663 21.102818 11.863206 0.684416 2.053247 0.798485 4.220564 0.570347 6.38788z"
  27 + fill="#1DB302"
  28 + />
  29 + </svg>
  30 + );
  31 +
  32 + const UpSmall = () => (
  33 + <svg width="14" height="auto" fill="#d81e06" viewBox="0 0 1024 1024">
  34 + <path d="M511.976976 945.959599c-239.47514 0-433.597349-194.300264-433.597349-433.964716 0-239.677754 194.122209-433.955506 433.597349-433.955506s433.642374 194.277752 433.642374 433.955506C945.61935 751.659335 751.453139 945.959599 511.976976 945.959599zM666.05312 408.869155l-131.822304-132.292002c-2.899026-4.303003-7.091512-7.870248-12.509918-9.766434-2.876514-1.137916-5.952572-1.64957-9.119705-1.582031-0.222057 0-0.401136-0.112564-0.623193-0.112564-0.289596 0-0.535189 0.13303-0.847298 0.156566-3.03308-0.044002-6.021134 0.423649-8.830109 1.515516-5.507434 1.918699-9.787924 5.528923-12.664438 9.945513L357.945857 408.869155c-9.275247 9.29776-8.562003 25.061792 1.560542 35.184337 10.168594 10.146081 25.463951 10.413164 34.739199 1.11438 0.73678-0.735757 1.471514-1.248434 2.073218-2.073218l89.747024-89.456405 0.245593 399.136489c-0.155543 0.936325 0 1.783623 0 2.76395 0 12.352329 10.992355 22.342868 25.352411 22.342868 14.314007 0 25.976628-9.990538 25.976628-22.342868l0.289596-401.923976 89.771583 89.478917c0.599657 0.825808 1.335415 1.337461 2.049682 2.073218 9.29776 9.29776 24.595164 9.030677 34.740222-1.11438C674.615123 433.930947 675.351903 418.166915 666.05312 408.869155z" />{' '}
  35 + </svg>
  36 + );
  37 +
  38 + const DownSmall = () => (
  39 + <svg width="14" height="auto" fill="#1DB302" viewBox="0 0 1024 1024">
  40 + <path d="M945.61935 512.005117c0 239.677754-194.166211 433.955506-433.642374 433.955506S78.379627 751.682871 78.379627 512.005117c0-239.664452 194.122209-433.964716 433.597349-433.964716S945.61935 272.340665 945.61935 512.005117zM664.492578 579.947532c-10.145058-10.146081-25.442462-10.413164-34.740222-1.115404-0.714268 0.735757-1.450025 1.248434-2.049682 2.073218l-89.771583 89.478917-0.289596-401.923976c0-12.352329-11.661597-22.342868-25.976628-22.342868-14.360056 0-25.352411 9.990538-25.352411 22.342868 0 0.980327-0.155543 1.827625 0 2.76395l-0.245593 399.136489-89.747024-89.456405c-0.602727-0.825808-1.337461-1.338485-2.073218-2.073218-9.275247-9.29776-24.571628-9.030677-34.739199 1.115404-10.123568 10.122545-10.836813 25.886577-1.560542 35.184337l131.689275 132.135436c2.876514 4.415566 7.157004 8.027837 12.664438 9.945513 2.808976 1.091868 5.79703 1.559519 8.830109 1.515516 0.312108 0.022513 0.557702 0.155543 0.847298 0.155543 0.223081 0 0.402159-0.11154 0.623193-0.11154 3.167133 0.067538 6.244214-0.445138 9.119705-1.583055 5.418406-1.895163 9.610892-5.462408 12.509918-9.765411l131.822304-132.292002C675.351903 605.833085 674.615123 590.069053 664.492578 579.947532z" />{' '}
12 41 </svg>
13 42 );
14 43  
... ... @@ -16,35 +45,138 @@ export default () =&gt; {
16 45 return <span className="text-sm text-stone-600">{title}</span>;
17 46 };
18 47  
19   - const CardContent = ({ unit, content, icon }) => {
  48 + const CardContent = ({
  49 + unit = '',
  50 + content = 0,
  51 + sameMonthPercentageChange = -1000,
  52 + editable = false,
  53 + }) => {
  54 + let trendIcon;
  55 + let trendPercentage;
  56 + if (sameMonthPercentageChange > 0) {
  57 + trendIcon = <Icon component={UpBig} />;
  58 + trendPercentage = (
  59 + <div>
  60 + <span className="text-xs text-stone-500">同比上个月</span>
  61 + <Icon component={UpSmall} />
  62 + <span className="text-[#d81e06]">+{sameMonthPercentageChange}%</span>
  63 + </div>
  64 + );
  65 + }
  66 +
  67 + if (sameMonthPercentageChange < 0) {
  68 + trendIcon = <Icon component={DownBig} />;
  69 + trendPercentage = (
  70 + <div>
  71 + <span className="text-xs text-stone-500">同比上个月</span>
  72 + <Icon component={DownSmall} />
  73 + <span className="text-[#1DB302]">{sameMonthPercentageChange}%</span>
  74 + </div>
  75 + );
  76 + }
  77 +
  78 + if (sameMonthPercentageChange === -1000) {
  79 + trendIcon = '';
  80 + trendPercentage = '';
  81 + }
  82 +
20 83 return (
21 84 <Flex vertical>
22 85 <Flex>
23   - <div>
24   - <span className="text-base">{unit}</span>
25   - <span className="text-2xl">{content}</span>
26   - </div>
  86 + <Flex align="center">
  87 + <span className="text-base pr-1">{unit}</span>
  88 + <div>
  89 + {editable ? (
  90 + edit ? (
  91 + <InputNumber placeholder="请输入指标（￥）" size="small" />
  92 + ) : (
  93 + <span className="text-2xl">
  94 + {content}
  95 + {editable ? <span className="text-xs pl-1">每月</span> : ''}
  96 + </span>
  97 + )
  98 + ) : (
  99 + ''
  100 + )}
  101 +
  102 + {!editable ? (
  103 + <span className="text-2xl">
  104 + {content}
  105 + {editable ? <span className="text-xs pl-1">每月</span> : ''}
  106 + </span>
  107 + ) : (
  108 + ''
  109 + )}
27 110  
28   - <Icon component={HeartSvg} />
  111 + {editable ? (
  112 + edit ? (
  113 + <CheckCircleTwoTone
  114 + width={200}
  115 + onClick={() => {
  116 + setEdit(false);
  117 + }}
  118 + />
  119 + ) : (
  120 + <EditTwoTone
  121 + onClick={() => {
  122 + setEdit(true);
  123 + }}
  124 + />
  125 + )
  126 + ) : (
  127 + ''
  128 + )}
  129 + </div>
  130 + </Flex>
  131 + {trendIcon}
29 132 </Flex>
30 133  
31   - <div>
32   - <span className="text-sm text-stone-600">{icon}</span>
33   - </div>
  134 + {trendPercentage}
34 135 </Flex>
35 136 );
36 137 };
37 138  
38 139 return (
39   - <ProCard title="卡片组展开" ghost gutter={8} collapsible>
40   - <ProCard bordered title={<CardTitle title={'总收入'} />}>
41   - <CardContent unit="￥" content={19000} icon="" />
  140 + <ProCard title="" ghost gutter={8}>
  141 + <ProCard
  142 + className="order-statictis-card"
  143 + bordered
  144 + title={<CardTitle title={'总收入'} />}
  145 + >
  146 + <CardContent
  147 + unit="￥"
  148 + content={2332222}
  149 + sameMonthPercentageChange={20}
  150 + />
  151 + </ProCard>
  152 + <ProCard
  153 + className="order-statictis-card"
  154 + title={<CardTitle title={'指标'} />}
  155 + bordered
  156 + >
  157 + <CardContent unit="￥" content={50000} editable={true} />
  158 + </ProCard>
  159 + <ProCard
  160 + className="order-statictis-card"
  161 + title={<CardTitle title={'总订单量'} />}
  162 + bordered
  163 + >
  164 + <CardContent unit="单" content={2212} sameMonthPercentageChange={-15} />
  165 + </ProCard>
  166 + <ProCard
  167 + className="order-statictis-card"
  168 + title={<CardTitle title={'未审核订单'} />}
  169 + bordered
  170 + >
  171 + <CardContent unit="￥" content={2212} />
  172 + </ProCard>
  173 + <ProCard
  174 + className="order-statictis-card"
  175 + title={<CardTitle title={'未发货订单'} />}
  176 + bordered
  177 + >
  178 + <CardContent unit="￥" content={212} />
42 179 </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 180 </ProCard>
49 181 );
50 182 };
... ...
src/pages/OrderReport/index.tsx
  View file @1f86602
... ... @@ -4,6 +4,7 @@ import { Avatar, Button, Dropdown, Space, Tag } from &#39;antd&#39;;
4 4 import OrderDualAxes from './components/OrderDualAxes';
5 5 import OrderStatisticCard from './components/OrderStatisticCard';
6 6 import OrderStatisticSearch from './components/OrderStatisticSearch';
  7 +import './index.less';
7 8 const userInfo = JSON.parse(localStorage.getItem('userInfo'));
8 9  
9 10 const OrderReportPage = () => {
... ...