From f39ed273c3e1ffc32dafb0d0c39f3f7f2e38d9d8 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Thu, 7 Dec 2023 15:00:33 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E9=94=80=E5=94=AE=E4=B8=9A=E7=BB=A9:?= =?UTF-8?q?=20=E5=90=88=E5=B9=B6=E7=9B=B8=E5=90=8C=E5=90=8D=E5=AD=97?= =?UTF-8?q?=E7=9A=84=E8=B4=A6=E6=88=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/SaleStore.js | 50 ++++++++++++++++++++++++++++++++--------- src/stores/Trade.js | 27 +++++++++++++++++++++- src/views/DataPivot.jsx | 2 +- src/views/Sale_KPI.jsx | 29 +++++++++++++++++++----- 4 files changed, 90 insertions(+), 18 deletions(-) diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js index 6b6a521..e677f51 100644 --- a/src/stores/SaleStore.js +++ b/src/stores/SaleStore.js @@ -47,7 +47,7 @@ class SaleStore { } salesTrade = { - groupType: 'dept', loading: false, + groupType: 'dept', loading: false, tableDataSource: [], operator: [], dept: [], overview: [], operatorMapped: {}, pickSales: [], pickSalesData: [], }; @@ -529,15 +529,36 @@ class SaleStore { }); } + setTableDataSource = (merge = false) => { + if (comm.isEmpty(this.salesTrade[this.salesTrade.groupType]) || comm.isEmpty(this.salesTrade.operator)) { + return false; + } + this.salesTrade.tableDataSource = [].concat(this.salesTrade[this.salesTrade.groupType], merge === false ? this.salesTrade.operator : this.salesTrade.operatorAccount); + }; + async fetchOperatorTradeData(groupType, queryData) { this.salesTrade.loading = true; const param1 = Object.assign({}, queryData, {groupType, groupDateType: 'year' }); const yearData = await this.fetchTradeDataAll(param1); - const { mergeRows: yearMergeRows } = yearData.result1; - const yData = parseSaleData(yearMergeRows, ['groupsKey', 'groupDateType']); + const param2 = Object.assign({}, queryData, {groupType, groupDateType: 'month' }); const monthData = await this.fetchTradeDataAll(param2); - const { mergeRows: monthMergeRows } = monthData.result1; + + const { salesTradeDataMapped, accountMergeYearMonth } = await this.handleYearMonthData(groupType, queryData, yearData, monthData); + + runInAction(() => { + this.salesTrade.loading = false; + this.salesTrade[groupType] = Object.values(salesTradeDataMapped).sort(comm.sortBy('yearML')).reverse(); + this.salesTrade[`${groupType}Account`] = accountMergeYearMonth.sort(comm.sortBy('yearML')).reverse(); + this.salesTrade[`${groupType}Mapped`] = Object.values(salesTradeDataMapped).reduce((r, v) => ({...r, [v.groupsKey]: Object.values(v.mData)}), {}); + + }); + } + + handleYearMonthData = async (groupType, queryData, yearData, monthData) => { + const { mergeRows: yearMergeRows, mergeLabelsRows: yearMergeLabelsRows } = yearData.result1; + const { mergeRows: monthMergeRows, mergeLabelsRows: monthMergeLabelsRows } = monthData.result1; + const yData = parseSaleData(yearMergeRows, ['groupsKey', 'groupDateType']); const mData = parseSaleData(monthMergeRows, ['groupsKey', 'groupDateType']); const mergeYearMonth = Object.keys(yData).map(ykey => ({ ...yData[ykey], @@ -547,6 +568,17 @@ class SaleStore { yearML: Object.values(yData[ykey].data)[0]?.SumML || 0, // 整理排序用 })); + const accountYData = parseSaleData(yearMergeLabelsRows, ['groupsKey', 'groupDateType']); + const accountMData = parseSaleData(monthMergeLabelsRows, ['groupsKey', 'groupDateType']); + const accountMergeYearMonth = Object.keys(accountYData).map(ykey => ({ + ...accountYData[ykey], + mData: accountMData[ykey].data, + yData: Object.values(accountYData[ykey].data)[0], + data: undefined, + yearML: Object.values(accountYData[ykey].data)[0]?.SumML || 0, // 整理排序用 + })); + const accountSalesTradeDataMapped = accountMergeYearMonth.reduce((ro, vo) => ({...ro, [vo.groupsKey]: vo}), {}); + const kpiObjects = mergeYearMonth.map(v => ({ key: v.groupsKey, value: v.groupsKey, label: v.groupsLabel })); const kpiData = await this.getKPISettings(groupType, queryData, kpiObjects); const salesTradeDataMapped = mergeYearMonth.reduce((ro, vo) => ({...ro, [vo.groupsKey]: vo}), {}); @@ -560,18 +592,16 @@ class SaleStore { if (comm.isEmpty(salesTradeDataMapped[ele.object_id].mData[`month_${padM}`])) { salesTradeDataMapped[ele.object_id].mData[`month_${padM}`] = {}; } + // set Object.assign(salesTradeDataMapped[ele.object_id].mData[`month_${padM}`], _monthMLKPI); return km; }); return ele; }); - runInAction(() => { - this.salesTrade.loading = false; - this.salesTrade[groupType] = Object.values(salesTradeDataMapped).sort(comm.sortBy('yearML')).reverse(); - this.salesTrade[`${groupType}Mapped`] = Object.values(salesTradeDataMapped).reduce((r, v) => ({...r, [v.groupsKey]: Object.values(v.mData)}), {}); - }); - } + return { salesTradeDataMapped, accountSalesTradeDataMapped, accountMergeYearMonth }; + + }; async getKPISettings(curObject, queryData, objects) { const getkpiParam = comm.objectMapper(queryData, { diff --git a/src/stores/Trade.js b/src/stores/Trade.js index e74e28e..39acbd5 100644 --- a/src/stores/Trade.js +++ b/src/stores/Trade.js @@ -457,7 +457,32 @@ export const parseMergeItem = ({traditional, biz}) => { OrderKPIrates: row.OrderKPIvalue ? fixTo2Decimals((row.SumOrder/row.OrderKPIvalue)*100) : 0, // ConfirmRatesKPIrates: 0, // todo: })); - return Object.assign(res, { [resKey]: Object.assign({}, mergeItem, { mergeRows, summary, summaryRows }) }); + // 合并账户 + const allRowsLabelsData = groupBy(mergeRes, ele => `${ele.groupsLabel.replace(/\([^)]*\)/gi, '').toLowerCase()}@${ele.groupDateVal}`); + const mergeLabelsRows = Object.keys(allRowsLabelsData).map(rkey => { + const _groupsLabel = rkey.split('@')[0].toLowerCase(); + const _groupsKey = (allRowsLabelsData[rkey]?.[0]?.groupsKey || '').toLowerCase(); + const sumFields = [ + 'ConfirmOrder', 'SumOrder', 'SumML', 'transactions', 'SumPersonNum', + 'ConfirmOrderKPIvalue', 'OrderKPIvalue', 'MLKPIvalue', + ].reduce( + (r, skey) => ({ ...r, + [skey]: allRowsLabelsData[rkey].reduce((a, c) => a + c[skey], 0), + // [`${skey}_arr`]: [ _groupsKey ? TMapped?.[_groupsKey]?.[skey] || 0 : 0, _groupsKey ? BMapped?.[_groupsKey]?.[skey] || 0 : 0,], + }), + allRowsLabelsData[rkey]?.[0] || {} + ); + const pickFields = pick(allRowsLabelsData[rkey], Object.keys(allRowsLabelsData[rkey]).filter(_k => _k.endsWith('KPIvalue') )); + return {...pickFields, ...sumFields, groupsLabel: _groupsLabel, groupsKey: _groupsLabel }; + }, {}).map(row => ({...row, + ConfirmRates: row.SumOrder ? fixTo2Decimals((row.ConfirmOrder/row.SumOrder)*100) : 0, + MLKPIrates: row.MLKPIvalue ? fixTo2Decimals((row.SumML/row.MLKPIvalue)*100) : 0, + OrderValue: row.SumOrder ? fixToInt((row.SumML/row.SumOrder)) : 0, + ConfirmOrderKPIrates: row.ConfirmOrderKPIvalue ? fixTo2Decimals((row.ConfirmOrder/row.ConfirmOrderKPIvalue)*100) : 0, + OrderKPIrates: row.OrderKPIvalue ? fixTo2Decimals((row.SumOrder/row.OrderKPIvalue)*100) : 0, + // ConfirmRatesKPIrates: 0, // todo: + })); + return Object.assign(res, { [resKey]: Object.assign({}, mergeItem, { mergeRows, summary, summaryRows, mergeLabelsRows }) }); }, {}); }; diff --git a/src/views/DataPivot.jsx b/src/views/DataPivot.jsx index 456dce7..18193a8 100644 --- a/src/views/DataPivot.jsx +++ b/src/views/DataPivot.jsx @@ -22,7 +22,7 @@ const filterFields = [ { key: 'guestGroupType', label: '客群类别' }, { key: 'travelMotivation', label: '出行目的' }, // { key: 'operatorName', label: '顾问' }, - // { key: 'WebCode', label: '来源站点' }, + { key: 'WebCode', label: '来源站点' }, // todo: 目的地, 目的地国家, ]; const filterFieldsMapped = filterFields.reduce((r, v) => ({ ...r, [v.key]: v }), {}); diff --git a/src/views/Sale_KPI.jsx b/src/views/Sale_KPI.jsx index 8b29762..9738372 100644 --- a/src/views/Sale_KPI.jsx +++ b/src/views/Sale_KPI.jsx @@ -1,5 +1,5 @@ -import React, { useContext } from 'react'; -import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider } from 'antd'; +import React, { useContext, useState } from 'react'; +import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider, Button, Switch } from 'antd'; import { stores_Context } from '../config'; import { observer } from 'mobx-react'; import * as comm from '../utils/commons'; @@ -15,9 +15,8 @@ const overviewGroupKeys = overviewGroup.map(item => item.key); const Sale_KPI = () => { const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context); const { formValues } = searchFormStore; - const { groupType, loading, operator, } = sale_store.salesTrade; + const { groupType, loading, operator, tableDataSource: dataSource } = sale_store.salesTrade; - const dataSource = [].concat(sale_store.salesTrade[groupType], operator); const yearData = sale_store.salesTrade[groupType].reduce((r, ele) => r.concat(Object.values(ele.mData)), []); const operatorObjects = operator.map((v) => ({ key: v.groupsKey, value: v.groupsKey, label: v.groupsLabel })); const pageRefresh = async (queryData) => { @@ -25,10 +24,15 @@ const Sale_KPI = () => { || overviewGroupKeys.includes(queryData.DepartmentList.toLowerCase()); // queryData.DepartmentList.toLowerCase().includes(','); const _groupType = overviewFlag ? 'overview' : 'dept'; sale_store.setGroupType(_groupType); - sale_store.fetchOperatorTradeData(_groupType, { ...queryData, groupDateType: 'year' }); - sale_store.fetchOperatorTradeData('operator', { ...queryData, groupDateType: 'year' }); + await sale_store.fetchOperatorTradeData(_groupType, { ...queryData, groupDateType: 'year' }); + await sale_store.fetchOperatorTradeData('operator', { ...queryData, groupDateType: 'year' }); sale_store.setPickSales([]); + + sale_store.setTableDataSource(false); + setIfmerge(false); }; + const [ifmerge, setIfmerge] = useState(false); + const monthCol = new Array(12).fill(1).map((_, index) => { return { title: `${index + 1}月`, @@ -219,6 +223,19 @@ const Sale_KPI = () => { + {dataSource.length > 0 && ( + { + sale_store.setTableDataSource(e); + setIfmerge(e); + }} + /> + )} +