perf: 订单数据: 时间轴切换

src/stores/OrdersStore.js

@@ -6,6 +6,7 @@ import * as comm from "../utils/commons";
 import moment from "moment";
 import { NavLink } from "react-router-dom";
 import { groupsMappedByCode } from './../libs/ht';
+import { resultDataCb } from '../components/DateGroupRadio/date';
 
 class OrdersStore {
 	constructor(rootStore) {
@@ -23,6 +24,7 @@ class OrdersStore {
 	// diff_count_day = 0; //开始日期和结束日期的间隔，用于计算平均数
 	active_tab_key = "Form"; // 当前切换的标签页
 	active_tab_key_sub = "detail"; // 当前切换的子维度标签页
+	orderCountDataRaw = [];
 	orderCountData = []; // 订单统计数据源
 	orderCountData_type = []; // 子维度订单统计
 	orderCountData_Form = []; // 表单类型统计数据源
@@ -30,6 +32,11 @@ class OrdersStore {
 	diff_days1 = 0; // 日期相差天数，用于计算日平均值
 	diff_days2 = 0; // 日期相差天数，比较数据时使用
 
+  lineChartXGroup = ''; // x轴: 按 日/月/年
+  avgLine1 = 0;
+  orderCountDataMapper = { 'data1': 'ordercount1', data2: 'ordercount2' };
+  orderCountDataFieldMapper ={ 'dateKey': 'ApplyDate', 'valueKey': 'orderCount', 'seriesKey': 'WebCode', _f: 'sum' };
+
 	// 选择事业部
 	group_handleChange(value) {
 		this.groups = value;
@@ -40,7 +47,7 @@ class OrdersStore {
 		const date_picker_store = this.rootStore.date_picker_store;
 		const _start_date = moment(date_picker_store.start_date.format(config.DATE_FORMAT));
 		const _end_date = moment(date_picker_store.end_date.format(config.DATE_FORMAT));
-		return _end_date.diff(_start_date, "days") + 1;
+		return _end_date.diff(_start_date, `${this.lineChartXGroup}s`) + 1;
 	}
 
 	// 下单日期、确认日期、出发日期
@@ -103,6 +110,31 @@ class OrdersStore {
 		return comm.set_array_index(result);
 	}
 
+  /**
+   * 更新值: orderCountData
+   * @author LYT
+   * @returns void
+   */
+  onChangeDateGroup = (value, data, avg1) => {
+    this.lineChartXGroup = value;
+    const groupByDate = data.reduce((r, v) => {
+      (r[v.ApplyDate] || (r[v.ApplyDate] = [])).push(v);
+      return r;
+    }, {});
+    this.orderCountData = Object.keys(groupByDate)
+      .reduce((r, _d) => {
+        const summaryVal = groupByDate[_d].reduce((rows, row) => rows + row.orderCount, 0);
+        r.push({ ...groupByDate[_d][0], orderCount: summaryVal });
+        return r;
+      }, [])
+      .map((row) => ({ xField: row.ApplyDate, yField: row.orderCount, seriesField: row.groups }));
+    this.avgLine1 = avg1;
+  };
+
+  parseOrderCount = (orderCountData, dateGroup) => {
+    resultDataCb(orderCountData, dateGroup, this.orderCountDataMapper, this.orderCountDataFieldMapper, this.onChangeDateGroup);
+  };
+
 	// 网站订单数量，根据类型
 	getOrderCount_type(ordertype, ordertype_sub) {
 		this.loading = true;
@@ -143,7 +175,9 @@ class OrdersStore {
 			.then(response => response.json())
 			.then(json => {
 				runInAction(() => {
-					this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
+          this.orderCountDataRaw = json;
+          // 第一次得到数据
+          this.parseOrderCount(json, 'day');
 					this.loading = false;
 				});
 			})

src/views/Orders.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Button, Tabs, Table, Divider, Select } from "antd";
+import { Row, Col, Button, Tabs, Table, Divider, Select, Radio } from "antd";
 import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons";
 import { stores_Context } from "../config";
 import { Line, Pie } from "@ant-design/charts";
@@ -12,7 +12,7 @@ import * as config from "../config";
 import { NavLink } from "react-router-dom";
 import * as comm from "../utils/commons";
 import { utils, writeFileXLSX } from "xlsx";
-
+import DateGroupRadio from '../components/DateGroupRadio';
 class Orders extends Component {
 	static contextType = stores_Context;
 
@@ -110,7 +110,7 @@ class Orders extends Component {
 					has_same_type = false;
 					// 数组1在数组2中相同的类型
 					for (const item2 of data.ordercount2) {
-						if (item.OrderType == item2.OrderType) {
+						if (item.OrderType === item2.OrderType) {
 							has_same_type = true;
 							result.dataSource.push({
 								key: item.key,
@@ -126,7 +126,7 @@ class Orders extends Component {
 						}
 					}
 					// 数组1中不在数组2的类型
-					if (has_same_type == false) {
+					if (has_same_type === false) {
 						result.dataSource.push({
 							key: item.key,
 							OrderType: item.OrderType,
@@ -144,11 +144,11 @@ class Orders extends Component {
 				for (const item2 of data.ordercount2) {
 					has_same_type = false;
 					for (const item of data.ordercount1) {
-						if (item.OrderType == item2.OrderType) {
+						if (item.OrderType === item2.OrderType) {
 							has_same_type = true;
 						}
 					}
-					if (has_same_type == false) {
+					if (has_same_type === false) {
 						result.dataSource.push({
 							key: item2.key,
 							OrderType: item2.OrderType,
@@ -222,7 +222,7 @@ class Orders extends Component {
 		const { orders_store } = this.context;
 		const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : [];
 		const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
-		const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / orders_store.diff_count_day) : 0; // 平均值，显示一条平均线
+    const avg_line_y = Math.round(orders_store.avgLine1);
 		const pie_data = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount1; // 饼图的显示
 		const pie_data2 = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount2;
 
@@ -232,9 +232,9 @@ class Orders extends Component {
 			xField: "xField",
 			yField: "yField",
 			seriesField: "seriesField",
-			xAxis: {
-				type: "timeCat",
-			},
+			// xAxis: {
+			// 	type: "timeCat",
+			// },
 			point: {
 				size: 4,
 				shape: "cicle",
@@ -270,12 +270,21 @@ class Orders extends Component {
 				},
 			},
 			tooltip: {
-				// customContent: (title, items) => {
-				//     const data = items[0]?.data || {};
-				//     return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
-				// }
+        customItems: (originalItems) => {
+          // process originalItems,
+          return originalItems.map(ele => ({...ele, name: ele.data?.seriesKey || ele.data?.xField}));
+        },
 				title: (title, datum) => {
-					return title + " " + comm.getWeek(datum.xField); // 显示周几
+          let ret = title;
+          switch (orders_store.lineChartXGroup) {
+            case 'day':
+              ret = `${title} ${comm.getWeek(datum.xField)}`; // 显示周几
+              break;
+
+            default:
+              break;
+          }
+					return ret;
 				},
 			},
 			smooth: true,
@@ -346,7 +355,17 @@ class Orders extends Component {
 						</Row>
 					</Col>
 				</Row>
-				<Row gutter={[16, { sm: 16, lg: 32 }]}>
+				<Row gutter={[16, { sm: 16, lg: 32 }]} >
+          <Col span={24} style={{textAlign: 'right'}}>
+            <DateGroupRadio
+              visible={data_source.length!==0}
+              dataRaw={orders_store.orderCountDataRaw}
+              onChange={orders_store.onChangeDateGroup}
+              value={orders_store.lineChartXGroup}
+              dataMapper={orders_store.orderCountDataMapper}
+              fieldMapper={orders_store.orderCountDataFieldMapper}
+            />
+          </Col>
 					<Col span={24}>
 						<Line {...config} />
 					</Col>