perf: 订单数据-子维度页面：时间轴切换

src/stores/OrdersStore.js

@@ -26,6 +26,7 @@ class OrdersStore {
 	active_tab_key_sub = "detail"; // 当前切换的子维度标签页
 	orderCountDataRaw = [];
 	orderCountData = []; // 订单统计数据源
+	orderCountDataRaw_type = []; // 子维度订单统计
 	orderCountData_type = []; // 子维度订单统计
 	orderCountData_Form = []; // 表单类型统计数据源
 	orderCountData_Form_sub = []; // 子维度类型统计
@@ -37,6 +38,13 @@ class OrdersStore {
   orderCountDataMapper = { 'data1': 'ordercount1', data2: 'ordercount2' };
   orderCountDataFieldMapper ={ 'dateKey': 'ApplyDate', 'valueKey': 'orderCount', 'seriesKey': 'WebCode', _f: 'sum' };
 
+  orderCount_type_dateRadio = {
+    lineChartXGroup: '', // x轴: 按 日/月/年
+    avgLine1: 0,
+    orderCountDataMapper: { 'data1': 'ordercount1', data2: 'ordercount2' },
+    orderCountDataFieldMapper:{ 'dateKey': 'ApplyDate', 'valueKey': 'orderCount', 'seriesKey': 'WebCode', _f: 'sum' },
+  };
+
 	// 选择事业部
 	group_handleChange(value) {
 		this.groups = value;
@@ -116,7 +124,6 @@ class OrdersStore {
    * @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;
@@ -135,10 +142,39 @@ class OrdersStore {
         return r;
       }, [])
       .map((row) => ({ xField: row.ApplyDate, yField: row.orderCount, seriesField: row.groups }));
+    this.lineChartXGroup = value;
     this.orderCountData = _data;
     this.avgLine1 = avg1;
   };
 
+  /**
+   * 子维度页面的时间轴切换
+   */
+  onChangeDateGroupSub = (value, data, avg1) => {
+    const groupByDate = data.reduce((r, v) => {
+      (r[v.ApplyDate] || (r[v.ApplyDate] = [])).push(v);
+      return r;
+    }, {});
+    const _data = Object.keys(groupByDate)
+      .reduce((r, _d) => {
+        const xAxisGroup = groupByDate[_d].reduce((a, v) => {
+          (a[v.groups] || (a[v.groups] = [])).push(v);
+          return a;
+        }, {});
+        Object.keys(xAxisGroup).map((_group) => {
+          const summaryVal = xAxisGroup[_group].reduce((rows, row) => rows + row.orderCount, 0);
+          r.push({ ...xAxisGroup[_group][0], orderCount: summaryVal });
+          return _group;
+        });
+        return r;
+      }, [])
+      .map((row) => ({ xField: row.ApplyDate, yField: row.orderCount, seriesField: row.groups, rowX: row.dateRange[0] }));
+
+    this.orderCount_type_dateRadio.lineChartXGroup = value;
+    this.orderCountData_type = _data;
+    this.orderCount_type_dateRadio.avgLine1 = avg1;
+  };
+
   summaryAllWebcode = (json) => {
     const groupByDate1 = json.ordercount1.reduce((r, v) => {
       (r[v.ApplyDate] || (r[v.ApplyDate] = [])).push(v);
@@ -165,6 +201,10 @@ class OrdersStore {
     resultDataCb(orderCountData, dateGroup, this.orderCountDataMapper, this.orderCountDataFieldMapper, this.onChangeDateGroup);
   };
 
+  parseOrderCount_type = (orderCountData, dateGroup) => {
+    resultDataCb(orderCountData, dateGroup, this.orderCount_type_dateRadio.orderCountDataMapper, this.orderCount_type_dateRadio.orderCountDataFieldMapper, this.onChangeDateGroupSub);
+  };
+
 	// 网站订单数量，根据类型
 	getOrderCount_type(ordertype, ordertype_sub) {
 		this.loading = true;
@@ -180,7 +220,12 @@ class OrdersStore {
 			.then(response => response.json())
 			.then(json => {
 				runInAction(() => {
-					this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
+					// this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
+					// this.loading = false;
+          const data = this.summaryAllWebcode(json);
+          this.orderCountDataRaw_type = data;
+          // 第一次得到数据
+          this.parseOrderCount_type(data, 'day');
 					this.loading = false;
 				});
 			})

src/views/Orders_sub.jsx

@@ -12,6 +12,7 @@ import { NavLink, useParams } from "react-router-dom";
 import * as comm from "../utils/commons";
 import * as config from "../config";
 import { utils, writeFileXLSX } from "xlsx";
+import DateGroupRadio from '../components/DateGroupRadio';
 
 const Orders_sub = () => {
 	const { ordertype, ordertype_sub, ordertype_title } = useParams();
@@ -22,8 +23,10 @@ const Orders_sub = () => {
 		orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
 	}, []);
 
-	const data_source = orders_store.orderCountData_type;
-	const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / data_source.length) : 0; // 平均值，显示一条平均线
+	// const data_source = orders_store.orderCountData_type;
+  const data_source = orders_store.orderCountData_type ? orders_store.orderCountData_type : [];
+  const avg_line_y = Math.round(orders_store.orderCount_type_dateRadio.avgLine1);
+  // const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / data_source.length) : 0; // 平均值，显示一条平均线
 	const line = {
 		data: data_source,
 		padding: "auto",
@@ -31,7 +34,7 @@ const Orders_sub = () => {
 		yField: "yField",
 		seriesField: "seriesField",
 		xAxis: {
-			type: "timeCat",
+			type: "cat",
 		},
 		annotations: [
 			{
@@ -55,8 +58,11 @@ const Orders_sub = () => {
 			},
 		],
 		tooltip: {
+      customItems: (originalItems) => {
+        return originalItems.map(ele => ({...ele, name: ele.data?.seriesField || ele.data?.xField}));
+      },
 			title: (title, datum) => {
-				return title + " " + comm.getWeek(datum.xField); // 显示周几
+        return orders_store.orderCount_type_dateRadio.lineChartXGroup === 'day' ? `${title} ${comm.getWeek(datum.xField)}` : title;
 			},
 		},
 		label: {}, // 显示标签
@@ -221,6 +227,16 @@ const Orders_sub = () => {
 			</Row>
 
 			<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
+          <Col span={24} style={{textAlign: 'right'}}>
+            <DateGroupRadio
+              visible={data_source.length!==0}
+              dataRaw={orders_store.orderCountDataRaw_type}
+              onChange={orders_store.onChangeDateGroupSub}
+              value={orders_store.orderCount_type_dateRadio.lineChartXGroup}
+              dataMapper={orders_store.orderCount_type_dateRadio.orderCountDataMapper}
+              fieldMapper={orders_store.orderCount_type_dateRadio.orderCountDataFieldMapper}
+            />
+          </Col>
 				<Col className="gutter-row" span={24}>
 					<Line {...line} />
 				</Col>