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

4 months ago · 539f57e16d
parent e5ff51ae63
commit 539f57e16d
3 changed files with 73 additions and 23 deletions
--- 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) {
      </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,
--- 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 = {};
--- 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 },