diff --git a/src/libs/ht.js b/src/libs/ht.js index 2e82c98..d591b05 100644 --- a/src/libs/ht.js +++ b/src/libs/ht.js @@ -334,7 +334,7 @@ export const pivotBy = (_data, [rows, columns, date]) => { DataGroupByKeys[colKey] = { ...calculatedData, ..._rowCalc }; }); - return { groupByKeys: DataGroupByKeys, key: outerKeys.join('_') }; + return { groupByKeys: DataGroupByKeys, key: outerKeys.join('_'), keys: outerKeys.join('_').split('_') }; }; const groupData = groupBy(data, (row) => groupbyKeys.map((kk) => `${row[kk]}`).join('=@=')); @@ -348,7 +348,7 @@ export const pivotBy = (_data, [rows, columns, date]) => { const _colKey = dataKey || 'dataKey'; const _colData = groupBy(dataProp[rowKey], (crow) => (colKeys || keys).map((kk) => `${crow[kk]}`).join('=@=')); const _columnsObj = calcTradeFields(_colData); - return { ...pick(dataProp[rowKey][0], keys), [_colKey]: _columnsObj.groupByKeys, key: _columnsObj.key, rowLabel }; + return { ...pick(dataProp[rowKey][0], keys), [_colKey]: _columnsObj.groupByKeys, key: _columnsObj.key, keys: _columnsObj.keys, rowLabel }; }) .map((everyR) => { const _colKey = dataKey || 'dataKey'; diff --git a/src/views/DataPivot.jsx b/src/views/DataPivot.jsx index 633e25b..888f161 100644 --- a/src/views/DataPivot.jsx +++ b/src/views/DataPivot.jsx @@ -118,6 +118,8 @@ export default observer((props) => { const [dataBeforeXChange, setDataBeforeXChange] = useState([]); const [dataSource, setDataSource] = useState([]); // const [dataSourceMapped, setDataSourceMapped] = useState({}); + const [pivotRow, setPivotRow] = useState({}); + const [pivotRowDataSource, setPivotRowDataSource] = useState([]); const [pivotDataSource, setPivotDataSource] = useState([]); const [pivotTableDataSource, setPivotTableDataSource] = useState([]); @@ -186,6 +188,8 @@ export default observer((props) => { // 表格数据 const sortRowData = cloneDeep(summaryRows).sort(sortBy(defaultValKey)).reverse(); setPivotTableDataSource(sortRowData); + setPivotRow({}); + setPivotRowDataSource([]); // 列汇总 const sortColData = summaryColumns.sort(sortBy(defaultValKey)).reverse(); const colDataMapped = isEmpty(pivotDateColumns[1]) ? sortColData[0] : sortColData.reduce((r, v) => ({...r, [v[pivotDateColumns[1][0]]]: v}), {}); @@ -393,6 +397,72 @@ export default observer((props) => { ], }; + const detailsTableProps = { + loading: false, + // sticky: true, + scroll: { x: 1000, y: 400 }, + pagination: false, + columns: [ + { + title: '订单号', + dataIndex: 'o_id', + key: 'o_id', + }, + { + title: '来源站点', + dataIndex: 'WebCode', + key: 'WebCode', + }, + { + title: '页面渠道', + dataIndex: 'COLI_LineClass', + key: 'COLI_LineClass', + }, + { + title: '来源类型', + dataIndex: 'SourceType', + key: 'SourceType', + }, + { + title: '客群类别', + dataIndex: 'guestGroupType', + key: 'guestGroupType', + }, + { + title: '成行', + dataIndex: 'orderState', + key: 'orderState', + render: (text, record) => {text === '1' ? '是' : '否'}, + sorter: (a, b) => b.orderState - a.orderState, + }, + // { + // title: "人数(成/童/婴)", + // dataIndex: "COLI_PersonNum", + // key: "COLI_PersonNum", + // render: (text, record) => ( + // + // {record.COLI_PersonNum}/{record.COLI_ChildNum}/{record.COLI_BabyNum} + // + // ), + // }, + { + title: '预计利润', + dataIndex: 'ML', + key: 'ML', + }, + { + title: '预定时间', + dataIndex: 'applyDate', + key: 'applyDate', + }, + // { + // title: '出发日期', + // dataIndex: 'CGI_ArriveDate', + // key: 'CGI_ArriveDate', + // }, + ], + }; + return (
@@ -541,11 +611,7 @@ export default observer((props) => { - - {showPassCountryTips && ( - - )} - + {showPassCountryTips && } {/* {columnFields.length > 0 ? cloneDeep(pivotDateColumnsValues) @@ -615,9 +681,43 @@ export default observer((props) => { 透视汇总表: {dataFieldAlias[lineConfig.yField].label} - + `${filterFieldsMapped[ele].label}`).join('×')} + {...{ columns: targetTableProps.columns, dataSource: pivotTableDataSource }} + /> + + { + return { + // 点击行 + onClick: (event) => { + setPivotRow(record); + const thisDetail = rawData.filter((ele) => { + return record.keys.includes(String(ele.key)); + }); + setPivotRowDataSource(thisDetail); + }, + }; + }} + /> + + +
+ +

+ 点击上方表格行查看单行数据的订单明细:{' '} + {pivotDateColumns[0].map((ele, ri) => `${filterFieldsMapped[ele].label}: ${pivotRow[pivotDateColumns[0][ri]] || ''}`).join('; ')} +

+ + `${pivotRow[pivotDateColumns[0][ri]] || ''}`).join('-')} + {...{ columns: detailsTableProps.columns, dataSource: pivotRowDataSource }} + /> -
+