diff --git a/src/App.jsx b/src/App.jsx index f76d996..08d1f63 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -84,6 +84,7 @@ const App = () => { { key: 51, label: 业绩数据 }, { key: 52, label: 销售进度 }, { key: 'distribution', label: 统计分布 }, + { key: 'trade-pivot', label: 数据透视 }, ], }, { @@ -218,6 +219,7 @@ const App = () => { } /> } /> } /> + } /> diff --git a/src/components/Data.jsx b/src/components/Data.jsx index 6aa12bd..ed5e596 100644 --- a/src/components/Data.jsx +++ b/src/components/Data.jsx @@ -36,6 +36,7 @@ export const TableExportBtn = (props) => { const [columnsMap, setColumnsMap] = useState([]); 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); + // console.log('flatCols', flatCols); setColumnsMap(flatCols); return () => {}; @@ -50,11 +51,12 @@ export const TableExportBtn = (props) => { const itemMapped = columnsMap.reduce((sv, kset) => { 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 v = { [kset.title]: render_val || data_val }; + const v = { [kset.title]: data_val || render_val }; return { ...sv, ...v }; }, {}); return itemMapped; }); + // console.log('data', data); const ws = utils.json_to_sheet(data, { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) }); const wb = utils.book_new(); utils.book_append_sheet(wb, ws, 'sheet'); diff --git a/src/components/DateGroupRadio/date.js b/src/components/DateGroupRadio/date.js index b413cd2..9bd9d15 100644 --- a/src/components/DateGroupRadio/date.js +++ b/src/components/DateGroupRadio/date.js @@ -1,5 +1,5 @@ import moment from 'moment'; -import { groupBy } from '../../utils/commons'; +import { fixTo2Decimals, groupBy } from '../../utils/commons'; export const datePartOptions = [ { label: '日', value: 'day' }, @@ -83,7 +83,7 @@ export const parseDateType = (data, dateType = 'day', { dateKey, valueKey, serie const dateRange = [min, max]; const summaryVal = everySeries[key].reduce((rows, row) => rows + row[valueKey], 0); 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; }, []); const avgDiv = [...new Set(dateArr)].length; @@ -108,7 +108,7 @@ export const resultDataCb = (dataRaw, dateGroup, { data1, data2 }, fieldMapper, const _data2 = data2 ? dataRaw[data2] : []; const parse1 = parseDateType(_data1, dateGroup, fieldMapper); 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.seriesKey]: ele[fieldMapper.seriesKey], groups: _data1[0].groups, @@ -118,7 +118,7 @@ export const resultDataCb = (dataRaw, dateGroup, { data1, data2 }, fieldMapper, })); const parse2 = parseDateType(_data2, dateGroup, fieldMapper); 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.valueKey]: ele.value, [fieldMapper.seriesKey]: ele[fieldMapper.seriesKey], @@ -151,8 +151,15 @@ export const resultDataCb = (dataRaw, dateGroup, { data1, data2 }, fieldMapper, [fieldMapper.dateKey]: keyMapped[ele[fieldMapper.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; - // 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); }; diff --git a/src/libs/ht.js b/src/libs/ht.js index b79c1c8..5f64cfd 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 } 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 dateTypes = [ { key: 'applyDate', value: 'applyDate', label: '提交日期' }, - { key: 'ConfirmDate', value: 'ConfirmDate', label: '确认日期' }, + { key: 'confirmDate', value: 'confirmDate', label: '确认日期' }, { key: 'startDate', value: 'startDate', label: '走团日期' }, ]; @@ -177,11 +177,12 @@ export const KPISubjects = [ * @returns */ export const pivotBy = (data, [rows, columns, date]) => { - console.time('pivot----'); + console.time('pivot3----'); console.log('pivotBy', [rows, columns, date]); const groupbyKeys = flush([].concat(rows, columns, [date])); 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 outerKeys = []; @@ -209,9 +210,11 @@ export const pivotBy = (data, [rows, columns, date]) => { SumOrder: _len, SumPersonNum: 0, + ConfirmPersonNum: 0, ConfirmOrder: 0, transactions: 0, SumML: 0, + SumML_txt: '', quotePrice: 0, tourdays: 0, applyDays: 0, @@ -220,9 +223,10 @@ export const pivotBy = (data, [rows, columns, date]) => { const calculatedData = dataObj[colKey].reduce((r, v) => { r.SumPersonNum += v.personNum; + r.ConfirmPersonNum += Number(v.orderState) === 1 ? v.personNum : 0; r.ConfirmOrder += Number(v.orderState) === 1 ? 1 : 0; r.transactions += v.transactions; - r.SumML += v.ML; + r.SumML += Number(v.orderState) === 1 ? v.ML : 0; r.quotePrice += v.quotePrice; r.tourdays += v.tourdays; r.applyDays += v.applyDays; @@ -238,6 +242,13 @@ export const pivotBy = (data, [rows, columns, date]) => { ConfirmRates: calculatedData.ConfirmOrder ? fixTo4Decimals(calculatedData.ConfirmOrder / 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 }; }); @@ -259,16 +270,19 @@ export const pivotBy = (data, [rows, columns, date]) => { .map((everyR) => { const _colKey = dataKey || 'dataKey'; const allColumns = Object.values(everyR[_colKey]).reduce((r, c) => r.concat([c]), []); - const summaryCalc = ['ConfirmOrder', 'SumOrder', 'SumML', 'transactions', 'SumPersonNum', 'quotePrice', 'tourdays', 'applyDays', 'confirmDays'].reduce( - (r, skey) => ({ ...r, [skey]: allColumns.reduce((a, c) => a + c[skey], 0) }), + const summaryCalc = ['ConfirmOrder', 'SumOrder', 'SumML', 'transactions', 'SumPersonNum', 'ConfirmPersonNum', 'quotePrice', 'tourdays', 'applyDays', 'confirmDays'].reduce( + (r, skey) => ({ ...r, [skey]: allColumns.reduce((a, c) => Number(c.orderState) === 1 ? a : fixTo2Decimals(a + c[skey]), 0) }), everyR ); summaryCalc.tourdays = Math.ceil(summaryCalc.tourdays / allColumns.length); summaryCalc.applyDays = Math.ceil(summaryCalc.applyDays / 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.SumML_txt = dataFieldAlias.SumML.formatter(summaryCalc.SumML); + summaryCalc.ConfirmRates_txt = dataFieldAlias.ConfirmRates.formatter(summaryCalc.ConfirmRates); + 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 summaryColumns = transposeData(columns, columnsData, ['rows', rows]); - console.timeEnd('pivot----'); + console.timeEnd('pivot3----'); return { data: pivotResult, columnValues: [rowsKeys, columnsKeys, dateKeys], summaryRows, summaryColumns }; }; diff --git a/src/stores/DataPivot.js b/src/stores/DataPivot.js index ece3763..b75ee38 100644 --- a/src/stores/DataPivot.js +++ b/src/stores/DataPivot.js @@ -37,12 +37,14 @@ class Trade { resetData = () => { this.detailData = { orders: { loading: false, dataSource: [], originData: [] }, + trade: { loading: false, dataSource: [], originData: [] }, }; }; searchValues = {}; detailData = { orders: { loading: false, dataSource: [], originData: [] }, + trade: { loading: false, dataSource: [], originData: [] }, }; } diff --git a/src/stores/DatePickerStore.js b/src/stores/DatePickerStore.js index c49ac73..3f11ec1 100644 --- a/src/stores/DatePickerStore.js +++ b/src/stores/DatePickerStore.js @@ -45,7 +45,7 @@ class DatePickerStore { 'DepartmentList': { 'key': 'ALL', 'label': '所有小组' }, 'WebCode': { 'key': 'ALL', 'label': '所有来源' }, 'IncludeTickets': { 'key': '1', 'label': '含门票' }, - 'DateType': { 'key': 'ConfirmDate', 'label': '确认日期' }, + 'DateType': { 'key': 'confirmDate', 'label': '确认日期' }, 'year': this.start_date, // 'months': [moment(), moment()], 'dates': [this.start_date, this.end_date], @@ -55,7 +55,7 @@ class DatePickerStore { DepartmentList: 'ALL', WebCode: 'ALL', IncludeTickets: '1', - DateType: 'ConfirmDate', + DateType: 'confirmDate', Date1: this.start_date.format('YYYY-MM-DD'), Date2: this.end_date.format('YYYY-MM-DD 23:59:59'), }; diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js index bba182c..6b6a521 100644 --- a/src/stores/SaleStore.js +++ b/src/stores/SaleStore.js @@ -33,7 +33,7 @@ class SaleStore { date_title = 'date_title'; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新 searchValues = { - DateType: { key: 'ConfirmDate', label: '确认日期'}, + DateType: { key: 'confirmDate', label: '确认日期'}, WebCode: { key: 'All', label: '所有来源'}, IncludeTickets: { key: '1', label: '含门票'}, DepartmentList: [groupsMappedByCode.GH], diff --git a/src/views/DataPivot.jsx b/src/views/DataPivot.jsx index dde0831..3ef1fae 100644 --- a/src/views/DataPivot.jsx +++ b/src/views/DataPivot.jsx @@ -18,18 +18,20 @@ const filterFields = [ { key: 'country', label: '国籍' }, { key: 'CLI_NO', label: '线路' }, // { key: 'destination', label: '目的地' }, - { key: 'COLI_LineClass', label: '页面类型' }, + { key: 'COLI_LineClass', label: '页面渠道' }, { key: 'guestGroupType', label: '客群类别' }, - { key: 'travelMotivation', label: '出行动机' }, + { 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', 'guestGroupType'], []] }, + { label: '[ 产品×客群 ]', fields: [['productType', 'guestGroupType'], []] }, + { label: '[ 国籍×客群 ]', fields: [['country', 'guestGroupType'], []] }, // { label: '[ 国籍×客群 ]×[ ]', fields: [['country', 'guestGroupType'], []] }, ]; @@ -40,12 +42,37 @@ const TdCell = (tdprops) => { return ; }; +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([]); @@ -75,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({ @@ -88,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); // 行列的选项值 @@ -118,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', @@ -128,6 +161,9 @@ export default observer((props) => { min: 0, maxTickInterval: 5, }, + meta: { + ...cloneDeep(dataFieldAlias), + }, // smooth: true, label: {}, // 显示标签 legend: { @@ -138,32 +174,31 @@ export default observer((props) => { itemMarginBottom: 12, // 垂直间距 }, }; - const [lineConfig, setLineConfig] = useState(cloneDeep(line_config)); // 透视配置：行列选项 // const [leftFields, setLeftFields] = useState(filterFields); - const [rightFields, setRightFields] = useState(filterFields); // select 的option + 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))); !isEmpty(col) ? setColumnSelection(filterFieldsMapped[col[0]]) : setColumnSelection([]); setRowFields(row); + setColumnFields(col); resetItemFilter(); setPivotDateColumns(pivotFields); }; const resetFields = () => { - // setRowFields([]); - // setColumnFields([]); + setRowFields([]); + setColumnFields([]); setRowSelection([]); setColumnSelection([]); resetItemFilter(); @@ -242,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(); }; @@ -250,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); @@ -288,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', })), })), @@ -312,6 +347,7 @@ export default observer((props) => { initialValue: { ...formValues, ...orders_store.searchValues, + ...searchInitial, }, shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'], // 'country' fieldProps: { @@ -385,7 +421,7 @@ export default observer((props) => { ? cloneDeep(pivotDateColumnsValues)[0] // .slice(0, rowFields.length) .map((_colArr, _colIndex) => ( - + {filterFieldsMapped[pivotDateColumns[0][_colIndex]]?.label}: