perf: CRM-统计: 结果指标: 增加日期选择; 修改样式

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) {
       </Form.Item>,
       fieldProps?.dates?.col || midCol
     ),
+    item(
+      'date',
+      99,
+      <Form.Item name={`date`} initialValue={at(props, 'initialValue.date')[0]}>
+        <DatePicker picker="date" placeholder="日期" />
+      </Form.Item>,
+      fieldProps?.date?.col || midCol
+    ),
     item(
       'operator',
       99,

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={
+    const date90=this.searchValues.date90;
-      Date1: moment().subtract(90, 'days').format(DATE_FORMAT),
+    const date180=this.searchValues.date180;
-      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 [result90, result180] = await Promise.all([
-      fetchResultsData({ ...this.searchValues, ...date90, ...param }),
+      fetchResultsData({ ...this.searchValuesToSub, ...date90, ...param }),
-      fetchResultsData({ ...this.searchValues, ...date180, ...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 = {};

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 },