Blame view

src/pages/OrderReport/components/OrderStatisticCard.tsx 17.2 KB
zhongnanhuang authored
1
2
import { RESPONSE_CODE } from '@/constants/enum';
import { postServiceOrderUpdateReportFormsTarget } from '@/services';
zhongnanhuang authored
3
import Icon, { EditTwoTone } from '@ant-design/icons';
zhongnanhuang authored
4
5
6
7
8
9
import {
  ModalForm,
  ProCard,
  ProFormDatePicker,
  ProFormDigit,
} from '@ant-design/pro-components';
zhongnanhuang authored
10
import { useLocation } from '@umijs/max';
zhongnanhuang authored
11
import { Flex, Form, message } from 'antd';
zhongnanhuang authored
12
import { useEffect, useState } from 'react';
zhongnanhuang authored
13
zhongnanhuang authored
14
export default ({ data, statisticsMethod, reFreshData }) => {
zhongnanhuang authored
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  const location = useLocation();
  const [targetEditable, setTargetEditable] = useState(false);

  // 使用URLSearchParams来解析查询参数
  const params = new URLSearchParams(location.search);

  // 获取名为"param"的查询参数
  useEffect(() => {
    setTargetEditable(true);
    const urlEditable = params.get('editable');
    if (urlEditable === null) {
      setTargetEditable(false);
    }
  }, []);
zhongnanhuang authored
30
  const [edit, setEdit] = useState(false);
zhongnanhuang authored
31
32
33
34
  const [form] = Form.useForm<{
    statisticsMethod: string;
    target: number;
    daysOfMonth: number;
zhongnanhuang authored
35
    month: string;
zhongnanhuang authored
36
37
  }>();
  const [targetValue, setTargetValue] = useState(0);
zhongnanhuang authored
38
39
40

  const UpBig = () => (
    <svg width="44" height="auto" fill="#d81e06" viewBox="0 0 1024 1024">
zhongnanhuang authored
41
      <path
zhongnanhuang authored
42
        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"
zhongnanhuang authored
43
44
        fill="#d81e06"
      ></path>
zhongnanhuang authored
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
      <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" />
    </svg>
  );

  const DownBig = () => (
    <svg width="44" height="auto" fill="#1DB302" viewBox="0 0 1024 1024">
      <path
        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"
        fill="#1DB302"
      ></path>
      <path
        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"
        fill="#1DB302"
      />
    </svg>
  );

  const UpSmall = () => (
    <svg width="14" height="auto" fill="#d81e06" viewBox="0 0 1024 1024">
      <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" />{' '}
    </svg>
  );

  const DownSmall = () => (
    <svg width="14" height="auto" fill="#1DB302" viewBox="0 0 1024 1024">
      <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" />{' '}
zhongnanhuang authored
71
72
73
74
75
76
77
    </svg>
  );

  const CardTitle = ({ title }) => {
    return <span className="text-sm text-stone-600">{title}</span>;
  };
zhongnanhuang authored
78
79
80
81
82
83
  const CardContent = ({
    unit = '',
    content = 0,
    sameMonthPercentageChange = -1000,
    editable = false,
  }) => {
zhongnanhuang authored
84
85
    //如果是可编辑的说明是指标,设置指标值,可用在弹窗中的回显
    if (editable) {
zhongnanhuang authored
86
      setTargetValue(content);
zhongnanhuang authored
87
88
    }
zhongnanhuang authored
89
90
91
92
93
    let trendIcon;
    let trendPercentage;
    if (sameMonthPercentageChange > 0) {
      trendIcon = <Icon component={UpBig} />;
      trendPercentage = (
zhongnanhuang authored
94
95
96
97
98
        <div style={{ minWidth: '130px' }}>
          <span className="text-xs text-stone-500">
            同比上
            {statisticsMethod === 'MONTH_STATISTICS' ? '个月' : '年'}
          </span>
zhongnanhuang authored
99
100
101
102
103
104
105
106
107
          <Icon component={UpSmall} />
          <span className="text-[#d81e06]">+{sameMonthPercentageChange}%</span>
        </div>
      );
    }

    if (sameMonthPercentageChange < 0) {
      trendIcon = <Icon component={DownBig} />;
      trendPercentage = (
zhongnanhuang authored
108
109
110
111
112
        <div style={{ minWidth: '130px' }}>
          <span className="text-xs text-stone-500">
            同比上
            {statisticsMethod === 'MONTH_STATISTICS' ? '个月' : '年'}
          </span>
zhongnanhuang authored
113
114
115
116
117
118
119
120
121
122
123
          <Icon component={DownSmall} />
          <span className="text-[#1DB302]">{sameMonthPercentageChange}%</span>
        </div>
      );
    }

    if (sameMonthPercentageChange === -1000) {
      trendIcon = '';
      trendPercentage = '';
    }
zhongnanhuang authored
124
125
126
    return (
      <Flex vertical>
        <Flex>
zhongnanhuang authored
127
          <Flex align="center">
zhongnanhuang authored
128
            <span className="pr-1 text-base">{unit}</span>
zhongnanhuang authored
129
            <div style={{ width: 'max-content', display: 'flex' }}>
zhongnanhuang authored
130
131
132
              <span className="text-2xl">
                {content}
                {editable ? (
zhongnanhuang authored
133
                  <span className="pl-1 text-xs">
zhongnanhuang authored
134
135
136
137
138
139
                    {statisticsMethod === 'YEAR_STATISTICS' ? '每年' : '每月'}
                  </span>
                ) : (
                  ''
                )}
              </span>
zhongnanhuang authored
140
              {editable && targetEditable ? (
zhongnanhuang authored
141
142
143
144
145
146
147
148
149
150
151
                <EditTwoTone
                  style={{ fontSize: '20px' }}
                  onClick={() => {
                    setEdit(true);
                  }}
                />
              ) : (
                ''
              )}

              {/* {editable ? (
zhongnanhuang authored
152
                edit ? (
zhongnanhuang authored
153
154
155
                  <InputNumber
                    placeholder="请输入指标(¥)"
                    width={200}
zhongnanhuang authored
156
                    value={targetValue}
zhongnanhuang authored
157
                    max={100000000}
zhongnanhuang authored
158
159
160
                    onChange={(value) => {
                      setTargetValue(value);
                    }}
zhongnanhuang authored
161
                  />
zhongnanhuang authored
162
163
164
                ) : (
                  <span className="text-2xl">
                    {content}
zhongnanhuang authored
165
                    {editable ? <span className="px-1 text-xs">每月</span> : ''}
zhongnanhuang authored
166
167
168
169
170
171
172
173
174
                  </span>
                )
              ) : (
                ''
              )}

              {!editable ? (
                <span className="text-2xl">
                  {content}
zhongnanhuang authored
175
                  {editable ? <span className="pl-1 text-xs">每月</span> : ''}
zhongnanhuang authored
176
177
178
                </span>
              ) : (
                ''
zhongnanhuang authored
179
              )} */}
zhongnanhuang authored
180
zhongnanhuang authored
181
              {/* {editable ? (
zhongnanhuang authored
182
                edit ? (
zhongnanhuang authored
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
                  [
                    <CheckCircleTwoTone
                      key="confirm"
                      style={{ fontSize: '20px', paddingLeft: '5px' }}
                      onClick={async () => {
                        let body = {
                          statisticsMethod: statisticsMethod,
                          target: targetValue,
                        };
                        let res = await postServiceOrderUpdateReportFormsTarget(
                          { data: body },
                        );
                        if (res.result === RESPONSE_CODE.SUCCESS) {
                          message.success(res.message);
                          setEdit(false);
                          reFreshData();
                        }
                      }}
                    />,
                    <CloseCircleTwoTone
                      key="cancel"
                      style={{ fontSize: '20px', paddingLeft: '5px' }}
                      onClick={async () => {
                        setEdit(false);
                      }}
                    />,
                  ]
zhongnanhuang authored
210
211
                ) : (
                  <EditTwoTone
zhongnanhuang authored
212
                    style={{ fontSize: '20px' }}
zhongnanhuang authored
213
214
215
216
217
218
219
                    onClick={() => {
                      setEdit(true);
                    }}
                  />
                )
              ) : (
                ''
zhongnanhuang authored
220
              )} */}
zhongnanhuang authored
221
222
223
            </div>
          </Flex>
          {trendIcon}
zhongnanhuang authored
224
225
        </Flex>
zhongnanhuang authored
226
        {trendPercentage}
zhongnanhuang authored
227
228
229
230
231
      </Flex>
    );
  };

  return (
zhongnanhuang authored
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
    <>
      <ProCard title="" ghost gutter={8}>
        <ProCard
          className="order-statictis-card"
          bordered
          title={<CardTitle title={'总收入'} />}
        >
          <CardContent
            unit="¥"
            content={data.totalPayment}
            sameMonthPercentageChange={data.totalPaymentTrend}
          />
        </ProCard>
        <ProCard
          className="order-statictis-card"
          title={<CardTitle title={'指标'} />}
          bordered
        >
          <CardContent unit="¥" content={data.target} editable={true} />
        </ProCard>
        <ProCard
          className="order-statictis-card"
          title={<CardTitle title={'总订单量'} />}
          bordered
        >
          <CardContent
            unit="单"
            content={data.totalOrderNumber}
            sameMonthPercentageChange={data.totalOrderNumberTrend}
          />
        </ProCard>
        <ProCard
          className="order-statictis-card"
          title={<CardTitle title={'总子订单量'} />}
          bordered
        >
          <CardContent unit="单" content={data.subTotalOrderNumber} />
        </ProCard>
        <ProCard
          className="order-statictis-card"
zhongnanhuang authored
272
          title={<CardTitle title={'未审核子订单'} />}
zhongnanhuang authored
273
274
275
276
277
278
          bordered
        >
          <CardContent unit="单" content={data.unCheckOrderNumber} />
        </ProCard>
        <ProCard
          className="order-statictis-card"
zhongnanhuang authored
279
          title={<CardTitle title={'待发货子订单'} />}
zhongnanhuang authored
280
281
282
283
          bordered
        >
          <CardContent unit="单" content={data.unSendOrderNumber} />
        </ProCard>
zhongnanhuang authored
284
      </ProCard>
zhongnanhuang authored
285
286
287
288
289

      <ModalForm<{
        statisticsMethod: string;
        target: number;
        daysOfMonth: number;
zhongnanhuang authored
290
        month: string;
zhongnanhuang authored
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
      }>
        title="编辑指标"
        width={500}
        form={form}
        open={edit}
        autoFocusFirstInput
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setEdit(false),
        }}
        onFinish={async (values) => {
          values.statisticsMethod = statisticsMethod;
          let res = await postServiceOrderUpdateReportFormsTarget({
            data: values,
          });
          if (res.result === RESPONSE_CODE.SUCCESS) {
            message.success(res.message);
            setEdit(false);
            reFreshData();
          }
        }}
