diff --git a/src/components/search/SearchForm.jsx b/src/components/search/SearchForm.jsx index cb93e7f..448b8ed 100644 --- a/src/components/search/SearchForm.jsx +++ b/src/components/search/SearchForm.jsx @@ -91,6 +91,11 @@ export default observer((props) => { transform: (value) => Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? (!isNaN(parseInt(value.key), 10) ? value.key : '') : '', default: '', }, + 'date': { + key: 'date', + transform: (value) => (value ? moment(value).format(SMALL_DATETIME_FORMAT) : undefined), + default: '', + }, 'applyDate': [ { key: 'Date1', @@ -171,7 +176,7 @@ export default observer((props) => { }, }; let dest = {}; - const { applyDate, applyDate2, year, yearDiff, dates, months, ...omittedValue } = values; + const { applyDate, applyDate2, year, yearDiff, dates, months, date, ...omittedValue } = values; dest = { ...omittedValue, ...objectMapper(values, destinationObject) }; for (const key in dest) { if (Object.prototype.hasOwnProperty.call(dest, key)) { @@ -408,6 +413,14 @@ function getFields(props) { , fieldProps?.dates?.col || midCol ), + item( + 'date', + 99, + + + , + fieldProps?.date?.col || midCol + ), item( 'operator', 99, diff --git a/src/stores/SalesCRMData.js b/src/stores/SalesCRMData.js index 0dfe535..ef4b5d3 100644 --- a/src/stores/SalesCRMData.js +++ b/src/stores/SalesCRMData.js @@ -1,6 +1,6 @@ import { makeAutoObservable, runInAction, toJS } from 'mobx'; import { fetchJSON } from '../utils/request'; -import { isEmpty, sortDescBy, objectMapper, groupBy, pick, unique } from '../utils/commons'; +import { isEmpty, sortDescBy, objectMapper, groupBy, pick, unique, cloneDeep } from '../utils/commons'; import { groupsMappedByCode, dataFieldAlias } from './../libs/ht'; import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from './../config'; import moment from 'moment'; @@ -44,17 +44,11 @@ class SalesCRMData { const retKey = param.groupDateType === '' ? (param.groupType === 'overview' ? 'dataSource' : 'details') : 'byDate'; this.results.loading = true; - const date90={ - Date1: moment().subtract(90, 'days').format(DATE_FORMAT), - Date2: moment().subtract(30, 'days').format(SMALL_DATETIME_FORMAT), - }; - const date180={ - Date1: moment().subtract(180, 'days').format(DATE_FORMAT), - Date2: moment().subtract(50, 'days').format(SMALL_DATETIME_FORMAT), - }; + const date90=this.searchValues.date90; + const date180=this.searchValues.date180; const [result90, result180] = await Promise.all([ - fetchResultsData({ ...this.searchValues, ...date90, ...param }), - fetchResultsData({ ...this.searchValues, ...date180, ...param }), + fetchResultsData({ ...this.searchValuesToSub, ...date90, ...param }), + fetchResultsData({ ...this.searchValuesToSub, ...date180, ...param }), ]); const _90O = groupBy(result90, 'groupsKey'); const _180O = groupBy(result180, 'groupsKey'); @@ -81,7 +75,7 @@ class SalesCRMData { const retKey = param.groupDateType === '' ? 'byOperator' : 'byDate'; this.results.loading = true; this.results[retKey] = []; - const res = await fetchResultsData({ ...this.searchValues, ...param }); + const res = await fetchResultsData({ ...this.searchValuesToSub, ...param }); runInAction(() => { this.results.loading = false; this.results[retKey] = retKey === 'byOperator' ? res.filter(ele => ele.SumML > 0).sort(sortDescBy('SumML')) : res; @@ -94,7 +88,7 @@ class SalesCRMData { const retKey = param.groupDateType === '' ? (param.groupType !== 'operator' ? 'dataSource' : 'details') : 'byDate'; this.process.loading = true; this.process[retKey] = []; - const res = await fetchProcessData({ ...this.searchValues, ...param }); + const res = await fetchProcessData({ ...this.searchValuesToSub, ...param }); runInAction(() => { this.process.loading = false; this.process[retKey] = [].concat(this.results[retKey], res); @@ -103,12 +97,21 @@ class SalesCRMData { } searchValues = { + date: moment(), DateType: { key: 'applyDate', label: '提交日期'}, WebCode: { key: 'All', label: '所有来源' }, // IncludeTickets: { key: '1', label: '含门票'}, - DepartmentList: [groupsMappedByCode.GH], // test: GH + DepartmentList: [groupsMappedByCode.GH], operator: '-1', opisn: '-1', + date90: { + Date1: moment().subtract(90, 'days').format(DATE_FORMAT), + Date2: moment().subtract(30, 'days').format(SMALL_DATETIME_FORMAT), + }, + date180: { + Date1: moment().subtract(180, 'days').format(DATE_FORMAT), + Date2: moment().subtract(50, 'days').format(SMALL_DATETIME_FORMAT), + } }; searchValuesToSub = {}; diff --git a/src/views/OPDashboard.jsx b/src/views/OPDashboard.jsx index 772e50a..68a5eb5 100644 --- a/src/views/OPDashboard.jsx +++ b/src/views/OPDashboard.jsx @@ -10,6 +10,19 @@ import { cloneDeep, fixTo2Decimals, sortBy, isEmpty, pick } from '../utils/commo import Column from '../components/Column'; import { groupsMappedByKey } from './../libs/ht'; +const COLOR_SETS = [ + "#FFFFFF", + // "#5B8FF9", + // "#FF6B3B", + "#9FB40F", + "#76523B", + "#DAD5B5", + "#E19348", + "#F383A2", +]; + +const transparentHex = '1A'; + const numberConvert10K = (number, scale = 10) => { return fixTo2Decimals((number/(1000*scale))); }; @@ -34,7 +47,7 @@ export default observer((props) => { const separateParam = []; if (includeCH) { const inCH = deptList.filter(k => ['1', '2', '7'].includes(k)).join(','); - separateParam.push({ DepartmentList: inCH, retLabel: 'CH'}); + separateParam.push({ DepartmentList: inCH, retLabel: 'CH'}); } if (includeAH) { separateParam.push({ DepartmentList: '28', retLabel: 'AH'}); @@ -103,14 +116,17 @@ export default observer((props) => { * 业绩数据列 * ! 成行率: CH个人成行率<12%, AH个人成行率<8% */ - const dataFields = (suffix) => [ + const dataFields = (suffix, colRootIndex) => [ { key: 'ConfirmRates' + suffix, title: '成行率', dataIndex: [suffix, 'ConfirmRates'], width: '5em', // CH个人成行率<12%, AH个人成行率<8%刷红 - render: (val, r) => ({ props: { style: { color: val < (retPropsMinRatesSet?.[r?.retProps || 'default'] || retPropsMinRatesSet.default) ? 'red' : 'green' } }, children: val ? `${val}%` : '' }), + render: (val, r) => ({ + props: { style: { color: val < (retPropsMinRatesSet?.[r?.retProps || 'default'] || retPropsMinRatesSet.default) ? 'red' : 'green', backgroundColor: COLOR_SETS[colRootIndex]+transparentHex } }, + children: val ? `${val}%` : '', + }), sorter: (a, b) => (a.groupType === 'overview' ? -1 : b.groupType === 'overview' ? 0 : a[suffix].ConfirmRates - b[suffix].ConfirmRates), }, { @@ -118,7 +134,10 @@ export default observer((props) => { title: '业绩/万', dataIndex: [suffix, 'SumML'], width: '5em', - render: (_, r) => numberConvert10K(_), + render: (_, r) => ({ + props: { style: { backgroundColor: COLOR_SETS[colRootIndex]+transparentHex } }, + children: numberConvert10K(_), + }), sorter: (a, b) => (a.groupType === 'overview' ? -1 : b.groupType === 'overview' ? 0 : a[suffix].SumML - b[suffix].SumML), }, { @@ -126,6 +145,10 @@ export default observer((props) => { title: '团数', dataIndex: [suffix, 'ConfirmOrder'], width: '5em', + render: (_, r) => ({ + props: { style: { backgroundColor: COLOR_SETS[colRootIndex]+transparentHex } }, + children: _, + }), sorter: (a, b) => (a.groupType === 'overview' ? -1 : b.groupType === 'overview' ? 0 : a[suffix].ConfirmOrder - b[suffix].ConfirmOrder), }, { @@ -133,6 +156,10 @@ export default observer((props) => { title: '订单数', dataIndex: [suffix, 'SumOrder'], width: '5em', + render: (_, r) => ({ + props: { style: { backgroundColor: COLOR_SETS[colRootIndex]+transparentHex } }, + children: _, + }), sorter: (a, b) => (a.groupType === 'overview' ? -1 : b.groupType === 'overview' ? 0 : a[suffix].SumOrder - b[suffix].SumOrder), }, { @@ -140,6 +167,10 @@ export default observer((props) => { title: '老客户团数', dataIndex: [suffix, 'ResumeOrder'], width: '5em', + render: (_, r) => ({ + props: { style: { backgroundColor: COLOR_SETS[colRootIndex]+transparentHex } }, + children: _, + }), sorter: (a, b) => (a.groupType === 'overview' ? -1 : b.groupType === 'overview' ? 0 : a[suffix].ResumeOrder - b[suffix].ResumeOrder), }, { @@ -147,7 +178,10 @@ export default observer((props) => { title: '老客户成行率', dataIndex: [suffix, 'ResumeRates'], width: '5em', - render: (val, r) => ({ children: val ? `${val}%` : '' }), + render: (val, r) => ({ + props: { style: { backgroundColor: COLOR_SETS[colRootIndex]+transparentHex } }, + children: val ? `${val}%` : '' + }), sorter: (a, b) => (a.groupType === 'overview' ? -1 : b.groupType === 'overview' ? 0 : a[suffix].ResumeRates - b[suffix].ResumeRates), }, ]; @@ -168,12 +202,12 @@ export default observer((props) => { { title: '前90 -30天', key: 'date', - children: dataFields('result90'), + children: dataFields('result90', 0), }, { title: '前180 -50天', key: 'department', - children: dataFields('result180'), + children: dataFields('result180', 1), }, ], rowClassName: (record, rowIndex) => { @@ -231,7 +265,7 @@ export default observer((props) => { ...formValues, ...SalesCRMDataStore.searchValues, }, - shows: ['DepartmentList', 'WebCode'], + shows: ['DepartmentList', 'WebCode', 'date'], fieldProps: { DepartmentList: { show_all: false, mode: 'multiple', col: 5 }, WebCode: { show_all: false, mode: 'multiple', col: 5 },