Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 业绩透视

Browse Source
feature/pivot
Lei OT 2 years ago
parent 8228e07209
commit 24a85d9b38
8 changed files with 109 additions and 46 deletions
Show Stats Download Patch File Download Diff File

2
src/App.jsx
Unescape Escape View File

@ -84,6 +84,7 @@ const App = () => {
{ key: 51, label: <NavLink to="/sale">业绩数据</NavLink> }, { key: 51, label: <NavLink to="/sale">业绩数据</NavLink> },
{ key: 52, label: <NavLink to="/sale_kpi">销售进度</NavLink> }, { key: 52, label: <NavLink to="/sale_kpi">销售进度</NavLink> },
{ key: 'distribution', label: <NavLink to="/distribution">统计分布</NavLink> }, { key: 'distribution', label: <NavLink to="/distribution">统计分布</NavLink> },
{ key: 'trade-pivot', label: <NavLink to="/trade/pivot">数据透视</NavLink> },
], ],
}, },
{ {
@ -218,6 +219,7 @@ const App = () => {
<Route path="/sale_sub/:type_sub" element={<Sale_sub />} /> <Route path="/sale_sub/:type_sub" element={<Sale_sub />} />
<Route path="/sale_kpi" element={<Sale_KPI />} /> <Route path="/sale_kpi" element={<Sale_KPI />} />
<Route path="/distribution" element={<Distribution />} /> <Route path="/distribution" element={<Distribution />} />
<Route path="/:page/pivot" element={<DataPivot />} />
</Route> </Route>
</Routes> </Routes>
</Content> </Content>

4
src/components/Data.jsx
Unescape Escape View File

@ -36,6 +36,7 @@ export const TableExportBtn = (props) => {
const [columnsMap, setColumnsMap] = useState([]); const [columnsMap, setColumnsMap] = useState([]);
useEffect(() => { useEffect(() => {
const flatCols = props.columns.flatMap((v, k) => (v.children ? v.children.map((vc) => ({ ...vc, title: `${v.title}-${vc.title}` })) : v)).filter(c => c.title); const flatCols = props.columns.flatMap((v, k) => (v.children ? v.children.map((vc) => ({ ...vc, title: `${v.title}-${vc.title}` })) : v)).filter(c => c.title);
// console.log('flatCols', flatCols);
setColumnsMap(flatCols); setColumnsMap(flatCols);
return () => {}; return () => {};
@ -50,11 +51,12 @@ export const TableExportBtn = (props) => {
const itemMapped = columnsMap.reduce((sv, kset) => { const itemMapped = columnsMap.reduce((sv, kset) => {
const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null; const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null;
const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined; const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined;
const v = { [kset.title]: render_val || data_val }; const v = { [kset.title]: data_val || render_val };
return { ...sv, ...v }; return { ...sv, ...v };
}, {}); }, {});
return itemMapped; return itemMapped;
}); });
// console.log('data', data);
const ws = utils.json_to_sheet(data, { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) }); const ws = utils.json_to_sheet(data, { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) });
const wb = utils.book_new(); const wb = utils.book_new();
utils.book_append_sheet(wb, ws, 'sheet'); utils.book_append_sheet(wb, ws, 'sheet');

19
src/components/DateGroupRadio/date.js
Unescape Escape View File

@ -1,5 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { groupBy } from '../../utils/commons'; import { fixTo2Decimals, groupBy } from '../../utils/commons';
export const datePartOptions = [ export const datePartOptions = [
{ label: '日', value: 'day' }, { label: '日', value: 'day' },
@ -83,7 +83,7 @@ export const parseDateType = (data, dateType = 'day', { dateKey, valueKey, serie
const dateRange = [min, max]; const dateRange = [min, max];
const summaryVal = everySeries[key].reduce((rows, row) => rows + row[valueKey], 0); const summaryVal = everySeries[key].reduce((rows, row) => rows + row[valueKey], 0);
const retValue = _f === 'sum' ? summaryVal : _calcF(summaryVal, everySeries[key].length); const retValue = _f === 'sum' ? summaryVal : _calcF(summaryVal, everySeries[key].length);
a.push({ groupKey: key, value: retValue, dateKey: dateRangeStr, dateRange, containDate, [seriesKey]: _seriesKey, [dateKey]: _dateKey }); a.push({ groupKey: key, value: fixTo2Decimals(retValue), dateKey: dateRangeStr, dateRange, containDate, [seriesKey]: _seriesKey, [dateKey]: _dateKey });
return a; return a;
}, []); }, []);
const avgDiv = [...new Set(dateArr)].length; const avgDiv = [...new Set(dateArr)].length;
@ -108,7 +108,7 @@ export const resultDataCb = (dataRaw, dateGroup, { data1, data2 }, fieldMapper,
const _data2 = data2 ? dataRaw[data2] : []; const _data2 = data2 ? dataRaw[data2] : [];
const parse1 = parseDateType(_data1, dateGroup, fieldMapper); const parse1 = parseDateType(_data1, dateGroup, fieldMapper);
const parseData1 = parse1.data.map((ele) => ({ const parseData1 = parse1.data.map((ele) => ({
[fieldMapper.dateKey]: ele[fieldMapper.dateKey], [fieldMapper.dateKey]: ele[fieldMapper.dateKey] === 'Invalid date' ? '空日期' : ele[fieldMapper.dateKey],
[fieldMapper.valueKey]: ele.value, [fieldMapper.valueKey]: ele.value,
[fieldMapper.seriesKey]: ele[fieldMapper.seriesKey], [fieldMapper.seriesKey]: ele[fieldMapper.seriesKey],
groups: _data1[0].groups, groups: _data1[0].groups,
@ -118,7 +118,7 @@ export const resultDataCb = (dataRaw, dateGroup, { data1, data2 }, fieldMapper,
})); }));
const parse2 = parseDateType(_data2, dateGroup, fieldMapper); const parse2 = parseDateType(_data2, dateGroup, fieldMapper);
const parseData2 = parse2.data.map((ele) => ({ const parseData2 = parse2.data.map((ele) => ({
[fieldMapper.dateKey]: ele[fieldMapper.dateKey], [fieldMapper.dateKey]: ele[fieldMapper.dateKey] === 'Invalid date' ? '空日期' : ele[fieldMapper.dateKey],
// [fieldMapper.dateKey]: ele.groupKey, // [fieldMapper.dateKey]: ele.groupKey,
[fieldMapper.valueKey]: ele.value, [fieldMapper.valueKey]: ele.value,
[fieldMapper.seriesKey]: ele[fieldMapper.seriesKey], [fieldMapper.seriesKey]: ele[fieldMapper.seriesKey],
@ -151,8 +151,15 @@ export const resultDataCb = (dataRaw, dateGroup, { data1, data2 }, fieldMapper,
[fieldMapper.dateKey]: keyMapped[ele[fieldMapper.dateKey]], [fieldMapper.dateKey]: keyMapped[ele[fieldMapper.dateKey]],
dateKey: ele.dateKey, dateKey: ele.dateKey,
})); }));
const retData = [].concat(parseData1, reindexData2 ).map(ele => ({...ele, [fieldMapper.dateKey]: data1KeyMappedStr[ele[fieldMapper.dateKey]] || data2KeyMappedStr[ele[fieldMapper.dateKey]]})); const retData = [].concat(parseData1, reindexData2 ).map(ele => ({...ele,
[fieldMapper.dateKey]: data1KeyMappedStr[ele[fieldMapper.dateKey]] === 'Invalid date' ? '空日期' : (data1KeyMappedStr[ele[fieldMapper.dateKey]] || data2KeyMappedStr[ele[fieldMapper.dateKey]])}));
const avg1 = parse1.avgVal; const avg1 = parse1.avgVal;
// console.log('callback', dateGroup, retData, avg1, parse2.avgVal, data1KeyMappedStr, data2KeyMappedStr); // console.log('callback','\ndateGroup', dateGroup,
// '\nretData', retData,
// '\navg1', avg1,
// '\nparse2', parse2.avgVal,
// '\ndata1KeyMappedStr', data1KeyMappedStr,
// '\ndata2KeyMappedStr', data2KeyMappedStr
// );
cb(dateGroup, retData, avg1, parse2.avgVal); cb(dateGroup, retData, avg1, parse2.avgVal);
}; };

32
src/libs/ht.js
Unescape Escape View File

@ -1,4 +1,4 @@
import { fixTo4Decimals, fixTo1Decimals, fixToInt, groupBy, sortBy, cloneDeep, pick, unique, flush } from '../utils/commons'; import { fixTo4Decimals, fixTo1Decimals, fixToInt, groupBy, sortBy, cloneDeep, pick, unique, flush, fixTo2Decimals } from '../utils/commons';
/** /**
* 事业部 * 事业部
@ -91,7 +91,7 @@ export const sites = [
export const sitesMappedByCode = sites.reduce((a, c) => ({ ...a, [String(c.code)]: { ...c, key: c.code, value: c.code } }), {}); export const sitesMappedByCode = sites.reduce((a, c) => ({ ...a, [String(c.code)]: { ...c, key: c.code, value: c.code } }), {});
export const dateTypes = [ export const dateTypes = [
{ key: 'applyDate', value: 'applyDate', label: '提交日期' }, { key: 'applyDate', value: 'applyDate', label: '提交日期' },
{ key: 'ConfirmDate', value: 'ConfirmDate', label: '确认日期' }, { key: 'confirmDate', value: 'confirmDate', label: '确认日期' },
{ key: 'startDate', value: 'startDate', label: '走团日期' }, { key: 'startDate', value: 'startDate', label: '走团日期' },
]; ];
@ -177,11 +177,12 @@ export const KPISubjects = [
* @returns * @returns
*/ */
export const pivotBy = (data, [rows, columns, date]) => { export const pivotBy = (data, [rows, columns, date]) => {
console.time('pivot----'); console.time('pivot3----');
console.log('pivotBy', [rows, columns, date]); console.log('pivotBy', [rows, columns, date]);
const groupbyKeys = flush([].concat(rows, columns, [date])); const groupbyKeys = flush([].concat(rows, columns, [date]));
const getKeys = (keys) => keys.map((keyField) => [...new Set(data.map((f) => f[keyField]))]); const getKeys = (keys) => keys.map((keyField) => [...new Set(data.map((f) => f[keyField]))]);
const [rowsKeys, columnsKeys, dateKeys] = [getKeys(rows), getKeys(columns), getKeys([date])]; const [rowsKeys, columnsKeys, dateKeys] = [getKeys(rows), getKeys(columns), [getKeys([date])[0].filter(s => s)]];
// console.log('rowsKeys', rowsKeys, 'columnsKeys', columnsKeys, 'dateKeys', dateKeys);
const calcTradeFields = (dataObj, keepKeys = [], seriesKey = '') => { const calcTradeFields = (dataObj, keepKeys = [], seriesKey = '') => {
const outerKeys = []; const outerKeys = [];
@ -209,9 +210,11 @@ export const pivotBy = (data, [rows, columns, date]) => {
SumOrder: _len, SumOrder: _len,
SumPersonNum: 0, SumPersonNum: 0,
ConfirmPersonNum: 0,
ConfirmOrder: 0, ConfirmOrder: 0,
transactions: 0, transactions: 0,
SumML: 0, SumML: 0,
SumML_txt: '',
quotePrice: 0, quotePrice: 0,
tourdays: 0, tourdays: 0,
applyDays: 0, applyDays: 0,
@ -220,9 +223,10 @@ export const pivotBy = (data, [rows, columns, date]) => {
const calculatedData = dataObj[colKey].reduce((r, v) => { const calculatedData = dataObj[colKey].reduce((r, v) => {
r.SumPersonNum += v.personNum; r.SumPersonNum += v.personNum;
r.ConfirmPersonNum += Number(v.orderState) === 1 ? v.personNum : 0;
r.ConfirmOrder += Number(v.orderState) === 1 ? 1 : 0; r.ConfirmOrder += Number(v.orderState) === 1 ? 1 : 0;
r.transactions += v.transactions; r.transactions += v.transactions;
r.SumML += v.ML; r.SumML += Number(v.orderState) === 1 ? v.ML : 0;
r.quotePrice += v.quotePrice; r.quotePrice += v.quotePrice;
r.tourdays += v.tourdays; r.tourdays += v.tourdays;
r.applyDays += v.applyDays; r.applyDays += v.applyDays;
@ -238,6 +242,13 @@ export const pivotBy = (data, [rows, columns, date]) => {
ConfirmRates: calculatedData.ConfirmOrder ? fixTo4Decimals(calculatedData.ConfirmOrder / calculatedData.SumOrder) : 0, ConfirmRates: calculatedData.ConfirmOrder ? fixTo4Decimals(calculatedData.ConfirmOrder / calculatedData.SumOrder) : 0,
OrderValue: calculatedData.SumOrder ? fixToInt(calculatedData.SumML / calculatedData.SumOrder) : 0, OrderValue: calculatedData.SumOrder ? fixToInt(calculatedData.SumML / calculatedData.SumOrder) : 0,
}; };
// Formatter
calculatedData.transactions = fixTo2Decimals(calculatedData.transactions);
calculatedData.SumML = fixTo2Decimals(calculatedData.SumML);
calculatedData.SumML_txt = dataFieldAlias.SumML.formatter(calculatedData.SumML);
calculatedData.quotePrice = fixTo2Decimals(calculatedData.quotePrice);
calculatedData.ConfirmRates_txt = dataFieldAlias.ConfirmRates.formatter(_rowCalc.ConfirmRates);
DataGroupByKeys[colKey] = { ...calculatedData, ..._rowCalc }; DataGroupByKeys[colKey] = { ...calculatedData, ..._rowCalc };
}); });
@ -259,16 +270,19 @@ export const pivotBy = (data, [rows, columns, date]) => {
.map((everyR) => { .map((everyR) => {
const _colKey = dataKey || 'dataKey'; const _colKey = dataKey || 'dataKey';
const allColumns = Object.values(everyR[_colKey]).reduce((r, c) => r.concat([c]), []); const allColumns = Object.values(everyR[_colKey]).reduce((r, c) => r.concat([c]), []);
const summaryCalc = ['ConfirmOrder', 'SumOrder', 'SumML', 'transactions', 'SumPersonNum', 'quotePrice', 'tourdays', 'applyDays', 'confirmDays'].reduce( const summaryCalc = ['ConfirmOrder', 'SumOrder', 'SumML', 'transactions', 'SumPersonNum', 'ConfirmPersonNum', 'quotePrice', 'tourdays', 'applyDays', 'confirmDays'].reduce(
(r, skey) => ({ ...r, [skey]: allColumns.reduce((a, c) => a + c[skey], 0) }), (r, skey) => ({ ...r, [skey]: allColumns.reduce((a, c) => Number(c.orderState) === 1 ? a : fixTo2Decimals(a + c[skey]), 0) }),
everyR everyR
); );
summaryCalc.tourdays = Math.ceil(summaryCalc.tourdays / allColumns.length); summaryCalc.tourdays = Math.ceil(summaryCalc.tourdays / allColumns.length);
summaryCalc.applyDays = Math.ceil(summaryCalc.applyDays / allColumns.length); summaryCalc.applyDays = Math.ceil(summaryCalc.applyDays / allColumns.length);
summaryCalc.confirmDays = Math.ceil(summaryCalc.confirmDays / allColumns.length); summaryCalc.confirmDays = Math.ceil(summaryCalc.confirmDays / allColumns.length);
summaryCalc.ConfirmRates = summaryCalc.ConfirmOrder ? fixTo4Decimals(summaryCalc.ConfirmOrder / summaryCalc.SumOrder) : 0; summaryCalc.ConfirmRates = summaryCalc.ConfirmOrder ? fixTo2Decimals(summaryCalc.ConfirmOrder / summaryCalc.SumOrder*100) : 0;
summaryCalc.OrderValue = summaryCalc.SumOrder ? fixToInt(summaryCalc.SumML / summaryCalc.SumOrder) : 0; summaryCalc.OrderValue = summaryCalc.SumOrder ? fixToInt(summaryCalc.SumML / summaryCalc.SumOrder) : 0;
summaryCalc.SumML_txt = dataFieldAlias.SumML.formatter(summaryCalc.SumML);
summaryCalc.ConfirmRates_txt = dataFieldAlias.ConfirmRates.formatter(summaryCalc.ConfirmRates);
return { ...everyR, ...summaryCalc }; return { ...everyR, ...summaryCalc };
}); });
@ -278,7 +292,7 @@ export const pivotBy = (data, [rows, columns, date]) => {
const columnsData = groupBy(data, (row) => columns.map((kk) => `${row[kk]}`).join('=@=')); const columnsData = groupBy(data, (row) => columns.map((kk) => `${row[kk]}`).join('=@='));
const summaryColumns = transposeData(columns, columnsData, ['rows', rows]); const summaryColumns = transposeData(columns, columnsData, ['rows', rows]);
console.timeEnd('pivot----'); console.timeEnd('pivot3----');
return { data: pivotResult, columnValues: [rowsKeys, columnsKeys, dateKeys], summaryRows, summaryColumns }; return { data: pivotResult, columnValues: [rowsKeys, columnsKeys, dateKeys], summaryRows, summaryColumns };
}; };

2
src/stores/DataPivot.js
Unescape Escape View File

@ -37,12 +37,14 @@ class Trade {
resetData = () => { resetData = () => {
this.detailData = { this.detailData = {
orders: { loading: false, dataSource: [], originData: [] }, orders: { loading: false, dataSource: [], originData: [] },
trade: { loading: false, dataSource: [], originData: [] },
}; };
}; };
searchValues = {}; searchValues = {};
detailData = { detailData = {
orders: { loading: false, dataSource: [], originData: [] }, orders: { loading: false, dataSource: [], originData: [] },
trade: { loading: false, dataSource: [], originData: [] },
}; };
} }

4
src/stores/DatePickerStore.js
Unescape Escape View File

@ -45,7 +45,7 @@ class DatePickerStore {
'DepartmentList': { 'key': 'ALL', 'label': '所有小组' }, 'DepartmentList': { 'key': 'ALL', 'label': '所有小组' },
'WebCode': { 'key': 'ALL', 'label': '所有来源' }, 'WebCode': { 'key': 'ALL', 'label': '所有来源' },
'IncludeTickets': { 'key': '1', 'label': '含门票' }, 'IncludeTickets': { 'key': '1', 'label': '含门票' },
'DateType': { 'key': 'ConfirmDate', 'label': '确认日期' }, 'DateType': { 'key': 'confirmDate', 'label': '确认日期' },
'year': this.start_date, 'year': this.start_date,
// 'months': [moment(), moment()], // 'months': [moment(), moment()],
'dates': [this.start_date, this.end_date], 'dates': [this.start_date, this.end_date],
@ -55,7 +55,7 @@ class DatePickerStore {
DepartmentList: 'ALL', DepartmentList: 'ALL',
WebCode: 'ALL', WebCode: 'ALL',
IncludeTickets: '1', IncludeTickets: '1',
DateType: 'ConfirmDate', DateType: 'confirmDate',
Date1: this.start_date.format('YYYY-MM-DD'), Date1: this.start_date.format('YYYY-MM-DD'),
Date2: this.end_date.format('YYYY-MM-DD 23:59:59'), Date2: this.end_date.format('YYYY-MM-DD 23:59:59'),
}; };

2
src/stores/SaleStore.js
Unescape Escape View File

@ -33,7 +33,7 @@ class SaleStore {
date_title = 'date_title'; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新 date_title = 'date_title'; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新
searchValues = { searchValues = {
DateType: { key: 'ConfirmDate', label: '确认日期'}, DateType: { key: 'confirmDate', label: '确认日期'},
WebCode: { key: 'All', label: '所有来源'}, WebCode: { key: 'All', label: '所有来源'},
IncludeTickets: { key: '1', label: '含门票'}, IncludeTickets: { key: '1', label: '含门票'},
DepartmentList: [groupsMappedByCode.GH], DepartmentList: [groupsMappedByCode.GH],

90
src/views/DataPivot.jsx
Unescape Escape View File

@ -18,18 +18,20 @@ const filterFields = [
{ key: 'country', label: '国籍' }, { key: 'country', label: '国籍' },
{ key: 'CLI_NO', label: '线路' }, { key: 'CLI_NO', label: '线路' },
// { key: 'destination', label: '目的地' }, // { key: 'destination', label: '目的地' },
{ key: 'COLI_LineClass', label: '页面类型' }, { key: 'COLI_LineClass', label: '页面渠道' },
{ key: 'guestGroupType', label: '客群类别' }, { key: 'guestGroupType', label: '客群类别' },
{ key: 'travelMotivation', label: '出行动机' }, { key: 'travelMotivation', label: '出行目的' },
// { key: 'operatorName', label: '顾问' }, // { key: 'operatorName', label: '顾问' },
// { key: 'WebCode', label: '来源站点' }, // { key: 'WebCode', label: '来源站点' },
// todo: 目的地, 目的地国家, 页面类型LineClass[PPC, NL...], 线路line, // todo: 目的地, 目的地国家,
]; ];
const filterFieldsMapped = filterFields.reduce((r, v) => ({ ...r, [v.key]: v }), {}); const filterFieldsMapped = filterFields.reduce((r, v) => ({ ...r, [v.key]: v }), {});
/** 预设的选项, 只有行 */
const quickOptions = [ const quickOptions = [
// { label: '国籍×产品', fields: [['country'], ['productType']] }, // { label: '国籍×产品', fields: [['country'], ['productType']] },
{ label: '[ 产品×客群 ]×[ ]', fields: [['productType', 'guestGroupType'], []] }, { label: '[ 产品×客群 ]', fields: [['productType', 'guestGroupType'], []] },
{ label: '[ 国籍×客群 ]×[ ]', fields: [['country', 'guestGroupType'], []] }, { label: '[ 国籍×客群 ]', fields: [['country', 'guestGroupType'], []] },
// { label: '[ 国籍×客群 ]×[ ]', fields: [['country', 'guestGroupType'], []] }, // { label: '[ 国籍×客群 ]×[ ]', fields: [['country', 'guestGroupType'], []] },
]; ];
@ -40,12 +42,37 @@ const TdCell = (tdprops) => {
return <td {...restProps} />; 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) => { export default observer((props) => {
const { page } = useParams(); 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 { formValues, formValuesToSub } = searchFormStore;
const { originData } = DataPivotStore.detailData[page]; 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 [loading, setLoading] = useState(false);
const [rawData, setRawData] = useState(originData || []); const [rawData, setRawData] = useState(originData || []);
const [dataBeforePick, setDataBeforePick] = useState([]); const [dataBeforePick, setDataBeforePick] = useState([]);
@ -75,6 +102,14 @@ export default observer((props) => {
return () => {}; return () => {};
}, [dataSource]); }, [dataSource]);
useEffect(() => {
setCurXfield(formValuesToSub.DateType);
setLineConfig({...lineConfig, xField: formValuesToSub.DateType});
return () => {};
}, [formValues]);
const detailRefresh = async (obj) => { const detailRefresh = async (obj) => {
setLoading(true); setLoading(true);
DataPivotStore.getDetailData({ DataPivotStore.getDetailData({
@ -88,24 +123,22 @@ export default observer((props) => {
}); });
}; };
const valKey = 'SumOrder';
const timesKey = 'applyDate';
/** /**
* 走势的数据 * 走势的数据
* 汇总 * 汇总
*/ */
const calcDataByDate = (_rawData) => { const calcDataByDate = (_rawData) => {
// console.log(';;;;;', pivotDateColumns); // 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); // 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); 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}), {}); const colDataMapped = isEmpty(pivotDateColumns[1]) ? sortColData[0] : sortColData.reduce((r, v) => ({...r, [v[pivotDateColumns[1][0]]]: v}), {});
setPivotTableColumnSummary(colDataMapped); setPivotTableColumnSummary(colDataMapped);
// 行列的选项值 // 行列的选项值
@ -118,8 +151,8 @@ export default observer((props) => {
const line_config = { const line_config = {
// data: dataSource, // data: dataSource,
padding: 'auto', padding: 'auto',
xField: timesKey, xField: curXfield,
yField: valKey, yField: defaultValKey,
seriesField: 'rowLabel', seriesField: 'rowLabel',
// xAxis: { // xAxis: {
// type: 'timeCat', // type: 'timeCat',
@ -128,6 +161,9 @@ export default observer((props) => {
min: 0, min: 0,
maxTickInterval: 5, maxTickInterval: 5,
}, },
meta: {
...cloneDeep(dataFieldAlias),
},
// smooth: true, // smooth: true,
label: {}, // 显示标签 label: {}, // 显示标签
legend: { legend: {
@ -138,32 +174,31 @@ export default observer((props) => {
itemMarginBottom: 12, // 垂直间距 itemMarginBottom: 12, // 垂直间距
}, },
}; };
const [lineConfig, setLineConfig] = useState(cloneDeep(line_config)); const [lineConfig, setLineConfig] = useState(cloneDeep(line_config));
// 透视配置：行列选项 // 透视配置：行列选项
// const [leftFields, setLeftFields] = useState(filterFields); // const [leftFields, setLeftFields] = useState(filterFields);
const [rightFields, setRightFields] = useState(filterFields); // select 的option const [rightFields, setRightFields] = useState(filterFields);
const [rowFields, setRowFields] = useState([]); const [rowFields, setRowFields] = useState([]);
const [columnFields, setColumnFields] = useState([]); const [columnFields, setColumnFields] = useState([]);
// 预设的选项
const [rowSelection, setRowSelection] = useState(); const [rowSelection, setRowSelection] = useState();
const [columnSelection, setColumnSelection] = useState(); const [columnSelection, setColumnSelection] = useState();
// 预设的选项
const quickOpt = (i) => { const quickOpt = (i) => {
const { fields: pivotFields } = quickOptions[i]; const { fields: pivotFields } = quickOptions[i];
const [row, col] = pivotFields; const [row, col] = pivotFields;
setRowSelection(Object.values(pick(filterFieldsMapped, row))); setRowSelection(Object.values(pick(filterFieldsMapped, row)));
!isEmpty(col) ? setColumnSelection(filterFieldsMapped[col[0]]) : setColumnSelection([]); !isEmpty(col) ? setColumnSelection(filterFieldsMapped[col[0]]) : setColumnSelection([]);
setRowFields(row); setRowFields(row);
setColumnFields(col);
resetItemFilter(); resetItemFilter();
setPivotDateColumns(pivotFields); setPivotDateColumns(pivotFields);
}; };
const resetFields = () => { const resetFields = () => {
// setRowFields([]); setRowFields([]);
// setColumnFields([]); setColumnFields([]);
setRowSelection([]); setRowSelection([]);
setColumnSelection([]); setColumnSelection([]);
resetItemFilter(); resetItemFilter();
@ -242,7 +277,7 @@ export default observer((props) => {
const dataMapped = groupBy(afterRowsFilter, (row) => row[columnsName]); 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]; 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(); resetX();
}; };
@ -250,7 +285,7 @@ export default observer((props) => {
const [lineChartX, setLineChartX] = useState('day'); const [lineChartX, setLineChartX] = useState('day');
const [avgLine1, setAvgLine1] = useState(0); const [avgLine1, setAvgLine1] = useState(0);
const orderCountDataMapper = { data1: 'data1', data2: undefined }; 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 = () => { const resetX = () => {
setLineChartX('day'); setLineChartX('day');
setAvgLine1(0); setAvgLine1(0);
@ -288,15 +323,15 @@ export default observer((props) => {
pagination: false, pagination: false,
columns: [ columns: [
...pivotDateColumns[0].map((ele) => ({ key: ele, title: filterFieldsMapped[ele].label, dataIndex: ele, width: '6em', fixed: 'left' })), ...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) => ({ ...pivotDateColumns[1].map((ele) => ({
key: ele, key: ele,
title: filterFieldsMapped[ele].label, title: filterFieldsMapped[ele].label,
align: 'left', className: 'p-s1', align: 'left', className: 'p-s1',
children: cloneDeep(pivotDateColumnsValues[1][0] || []).map((col) => ({ children: cloneDeep(pivotDateColumnsValues[1][0] || []).map((col) => ({
key: col, key: col,
title: `${col || '(空)'}: ${pivotTableColumnSummary[col]?.[valKey]}`, title: `${col || '(空)'}: ${pivotTableColumnSummary[col]?.[defaultValKey]}`,
dataIndex: ['columns', col, valKey], dataIndex: ['columns', col, defaultValKey || yFieldAlias],
width: '6em', width: '6em',
})), })),
})), })),
@ -312,6 +347,7 @@ export default observer((props) => {
initialValue: { initialValue: {
...formValues, ...formValues,
...orders_store.searchValues, ...orders_store.searchValues,
...searchInitial,
}, },
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'], // 'country' shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'], // 'country'
fieldProps: { fieldProps: {
@ -385,7 +421,7 @@ export default observer((props) => {
? cloneDeep(pivotDateColumnsValues)[0] ? cloneDeep(pivotDateColumnsValues)[0]
// .slice(0, rowFields.length) // .slice(0, rowFields.length)
.map((_colArr, _colIndex) => ( .map((_colArr, _colIndex) => (
<Row gutter={8} key={_colArr.join('_')}> <Row gutter={8} key={filterFieldsMapped[pivotDateColumns[0][_colIndex]]?.key || _colIndex}>
<Col flex={'5em'} align={'end'}> <Col flex={'5em'} align={'end'}>
<Text strong>{filterFieldsMapped[pivotDateColumns[0][_colIndex]]?.label}: </Text> <Text strong>{filterFieldsMapped[pivotDateColumns[0][_colIndex]]?.label}: </Text>
</Col> </Col>

Write Preview
Loading…
Cancel
Save