From 06812ffeef6ca24bae719f338276b9b463814cc3 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Thu, 31 Aug 2023 17:10:54 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E8=AE=A2=E5=8D=95=E6=95=B0=E6=8D=AE:?= =?UTF-8?q?=20=E6=97=B6=E9=97=B4=E8=BD=B4=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/OrdersStore.js | 38 +++++++++++++++++++++++++++-- src/views/Orders.jsx | 51 +++++++++++++++++++++++++++------------ 2 files changed, 71 insertions(+), 18 deletions(-) diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js index f3f942d..50ab2a4 100644 --- a/src/stores/OrdersStore.js +++ b/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; }); }) diff --git a/src/views/Orders.jsx b/src/views/Orders.jsx index 7442d8d..50588cf 100644 --- a/src/views/Orders.jsx +++ b/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 `
${title}
${data.seriesField} ${data.yField}
`; - // } + 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 { - + + + +