canrd-main / canrd-erp-front · Commits

Commit cfc5c16b8d58f0f3b91ee0ce86befe026f34a8b8

Authored by boyang
1 parent b95e4bed
build: skipped

fix: 报表卡片

Inline Side-by-side
Showing 2 changed files with 137 additions and 348 deletions
src/pages/OrderReport/components/OrderDualAxes.tsx
  View file @cfc5c16
1   -// import { DualAxes } from '@ant-design/charts';
2   -
3   -// const OrderDualAxes = ({ data, statisticMethod }) => {
4   -// console.log(data);
5   -// let yFiledString = 'curTime';
6   -// if (
7   -// statisticMethod === 'MONTH_STATISTICS' ||
8   -// statisticMethod === 'LAST_MONTH_STATISTICS'
9   -// ) {
10   -// yFiledString = 'curTime';
11   -// } else {
12   -// yFiledString = 'curMonth';
13   -// }
14   -// const config = {
15   -// data: [
16   -// data.targetAndTotalPaymentDtoList === undefined ||
17   -// data.targetAndTotalPaymentDtoList === null
18   -// ? []
19   -// : data.targetAndTotalPaymentDtoList,
20   -// data.orderNumberDtoList === undefined || data.orderNumberDtoList === null
21   -// ? []
22   -// : data.orderNumberDtoList,
23   -// ],
24   -// xField: yFiledString,
25   -// yField: ['curDayTotalPayment', 'curDayTotalOrderNumber', 'lastTime'],
26   -// geometryOptions: [
27   -// {
28   -// geometry: 'line',
29   -// seriesField: 'type',
30   -// lineStyle: {
31   -// lineWidth: 3,
32   -// lineDash: [5, 5],
33   -// },
34   -// smooth: true,
35   -// },
36   -// {
37   -// geometry: 'line',
38   -// seriesField: 'name',
39   -// point: {},
40   -// },
41   -// ],
42   -// };
43   -// const handleClick = (event) => {
44   -// console.log('点击事件event:', event);
45   -// console.log('点击事件:', event?.data);
46   -// alert(`你点击了数据: ${JSON.stringify(event?.data)}`);
47   -// console.log('点击事件:', JSON.stringify(event?.data));
48   -
49   -// };
50   -
51   -// const handleReady = (plot) => {
52   -// // 绑定多个事件以确保响应
53   -// plot.on('plot:click', handleClick);
54   -// plot.on('element:click', handleClick);
55   -// };
56   -// return <DualAxes {...config} onReady={handleReady} />;
57   -// };
58   -
59   -// export default OrderDualAxes;
60   -
61 1 import { DualAxes } from '@ant-design/charts';
62 2  
63   -const OrderDualAxes = ({ data, statisticMethod }) => {
64   - console.log('传入的数据:', data);
65   -
  3 +const OrderDualAxes = ({ data, statisticMethod, onXValueClick }) => {
66 4 let yFiledString = 'curTime';
67 5  
68   - if (
69   - statisticMethod === 'MONTH_STATISTICS' ||
70   - statisticMethod === 'LAST_MONTH_STATISTICS'
71   - ) {
72   - yFiledString = 'curTime';
73   - } else {
  6 + if (statisticMethod === '0') {
74 7 yFiledString = 'curMonth';
  8 + } else {
  9 + yFiledString = 'curTime';
75 10 }
76 11  
77   - const targetData = data.targetAndTotalPaymentDtoList || [];
78   - const orderData = data.orderNumberDtoList || [];
79   - console.log(orderData, '传入的数据:', targetData);
  12 + const targetData = data?.targetAndTotalPaymentDtoList || [];
  13 + const orderData = data?.orderNumberDtoList || [];
80 14  
81 15 const config = {
82 16 data: [targetData, orderData],
83 17 xField: yFiledString,
84   - yField: ['curDayTotalPayment', 'curDayTotalOrderNumber', 'lastTime'],
  18 + yField: ['curDayTotalPayment', 'curDayTotalOrderNumber'],
85 19 geometryOptions: [
86 20 {
87 21 geometry: 'line',
... ... @@ -106,29 +40,50 @@ const OrderDualAxes = ({ data, statisticMethod }) =&gt; {
106 40 };
107 41  
108 42 const handleClick = (event) => {
109   - // console.log(targetData, '5656')
110 43 // 获取当前点击点的数据
111 44 const pointData = event?.data?.data;
112   -
113   - if (pointData) {
114   - if (pointData.type === '上年营业额' || pointData.type === '订单量') {
115   - const xValue = pointData[yFiledString]; // 获取当前列的 xField 值
116   -
117   - // 合并两个数据源
118   - const allData = [...targetData, ...orderData];
119   - console.log(orderData, '5656传入的数据:', targetData);
120   - // 筛选出当前列的所有数据
121   - const columnData = allData.filter(
122   - (item) => item[yFiledString] === xValue,
123   - );
124   -
125   - console.log(`当前列中 ${yFiledString} = ${xValue} 的数据:`, columnData);
126   -
127   - // 可选择将筛选出的数据展示到页面或以其他方式处理
128   - alert(`当前列数据: ${JSON.stringify(columnData, null, 2)}`);
  45 + if (
  46 + pointData &&
  47 + (data?.targetAndTotalPaymentDtoList !== undefined ||
  48 + data?.orderNumberDtoList !== undefined)
  49 + ) {
  50 + // 解析年份和月份
  51 + if (yFiledString === 'curMonth') {
  52 + const xValue = pointData['curMonth']; // 格式类似 "2025-01"
  53 + if (typeof xValue === 'string' && xValue.includes('-')) {
  54 + const [yearFromXValue] = xValue?.split('-'); // 提取年份部分 "2025"
  55 +
  56 + if (!yearFromXValue) {
  57 + return;
  58 + }
  59 +
  60 + // 减 1 获得目标年份
  61 + const targetYear = String(Number(yearFromXValue) - 1); // "2024"
  62 +
  63 + // 检查 pointData.type 是否包含目标年份
  64 + if (
  65 + pointData?.type?.includes(targetYear) ||
  66 + pointData?.name?.includes(targetYear)
  67 + ) {
  68 + // 调用父组件传递的回调
  69 + onXValueClick?.(xValue);
  70 +
  71 + // // 合并两个数据源
  72 + // const allData = [...targetData, ...orderData];
  73 +
  74 + // // 筛选出当前列的所有数据
  75 + // const columnData = allData.filter(
  76 + // (item) => item[yFiledString] === xValue,
  77 + // );
  78 +
  79 + // 可选择将筛选出的数据展示到页面或以其他方式处理
  80 + // alert(`当前列数据: ${JSON.stringify(columnData, null, 2)}`);
  81 + } else {
  82 + }
  83 + }
  84 + } else {
  85 + console.warn('点击事件未携带有效数据');
129 86 }
130   - } else {
131   - console.warn('点击事件未携带有效数据');
132 87 }
133 88 };
134 89  
... ...
src/pages/OrderReport/index.tsx
  View file @cfc5c16
1 1 import {
2 2 getOrderErpOrderZoNingSelectAll,
3 3 postOrderErpOrderZoNingSelectSaleUserByProvince,
4   - // postServiceOrderQueryReportFormsInformation,
  4 + postServiceOrderQueryReportFormsInformation,
5 5 postServiceOrderQuerySalesCode,
6 6 } from '@/services';
7 7 import { enumToSelect } from '@/utils';
... ... @@ -13,7 +13,7 @@ import {
13 13 ProFormSelect,
14 14 QueryFilter,
15 15 } from '@ant-design/pro-components';
16   -import { Form, Segmented, Space, Spin } from 'antd';
  16 +import { Form, Space, Spin } from 'antd';
17 17 import { useEffect, useState } from 'react';
18 18 import { PRODUCT_BELONG_DEPARTMENT_OPTIONS } from '../Order/constant';
19 19 import OrderDualAxes from './components/OrderDualAxes';
... ... @@ -21,7 +21,8 @@ import OrderStatisticCard from &#39;./components/OrderStatisticCard&#39;;
21 21 import './index.less';
22 22 const OrderReportPage = () => {
23 23 const [salesCodeOptions, setSalesCodeOptions] = useState([]);
24   -
  24 + const [selectedYear, setSelectedYear] = useState('2025');
  25 + const [selectedMonth, setSelectedMonth] = useState('0');
25 26 /**
26 27 * 获取销售代码枚举，在复制和编辑的时候判断是否为旧的代码
27 28 */
... ... @@ -44,25 +45,50 @@ const OrderReportPage = () =&gt; {
44 45 }>();
45 46 const [statisticData, setStatisticData] = useState([]);
46 47 const [loading, setLoading] = useState(false);
47   - const [statisticsMethod, setStatisticsMethod] = useState('MONTH_STATISTICS');
48   - const onChange = (key: string) => {
49   - if (key === '本月') {
50   - setStatisticsMethod('MONTH_STATISTICS');
51   - }
  48 + const [statisticsMethod, setStatisticsMethod] = useState('YEAR_STATISTICS');
  49 + // const onChange = (key: string) => {
  50 + // if (key === '本月') {
  51 + // setStatisticsMethod('MONTH_STATISTICS');
  52 + // }
52 53  
53   - if (key === '上月') {
54   - setStatisticsMethod('LAST_MONTH_STATISTICS');
55   - }
  54 + // if (key === '上月') {
  55 + // setStatisticsMethod('LAST_MONTH_STATISTICS');
  56 + // }
56 57  
57   - if (key === '本年') {
58   - setStatisticsMethod('YEAR_STATISTICS');
59   - }
60   - };
  58 + // if (key === '本年') {
  59 + // setStatisticsMethod('YEAR_STATISTICS');
  60 + // }
  61 + // };
  62 + const [yearOptions] = useState([
  63 + { value: '2025', label: '2025' },
  64 + { value: '2024', label: '2024' },
  65 + { value: '2023', label: '2023' },
  66 + ]);
61 67  
  68 + const [monthOptions] = useState([
  69 + { value: '0', label: '全部' },
  70 + { value: '1', label: '1' },
  71 + { value: '2', label: '2' },
  72 + { value: '3', label: '3' },
  73 + { value: '4', label: '4' },
  74 + { value: '5', label: '5' },
  75 + { value: '6', label: '6' },
  76 + { value: '7', label: '7' },
  77 + { value: '8', label: '8' },
  78 + { value: '9', label: '9' },
  79 + { value: '10', label: '10' },
  80 + { value: '11', label: '11' },
  81 + { value: '12', label: '12' },
  82 + ]);
62 83 /**
63 84 * 加载页面数据
64 85 */
65 86 const loadData = async () => {
  87 + if (selectedMonth === '0') {
  88 + setStatisticsMethod('YEAR_STATISTICS');
  89 + } else {
  90 + setStatisticsMethod('MONTH_STATISTICS');
  91 + }
66 92 setLoading(true);
67 93 let body = {
68 94 statisticsMethod: '',
... ... @@ -110,218 +136,56 @@ const OrderReportPage = () =&gt; {
110 136 // body.beginTime=formatDate(form.getFieldValue("dateRange")[0]),
111 137 // body.endTime=formatDate(form.getFieldValue("dateRange")[1])
112 138 // }
113   - body.statisticsMethod = statisticsMethod;
114   - // const { data } = await postServiceOrderQueryReportFormsInformation({
115   - // data: body,
116   - // });
117   - const { data } = {
118   - data: {
119   - invoicedAndReiceptedCount: 1593,
120   - invoicedAndReiceptedPriceSum: 3303364.71,
121   - invoicedNotReiceptCount: 31798,
122   - invoicedNotReiceptPriceSum: 3.276437229e7,
123   - orderNumberDtoList: [
124   - {
125   - curDayTotalOrderNumber: 2,
126   - curMonth: null,
127   - curTime: '2025-01-01',
128   - name: '订单量',
129   - },
130   - {
131   - curDayTotalOrderNumber: 204,
132   - curMonth: null,
133   - curTime: '2025-01-02',
134   - name: '订单量',
135   - },
136   - {
137   - curDayTotalOrderNumber: 0,
138   - curMonth: null,
139   - curTime: '2025-01-03',
140   - name: '订单量',
141   - },
142   - ],
143   - subTotalOrderNumber: 308,
144   - target: 3500000,
145   - targetAndTotalPaymentDtoList: [
146   - {
147   - curDayTotalPayment: 222000,
148   - curMonth: null,
149   - lastTime: '2024-01-01',
150   - curTime: '2025-01-01',
151   - type: '上年营业额',
152   - },
153   - {
154   - curDayTotalPayment: 24820,
155   - curMonth: null,
156   - lastTime: '2024-01-01',
157   - curTime: '2025-01-01',
158   - type: '上年指标',
159   - },
160   - {
161   - curDayTotalPayment: 248200,
162   - curMonth: null,
163   - lastTime: '2024-01-02',
164   - curTime: '2025-01-02',
165   - type: '上年指标',
166   - },
167   - {
168   - curDayTotalPayment: 1906180.59,
169   - curMonth: null,
170   - lastTime: '2024-01-02',
171   - curTime: '2025-01-02',
172   - type: '上年营业额',
173   - },
174   - {
175   - curDayTotalPayment: 248200,
176   - curMonth: null,
177   - lastTime: '2024-01-03',
178   - curTime: '2025-01-03',
179   - type: '上年指标',
180   - },
181   - {
182   - curDayTotalPayment: 768000,
183   - curMonth: null,
184   - curTime: '2025-01-03',
185   - lastTime: '2024-01-03',
186   - type: '上年营业额',
187   - },
188   - {
189   - curDayTotalPayment: 2482,
190   - curMonth: null,
191   - lastTime: '2024-01-01',
192   - curTime: '2025-01-01',
193   - type: '指标',
194   - },
195   - {
196   - curDayTotalPayment: 650,
197   - curMonth: null,
198   - lastTime: '2024-01-01',
199   - curTime: '2025-01-01',
200   - type: '营业额',
201   - },
202   - {
203   - curDayTotalPayment: 2482,
204   - curMonth: null,
205   - curTime: '2025-01-02',
206   - type: '指标',
207   - },
208   - {
209   - curDayTotalPayment: 190618.59,
210   - curMonth: null,
211   - curTime: '2025-01-02',
212   - type: '营业额',
213   - },
214   - {
215   - curDayTotalPayment: 2482,
216   - curMonth: null,
217   - curTime: '2025-01-03',
218   - type: '指标',
219   - },
220   - {
221   - curDayTotalPayment: 0,
222   - curMonth: null,
223   - curTime: '2025-01-03',
224   - type: '营业额',
225   - },
226   - ],
227   - totalOrderNumber: 206,
228   - totalOrderNumberTrend: null,
229   - totalPayment: 191268.59,
230   - totalPaymentTrend: null,
231   - unCheckOrderNumber: 80,
232   - unSendOrderNumber: 37,
233   - waitInvoicingCount: 386,
234   - waitInvoicingPriceSum: 211136.11,
235   - },
236   - message: '成功',
237   - result: 0,
238   - };
  139 + body.month = selectedMonth;
  140 + body.year = selectedYear;
  141 + const { data } = await postServiceOrderQueryReportFormsInformation({
  142 + data: body,
  143 + });
239 144 if (data !== undefined) {
240 145 setStatisticData(data);
241 146 }
242 147  
243 148 setLoading(false);
244 149 };
  150 + const handleXValueClick = async (xValue) => {
  151 + try {
  152 + const [yearValue, monthValue] = xValue.split('-');
  153 + const adjustedYearValue = (parseInt(yearValue, 10) - 1).toString();
  154 + const adjustedMonthValue = monthValue.startsWith('0')
  155 + ? monthValue.slice(1)
  156 + : monthValue;
  157 + // 更新年份和月份选项的选中值
  158 + setSelectedYear(adjustedYearValue);
  159 + setSelectedMonth(adjustedMonthValue);
  160 +
  161 + // const yearSelect = document.querySelector('select[name="year"]'); // 根据 ProFormSelect 的 `name` 属性找到对应 DOM
  162 + // if (yearSelect) {
  163 + // const event = new Event('change', { bubbles: true });
  164 + // yearSelect.value = adjustedYearValue;
  165 + // yearSelect.dispatchEvent(event);
  166 + // }
  167 +
  168 + // // 触发月份选择器的 onChange
  169 + // const monthSelect = document.querySelector('select[name="month"]'); // 根据 ProFormSelect 的 `name` 属性找到对应 DOM
  170 + // if (monthSelect) {
  171 + // const event = new Event('change', { bubbles: true });
  172 + // monthSelect.value = adjustedMonthValue;
  173 + // monthSelect.dispatchEvent(event);
  174 + // }
  175 + } catch (error) {
  176 + console.error('Failed to fetch updated data:', error);
  177 + }
  178 + };
245 179  
246 180 useEffect(() => {
247 181 loadData();
248   - }, [statisticsMethod]);
  182 + }, [selectedMonth, selectedYear]);
249 183  
250 184 useEffect(() => {
251 185 loadData();
252 186 getSalesCodeOptions();
253 187 }, []);
254 188  
255   - const yearOptions = [
256   - {
257   - value: 'all',
258   - label: '全部',
259   - },
260   - {
261   - value: '2024',
262   - label: '2024',
263   - },
264   - {
265   - value: '2025',
266   - label: '2025',
267   - },
268   - ];
269   -
270   - const monthOptions = [
271   - {
272   - value: 'all',
273   - label: '全部',
274   - },
275   - {
276   - value: '1',
277   - label: '1',
278   - },
279   - {
280   - value: '2',
281   - label: '2',
282   - },
283   - {
284   - value: '3',
285   - label: '3',
286   - },
287   - {
288   - value: '4',
289   - label: '4',
290   - },
291   - {
292   - value: '5',
293   - label: '5',
294   - },
295   - {
296   - value: '6',
297   - label: '6',
298   - },
299   - {
300   - value: '7',
301   - label: '7',
302   - },
303   - {
304   - value: '8',
305   - label: '8',
306   - },
307   - {
308   - value: '9',
309   - label: '9',
310   - },
311   - {
312   - value: '10',
313   - label: '10',
314   - },
315   - {
316   - value: '11',
317   - label: '11',
318   - },
319   - {
320   - value: '12',
321   - label: '12',
322   - },
323   - ];
324   -
325 189 // const items: TabsProps['items'] = [
326 190 // {
327 191 // key: 'MONTH_STATISTICS',
... ... @@ -420,12 +284,6 @@ const OrderReportPage = () =&gt; {
420 284 tooltip="下方汇总统计未统计实验设备事业部数据，如需要请勾选包含实验设备事业部汇总统计"
421 285 extra={
422 286 <div>
423   - <Segmented
424   - options={['本月', '上月', '本年']}
425   - onChange={(val: any) => {
426   - onChange(val);
427   - }}
428   - />
429 287 <div>
430 288 <ProForm.Group>
431 289 <ProFormSelect
... ... @@ -434,26 +292,14 @@ const OrderReportPage = () =&gt; {
434 292 width="100px"
435 293 // actionRef={mainTableRef}
436 294 // formRef={mainTableFormRef}
437   - initialValue={'1'}
  295 + value={selectedMonth}
438 296 showSearch
439   - placeholder="月份"
  297 + placeholder="全部"
440 298 options={monthOptions}
441   - // onChange={(_, option) => {
442   - // // if (option === undefined) {
443   - // // selectSalesCode(userInfo.username);
444   - // // }
445   - // // // if (option.value !== undefined) {
446   - // // // selectSalesCode(option.value);
447   - // // // }
448   - // // if (option && option.value !== undefined) {
449   - // // selectSalesCode(option.value);
450   - // // }
451   - // }}
452   - // request={async () => {
453   - // let options = await getSalesCodeOptions();
454   - // setSalesCodeOptions(options);
455   - // return options;
456   - // }}
  299 + onChange={(value) => {
  300 + const newValue = value === undefined ? '0' : value;
  301 + setSelectedMonth(newValue);
  302 + }}
457 303 />
458 304 <ProFormSelect
459 305 name="salesCode"
... ... @@ -461,26 +307,13 @@ const OrderReportPage = () =&gt; {
461 307 width="100px"
462 308 // actionRef={mainTableRef}
463 309 // formRef={mainTableFormRef}
464   - initialValue={'2025'}
  310 + value={selectedYear}
465 311 showSearch
466   - placeholder="年份"
  312 + placeholder="2025"
467 313 options={yearOptions}
468   - // onChange={(_, option) => {
469   - // // if (option === undefined) {
470   - // // selectSalesCode(userInfo.username);
471   - // // }
472   - // // // if (option.value !== undefined) {
473   - // // // selectSalesCode(option.value);
474   - // // // }
475   - // // if (option && option.value !== undefined) {
476   - // // selectSalesCode(option.value);
477   - // // }
478   - // }}
479   - // request={async () => {
480   - // let options = await getSalesCodeOptions();
481   - // setSalesCodeOptions(options);
482   - // return options;
483   - // }}
  314 + onChange={(value) => {
  315 + setSelectedYear(value); // 更新选中值
  316 + }}
484 317 />
485 318 </ProForm.Group>
486 319 </div>
... ... @@ -491,7 +324,8 @@ const OrderReportPage = () =&gt; {
491 324 <Spin spinning={loading}>
492 325 <OrderDualAxes
493 326 data={statisticData}
494   - statisticMethod={statisticsMethod}
  327 + statisticMethod={selectedMonth}
  328 + onXValueClick={handleXValueClick}
495 329 />
496 330 </Spin>
497 331 </ProCard>
... ...