zhongnanhuang authored
312
      >
zhongnanhuang authored
313
314
315
316
317
318
319
320
        <ProFormDigit
          width="md"
          name="target"
          label="指标(¥)"
          min={0}
          initialValue={targetValue}
          placeholder="请输入指标"
          rules={[{ required: true, message: '指标必填' }]}
zhongnanhuang authored
321
        />
zhongnanhuang authored
322
323
324
325
326
327
328
329
330
331
332
        <ProFormDatePicker
          width="md"
          name="month"
          fieldProps={{
            picker: 'month',
            format: 'YYYY-MM',
          }}
          label="日期"
          placeholder="请输入日期"
          rules={[{ required: true, message: '日期必填' }]}
        />
zhongnanhuang authored
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349

        {statisticsMethod === 'MONTH_STATISTICS' ? (
          <ProFormDigit
            width="md"
            name="weekday"
            label={
              statisticsMethod === 'YEAR_STATISTICS'
                ? '每月工作日天数'
                : '本月工作日天数'
            }
            min={0}
            placeholder="工作日天数"
            rules={[{ required: true, message: '工作日天数必填' }]}
          />
        ) : (
          ''
        )}
zhongnanhuang authored
350
351
      </ModalForm>
    </>
zhongnanhuang authored
352
353
  );
};