diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js index e8baed2..ba07033 100644 --- a/src/stores/OrdersStore.js +++ b/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; }); }) diff --git a/src/views/Orders_sub.jsx b/src/views/Orders_sub.jsx index 1af9b1e..e8e9bd8 100644 --- a/src/views/Orders_sub.jsx +++ b/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 = () => { + + +