|
|
|
|
@ -2,12 +2,13 @@ import { useContext, useEffect, useState } from 'react';
|
|
|
|
|
import { observer } from 'mobx-react';
|
|
|
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
|
import { stores_Context } from '../config';
|
|
|
|
|
import { Row, Col, Spin, Table, Select, Typography, Card, Button } from 'antd';
|
|
|
|
|
import { cloneDeep, groupBy, isEmpty, omit, pick, sortBy, unique } from '../utils/commons';
|
|
|
|
|
import { Row, Col, Spin, Table, Select, Typography, Card, Button, Space, Divider } 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';
|
|
|
|
|
import { Line } from '@ant-design/plots';
|
|
|
|
|
import DateGroupRadio from '../components/DateGroupRadio';
|
|
|
|
|
import { TableExportBtn } from './../components/Data';
|
|
|
|
|
|
|
|
|
|
const { Text } = Typography;
|
|
|
|
|
|
|
|
|
|
@ -22,28 +23,18 @@ const filterFields = [
|
|
|
|
|
{ key: 'travelMotivation', label: '出行目的' },
|
|
|
|
|
// { key: 'operatorName', label: '顾问' },
|
|
|
|
|
// { key: 'WebCode', label: '来源站点' },
|
|
|
|
|
// todo: 目的地, 目的地国家, 页面类型LineClass[PPC, NL...], 线路line,
|
|
|
|
|
// todo: 目的地, 目的地国家,
|
|
|
|
|
];
|
|
|
|
|
const filterFieldsMapped = filterFields.reduce((r, v) => ({ ...r, [v.key]: v }), {});
|
|
|
|
|
|
|
|
|
|
/** 预设的选项, 只有行 */
|
|
|
|
|
const quickOptions = [
|
|
|
|
|
{ label: '国籍×产品', fields: [['country'], ['productType']] },
|
|
|
|
|
{ label: '产品×客群', fields: [['productType'], ['guestGroupType']] },
|
|
|
|
|
// { label: '国籍×产品', fields: [['country'], ['productType']] },
|
|
|
|
|
{ label: '[ 产品×客群 ]', fields: [['productType', 'guestGroupType'], []] },
|
|
|
|
|
{ label: '[ 国籍×客群 ]', fields: [['country', 'guestGroupType'], []] },
|
|
|
|
|
// { label: '[ 国籍×客群 ]×[ ]', fields: [['country', 'guestGroupType'], []] },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 计算笛卡尔积
|
|
|
|
|
*/
|
|
|
|
|
const cartesianProductArray = (arr, sep = '_', index = 0, prefix = '') => {
|
|
|
|
|
let result = [];
|
|
|
|
|
if(index === arr.length){
|
|
|
|
|
return [prefix];
|
|
|
|
|
}
|
|
|
|
|
arr[index].forEach(item => {
|
|
|
|
|
result = result.concat(cartesianProductArray(arr, sep, index+1, prefix ? `${prefix}${sep}${item}` : `${item}`));
|
|
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 注意TdCell要提到DataTable作用域外声明
|
|
|
|
|
const TdCell = (tdprops) => {
|
|
|
|
|
// onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
|
|
|
|
|
@ -51,12 +42,37 @@ const TdCell = (tdprops) => {
|
|
|
|
|
return <td {...restProps} />;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const pageSetting = {
|
|
|
|
|
orders: {
|
|
|
|
|
xField: 'applyDate',
|
|
|
|
|
yField: 'SumOrder',
|
|
|
|
|
tableColumns: [
|
|
|
|
|
{ key: 'SumOrder', title: '订单数', dataIndex: 'SumOrder', width: '5em' },
|
|
|
|
|
// { key: 'ConfirmOrder', title: '成交数', dataIndex: 'ConfirmOrder', width: '5em' },
|
|
|
|
|
// { key: 'ConfirmPersonNum', title: '成交人数', dataIndex: 'ConfirmPersonNum', width: '5em' },
|
|
|
|
|
// { key: 'ConfirmRates', title: '成交率', dataIndex: 'ConfirmRates_txt', width: '5em' },
|
|
|
|
|
// { key: 'SumML', title: '毛利', dataIndex: 'SumML_txt', width: '5em' },
|
|
|
|
|
],
|
|
|
|
|
searchInitial: { DateType: { key: 'applyDate', value: 'applyDate', label: '提交日期' } },
|
|
|
|
|
},
|
|
|
|
|
trade: {
|
|
|
|
|
xField: 'confirmDate',
|
|
|
|
|
yField: 'SumML',
|
|
|
|
|
yFieldAlias: 'SumML_txt',
|
|
|
|
|
tableColumns: [{ key: 'SumML', title: '毛利', dataIndex: 'SumML', width: '5em' }], // SumML_txt
|
|
|
|
|
searchInitial: { DateType: { key: 'confirmDate', value: 'confirmDate', label: '确认日期' } },
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default observer((props) => {
|
|
|
|
|
const { page } = useParams();
|
|
|
|
|
const { date_picker_store: searchFormStore, orders_store, DistributionStore, DataPivotStore } = useContext(stores_Context);
|
|
|
|
|
const { date_picker_store: searchFormStore, orders_store, DataPivotStore } = useContext(stores_Context);
|
|
|
|
|
const { formValues, formValuesToSub } = searchFormStore;
|
|
|
|
|
const { originData } = DataPivotStore.detailData[page];
|
|
|
|
|
|
|
|
|
|
const { xField: defaultDateType, yField: defaultValKey, yFieldAlias, tableColumns, searchInitial } = pageSetting[page];
|
|
|
|
|
const [curXfield, setCurXfield] = useState(defaultDateType);
|
|
|
|
|
|
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
|
const [rawData, setRawData] = useState(originData || []);
|
|
|
|
|
const [dataBeforePick, setDataBeforePick] = useState([]);
|
|
|
|
|
@ -86,6 +102,14 @@ export default observer((props) => {
|
|
|
|
|
return () => {};
|
|
|
|
|
}, [dataSource]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setCurXfield(formValuesToSub.DateType);
|
|
|
|
|
setLineConfig({...lineConfig, xField: formValuesToSub.DateType});
|
|
|
|
|
|
|
|
|
|
return () => {};
|
|
|
|
|
}, [formValues]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const detailRefresh = async (obj) => {
|
|
|
|
|
setLoading(true);
|
|
|
|
|
DataPivotStore.getDetailData({
|
|
|
|
|
@ -99,24 +123,22 @@ export default observer((props) => {
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const valKey = 'SumOrder';
|
|
|
|
|
const timesKey = 'applyDate';
|
|
|
|
|
/**
|
|
|
|
|
* 走势的数据
|
|
|
|
|
* 汇总
|
|
|
|
|
*/
|
|
|
|
|
const calcDataByDate = (_rawData) => {
|
|
|
|
|
// console.log(';;;;;', pivotDateColumns);
|
|
|
|
|
const { data, columnValues, summaryRows, summaryColumns } = pivotBy(_rawData || rawData, [].concat(pivotDateColumns, [timesKey]));
|
|
|
|
|
const { data, columnValues, summaryRows, summaryColumns } = pivotBy(_rawData || rawData, [].concat(pivotDateColumns, [curXfield]));
|
|
|
|
|
// console.log('data====', data, '\ncolumnValues', columnValues, '\nsummaryRows', summaryRows, '\nsummaryColumns', summaryColumns);
|
|
|
|
|
setDataBeforePick(data.sort(sortBy(timesKey)));
|
|
|
|
|
setDataBeforePick(data.sort(sortBy(curXfield)));
|
|
|
|
|
// 折线图数据
|
|
|
|
|
setDataSource(data.sort(sortBy(timesKey)));
|
|
|
|
|
setDataSource(data.sort(sortBy(curXfield)));
|
|
|
|
|
// 表格数据
|
|
|
|
|
const sortRowData = cloneDeep(summaryRows).sort(sortBy(valKey)).reverse();
|
|
|
|
|
const sortRowData = cloneDeep(summaryRows).sort(sortBy(defaultValKey)).reverse();
|
|
|
|
|
setPivotTableDataSource(sortRowData);
|
|
|
|
|
// 列汇总
|
|
|
|
|
const sortColData = summaryColumns.sort(sortBy(valKey)).reverse();
|
|
|
|
|
const sortColData = summaryColumns.sort(sortBy(defaultValKey)).reverse();
|
|
|
|
|
const colDataMapped = isEmpty(pivotDateColumns[1]) ? sortColData[0] : sortColData.reduce((r, v) => ({...r, [v[pivotDateColumns[1][0]]]: v}), {});
|
|
|
|
|
setPivotTableColumnSummary(colDataMapped);
|
|
|
|
|
// 行列的选项值
|
|
|
|
|
@ -129,8 +151,8 @@ export default observer((props) => {
|
|
|
|
|
const line_config = {
|
|
|
|
|
// data: dataSource,
|
|
|
|
|
padding: 'auto',
|
|
|
|
|
xField: timesKey,
|
|
|
|
|
yField: valKey,
|
|
|
|
|
xField: curXfield,
|
|
|
|
|
yField: defaultValKey,
|
|
|
|
|
seriesField: 'rowLabel',
|
|
|
|
|
// xAxis: {
|
|
|
|
|
// type: 'timeCat',
|
|
|
|
|
@ -139,6 +161,9 @@ export default observer((props) => {
|
|
|
|
|
min: 0,
|
|
|
|
|
maxTickInterval: 5,
|
|
|
|
|
},
|
|
|
|
|
meta: {
|
|
|
|
|
...cloneDeep(dataFieldAlias),
|
|
|
|
|
},
|
|
|
|
|
// smooth: true,
|
|
|
|
|
label: {}, // 显示标签
|
|
|
|
|
legend: {
|
|
|
|
|
@ -149,7 +174,6 @@ export default observer((props) => {
|
|
|
|
|
itemMarginBottom: 12, // 垂直间距
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const [lineConfig, setLineConfig] = useState(cloneDeep(line_config));
|
|
|
|
|
|
|
|
|
|
// 透视配置：行列选项
|
|
|
|
|
@ -157,18 +181,33 @@ export default observer((props) => {
|
|
|
|
|
const [rightFields, setRightFields] = useState(filterFields);
|
|
|
|
|
const [rowFields, setRowFields] = useState([]);
|
|
|
|
|
const [columnFields, setColumnFields] = useState([]);
|
|
|
|
|
|
|
|
|
|
const [rowSelection, setRowSelection] = useState();
|
|
|
|
|
const [columnSelection, setColumnSelection] = useState();
|
|
|
|
|
// 预设的选项
|
|
|
|
|
const quickOpt = (i) => {
|
|
|
|
|
const { fields: pivotFields } = quickOptions[i];
|
|
|
|
|
const [row, col] = pivotFields;
|
|
|
|
|
setRowSelection(Object.values(pick(filterFieldsMapped, row)));
|
|
|
|
|
setColumnSelection(filterFieldsMapped[col[0]]);
|
|
|
|
|
!isEmpty(col) ? setColumnSelection(filterFieldsMapped[col[0]]) : setColumnSelection([]);
|
|
|
|
|
setRowFields(row);
|
|
|
|
|
setColumnFields(col);
|
|
|
|
|
resetItemFilter();
|
|
|
|
|
|
|
|
|
|
setPivotDateColumns(pivotFields);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const resetFields = () => {
|
|
|
|
|
setRowFields([]);
|
|
|
|
|
setColumnFields([]);
|
|
|
|
|
setRowSelection([]);
|
|
|
|
|
setColumnSelection([]);
|
|
|
|
|
resetItemFilter();
|
|
|
|
|
|
|
|
|
|
setPivotDateColumns([[], []]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleRowsPick = (v) => {
|
|
|
|
|
setRowSelection(v);
|
|
|
|
|
const pickKeys = v.map((ele) => ele.key);
|
|
|
|
|
setRowFields(pickKeys);
|
|
|
|
|
// const leftFieldsMapped = leftFields.reduce((r, v) => ({ ...r, [v.key]: v }), {});
|
|
|
|
|
@ -180,6 +219,7 @@ export default observer((props) => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleColsPick = (val) => {
|
|
|
|
|
setColumnSelection(val);
|
|
|
|
|
const pickKeys = isEmpty(val) ? [] : Array.isArray(val) ? val.map((ele) => ele.key) : [val.key];
|
|
|
|
|
setColumnFields(pickKeys);
|
|
|
|
|
const afterLeft = Object.values(omit(filterFieldsMapped, rowFields));
|
|
|
|
|
@ -237,7 +277,7 @@ export default observer((props) => {
|
|
|
|
|
const dataMapped = groupBy(afterRowsFilter, (row) => row[columnsName]);
|
|
|
|
|
const pickData = isEmpty(v) ? afterRowsFilter : Array.isArray(v) ? v.reduce((r, v) => r.concat(dataMapped[v.value]), []) : dataMapped[v.value];
|
|
|
|
|
|
|
|
|
|
setDataSource(allFilterValues.length === 0 ? dataBeforePick : pickData.sort(sortBy(timesKey)));
|
|
|
|
|
setDataSource(allFilterValues.length === 0 ? dataBeforePick : pickData.sort(sortBy(curXfield)));
|
|
|
|
|
resetX();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -245,7 +285,7 @@ export default observer((props) => {
|
|
|
|
|
const [lineChartX, setLineChartX] = useState('day');
|
|
|
|
|
const [avgLine1, setAvgLine1] = useState(0);
|
|
|
|
|
const orderCountDataMapper = { data1: 'data1', data2: undefined };
|
|
|
|
|
const orderCountDataFieldMapper = { 'dateKey': timesKey, 'valueKey': valKey, 'seriesKey': 'rowLabel', _f: 'sum' };
|
|
|
|
|
const orderCountDataFieldMapper = { 'dateKey': curXfield, 'valueKey': defaultValKey, 'seriesKey': 'rowLabel', _f: 'sum' };
|
|
|
|
|
const resetX = () => {
|
|
|
|
|
setLineChartX('day');
|
|
|
|
|
setAvgLine1(0);
|
|
|
|
|
@ -283,15 +323,15 @@ export default observer((props) => {
|
|
|
|
|
pagination: false,
|
|
|
|
|
columns: [
|
|
|
|
|
...pivotDateColumns[0].map((ele) => ({ key: ele, title: filterFieldsMapped[ele].label, dataIndex: ele, width: '6em', fixed: 'left' })),
|
|
|
|
|
{ key: 'SumOrder', title: '订单数', dataIndex: 'SumOrder', width: '5em' },
|
|
|
|
|
...tableColumns,
|
|
|
|
|
...pivotDateColumns[1].map((ele) => ({
|
|
|
|
|
key: ele,
|
|
|
|
|
title: filterFieldsMapped[ele].label,
|
|
|
|
|
align: 'left', className: 'p-s1',
|
|
|
|
|
children: cloneDeep(pivotDateColumnsValues[1][0] || []).map((col) => ({
|
|
|
|
|
key: col,
|
|
|
|
|
title: `${col || '(空)'}: ${pivotTableColumnSummary[col]?.[valKey]}`,
|
|
|
|
|
dataIndex: ['columns', col, valKey],
|
|
|
|
|
title: `${col || '(空)'}: ${pivotTableColumnSummary[col]?.[defaultValKey]}`,
|
|
|
|
|
dataIndex: ['columns', col, defaultValKey || yFieldAlias],
|
|
|
|
|
width: '6em',
|
|
|
|
|
})),
|
|
|
|
|
})),
|
|
|
|
|
@ -307,6 +347,7 @@ export default observer((props) => {
|
|
|
|
|
initialValue: {
|
|
|
|
|
...formValues,
|
|
|
|
|
...orders_store.searchValues,
|
|
|
|
|
...searchInitial,
|
|
|
|
|
},
|
|
|
|
|
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'], // 'country'
|
|
|
|
|
fieldProps: {
|
|
|
|
|
@ -326,11 +367,19 @@ export default observer((props) => {
|
|
|
|
|
<Card
|
|
|
|
|
size={'small'}
|
|
|
|
|
title={'透视选项'}
|
|
|
|
|
// extra={quickOptions.map((ele, elei) => (
|
|
|
|
|
// <Button key={ele.label} type="link" onClick={() => quickOpt(elei)}>
|
|
|
|
|
// {ele.label}
|
|
|
|
|
// </Button>
|
|
|
|
|
// ))}
|
|
|
|
|
extra={
|
|
|
|
|
<Space>
|
|
|
|
|
<Text type={'secondary'}>预设:</Text>
|
|
|
|
|
{quickOptions.map((ele, elei) => (
|
|
|
|
|
<Button key={ele.label} onClick={() => quickOpt(elei)} type={'primary'} ghost size={'small'}>
|
|
|
|
|
{ele.label}
|
|
|
|
|
</Button>
|
|
|
|
|
))}
|
|
|
|
|
<Button key={'reset-quick'} onClick={resetFields} type={'primary'} ghost size={'small'}>
|
|
|
|
|
重置
|
|
|
|
|
</Button>
|
|
|
|
|
</Space>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<Row gutter={16}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
@ -355,8 +404,7 @@ export default observer((props) => {
|
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
|
placeholder={`选择`}
|
|
|
|
|
onChange={(v) => handleRowsPick(v)}
|
|
|
|
|
// value={sale_store.salesTrade.pickSales}
|
|
|
|
|
// value={rowSelection}
|
|
|
|
|
value={rowSelection}
|
|
|
|
|
maxTagCount={2}
|
|
|
|
|
maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
|
|
|
|
|
allowClear={true}
|
|
|
|
|
@ -373,7 +421,7 @@ export default observer((props) => {
|
|
|
|
|
? cloneDeep(pivotDateColumnsValues)[0]
|
|
|
|
|
// .slice(0, rowFields.length)
|
|
|
|
|
.map((_colArr, _colIndex) => (
|
|
|
|
|
<Row gutter={8} key={_colArr.join('_')}>
|
|
|
|
|
<Row gutter={8} key={filterFieldsMapped[pivotDateColumns[0][_colIndex]]?.key || _colIndex}>
|
|
|
|
|
<Col flex={'5em'} align={'end'}>
|
|
|
|
|
<Text strong>{filterFieldsMapped[pivotDateColumns[0][_colIndex]]?.label}: </Text>
|
|
|
|
|
</Col>
|
|
|
|
|
@ -416,8 +464,7 @@ export default observer((props) => {
|
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
|
placeholder={`选择`}
|
|
|
|
|
onChange={(v) => handleColsPick(v)}
|
|
|
|
|
// value={sale_store.salesTrade.pickSales}
|
|
|
|
|
// value={columnSelection}
|
|
|
|
|
value={columnSelection}
|
|
|
|
|
maxTagCount={2}
|
|
|
|
|
maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
|
|
|
|
|
allowClear={true}
|
|
|
|
|
@ -497,6 +544,9 @@ export default observer((props) => {
|
|
|
|
|
<h3>
|
|
|
|
|
透视汇总表: <span style={{ fontSize: 'smaller' }}>{dataFieldAlias[lineConfig.yField].label}</span>
|
|
|
|
|
</h3>
|
|
|
|
|
<Divider orientation="right">
|
|
|
|
|
<TableExportBtn label={'pivot'} {...{ columns: targetTableProps.columns, dataSource: pivotTableDataSource }} />
|
|
|
|
|
</Divider>
|
|
|
|
|
<Table {...targetTableProps} dataSource={pivotTableDataSource} components={{ body: { cell: TdCell } }} />
|
|
|
|
|
</Spin>
|
|
|
|
|
</section>
|
|
|
|
|
|
Lei OT
2 years ago