From 5dafa48ab30715dd4bd4f21336074be652419bce Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 12 Dec 2023 16:26:54 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E6=95=B0=E6=8D=AE=E9=80=8F=E8=A7=86:?= =?UTF-8?q?=20+=E7=9B=AE=E7=9A=84=E5=9C=B0=E5=9B=BD=E7=B1=8D.=20=E9=80=94?= =?UTF-8?q?=E5=BE=84=E7=9A=84=E8=AE=A1=E7=AE=97=E4=BC=9A=E9=87=8D=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/libs/ht.js | 21 ++++++++++++++++++--- src/views/DataPivot.jsx | 42 ++++++++++++++++++++++++++++------------- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/libs/ht.js b/src/libs/ht.js index 68fb22d..b77ffb9 100644 --- a/src/libs/ht.js +++ b/src/libs/ht.js @@ -1,4 +1,4 @@ -import { fixTo4Decimals, fixTo1Decimals, fixToInt, groupBy, sortBy, cloneDeep, pick, unique, flush, fixTo2Decimals } from '../utils/commons'; +import { fixTo4Decimals, fixTo1Decimals, fixToInt, groupBy, sortBy, cloneDeep, pick, unique, flush, fixTo2Decimals, isEmpty } from '../utils/commons'; /** * 事业部 @@ -176,10 +176,25 @@ export const KPISubjects = [ * @param {any[]} groupbyKeys * @returns */ -export const pivotBy = (data, [rows, columns, date]) => { +export const pivotBy = (_data, [rows, columns, date]) => { console.time('pivot3----'); console.log('pivotBy', [rows, columns, date]); const groupbyKeys = flush([].concat(rows, columns, [date])); + // 数组的字段值, 拆分处理 + let data = cloneDeep(_data); + if (groupbyKeys.includes('destinationCountry_AsJOSN')) { + data = _data.reduce((r, v, i) => { + const vjson = isEmpty(v.destinationCountry_AsJOSN) ? [] : v.destinationCountry_AsJOSN; + const xv = (vjson).reduce((rv, cv, vi) => { + rv.push({...v, destinationCountry_AsJOSN: cv, key: vi === 0 ? v.key : `${v.key}@${cv}`}); + return rv; + }, []); + + r = r.concat(xv); + return r; + }, []); + } + const getKeys = (keys) => keys.map((keyField) => [...new Set(data.map((f) => f[keyField]))]); const [rowsKeys, columnsKeys, dateKeys] = [getKeys(rows), getKeys(columns), [getKeys([date])[0].filter(s => s)]]; // console.log('rowsKeys', rowsKeys, 'columnsKeys', columnsKeys, 'dateKeys', dateKeys); @@ -298,7 +313,7 @@ export const pivotBy = (data, [rows, columns, date]) => { const summaryColumns = transposeData(columns, columnsData, ['rows', rows]); console.timeEnd('pivot3----'); - return { data: pivotResult, columnValues: [rowsKeys, columnsKeys, dateKeys], summaryRows, summaryColumns }; + return { data: pivotResult, columnValues: [rowsKeys, columnsKeys, dateKeys], summaryRows, summaryColumns, pivotKeys: groupbyKeys }; }; // todo: 优化 pivotBy 速度 diff --git a/src/views/DataPivot.jsx b/src/views/DataPivot.jsx index 27469cb..f3e401a 100644 --- a/src/views/DataPivot.jsx +++ b/src/views/DataPivot.jsx @@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from 'react'; import { observer } from 'mobx-react'; import { useParams, useLocation } from 'react-router-dom'; import { stores_Context } from '../config'; -import { Row, Col, Spin, Table, Select, Typography, Card, Button, Space, Divider } from 'antd'; +import { Row, Col, Spin, Table, Select, Typography, Card, Button, Space, Divider, Alert } from 'antd'; import { cloneDeep, groupBy, isEmpty, omit, pick, sortBy, unique, cartesianProductArray } from '../utils/commons'; import { dataFieldAlias, pivotBy } from '../libs/ht'; import SearchForm from '../components/search/SearchForm'; @@ -24,14 +24,15 @@ const filterFields = [ // { key: 'operatorName', label: '顾问' }, { key: 'WebCode', label: '来源站点' }, // todo: 目的地, 目的地国家, + { key: 'destinationCountry_AsJOSN', label: '目的地国籍' }, ]; const filterFieldsMapped = filterFields.reduce((r, v) => ({ ...r, [v.key]: v }), {}); /** 预设的选项, 只有行 */ const quickOptions = [ - // { label: '国籍×产品', fields: [['country'], ['productType']] }, { label: '[ 产品×客群 ]', fields: [['productType', 'guestGroupType'], []] }, { label: '[ 国籍×客群 ]', fields: [['country', 'guestGroupType'], []] }, + { label: '[ 客群×目的地国籍 ]', fields: [['guestGroupType', 'destinationCountry_AsJOSN'], []] }, // { label: '[ 国籍×客群 ]×[ ]', fields: [['country', 'guestGroupType'], []] }, ]; @@ -100,6 +101,8 @@ export default observer((props) => { const [pivotDateColumns, setPivotDateColumns] = useState([[], []]); const [pivotDateColumnsValues, setPivotDateColumnsValues] = useState([[], []]); + const [showPassCountryTips, setShowPassCountryTips] = useState(false); + useEffect(() => { calcDataByDate(); resetX(); @@ -143,8 +146,9 @@ export default observer((props) => { */ const calcDataByDate = (_rawData) => { // console.log(';;;;;', pivotDateColumns); - const { data, columnValues, summaryRows, summaryColumns } = pivotBy(_rawData || rawData, [].concat(pivotDateColumns, [curXfield])); + const { data, columnValues, summaryRows, summaryColumns, pivotKeys } = pivotBy(_rawData || rawData, [].concat(pivotDateColumns, [curXfield])); // console.log('data====', data, '\ncolumnValues', columnValues, '\nsummaryRows', summaryRows, '\nsummaryColumns', summaryColumns); + setShowPassCountryTips(pivotKeys.includes('destinationCountry_AsJOSN')); setDataBeforePick(data.sort(sortBy(curXfield))); // 折线图数据 setDataSource(data.sort(sortBy(curXfield))); @@ -195,7 +199,7 @@ export default observer((props) => { const [rightFields, setRightFields] = useState(filterFields); const [rowFields, setRowFields] = useState([]); const [columnFields, setColumnFields] = useState([]); - const [rowSelection, setRowSelection] = useState(); + const [rowSelection, setRowSelection] = useState([]); const [columnSelection, setColumnSelection] = useState(); // 预设的选项 const quickOpt = (i) => { @@ -355,7 +359,7 @@ export default observer((props) => { return (
- + { title={'透视选项'} extra={ - 预设: + + 预设: + {quickOptions.map((ele, elei) => ( - - + + + ))} - + + + } > @@ -495,6 +504,13 @@ export default observer((props) => { + + + {showPassCountryTips && ( + + )} + + {/* {columnFields.length > 0 ? cloneDeep(pivotDateColumnsValues) .slice(rowFields.length)