feat: 总览: 目标客户.

src/stores/Trade.js

@@ -1,6 +1,6 @@
 import { makeAutoObservable, runInAction, toJS } from 'mobx';
 import * as req from '../utils/request';
-import { isEmpty, sortBy, pick } from '../utils/commons';
+import { isEmpty, sortBy, pick, merge, fixTo2Decimals } from '../utils/commons';
 import { dataFieldAlias } from './../libs/ht';
 
 class Trade {
@@ -144,6 +144,7 @@ class Trade {
         runInAction(() => {
           this.topData[orderType].loading = false;
           this.topData[orderType].dataSource = json.result1;
+          this.getTargetsRes(orderType);
         });
       }
     });
@@ -163,7 +164,26 @@ class Trade {
   /**
    * 从结果中取出目标客户的数据
    */
-  getTargetsRes = () => {};
+  getTargetsRes = (orderType) => {
+    if ( ! ['GuestGroupType', 'country'].includes(orderType)) {
+      return false;
+    }
+    const countryResMapped = (this.topData[orderType]?.dataSource || []).reduce((a, c) => ({ ...a, [String(c.groupsKey)]: c }), {});
+    const guestResMapped = (this.topData[orderType]?.dataSource || []).reduce((a, c) => ({ ...a, [String(c.groupsKey)]: c }), {});
+    const targetCountry = merge(this.targetData.targetCountry, pick(countryResMapped, ['3','5','7','18'])); // 美, 加, 英, 澳
+    const targetGuest = merge(this.targetData.targetGuest, pick(guestResMapped, ['146001', '146002'])); // 家庭, 夫妻
+    this.targetData.targetCountry = targetCountry;
+    this.targetData.targetGuest = targetGuest;
+    const totalArr = [].concat(Object.values(targetCountry), Object.values(targetGuest));
+    const targetTotal = ['ConfirmOrder', 'SumOrder', 'SumML'].reduce((r, skey) => ({...r, [skey]: totalArr.reduce((a, c) => a+(c[skey]), 0)}), {});
+    targetTotal.ConfirmRates = fixTo2Decimals((targetTotal.ConfirmOrder/targetTotal.SumOrder)*100);
+    targetTotal.groupsLabel = '总数';
+    targetTotal.groupsKey = 'targetTotal';
+    const targetData = { targetCountry, targetGuest, targetTotal };
+    const finalTargetData = merge(this.targetData, targetData);
+    this.targetData.targetTotal = targetTotal;
+    this.targetTableProps.dataSource = [].concat(Object.values(finalTargetData.targetGuest), Object.values(finalTargetData.targetCountry)); // [finalTargetData.targetTotal], // todo: 总数是重复的
+  };
 
   setStateSearch(body) {
     this.searchPayloadHome = body;
@@ -174,13 +194,21 @@ class Trade {
     this.timeLineKey = v;
   }
 
+  searchPayloadHome = {};
   summaryData = { loading: false, dataSource: [], kpi: {},  };
   timeData = { loading: false, dataSource: [] };
   BuData = { loading: false, dataSource: [] };
   sideData = { loading: false, dataSource: {}, monthData: [] };
   dataForSort = {};
   topData = {};
-  searchPayloadHome = {};
+  targetData = { targetTotal: {}, targetCountry: {}, targetGuest: {} };
+  targetTableProps = { loading: false, columns: [
+    {key: 'groupsLabel', title: '', dataIndex: 'groupsLabel', },
+    {key: 'SumOrder', title: '订单数', dataIndex: 'SumOrder'},
+    {key: 'ConfirmOrder', title: '成行数', dataIndex: 'ConfirmOrder'},
+    {key: 'ConfirmRates', title: '成行率', dataIndex: 'ConfirmRates'},
+    {key: 'SumML', title: '毛利', dataIndex: 'SumML', render: (v) => dataFieldAlias.SumML.formatter(v)},
+  ], dataSource: [] };
 }
 
 export default Trade;

src/views/Home.jsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Row, Col, Spin, Space, Radio } from 'antd';
+import { Row, Col, Spin, Space, Radio, Table } from 'antd';
 import { CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwoTone } from '@ant-design/icons';
 import { stores_Context } from '../config';
 import { useNavigate } from 'react-router-dom';
@@ -20,8 +20,8 @@ const topSeries = [
   { key: 'country', label: '国籍' },
   { key: 'dept', label: '小组' },
   { key: 'operator', label: '顾问' },
+  { key: 'GuestGroupType', label: '客群类别' },
   { key: 'destination', label: '目的地' },
-  // { key: 'GuestGroupType', label: '客群类别' },
 ];
 
 // const iconSets = [CheckCircleTwoTone, <MoneyCollectTwoTone />, <FlagTwoTone />, <ClockCircleTwoTone />, <DashboardTwoTone />,<SmileTwoTone />,];
@@ -30,7 +30,7 @@ const iconSets = [CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwo
 export default observer(() => {
   // const navigate = useNavigate();
   const { TradeStore, date_picker_store: searchFormStore } = useContext(stores_Context);
-  const { sideData, summaryData, BuData, topData, timeData, timeLineKey } = TradeStore;
+  const { sideData, summaryData, BuData, topData, timeData, timeLineKey, targetTableProps } = TradeStore;
   const { formValues } = searchFormStore;
 
   useEffect(() => {
@@ -224,6 +224,13 @@ export default observer(() => {
           </Row>
         </Spin>
       </section>
+      <section>
+        <h3>目标客户
+          <Spin spinning={topData?.GuestGroupType?.loading || false}>
+            <Table {...targetTableProps} pagination={false} />
+          </Spin>
+        </h3>
+      </section>
       <section>
         <Space>
           <h3>TOP</h3>