perf: 销售进度: 表格优化

This reverts commit 16b08311fa.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "haina-dashboard",
-  "version": "2.11.0",
+  "version": "2.11.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "haina-dashboard",
-      "version": "2.11.0",
+      "version": "2.11.6",
       "dependencies": {
         "@ant-design/charts": "^1.4.2",
         "@ant-design/pro-components": "^2.6.16",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "haina-dashboard",
-  "version": "2.11.0",
+  "version": "2.11.6",
   "private": true,
   "dependencies": {
     "@ant-design/charts": "^1.4.2",

src/App.jsx

@@ -57,6 +57,7 @@ import OPProcess from './views/sales-crm/Process';
 import OPRisk from './views/sales-crm/Risk';
 import Cruise from './views/Cruise';
 import Hotel from './views/Hotel';
+import HostCaseCount from './views/HostCaseCount';
 
 const App = () => {
   const { Content, Footer, Sider, } = Layout;
@@ -127,7 +128,7 @@ const App = () => {
           key: 32,
           label: <NavLink to="/customer_care_regular">老客户</NavLink>,
         },
-        { key: 'customer_care_regular_sales', label: <NavLink to="/customer_care_regular_sales">销售-老客户</NavLink> },
+        { key: 'customer_care_regular_sales', label: <NavLink to="/customer_care_regular_sales">老客户-分析</NavLink> },
         {
           key: 33,
           label: <NavLink to="/customer_care_inchina">在华客户</NavLink>,
@@ -162,6 +163,7 @@ const App = () => {
         },
         { key: 'cruise', label: <NavLink to="/cruise">三峡游船</NavLink> },
         { key: 'hotel', label: <NavLink to="/hotel">酒店</NavLink> },
+        { key: 'hostcase', label: <NavLink to="/hostcase/count">东道主项目</NavLink> },
       ],
     },
     {
@@ -265,6 +267,7 @@ const App = () => {
                     <Route path="/destination/:destinationId/group/list" element={<DestinationGroupList />} />
                     <Route path="/cruise" element={<Cruise />} />
                     <Route path="/hotel" element={<Hotel />} />
+                    <Route path="/hostcase/count" element={<HostCaseCount />} />
                     </Route>
                   <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'financial']} />}>
                     <Route path="/credit_card_bill" element={<Credit_card_bill />} />

src/charts/Customer_care_regular.jsx

@@ -36,7 +36,7 @@ const Customer_care_regular = () => {
               regular_data.data_compare=[];
               if (obj.DateDiff1 && obj.DateDiff2){
                 regular_data.isCompareLine=true;
-                regular_data.showSum=false;
+                regular_data.showCompareSum=true;
                 await customer_store.regular_customer_order();
                 customer_store.regular_customer_order(false,true);
                 customer_store.regular_customer_order(true,false,true);
@@ -44,7 +44,7 @@ const Customer_care_regular = () => {
               }
               else{
                 regular_data.isCompareLine=false;
-                regular_data.showSum=true;
+                regular_data.showCompareSum=false;
                 customer_store.regular_customer_order();
                 customer_store.regular_customer_order(true);
               }
@@ -86,6 +86,12 @@ const Customer_care_regular = () => {
                   </>
                 ),
               },
+              {
+                title: '订单数占比',
+                dataIndex: 'OrderRate',
+                key: 'OrderRate',
+                render: (text) => typeof text === 'number'?<span>{parseFloat((text * 100).toFixed(2))}%</span>:text,
+              },
               {
                 title: '成行数',
                 dataIndex: 'SUCOrderNum',
@@ -102,6 +108,12 @@ const Customer_care_regular = () => {
                 dataIndex: 'ML',
                 key: 'ML',
               },
+              {
+                title: '毛利占比',
+                dataIndex: 'OrderMLRate',
+                key: 'OrderMLRate',
+                render: (text) => typeof text === 'number'?<span>{parseFloat((text * 100).toFixed(2))}%</span>:text,
+              },
               {
                 title: '人数（含成人+儿童）',
                 dataIndex: 'PersonNum',
@@ -116,7 +128,8 @@ const Customer_care_regular = () => {
 
         <Col span={24}>
           <LineWithAvg dataSource={regular_data.pivotData} loading={regular_data.detail_loading} xField={regular_data.pivotX} yField={regular_data.pivotY} 
-          seriesField='_ylabel' showSUM={regular_data.showSum} solidLineTime={regular_data.solidLineTime} solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/>
+          seriesField='_ylabel' showCompareSum={regular_data.showCompareSum} solidLineTime={regular_data.solidLineTime} solidLineCompareTime={regular_data.solidLineCompareTime}
+          solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/>
         </Col>
 
         <Col span={24}>

src/components/Data.jsx

@@ -30,21 +30,25 @@ export const VSTag = (props) => {
 
 /**
  * 导出表格数据存为xlsx
+ * @property label 文件名字
+ * @property columns 表格列
+ * @property dataSource 表格数据
+ * @property btnTxt 按钮文字
  */
-export const TableExportBtn = (props) => {
+export const TableExportBtn = ({label, columns, dataSource, btnTxt, ...props}) => {
-  const output_name = `${props.label}`;
+  const output_name = `${label}`;
   const [columnsMap, setColumnsMap] = useState([]);
   const [summaryRow, setSummaryRow] = useState({});
   useEffect(() => {
-    const r1 = props.columns.reduce((r, v) => ({
+    const r1 = columns.reduce((r, v) => ({
       ...r,
       ...(v.children ? v.children.reduce((rc, vc, ci) => ({
         ...rc,
-        ...(vc?.titleX ? {[`${v?.titleX || v.title},${vc.titleX}`]: vc.titleX } : {[(v?.titleX || v.title) + (ci || '')]: `${vc?.titleX || vc?.title || ''}`}),
+        ...(vc?.titleX ? {[`${v?.titleX || v.title},${vc.titleX}`]: vc.titleX } : {[(v?.titleX || v.title) + (vc.key || ci || '')]: `${vc?.titleX || vc?.title || ''}`}),
       }), {}) : {})
     }), {});
-    const flatCols = props.columns.flatMap((v, k) =>
+    const flatCols = columns.flatMap((v, k) =>
-      v.children ? v.children.map((vc, ci) => ({ ...vc, title: `${v?.titleX || v.title}` + (vc?.titleX ? `,${vc.titleX}` : (ci || '')) })) : {...v, title: `${v?.titleX || v.title}`}
+      v.children ? v.children.map((vc, ci) => ({ ...vc, title: `${v?.titleX || v.title}` + (vc?.titleX ? `,${vc.titleX}` : (vc.key || ci || '')) })) : {...v, title: `${v?.titleX || v.title}`}
     );
       // .filter((c) => c.dataIndex)
       // !['string', 'number'].includes(typeof vc.title) ? `${v?.titleX || v.title}` : `${v?.titleX || v.title}-${vc.title || ''}`
@@ -56,20 +60,21 @@ export const TableExportBtn = (props) => {
     // console.log('summaryRow', r1);
 
     return () => {};
-  }, [props.columns]);
+  }, [columns]);
 
   const onExport = () => {
-    if (isEmpty(props.dataSource)) {
+    if (isEmpty(dataSource)) {
       message.warning('无结果.');
       return false;
     }
-    const data = props.dataSource.map((item) => {
+    const data = dataSource.map((item) => {
       const itemMapped = columnsMap.reduce((sv, kset) => {
+        const export_val = typeof kset?.dataExport === 'function' ? kset.dataExport('', item) : null;
         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 x_val = item[`${kset.dataIndex}_X`];
         // const _title = kset.title.replace('-[object Object]', '');
-        const v = { [kset.title]: x_val || data_val || render_val };
+        const v = { [kset.title]: x_val || export_val || data_val || render_val };
         return { ...sv, ...v };
       }, {});
       return itemMapped;
@@ -88,7 +93,7 @@ export const TableExportBtn = (props) => {
       disabled={false}
       onClick={onExport}
     >
-      {props.btnTxt || '导出excel'}
+      {btnTxt || '导出excel'}
     </Button>
   );
 };

src/components/LineWithAvg.jsx

@@ -7,7 +7,8 @@ import DateGroupRadio from '../components/DateGroupRadio';
 import { cloneDeep, groupBy, sortBy } from '../utils/commons';
 
 export default observer((props) => {
-  const { dataSource: rawData, showAVG, showSUM, loading, solidLineTime, solidLineDash, isCompareLine, ...config } = props;
+  const { dataSource: rawData, showAVG, showCompareSum, loading, solidLineTime, 
+    solidLineDash, isCompareLine,solidLineCompareTime, ...config } = props;
   const { xField, yField, yFieldAlias, seriesField } = config;
 
   const [dataBeforeXChange, setDataBeforeXChange] = useState([]);
@@ -25,14 +26,15 @@ export default observer((props) => {
     // xAxis: {
     //   type: 'timeCat',
     // },
+    color: isCompareLine?['#17f485', '#1890ff','#17f485', '#1890ff',"#181414","#181414"]:undefined,
     point: {
       size: 4,
       shape: "cicle",
     },
     lineStyle: (datum) => {
         return {
-          stroke: isCompareLine?datum._ylabel.includes(solidLineTime) ? 'red' : 'blue':undefined, // 设置颜色
+          stroke: isCompareLine?datum._ylabel.includes("总计")?"#181414":datum._ylabel.includes(solidLineDash) ? '#1890ff':'#17f485' : undefined, // 设置颜色
-          lineDash: isCompareLine?datum._ylabel.includes(solidLineDash) ? [4, 4] : undefined:undefined, // 设置虚线
+          lineDash: isCompareLine?datum._ylabel.includes(solidLineTime) ? undefined:[4, 4] : undefined, // 设置虚线
         };
     },
     yAxis: {
@@ -101,7 +103,35 @@ export default observer((props) => {
     // ];
     // setLineConfig({ ...lineConfig, yField, xField, annotations: avgLine });
     setLineConfig({ ...lineConfig, yField, xField,});
-    if (showSUM) {
+    if (showCompareSum) {
+      const _sumLine = Object.keys(byDays).reduce((r, _d) => {
+        const summaryVal = byDays[_d].reduce((rows, row) => 
+          {
+            if (row[seriesField].includes(solidLineTime)){
+              return rows + row[yField];
+            }
+            else{
+              return rows;
+            }
+          }
+        , 0);
+        const summaryCompareVal = byDays[_d].reduce((rows, row) => 
+          {
+            if (row[seriesField].includes(solidLineCompareTime)){
+              return rows + row[yField];
+            }
+            else{
+              return rows;
+            }
+          }
+        , 0);
+        r.push({ ...byDays[_d][0], [yField]: summaryVal, [seriesField]: solidLineTime+'总计' });
+        r.push({ ...byDays[_d][0], [yField]: summaryCompareVal, [seriesField]: solidLineCompareTime+'总计' });
+        return r;
+      }, []);
+      setSumSeries(_sumLine);
+    }
+    else{
       const _sumLine = Object.keys(byDays).reduce((r, _d) => {
         const summaryVal = byDays[_d].reduce((rows, row) => rows + row[yField], 0);
         r.push({ ...byDays[_d][0], [yField]: summaryVal, [seriesField]: '总计' });
@@ -110,9 +140,6 @@ export default observer((props) => {
       // console.log(_sumLine.map((ele) => ele[yField]));
       setSumSeries(_sumLine);
     }
-    else{
-      setSumSeries([]);
-    }
   };
 
   const onChangeXDateFieldGroup = (value, data, avg1) => {
@@ -125,8 +152,35 @@ export default observer((props) => {
     }, {});
     // console.log(groupByDate);
     const _data = Object.keys(groupByDate).reduce((r, _d) => {
-      const summaryVal = groupByDate[_d].reduce((rows, row) => rows + row[yField], 0);
+      if (showCompareSum) {
-      _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: '总计' });
+        const summaryVal = groupByDate[_d].reduce((rows, row) => 
+          {
+            if (row[seriesField].includes(solidLineTime)){
+              return rows + row[yField];
+            }
+            else{
+              return rows;
+            }
+          }
+        , 0);
+        const summaryCompareVal = groupByDate[_d].reduce((rows, row) => 
+          {
+            if (row[seriesField].includes(solidLineCompareTime)){
+              return rows + row[yField];
+            }
+            else{
+              return rows;
+            }
+          }
+        , 0);
+        _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: solidLineTime+'总计' });
+        _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryCompareVal, [seriesField]: solidLineCompareTime+'总计' });
+      }
+      else{
+        const summaryVal = groupByDate[_d].reduce((rows, row) => rows + row[yField], 0);
+        _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: '总计' });
+      }
+      
 
       const xAxisGroup = groupByDate[_d].reduce((a, v) => {
         (a[v[seriesField]] || (a[v[seriesField]] = [])).push(v);
@@ -145,23 +199,19 @@ export default observer((props) => {
     // console.log('date source=====', _data);
     setLineChartX(value);
     setDataSource(_data);
-    if (showSUM) {
+    setSumSeries(_sumLine);
-      setSumSeries(_sumLine);
-    }
-    else{
-      setSumSeries([]);
-    }
 
     // setAvgLine1(avg1);
-    const avg1Int = Math.round(avg1);
+    // const avg1Int = Math.round(avg1);
-    const mergedConfig = { ...lineConfig,
+    // const mergedConfig = { ...lineConfig,
-      annotations: [
+    //   annotations: [
-        { type: 'text', position: ['start', avg1Int], content: avg1Int, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } },
+    //     { type: 'text', position: ['start', avg1Int], content: avg1Int, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } },
-        { type: 'line', start: [-10, avg1Int], end: ['max', avg1Int], style: { stroke: '#F4664A', lineDash: [2, 2] } },
+    //     { type: 'line', start: [-10, avg1Int], end: ['max', avg1Int], style: { stroke: '#F4664A', lineDash: [2, 2] } },
-      ],
+    //   ],
-    };
+    // };
     // console.log(mergedConfig);
-    setLineConfig(mergedConfig);
+    // setLineConfig(mergedConfig);
+    setLineConfig(cloneDeep(line_config));
   };
   return (
     <section>

src/components/search/SearchForm.jsx

@@ -186,6 +186,11 @@ export default observer((props) => {
         transform: (value) => value?.value || '',
         default: '',
       },
+      'cruiseBookType': {
+        key: 'cruiseBookType',
+        transform: (value) => value?.value || '',
+        default: '',
+      },
       'hotelBookType': {
         key: 'hotelBookType',
         transform: (value) => value?.value || '',
@@ -307,7 +312,7 @@ function getFields(props) {
       'agency',
       99,
       <Form.Item name={'agency'}>
-        <SearchInput autoGet url="/service-web/QueryData/GetVEIName" map={{ 'CAV_VEI_SN': 'key', 'VEI2_CompanyBN': 'label' }} resultkey={'result1'} placeholder="所有地接社" />
+        <SearchInput autoGet url="/service-web/QueryData/GetVEIName" map={{ 'CAV_VEI_SN': 'key', 'VEI2_CompanyBN': 'label' }} resultkey={'result1'} placeholder="所有地接社" {...fieldProps.agency} />
       </Form.Item>
     ),
     item(
@@ -544,10 +549,10 @@ function getFields(props) {
     item(
       'cruiseBookType',
       99,
-      <Form.Item name={`cruiseBookType`} initialValue={at(props, 'initialValue.cruiseBookType')[0] || (fieldProps?.cruiseBookType?.show_all ? { key: 'all', label: '预定类型' } : undefined)}>
+      <Form.Item name={`cruiseBookType`} initialValue={at(props, 'initialValue.cruiseBookType')[0] || (fieldProps?.cruiseBookType?.show_all ? { key: '-1', label: '预定类型' } : undefined)}>
         <Select style={{ width: '100%' }} placeholder="预定类型" labelInValue allowClear>
           {fieldProps?.cruiseBookType?.show_all && (
-            <Option key="all" value="" disabled>
+            <Option key="-1" value="-1" disabled>
               预定类型
             </Option>
           )}
@@ -555,7 +560,7 @@ function getFields(props) {
             单订三峡
           </Option>
           <Option key="0" value="0">
-            其他
+            含行程
           </Option>
         </Select>
       </Form.Item>,

src/libs/ht.js

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { fixTo4Decimals, fixTo1Decimals, fixToInt, groupBy, sortBy, cloneDeep, pick, unique, flush, fixTo2Decimals, isEmpty } from '../utils/commons';
 
 /**
@@ -197,6 +198,17 @@ export const HotelStars = [
   { key: '13', value: '13', label: '豪华五星' },
 ];
 
+export const CruiseAgency = [
+  { key: '14193', value: '14193', label: '长江海外游轮旅游有限公司' },
+  { key: '1067', value: '1067', label: '湖北东方皇家游船公司(待删除)' },
+  { key: '70', value: '70', label: '湖北皇家长江旅游船有限公司' },
+  { key: '159', value: '159', label: '文嘉船务' },
+  { key: '77', value: '77', label: '武汉扬子江' },
+  { key: '1337', value: '1337', label: '重庆薇灿' },
+  { key: '4378', value: '4378', label: '重庆新世纪国旅' },
+  { key: '-1', value: '-1', label: '自订' },
+];
+
 /**
  * 计算指标值的分段区间
  * @param {number} value
@@ -283,10 +295,14 @@ export const pivotBy = (_data, [rows, columns, date]) => {
   // if (groupbyKeys.includes('PPPriceRange')) {
   // }
   // 补充计算的字段
-  const RTXF_WB_values = cloneDeep(_data).map(ele => ele.RTXF_WB);
+  const RTXF_WB_values = cloneDeep(_data).map(ele => ele.RTXF_WB); // 人天消费
   // const max_RTXF_WB = Math.max(...RTXF_WB_values);
   const RTXF_WB_range = calculateRangeScale(RTXF_WB_values);
   let data = cloneDeep(_data).map(ele => {
+    ele.startYearMonth = ele.startDate ? moment(ele.startDate).format('YYYY-MM') : '';
+    ele.startMonth = ele.startDate ? moment(ele.startDate).format('MM') : '';
+    ele.applyYearMonth = ele.applyDate ? moment(ele.applyDate).format('YYYY-MM') : '';
+    ele.applyMonth = ele.applyDate ? moment(ele.applyDate).format('MM') : '';
     ele.PPPrice = (Number(ele.orderState) === 1 && ele.tourdays && ele.personNum)  ? fixToInt(ele.quotePrice / ele.tourdays / ele.personNum) : -1; // 报价: 人均天
     ele.PPPriceRange = calcPPPriceRange(ele.PPPrice);
     ele.RTXF_WB_range = findRange(ele.RTXF_WB, RTXF_WB_range);
@@ -305,7 +321,7 @@ export const pivotBy = (_data, [rows, columns, date]) => {
   });
   // 数组的字段值, 拆分处理
   if (groupbyKeys.includes('destinationCountry_AsJOSN')) {
-    data = _data.reduce((r, v, i) => {
+    data = data.reduce((r, v, i) => {
       const vjson = isEmpty(v.destinationCountry_AsJOSN) ? [] : v.destinationCountry_AsJOSN;
       const xv = (vjson).reduce((rv, cv, vi) => {
         rv.push({...v, destinationCountry_AsJOSN: cv, key: vi === 0 ? v.key : `${v.key}@${cv}`});
@@ -317,7 +333,7 @@ export const pivotBy = (_data, [rows, columns, date]) => {
     }, []);
   }
   if (groupbyKeys.includes('destinations_AsJOSN')) {
-    data = _data.reduce((r, v, i) => {
+    data = data.reduce((r, v, i) => {
       const vjson = isEmpty(v.destinations_AsJOSN) ? [] : v.destinations_AsJOSN;
       const xv = (vjson).reduce((rv, cv, vi) => {
         rv.push({...v, destinations_AsJOSN: cv, key: vi === 0 ? v.key : `${v.key}@${cv}`});

src/stores/CustomerServices.js

@@ -161,7 +161,7 @@ class CustomerServices {
                     ]
                   }
                 ];
-                
+
               }
               else{
                 const splitTotalList1 = groupBy(json.result1, row => row.EOI_ObjSN === -1 ? '0' : '1');
@@ -437,6 +437,95 @@ class CustomerServices {
         });
     }
 
+    fetchDistGroupInfoByCountry(destinationId) {
+      this.nationality_count_data.loading = true;
+      const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetDistGroupInfoALLByCountry')
+        .append('city', destinationId)
+        .append('DateType', this.dateType)
+        .append('Date1', this.startDateString)
+        .append('Date2', this.endDateString)
+        .append('OldDate1', this.startDateString)
+        .append('OldDate2', this.endDateString)
+        .append('DepList', this.selectedTeam)
+        .append('Country', this.selectedCountry)
+        .append('OrderStatus', this.selectedOrderStatus)
+        .build();
+      req.fetchJSON(fetchUrl)
+      .then((json) => {
+          if (json.errcode === 0) {
+            runInAction(() => {
+              const splitTotalList = groupBy(json.result1, row => row.COLD_ServiceCity === -1 ? '0' : '1');
+              this.nationality_count_data.destinationGroupByCountryList = splitTotalList['1'];
+              const total1 = splitTotalList['0']?.[0] || {};
+              this.nationality_count_data.destinationGroupByCountryListColumns =[
+                {
+                  title: '国籍',
+                  dataIndex: 'COLD_ServiceCityName',
+                  children: [{
+                      title: total1.COLD_ServiceCityName,
+                      dataIndex: 'COLD_ServiceCityName'
+                    }
+                  ]
+                },
+                {
+                  title: '团数',
+                  dataIndex: 'GroupCount',
+                  sorter: (a, b) => a.GroupCount - b.GroupCount,
+                  children: [{
+                      title: total1.GroupCount,
+                      dataIndex: 'GroupCount'
+                    }
+                  ]
+                },
+                {
+                  title: '人数',
+                  dataIndex: 'PersonNum',
+                  sorter: (a, b) => a.PersonNum - b.PersonNum,
+                  children: [{
+                      title: total1.PersonNum,
+                      dataIndex: 'PersonNum'
+                    }
+                  ]
+                },
+                {
+                  title: '团天数',
+                  dataIndex: 'GroupDays',
+                  sorter: (a, b) => a.GroupDays - b.GroupDays,
+                  children: [{
+                      title: total1.GroupDays,
+                      dataIndex: 'GroupDays'
+                    }
+                  ]
+                },
+                {
+                  title: '交易额',
+                  dataIndex: 'TotalCost',
+                  sorter: (a, b) => a.TotalCost - b.TotalCost,
+                  children: [{
+                      title: total1.TotalCost,
+                      dataIndex: 'TotalCost'
+                    }
+                  ]
+                },
+                {
+                  title: '报价',
+                  dataIndex: 'TotalPrice',
+                  sorter: (a, b) => a.TotalPrice - b.TotalPrice,
+                  children: [{
+                      title: total1.TotalPrice,
+                      dataIndex: 'TotalPrice'
+                    }
+                  ]
+                }
+              ];
+            });
+          }
+        })
+      .then(() => {
+        this.nationality_count_data.loading = false;
+      });
+    }
+
     fetchDestinationGroupCount() {
       this.inProgress = true;
       const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetdistGroupInfoAll')
@@ -615,7 +704,7 @@ class CustomerServices {
                     ]
                   }
                 ];
-              } 
+              }
             });
            }
         })
@@ -627,8 +716,6 @@ class CustomerServices {
     fetchGroupListByDestinationId(destinationId) {
       this.inProgress = true;
       this.destinationName = '...';
-      this.destinationGroupList = [];
-      this.destinationGroupListColumns = [];
       const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetdistGroupInfo')
         .append('city', destinationId)
         .append('DateType', this.dateType)
@@ -638,6 +725,7 @@ class CustomerServices {
         .append('OldDate2', this.endDateString)
         .append('DepList', this.selectedTeam)
         .append('Country', this.selectedCountry)
+        .append('OrderStatus', this.selectedOrderStatus)
         .build();
       req.fetchJSON(fetchUrl)
         .then(json => {
@@ -728,7 +816,7 @@ class CustomerServices {
       this.startDateDiffString = obj.DateDiff1;
       this.endDateDiffString = obj.DateDiff2;
       this.selectedCountry = obj.countryArea;
-      this.selectedTeam = obj.DepartmentList.replace('ALL', '');
+      this.selectedTeam = (obj.DepartmentList || '').replace('ALL', '');
       this.selectedOrderStatus = obj.orderStatus;
     }
 
@@ -779,6 +867,15 @@ class CustomerServices {
     destinationGroupCount = [];
     destinationGroupCountColumns =[];
 
+    destinationGroupList = [];
+    destinationGroupListColumns = [];
+    // 国籍统计
+    nationality_count_data = {
+      loading: false,
+      destinationGroupByCountryList:[],
+      destinationGroupByCountryListColumns:[]
+    };
+
     agentGroupList = [{
       EOI_ObjSN: 1,
       VendorName: '---',

src/stores/CustomerStore.js

@@ -2,7 +2,7 @@ import {makeAutoObservable, runInAction} from "mobx";
 import { fetchJSON } from '../utils/request';
 import * as config from "../config";
 import { groupsMappedByKey, sitesMappedByCode, pivotBy } from './../libs/ht';
-import { sortBy, show_vs_tag, formatPercent } from "../utils/commons";
+import { sortBy, show_vs_tag, formatPercent, groupBy, isEmpty, uniqWith, formatPercentToFloat } from "../utils/commons";
 import moment from 'moment';
 
 /**
@@ -101,6 +101,7 @@ class CustomerStore {
 
 
     //  老客户 beign
+    // isCompare对比数据boolean isCompareRender对比折线boolean
     regular_customer_order(get_detail = false, isCompare = false, isCompareRender=false) {
         let pivotByOrder = 'SumOrder';
         let pivotByDate = 'applyDate';
@@ -146,8 +147,8 @@ class CustomerStore {
                             this.regular_data.data_detail = json;
                         }
                         if (isCompareRender){
-                            this.regular_data.detail_loading = false;
                             this.regular_data.solidLineTime=date_picker_store.start_date.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date.format(config.SMALL_DATETIME_FORMAT);
+                            this.regular_data.solidLineCompareTime=date_picker_store.start_date_cp.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date_cp.format(config.SMALL_DATETIME_FORMAT);
                             const dump_l = (json || []).filter(ele => ele.COLI_IsOld !== '' && ele.COLI_IsCusCommend !== '').length;
                             this.regular_data.total_data_tips = dump_l > 0 ? `包含 ${dump_l} 条同时勾选的数据` : '';
                             /** 使用明细数据画图 */
@@ -168,13 +169,13 @@ class CustomerStore {
                                 if (isCompare){
                                     return {
                                         ...item,
-                                        _ylabel: date_picker_store.start_date_cp.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date_cp.format(config.SMALL_DATETIME_FORMAT) + item._ylabel 
+                                        _ylabel: date_picker_store.start_date_cp.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date_cp.format(config.SMALL_DATETIME_FORMAT) + item._ylabel
                                     };
                                 }
                                 else{
                                     return {
                                         ...item,
-                                        _ylabel: date_picker_store.start_date.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date.format(config.SMALL_DATETIME_FORMAT) + item._ylabel 
+                                        _ylabel: date_picker_store.start_date.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date.format(config.SMALL_DATETIME_FORMAT) + item._ylabel
                                     };
                                 }
                             });
@@ -199,10 +200,11 @@ class CustomerStore {
                                     }
                                     seriesCompareData.push(...fistCompareDetail);
                                 }
+                                this.regular_data.detail_loading = false;
                                 this.regular_data.pivotData = seriesCompareData; // { IsOldData, isCusCommendData, };
                                 this.regular_data.pivotY = pivotByOrder;
                                 this.regular_data.pivotX = pivotByDate;
-                            }  
+                            }
                         }
                         else{
                             this.regular_data.detail_loading = false;
@@ -225,7 +227,7 @@ class CustomerStore {
                             this.regular_data.pivotData = seriesData; // { IsOldData, isCusCommendData, };
                             this.regular_data.pivotY = pivotByOrder;
                             this.regular_data.pivotX = pivotByDate;
-                        }      
+                        }
                     } else {
                         if (isCompare){
                             const result = [];
@@ -236,15 +238,19 @@ class CustomerStore {
                                         result.push({
                                             ItemName: item1.ItemName,
                                             OrderNum: show_vs_tag(formatPercent((item1.OrderNum-item2.OrderNum)/(item2.OrderNum===0?1:item2.OrderNum)),
-                                            item1.OrderNum-item2.OrderNum,item1.OrderNum,item2.OrderNum),        
+                                            item1.OrderNum-item2.OrderNum,item1.OrderNum,item2.OrderNum),
                                             SUCOrderNum: show_vs_tag(formatPercent((item1.SUCOrderNum-item2.SUCOrderNum)/(item2.SUCOrderNum===0?1:item2.SUCOrderNum)),
-                                            item1.SUCOrderNum-item2.SUCOrderNum,item1.SUCOrderNum,item2.SUCOrderNum),         
+                                            item1.SUCOrderNum-item2.SUCOrderNum,item1.SUCOrderNum,item2.SUCOrderNum),
+                                            OrderRate: show_vs_tag(formatPercent((item1.OrderRate-item2.OrderRate)/item2.OrderRate),
+                                            formatPercentToFloat(item1.OrderRate-item2.OrderRate),formatPercentToFloat(item1.OrderRate),formatPercentToFloat(item2.OrderRate)),
                                             SUCRate: show_vs_tag(formatPercent((item1.SUCRate-item2.SUCRate)/(item2.SUCRate===0?1:item2.SUCRate)),
-                                            formatPercent(item1.SUCRate-item2.SUCRate),formatPercent(item1.SUCRate),formatPercent(item2.SUCRate)),       
+                                            formatPercent(item1.SUCRate-item2.SUCRate),formatPercent(item1.SUCRate),formatPercent(item2.SUCRate)),
                                             ML: show_vs_tag(formatPercent((item1.ML-item2.ML)/(item2.ML===0?1:item2.ML)),
-                                            (item1.ML-item2.ML).toFixed(2),item1.ML,item2.ML),        
+                                            (item1.ML-item2.ML).toFixed(2),item1.ML,item2.ML),
+                                            OrderMLRate: show_vs_tag(formatPercent((item1.OrderMLRate-item2.OrderMLRate)/item2.OrderMLRate),
+                                            formatPercentToFloat(item1.OrderMLRate-item2.OrderMLRate),formatPercentToFloat(item1.OrderMLRate),formatPercentToFloat(item2.OrderMLRate)),
                                             PersonNum: show_vs_tag(formatPercent((item1.PersonNum-item2.PersonNum)/(item2.PersonNum===0?1:item2.PersonNum)),
-                                            item1.PersonNum-item2.PersonNum,item1.PersonNum,item2.PersonNum), 
+                                            item1.PersonNum-item2.PersonNum,item1.PersonNum,item2.PersonNum),
                                         });
                                     }
                                 }
@@ -288,8 +294,9 @@ class CustomerStore {
         data: [],
         data_detail: [],
         data_compare: [],
-        showSum:true,
+        showCompareSum:false,
         solidLineTime:'',
+        solidLineCompareTime:'',
         solidLineDash:'老客户推荐',
         isCompareLine:false,
         total_data_tips: '',
@@ -307,8 +314,9 @@ class CustomerStore {
 
         searchValues: {
           DepartmentList: ['1', '2', '28', '7'].map(kk => groupsMappedByKey[kk]),
-          WebCode: undefined, // ['ALL'].map(kk => sitesMappedByCode[kk]),
+          WebCode: ['CHT','AH','JH','GH','ZWQD','GH_ZWQD_HW','GHKYZG','GHKYHW'].map(kk => sitesMappedByCode[kk]),
           DateType: { key: 'applyDate', label: '提交日期'},
+          IncludeTickets: { key: '0', label: '不含门票' },
         },
 
         pivotData: [],
@@ -396,6 +404,57 @@ class CustomerStore {
     };
 //  在华客人 end
 
+//  东道主项目 begin
+
+    host_case_data = {
+        loading: false,
+        summaryData: [], // 汇总数据
+        groupData: [],  // 小组数据
+        counselorData: [],  // 顾问数据
+        singleDetailData:[], // 单团详细数据
+        group_select_mode: 'multiple',
+        groups: ['1', '2', '28', '7'],
+        searchValues: {
+          DepartmentList: ['1', '2', '28', '7'].map(kk => groupsMappedByKey[kk]),
+        },
+      };
+
+    getHostCaseData(groupBy) {
+        this.host_case_data.loading = true;
+        const date_picker_store = this.rootStore.date_picker_store;
+        let url = '/service-Analyse2/DDZCount';
+        url += '?DEI_SN=' + this.host_case_data.groups.toString();
+        url += '&ArriveDateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ArriveDateEnd=' + date_picker_store.end_date.format(config.SMALL_DATETIME_FORMAT);
+        url += '&GroupBy=' + groupBy;
+        fetch(config.HT_HOST + url)
+            .then((response) => response.json())
+            .then((json) => {
+                runInAction(() => {
+                    switch(groupBy){
+                        case "1":
+                            this.host_case_data.summaryData = json.result?json.result:[];
+                            break;
+                        case "2":
+                            this.host_case_data.counselorData = json.result?json.result:[];
+                            break;
+                        case "3":
+                            this.host_case_data.groupData = json.result?json.result:[];
+                            break;
+                        case "4":
+                            this.host_case_data.singleDetailData = json.result?json.result:[];
+                            this.host_case_data.loading = false;
+                            break;
+                    }
+                });
+            })
+            .catch((error) => {
+                this.host_case_data.loading = false;
+                console.log('fetch data failed', error);
+            });
+    };
+//  东道主项目 end
+
+    // 销售-老客户
     sales_regular_data = {
       loading: false,
       data: [],
@@ -403,48 +462,122 @@ class CustomerStore {
       rawData: [],
       searchValues: {
         DepartmentList: ['1', '2', '28', '7'].map(kk => groupsMappedByKey[kk]),
-        WebCode: undefined, // ['ALL'].map(kk => sitesMappedByCode[kk]),
+        WebCode: ['CHT','AH','JH','GH','ZWQD','GH_ZWQD_HW','GHKYZG','GHKYHW'].map(kk => sitesMappedByCode[kk]),
         DateType: { key: 'applyDate', label: '提交日期'},
+        IncludeTickets: { key: '0', label: '不含门票' },
+      },
+      pivotData: {
+        operatorName: { loading: false, data: [], rawData: [], mergedData: [], filterColValues: [] },
+        country: { loading: false, data: [], rawData: [], mergedData: [], filterColValues: [] },
       },
     };
 
-    get_sales_regular_data = async (param) => {
+    get_sales_regular_data_vs = async (param, pivotRow = 'operatorName') => {
-      this.sales_regular_data.loading = true;
+      this.sales_regular_data.pivotData[pivotRow].loading = true;
-      const rawData = await getDetailData({...param, IncludeTickets: 1});
+      const hasCompare = !isEmpty(param.DateDiff1);
-      const filterHasOld = rawData.filter(ele => (ele.IsOld === '1' || ele.isCusCommend === '1')).map(e => ({...e, operatorNameB: e.operatorName.replace(/\([^)]*\)/gi, '').toLowerCase()}));
+      const [result1, result2] = await Promise.all([
+        this.get_sales_regular_data(param, pivotRow),
+        hasCompare ? this.get_sales_regular_data({...param, Date1: param.DateDiff1, Date2: param.DateDiff2}, pivotRow) : { mergeDataBySales: [], mergeDataBySalesAccount: [], filterHasOld: []},
+      ]);
+
+      const allTypes = ['老客户', '老客户推荐'];
+      // 独立的账户
+      const allSales = Array.from(new Set([...result1.mergeDataBySales.map(row=>row[pivotRow]), ...result2.mergeDataBySales.map(row=>row[pivotRow])]));
+      const sales1 = groupBy(result1.mergeDataBySales, pivotRow);
+      const sales2 = groupBy(result2.mergeDataBySales, pivotRow);
+      const mergeDataBySales = allSales.reduce((r, sale) => {
+        const _default = { [pivotRow]: sale, rowLabel: sales1?.[sale]?.rowLabel || sales2?.[sale]?.rowLabel, children: sales1?.[sale]?.children || [], key: sale};
+        const operatorRow = {...(sales1?.[sale]?.[0] || _default), vsData: sales2?.[sale]?.[0] || {}};
+        // 展开的两项: '老客户', '老客户推荐'
+        const series1Children = sales1?.[sale]?.[0]?.children || [];
+        const series2Children = sales2?.[sale]?.[0]?.children || [];
+        const children = allTypes.reduce((r, type) => {
+          const _default = { [pivotRow]: type, rowLabel: type, key: type};
+          const _typeRow = series1Children.find(sc => sc[pivotRow] === type) || _default;
+          const _typeVSRow = series2Children.find(sc => sc[pivotRow] === type) || {};
+          return r.concat({..._typeRow, vsData: _typeVSRow});
+        }, []);
+        operatorRow.children = children;
+        return r.concat(operatorRow);
+      }, []);
+      // 合并顾问的账户
+      let mergeDataBySalesAccount = [];
+      if (pivotRow === 'operatorName') {
+        const allSalesMerged = Array.from(new Set([...result1.mergeDataBySalesAccount.map(row=>row.operatorName), ...result2.mergeDataBySalesAccount.map(row=>row.operatorName)]));
+        const salesM1 = groupBy(result1.mergeDataBySalesAccount, 'operatorName');
+        const salesM2 = groupBy(result2.mergeDataBySalesAccount, 'operatorName');
+        mergeDataBySalesAccount = allSalesMerged.reduce((r, sale) => {
+          const _default = { operatorName: sale, rowLabel: salesM1?.[sale]?.rowLabel || salesM2?.[sale]?.rowLabel, children: salesM1?.[sale]?.children || [], key: sale};
+          const operatorRow = {...(salesM1?.[sale]?.[0] || _default), vsData: salesM2?.[sale]?.[0] || {}};
+          // 展开的两项: '老客户', '老客户推荐'
+          const series1Children = salesM1?.[sale]?.[0]?.children || [];
+          const series2Children = salesM2?.[sale]?.[0]?.children || [];
+          const children = allTypes.reduce((r, type) => {
+            const _default = { operatorName: type, rowLabel: type, key: type};
+            const _typeRow = series1Children.find(sc => sc.operatorName === type) || _default;
+            const _typeVSRow = series2Children.find(sc => sc.operatorName === type) || {};
+            return r.concat({..._typeRow, vsData: _typeVSRow});
+          }, []);
+          operatorRow.children = children;
+          return r.concat(operatorRow);
+        }, []);
+      }
+
+      const filterColValues = uniqWith(
+        mergeDataBySales.map((rr) => ({ text: rr[pivotRow], value: rr[pivotRow] })),
+        (a, b) => JSON.stringify(a) === JSON.stringify(b)
+      ).sort((a, b) => a.text.localeCompare(b.text, 'zh-CN'));
+
+      this.sales_regular_data.pivotData[pivotRow].loading = false;
+      this.sales_regular_data.pivotData[pivotRow].rawData = [].concat(result1.filterHasOld, result2.filterHasOld);
+      this.sales_regular_data.pivotData[pivotRow].data = mergeDataBySales;
+      this.sales_regular_data.pivotData[pivotRow].mergedData = isEmpty(mergeDataBySalesAccount) ? mergeDataBySales : mergeDataBySalesAccount;
+
+      this.sales_regular_data.pivotData[pivotRow].filterColValues = filterColValues;
 
-      const { data: hasOldData, } = pivotBy(filterHasOld, [['hasOld', 'operatorName'], [], []]);
+    };
-      const { data: IsOldData, } = pivotBy(filterHasOld.filter(ele => ele.IsOld === '1'), [['operatorName', 'IsOld_txt', ], [], []]);
+
-      const { data: isCusCommendData, } = pivotBy(filterHasOld.filter(ele => ele.isCusCommend === '1'), [['operatorName', 'isCusCommend_txt', ], [], []]);
+    get_sales_regular_data = async (param, pivotRow = 'operatorName') => {
+      const seriesKey = `${param.Date1}至${param.Date2}`;
+      const rawData = await getDetailData({...param, });
+      const filterHasOld = rawData.filter(ele => (ele.IsOld === '1' || ele.isCusCommend === '1')).map(e => ({
+        ...e,
+        seriesKey,
+        operatorNameB: e.operatorName.replace(/\([^)]*\)/gi, '').toLowerCase(),
+      }));
+
+      const { data: hasOldData, } = pivotBy(filterHasOld, [['hasOld', pivotRow], [], []]);
+      const { data: IsOldData, } = pivotBy(filterHasOld.filter(ele => ele.IsOld === '1'), [[pivotRow, 'IsOld_txt', ], [], []]);
+      const { data: isCusCommendData, } = pivotBy(filterHasOld.filter(ele => ele.isCusCommend === '1'), [[pivotRow, 'isCusCommend_txt', ], [], []]);
       // console.log('IsOldData====', IsOldData, '\nisCusCommend', isCusCommendData);
       // console.log('data====', rawData, '\ncolumnValues', columnValues, '\nsummaryRows', summaryRows, '\nsummaryColumns', summaryColumns, '\nsummaryMix', summaryMix, '\nhasOld',filterHasOld);
       const mergeDataBySales = hasOldData.map((ele) => ({
         ...ele,
+        seriesKey,
         children: [].concat(
-          IsOldData.filter((ele1) => ele1.operatorName === ele.operatorName).map(o => ({...o, operatorName: o.IsOld_txt, key: o.rowLabel})),
+          IsOldData.filter((ele1) => ele1[pivotRow] === ele[pivotRow]).map(o => ({...o, [pivotRow]: o.IsOld_txt, key: o.rowLabel, seriesKey,})),
-          isCusCommendData.filter((ele2) => ele2.operatorName === ele.operatorName).map(o => ({...o, operatorName: o.isCusCommend_txt, key: o.rowLabel}))
+          isCusCommendData.filter((ele2) => ele2[pivotRow] === ele[pivotRow]).map(o => ({...o, [pivotRow]: o.isCusCommend_txt, key: o.rowLabel, seriesKey,}))
         ),
       }));
 
       // 合并顾问的账户
-      const { data: hasOldDataSales, } = pivotBy(filterHasOld, [['hasOld', 'operatorNameB'], [], []]);
+      let mergeDataBySalesAccount = [];
-      const { data: IsOldDataSales, } = pivotBy(filterHasOld.filter(ele => ele.IsOld === '1'), [['operatorNameB', 'IsOld_txt', ], [], []]);
+      if (pivotRow === 'operatorName') {
-      const { data: isCusCommendDataSales, } = pivotBy(filterHasOld.filter(ele => ele.isCusCommend === '1'), [['operatorNameB', 'isCusCommend_txt', ], [], []]);
+        const { data: hasOldDataSales, } = pivotBy(filterHasOld, [['hasOld', 'operatorNameB'], [], []]);
-      const mergeDataBySalesAccount = hasOldDataSales.map((ele) => ({
+        const { data: IsOldDataSales, } = pivotBy(filterHasOld.filter(ele => ele.IsOld === '1'), [['operatorNameB', 'IsOld_txt', ], [], []]);
-        ...ele,
+        const { data: isCusCommendDataSales, } = pivotBy(filterHasOld.filter(ele => ele.isCusCommend === '1'), [['operatorNameB', 'isCusCommend_txt', ], [], []]);
-        operatorName: ele.operatorNameB,
+        mergeDataBySalesAccount = hasOldDataSales.map((ele) => ({
-        children: [].concat(
+          ...ele,
-          IsOldDataSales.filter((ele1) => ele1.operatorNameB === ele.operatorNameB).map(o => ({...o, operatorName: o.IsOld_txt, key: o.rowLabel})),
+          operatorName: ele.operatorNameB,
-          isCusCommendDataSales.filter((ele2) => ele2.operatorNameB === ele.operatorNameB).map(o => ({...o, operatorName: o.isCusCommend_txt, key: o.rowLabel}))
+          seriesKey,
-        ),
+          children: [].concat(
-      }));
+            IsOldDataSales.filter((ele1) => ele1.operatorNameB === ele.operatorNameB).map(o => ({...o, operatorName: o.IsOld_txt, key: o.rowLabel, seriesKey,})),
+            isCusCommendDataSales.filter((ele2) => ele2.operatorNameB === ele.operatorNameB).map(o => ({...o, operatorName: o.isCusCommend_txt, key: o.rowLabel, seriesKey,}))
+          ),
+        }));
+      }
       // console.log('IsOldDataSales====', IsOldDataSales, '\nisCusCommendDataSales', isCusCommendDataSales);
-      // console.log('mergeDataBySalesAccount====', mergeDataBySalesAccount);
+      return { mergeDataBySales, mergeDataBySalesAccount, filterHasOld };
-
-      this.sales_regular_data.loading = false;
-      this.sales_regular_data.data = mergeDataBySales;
-      this.sales_regular_data.mergedData = mergeDataBySalesAccount;
-      this.sales_regular_data.rawData = filterHasOld;
     };
 
     setSearchValues(obj, values, target) {

src/stores/HotelCruise.js

@@ -64,10 +64,13 @@ const paramKeyMapped = {
   'DateDiff1': { key: 'CompareDateStart' },
   'DateDiff2': { key: 'CompareDateEnd' },
   'keyword': { key: 'ProductName' },
+  'agency': { key: 'VEI_SN' },
   'cruiseDirection': { key: 'Direction' },
+  'cruiseBookType': { key: 'BookingType' },
   'hotelStar': { key: 'Star' },
   'hotelRecommandRate': { key: 'RecommendedLevel' },
   'hotelBookType': { key: 'BookingType' },
+  'country': { key: 'Country' },
   'countryArea': { key: 'Area', transform: (val) => (val === 'china' ? '1' : val === 'foreign' ? '0' : '-1') },
 };
 
@@ -81,7 +84,7 @@ class HotelCruise {
     this.cruise.loading = true;
     this.cruise.dataSource = [];
     const _queryParam = objectMapper(param, paramKeyMapped);
-    const queryParam = omit({ ...this.searchValuesToSub, ..._queryParam }, ['DepartmentList', 'orderStatus', 'keyword', 'Date1', 'Date2', 'DateDiff1', 'DateDiff2', 'cruiseDirection']);
+    const queryParam = omit({ ...this.searchValuesToSub, ..._queryParam }, Object.keys(paramKeyMapped));
     queryParam.Compare = isEmpty(param.DateDiff1) ? '' : '1';
     const res = await fetchCruiseData(queryParam);
     const resCP =
@@ -89,13 +92,29 @@ class HotelCruise {
         ? res
         : (res || []).map((ele) => ({
             ...ele,
+            // 计算 增长率 = (当前值 - 上次值) / 上次值 * 100
             TotalNumPercent: ele.CPTotalNum ? fixTo2Decimals(((ele.TotalNum - ele.CPTotalNum) / ele.CPTotalNum) * 100) : '-',
             TotalPersonNumPercent: ele.CPTotalPersonNum ? fixTo2Decimals(((ele.TotalPersonNum - ele.CPTotalPersonNum) / ele.CPTotalPersonNum) * 100) : '-',
             TotalProfitPercent: ele.CPTotalProfit ? fixTo2Decimals(((ele.TotalProfit - ele.CPTotalProfit) / ele.CPTotalProfit) * 100) : '-',
           }));
+    const summaryRow = ['TotalNum', 'TotalPersonNum', 'TotalProfit', 'CPTotalNum', 'CPTotalPersonNum', 'CPTotalProfit'].reduce(
+      (r, skey) => ({
+        ...r,
+        [skey]: resCP.reduce((a, c) => a + c[skey], 0),
+      }),
+      { ProductName: '合计' }
+    );
+    const summaryDelta = ['TotalNum', 'TotalPersonNum', 'TotalProfit'].reduce(
+      (r, skey) => ({
+        ...r,
+        [`${skey}Percent`]: queryParam.Compare === '' ? null : fixTo2Decimals(((summaryRow[skey] - summaryRow[`CP${skey}`]) / summaryRow[`CP${skey}`]) * 100),
+      }),
+      {}
+    );
     runInAction(() => {
       this.cruise.loading = false;
       this.cruise.dataSource = resCP;
+      this.cruise.summaryRow = { ...summaryRow, ...summaryDelta };
     });
     return this.cruise;
   }
@@ -104,10 +123,7 @@ class HotelCruise {
     this.hotel.loading = true;
     this.hotel.dataSource = [];
     const _queryParam = objectMapper(param, paramKeyMapped);
-    const queryParam = omit({ ...this.searchValuesToSub, ..._queryParam }, [
+    const queryParam = omit({ ...this.searchValuesToSub, ..._queryParam }, Object.keys(paramKeyMapped));
-      'DepartmentList','orderStatus','keyword','Date1','Date2','DateDiff1','DateDiff2','DateType',
-      'hotelStar','hotelRecommandRate','hotelBookType','countryArea',
-    ]);
     queryParam.Compare = isEmpty(param.DateDiff1) ? '0' : '1';
     const _res = await fetchHotelData(queryParam);
     const res = (_res || []).map((ele) => ({ ...ele, RecommendRate_100: fixTo2Decimals(ele.RecommendRate * 100) + '%' }));
@@ -121,9 +137,30 @@ class HotelCruise {
             RecommendRateDelta: fixTo2Decimals((ele.RecommendRate - (ele.CPRecommendRate || 0)) * 100),
             CPRecommendRate_100: fixTo2Decimals(ele.CPRecommendRate * 100) + '%',
           }));
+    const summaryRow = ['TotalNum', 'RecomendNum', ].reduce(
+      (r, skey) => ({
+        ...r,
+        [skey]: resCP.reduce((a, c) => a + c[skey], 0),
+        [`CP${skey}`]: resCP.reduce((a, c) => a + c[`CP${skey}`], 0),
+      }),
+      { CityName: '合计' }
+    );
+    summaryRow.RecommendRate = fixTo2Decimals(summaryRow.RecomendNum/summaryRow.TotalNum);
+    summaryRow.RecommendRate_100 = fixTo2Decimals(summaryRow.RecommendRate * 100) + '%';
+    summaryRow.CPRecommendRate = fixTo2Decimals(summaryRow.CPRecomendNum/summaryRow.CPTotalNum);
+    summaryRow.CPRecommendRate_100 = fixTo2Decimals(summaryRow.CPRecommendRate * 100) + '%';
+    const summaryDelta = ['TotalNum', 'RecomendNum', ].reduce(
+      (r, skey) => ({
+        ...r,
+        [`${skey}Percent`]: queryParam.Compare === '0' ? null : fixTo2Decimals(((summaryRow[skey] - summaryRow[`CP${skey}`]) / summaryRow[`CP${skey}`]) * 100),
+      }),
+      {}
+    );
+    summaryDelta.RecommendRateDelta = queryParam.Compare === '0' ? undefined : fixTo2Decimals((summaryRow.RecommendRate - (summaryRow.CPRecommendRate || 0)) * 100);
     runInAction(() => {
       this.hotel.loading = false;
       this.hotel.dataSource = resCP;
+      this.hotel.summaryRow = { ...summaryRow, ...summaryDelta };
     });
   }
 
@@ -144,8 +181,8 @@ class HotelCruise {
     this.searchValuesToSub = obj;
   }
 
-  cruise = { loading: false, dataSource: [] };
+  cruise = { loading: false, dataSource: [], summaryRow: {} };
-  hotel = { loading: false, dataSource: [] };
+  hotel = { loading: false, dataSource: [], summaryRow: {} };
   resetData = () => {
     this.results.loading = false;
     for (const key of Object.keys(this.results)) {

src/utils/commons.js

@@ -72,6 +72,10 @@ export function formatPercent(number) {
 	return Math.round(number * 100) + "%";
 }
 
+export function formatPercentToFloat(number) {
+	return parseFloat((number * 100).toFixed(2)) + "%";
+}
+
 export function percentToDecimal(number) {
 	return parseFloat(number) / 100;
 }

src/views/Cruise.jsx

@@ -1,69 +1,131 @@
-import React, { Children, useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import moment from 'moment';
+import { Row, Col, Table, Space, Typography, Divider } from 'antd';
-import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider, Button, Switch } from 'antd';
 import SearchForm from './../components/search/SearchForm';
 import { VSTag, TableExportBtn } from './../components/Data';
+import { CruiseAgency } from './../libs/ht';
 
-const {Text} = Typography;
+const { Text } = Typography;
 
 export default observer((props) => {
-  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
+  const { date_picker_store: searchFormStore } = useContext(stores_Context);
-  const { customerServicesStore, HotelCruiseStore, date_picker_store } = useContext(stores_Context);
+  const { HotelCruiseStore, date_picker_store } = useContext(stores_Context);
-  const { loading, dataSource } = HotelCruiseStore.cruise;
+  const { loading, dataSource, summaryRow } = HotelCruiseStore.cruise;
 
   const { formValues, siderBroken } = searchFormStore;
 
-  const tableSorter = (a, b, colName) => (a[colName] - b[colName]);
+  const tableSorter = (a, b, colName) => a[colName] - b[colName];
+  const tableExportDataRow = (col1, col2) => [col1, col2].filter((r) => r).join(' VS ');
   const tableProps = {
     size: 'small',
-    bordered: true, pagination: false,
+    bordered: true,
+    pagination: false,
     columns: [
-      { title: '产品', dataIndex: 'ProductName', key: 'ProductName' },
+      { title: '产品',
+        sorter: (a, b) => a.ProductName.localeCompare(b.ProductName, 'zh-CN'),children: [{ title: summaryRow.ProductName, dataIndex: 'ProductName', key: 'ProductName' }] },
       {
         title: '房间数',
-        dataIndex: 'TotalNum',
-        key: 'TotalNum',
         sorter: (a, b) => tableSorter(a, b, 'TotalNum'),
-        render: (v, r) => (
+        children: [
-          <>
+          {
-            <Space direction={'vertical'}>
+            title: (
-              <Text strong>
+              <>
-                {v}
+                <Space direction={'vertical'}>
-                {r.CPTotalNum && <Text type="secondary"> VS {r.CPTotalNum}</Text>}
+                  <Text strong>
-              </Text>
+                    {summaryRow.TotalNum}
-              {r.CPTotalNum && <VSTag diffPercent={r.TotalNumPercent} />}
+                    {summaryRow.TotalNumPercent ? <Text type="secondary"> VS {summaryRow.CPTotalNum}</Text> : null}
-            </Space>
+                  </Text>
-          </>
+                  {summaryRow.TotalNumPercent && <VSTag diffPercent={summaryRow.TotalNumPercent} />}
-        ),
+                </Space>
+              </>
+            ),
+            titleX: tableExportDataRow(summaryRow.TotalNum, summaryRow.CPTotalNum),
+            dataExport: (v, r) => tableExportDataRow(r.TotalNum, r.CPTotalNum),
+            dataIndex: 'TotalNum',
+            key: 'TotalNum',
+            render: (v, r) => (
+              <>
+                <Space direction={'vertical'}>
+                  <Text strong>
+                    {v}
+                    {r.CPTotalNum ? <Text type="secondary"> VS {r.CPTotalNum}</Text> : null}
+                  </Text>
+                  {r.CPTotalNum && <VSTag diffPercent={r.TotalNumPercent} />}
+                </Space>
+              </>
+            ),
+          },
+        ],
       },
-      { title: '人数', dataIndex: 'TotalPersonNum', key: 'TotalPersonNum',
+      {
+        title: '人数',
         sorter: (a, b) => tableSorter(a, b, 'TotalPersonNum'),
-        render: (v, r) => (
+        children: [
-          <>
+          {
-            <Space direction={'vertical'}>
+            title: (
-              <Text strong>
+              <>
-                {v}
+                <Space direction={'vertical'}>
-                {r.CPTotalPersonNum && <Text type="secondary"> VS {r.CPTotalPersonNum}</Text>}
+                  <Text strong>
-              </Text>
+                    {summaryRow.TotalPersonNum}
-              {r.CPTotalNum && <VSTag diffPercent={r.TotalPersonNumPercent} />}
+                    {summaryRow.TotalPersonNumPercent ? <Text type="secondary"> VS {summaryRow.CPTotalPersonNum}</Text> : null}
-            </Space>
+                  </Text>
-          </>
+                  {summaryRow.TotalPersonNumPercent && <VSTag diffPercent={summaryRow.TotalPersonNumPercent} />}
-        ),},
+                </Space>
-      { title: '总利润', dataIndex: 'TotalProfit', key: 'TotalProfit',
+              </>
+            ),
+            titleX: tableExportDataRow(summaryRow.TotalPersonNum, summaryRow.CPTotalPersonNum),
+            dataExport: (v, r) => tableExportDataRow(r.TotalPersonNum, r.CPTotalPersonNum),
+            dataIndex: 'TotalPersonNum',
+            key: 'TotalPersonNum',
+            render: (v, r) => (
+              <>
+                <Space direction={'vertical'}>
+                  <Text strong>
+                    {v}
+                    {r.CPTotalPersonNum ? <Text type="secondary"> VS {r.CPTotalPersonNum}</Text> : null}
+                  </Text>
+                  {r.CPTotalNum && <VSTag diffPercent={r.TotalPersonNumPercent} />}
+                </Space>
+              </>
+            ),
+          },
+        ],
+      },
+      {
+        title: '总利润',
         sorter: (a, b) => tableSorter(a, b, 'TotalProfit'),
-        render: (v, r) => (
+        children: [
-          <>
+          {
-            <Space direction={'vertical'}>
+            title: (
-              <Text strong>
+              <>
-                {v}
+                <Space direction={'vertical'}>
-                {r.CPTotalProfit && <Text type="secondary"> VS {r.CPTotalProfit}</Text>}
+                  <Text strong>
-              </Text>
+                    {summaryRow.TotalProfit}
-              {r.CPTotalNum && <VSTag diffPercent={r.TotalProfitPercent} />}
+                    {summaryRow.TotalProfitPercent ? <Text type="secondary"> VS {summaryRow.CPTotalProfit}</Text> : null}
-            </Space>
+                  </Text>
-          </>
+                  {summaryRow.TotalProfitPercent && <VSTag diffPercent={summaryRow.TotalProfitPercent} />}
-        ), },
+                </Space>
+              </>
+            ),
+            titleX: tableExportDataRow(summaryRow.TotalProfit, summaryRow.CPTotalProfit),
+            dataExport: (v, r) => tableExportDataRow(r.TotalProfit, r.CPTotalProfit),
+            dataIndex: 'TotalProfit',
+            key: 'TotalProfit',
+            render: (v, r) => (
+              <>
+                <Space direction={'vertical'}>
+                  <Text strong>
+                    {v}
+                    {r.CPTotalProfit ? <Text type="secondary"> VS {r.CPTotalProfit}</Text> : null}
+                  </Text>
+                  {r.CPTotalNum && <VSTag diffPercent={r.TotalProfitPercent} />}
+                </Space>
+              </>
+            ),
+          },
+        ],
+      },
       // { title: '单订船', dataIndex: '', key: '' },
       // { title: '订单含行程', dataIndex: '', key: '' },
       // { title: '国籍', dataIndex: '', key: '' },
@@ -82,15 +144,22 @@ export default observer((props) => {
               },
               // 'countryArea',
               shows: [
-                'DepartmentList',  'orderStatus', 'dates', 'keyword', 'cruiseDirection', 'agency',
+                'DepartmentList',
-                // 'cruiseBookType', 'country', 'roomsRange', 'personRange'
+                'orderStatus',
+                'dates',
+                'keyword',
+                'cruiseDirection',
+                'agency',
+                'cruiseBookType',
+                'country', // 'roomsRange', 'personRange'
               ],
-              sort: { keyword: 101, agency: 103, cruiseDirection: 102, country: 104 },
+              sort: { keyword: 101, agency: 110, cruiseDirection: 102, country: 104 },
               fieldProps: {
                 keyword: { placeholder: '产品名', col: 4 },
                 DepartmentList: { show_all: true, mode: 'multiple' },
                 orderStatus: { show_all: true },
                 cruiseDirection: { show_all: true },
+                agency: { defaultOptions: CruiseAgency, autoGet: false },
                 // years: { hide_vs: false },
               },
             }}
@@ -102,7 +171,10 @@ export default observer((props) => {
         </Col>
       </Row>
       <section>
-        <Table {...tableProps} {...{loading, dataSource}} rowKey={(record) => record.ProductName}  />
+        <Divider orientation="right" >
+          <TableExportBtn label={'游船'} {...{ columns: tableProps.columns, dataSource }} />
+        </Divider>
+        <Table {...tableProps} {...{ loading, dataSource }} rowKey={(record) => record.ProductName} />
       </section>
     </>
   );

src/views/DataPivot.jsx

@@ -21,6 +21,10 @@ const filterFields = [
   { key: 'COLI_LineClass', label: '页面渠道' },
   { key: 'guestGroupType', label: '客群类别' },
   { key: 'travelMotivation', label: '出行目的' },
+  { key: 'startMonth', label: '出行日期-月份' },
+  { key: 'startYearMonth', label: '出行日期-年月' },
+  { key: 'applyMonth', label: '预订日期-月份' },
+  { key: 'applyYearMonth', label: '预订日期-年月' },
   { key: 'operatorName', label: '顾问' },
   { key: 'WebCode', label: '来源站点' },
   { key: 'IsOld_txt', label: '是否老客户' },
@@ -195,7 +199,10 @@ export default observer((props) => {
     setPivotRow({});
     setPivotRowDataSource([]);
     // 列汇总
-    const sortColData = summaryColumns.sort(sortBy(defaultValKey)).reverse();
+    const _col1 = pivotDateColumns[1][0] || '';
+    const _sortByDateOrVal = (_col1.includes('Month') || _col1.includes('Date')) ? _col1 : defaultValKey;
+    let sortColData = summaryColumns.sort(sortBy(_sortByDateOrVal));
+    sortColData = _sortByDateOrVal === defaultValKey ? sortColData.reverse() : sortColData;
     const colDataMapped = isEmpty(pivotDateColumns[1]) ? sortColData[0] : sortColData.reduce((r, v) => ({...r, [v[pivotDateColumns[1][0]]]: v}), {});
     setPivotTableColumnSummary(colDataMapped);
     // 行列的选项值
@@ -459,11 +466,11 @@ export default observer((props) => {
         dataIndex: 'applyDate',
         key: 'applyDate',
       },
-      // {
+      {
-      //   title: '出发日期',
+        title: '出发日期',
-      //   dataIndex: 'CGI_ArriveDate',
+        dataIndex: 'startDate',
-      //   key: 'CGI_ArriveDate',
+        key: 'startDate',
-      // },
+      },
     ],
   };
 
@@ -709,7 +716,6 @@ export default observer((props) => {
           />
         </Spin>
       </section>
-      { !pivotDateColumns[0].includes('destinationCountry_AsJOSN') && !pivotDateColumns[0].includes('destinations_AsJOSN') &&
       <section>
         <Spin spinning={loading}>
           <h3>
@@ -725,7 +731,6 @@ export default observer((props) => {
           <Table {...detailsTableProps} dataSource={pivotRowDataSource} components={{ body: { cell: TdCell } }} />
         </Spin>
       </section>
-    }
     </div>
   );
 });

src/views/DestinationGroupList.jsx

@@ -1,21 +1,24 @@
 import { useContext, useEffect } from 'react';
-import { Row, Col, Space, Table, List } from 'antd';
+import { Row, Col, Space, Table, List, Typography, Divider } from 'antd';
 import { stores_Context } from '../config';
 import { observer } from 'mobx-react';
 import { NavLink, useParams } from 'react-router-dom';
 import 'moment/locale/zh-cn';
 import SearchForm from './../components/search/SearchForm';
+import { TableExportBtn } from './../components/Data';
 
 const DestinationGroupList = () => {
   const { destinationId } = useParams();
   const { customerServicesStore, date_picker_store } = useContext(stores_Context);
 
   useEffect(() => {
+    customerServicesStore.fetchDistGroupInfoByCountry(destinationId);
     customerServicesStore.fetchGroupListByDestinationId(destinationId);
   }, []);
 
   const destinationGroupList = customerServicesStore.destinationGroupList;
   const destinationGroupListColumns = customerServicesStore.destinationGroupListColumns;
+  const nationality_count_data = customerServicesStore.nationality_count_data;
   const { inProgress } = customerServicesStore;
 
   return (
@@ -33,7 +36,7 @@ const DestinationGroupList = () => {
                   countryArea: { key: 'china', label: '国内' },
                   ...customerServicesStore.searchValues,
                 },
-                shows: ['departureDateType', 'DepartmentList', 'dates'],
+                shows: ['departureDateType', 'DepartmentList', 'dates', 'orderStatus'],
                 fieldProps: {
                   DepartmentList: { show_all: true },
                   orderStatus: { show_all: true },
@@ -45,11 +48,31 @@ const DestinationGroupList = () => {
               onSubmit={(_err, obj, form) => {
                 customerServicesStore.setSearchValues(obj, form);
                 customerServicesStore.fetchGroupListByDestinationId(destinationId);
+                customerServicesStore.fetchDistGroupInfoByCountry(destinationId);
                 customerServicesStore.fetchDestinationGroupCount();
               }}
             />
           </Col>
         </Row>
+        <Row>
+          <Col span={24}>
+            <Typography.Title level={3}>国籍统计</Typography.Title>
+            <Divider orientation="right" plain>
+              <TableExportBtn label={'国籍统计'} {...{ columns: nationality_count_data.destinationGroupByCountryListColumns, dataSource: nationality_count_data.destinationGroupByCountryList }} />
+            </Divider>
+            <Table
+              sticky
+              id="destinationGroupByCountry"
+              dataSource={nationality_count_data.destinationGroupByCountryList}
+              columns={nationality_count_data.destinationGroupByCountryListColumns}
+              size="small"
+              rowKey={(record) => record.key}
+              loading={nationality_count_data.loading}
+              pagination={false}
+              scroll={{ x: 1000 }}
+            />
+          </Col>
+        </Row>
         <Row>
           <Col span={24}>
             <Table

src/views/HostCaseCount.jsx

@@ -0,0 +1,147 @@
+import { useContext } from 'react';
+import { Row, Col, Typography, Space, Table, Divider } from 'antd';
+import { stores_Context } from '../config';
+import { observer } from 'mobx-react';
+import 'moment/locale/zh-cn';
+import SearchForm from '../components/search/SearchForm';
+import { TableExportBtn } from '../components/Data';
+import * as comm from '../utils/commons';
+
+const HostCaseCount = () => {
+  const { customer_store, date_picker_store } = useContext(stores_Context);
+  const host_case_data = customer_store.host_case_data;
+
+  const columnsList = [
+    {
+      title: '团数',
+      dataIndex: 'TotalGroupNum',
+      key: 'TotalGroupNum',
+      sorter: (a, b) => parseInt(a.TotalGroupNum) - parseInt(b.TotalGroupNum),
+    },
+    {
+      title: '人数',
+      dataIndex: 'TotalPersonNum',
+      key: 'TotalPersonNum',
+      sorter: (a, b) => parseInt(a.TotalPersonNum) - parseInt(b.TotalPersonNum),
+    },
+    {
+      title: '计费团天数',
+      dataIndex: 'TotalDays',
+      key: 'TotalDays',
+      sorter: (a, b) => parseInt(a.TotalDays) - parseInt(b.TotalDays),
+    },
+    {
+      title: '交易额',
+      dataIndex: 'TotalPrice',
+      key: 'TotalPrice',
+      sorter: (a, b) => parseInt(a.TotalPrice) - parseInt(b.TotalPrice),
+    },
+  ];
+  // 筛选函数
+  const getFiltersData=(filterData,filterKey)=>{
+      return comm.uniqWith(filterData.map(rr => ({ text: rr[filterKey], value: rr[filterKey] })),
+            (a, b) => JSON.stringify(a) === JSON.stringify(b)).sort((a, b) => a.text.localeCompare(b.text));
+  };
+  // 小组筛选菜单项
+  const allOPIGroup = getFiltersData(host_case_data.summaryData,"GroupBy");
+  // 顾问筛选菜单项
+  const allOPIConsultant = getFiltersData(host_case_data.counselorData,"GroupBy");
+  // 明细表顾问名筛选菜单项
+  const allOPIDetailConsultant = getFiltersData(host_case_data.singleDetailData,"OPI_Name");
+  const summaryColumnsList = [{
+      title: '',
+      dataIndex: 'GroupBy',
+      key: 'GroupBy',
+    }, ...columnsList];
+  const groupColumnsList = [{
+    title: '组名',
+    dataIndex: 'GroupBy',
+    key: 'GroupBy',
+    filters: allOPIGroup,
+    onFilter: (value, record) => record.GroupBy === value,
+    filterSearch: true,
+  }, ...columnsList];
+  const counselorColumnsList = [{
+    title: '顾问名',
+    dataIndex: 'GroupBy',
+    key: 'GroupBy',
+    filters: allOPIConsultant,
+    onFilter: (value, record) => record.GroupBy === value,
+    filterSearch: true,
+  }, ...columnsList];
+  const singleDetailColumnsList = [{
+    title: '团名',
+    dataIndex: 'GroupBy',
+    key: 'GroupBy',
+  }, 
+  {
+    title: '顾问名',
+    dataIndex: 'OPI_Name',
+    key: 'OPI_Name',
+    filters: allOPIDetailConsultant,
+    onFilter: (value, record) => record.OPI_Name === value,
+    filterSearch: true,
+  },
+  ...columnsList.slice(1)];
+
+  const renderRow=(rowColumns,rowDataSource,title)=>{
+      return(
+        <Row>
+          <Col span={24}>
+            <Typography.Title level={3}>{title}</Typography.Title>
+            <Divider orientation="right" plain>
+              <TableExportBtn label={title} {...{ columns: rowColumns, dataSource: rowDataSource }} />
+            </Divider>
+            <Table
+              sticky
+              id={`${rowColumns}`}
+              dataSource={rowDataSource}
+              columns={rowColumns}
+              size="small"
+              rowKey={(record) => record.key}
+              loading={host_case_data.loading}
+              pagination={false}
+              scroll={{ x: 1000 }}
+            />
+          </Col>
+        </Row>
+      );
+  };
+
+  return (
+    <>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Row gutter={16} className={date_picker_store.siderBroken ? "" : "sticky-top"} >
+          <Col className="gutter-row" span={24}>
+            <SearchForm
+              defaultValue={{
+                initialValue: {
+                  ...date_picker_store.formValues,
+                  ...host_case_data.searchValues,
+                },
+                shows: ['DepartmentList', 'dates'],
+                fieldProps: {
+                  DepartmentList: { show_all: false, mode: 'multiple' },
+                  dates: { hide_vs: true },
+                },
+              }}
+              onSubmit={(_err, obj, form) => {
+                customer_store.setSearchValues(obj, form,"host_case_data");
+                customer_store.getHostCaseData("1");
+                customer_store.getHostCaseData("2");
+                customer_store.getHostCaseData("3");
+                customer_store.getHostCaseData("4");
+              }}
+            />
+          </Col>
+        </Row>
+        {renderRow(summaryColumnsList,host_case_data.summaryData,'东道主项目汇总')}
+        {renderRow(groupColumnsList,host_case_data.groupData,'东道主项目小组统计')}
+        {renderRow(counselorColumnsList,host_case_data.counselorData,'东道主项目顾问统计')}
+        {renderRow(singleDetailColumnsList,host_case_data.singleDetailData,'单团明细')}
+      </Space>
+    </>
+  );
+};
+
+export default observer(HostCaseCount);

src/views/Hotel.jsx

@@ -1,75 +1,131 @@
 import React, { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import { Row, Col, Table, Space, Typography } from 'antd';
+import { Row, Col, Table, Space, Typography, Divider } from 'antd';
 import SearchForm from './../components/search/SearchForm';
 import { VSTag, TableExportBtn } from './../components/Data';
 const { Text } = Typography;
 
 export default observer((props) => {
-  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
+  const { date_picker_store: searchFormStore } = useContext(stores_Context);
-  const { customerServicesStore, date_picker_store, HotelCruiseStore } = useContext(stores_Context);
+  const { date_picker_store, HotelCruiseStore } = useContext(stores_Context);
-  const { loading, dataSource } = HotelCruiseStore.hotel;
+  const { loading, dataSource, summaryRow } = HotelCruiseStore.hotel;
 
   const { formValues, siderBroken } = searchFormStore;
 
-  const tableSorter = (a, b, colName) => (a[colName] - b[colName]);
+  const tableSorter = (a, b, colName) => a[colName] - b[colName];
+  const tableExportDataRow = (col1, col2) => [col1, col2].filter((r) => r).join(' VS ');
 
   const tableProps = {
     size: 'small',
     bordered: true,
     pagination: false,
     columns: [
-      { title: '目的地', dataIndex: 'CityName', key: 'CityName' },
+      {
+        title: '目的地',
+        sorter: (a, b) => a.CityName.localeCompare(b.CityName, 'zh-CN'),
+        children: [{ title: summaryRow.CityName, dataIndex: 'CityName', key: 'CityName' }],
+      },
       {
         title: '总间夜',
-        dataIndex: 'TotalNum',
-        key: 'TotalNum',
         sorter: (a, b) => tableSorter(a, b, 'TotalNum'),
-        render: (v, r) => (
+        children: [
-          <>
+          {
-            <Space direction={'vertical'}>
+            title: (
-              <Text strong>
+              <>
-                {v}
+                <Space direction={'vertical'}>
-                {r.CPTotalNum && <Text type="secondary"> VS {r.CPTotalNum}</Text>}
+                  <Text strong>
-              </Text>
+                    {summaryRow.TotalNum}
-              {r.CPTotalNum && <VSTag diffPercent={r.TotalNumPercent} />}
+                    {summaryRow.TotalNumPercent ? <Text type="secondary"> VS {summaryRow.CPTotalNum}</Text> : null}
-            </Space>
+                  </Text>
-          </>
+                  {summaryRow.TotalNumPercent && <VSTag diffPercent={summaryRow.TotalNumPercent} />}
-        ),
+                </Space>
+              </>
+            ),
+            titleX: tableExportDataRow(summaryRow.TotalNum, summaryRow.CPTotalNum),
+            dataIndex: 'TotalNum',
+            key: 'TotalNum',
+            dataExport: (v, r) => tableExportDataRow(r.TotalNum, r.CPTotalNum),
+            render: (v, r) => (
+              <>
+                <Space direction={'vertical'}>
+                  <Text strong>
+                    {v}
+                    {r.CPTotalNum ? <Text type="secondary"> VS {r.CPTotalNum}</Text> : null}
+                  </Text>
+                  {r.CPTotalNum && <VSTag diffPercent={r.TotalNumPercent} />}
+                </Space>
+              </>
+            ),
+          },
+        ],
       },
       {
         title: '主推',
-        dataIndex: 'RecomendNum',
-        key: 'RecomendNum',
         sorter: (a, b) => tableSorter(a, b, 'RecomendNum'),
-        render: (v, r) => (
+        children: [
-          <>
+          {
-            <Space direction={'vertical'}>
+            title: (
-              <Text strong>
+              <>
-                {v}
+                <Space direction={'vertical'}>
-                {r.CPRecomendNum && <Text type="secondary"> VS {r.CPRecomendNum}</Text>}
+                  <Text strong>
-              </Text>
+                    {summaryRow.RecomendNum}
-              {r.CPRecomendNum && <VSTag diffPercent={r.RecomendNumPercent} />}
+                    {summaryRow.RecomendNumPercent ? <Text type="secondary"> VS {summaryRow.CPRecomendNum}</Text> : null}
-            </Space>
+                  </Text>
-          </>
+                  {summaryRow.RecomendNumPercent && <VSTag diffPercent={summaryRow.RecomendNumPercent} />}
-        ),
+                </Space>
+              </>
+            ),
+            titleX: tableExportDataRow(summaryRow.RecomendNum, summaryRow.CPRecomendNum),
+            dataIndex: 'RecomendNum',
+            key: 'RecomendNum',
+            dataExport: (v, r) => tableExportDataRow(r.RecomendNum, r.CPRecomendNum),
+            render: (v, r) => (
+              <>
+                <Space direction={'vertical'}>
+                  <Text strong>
+                    {v}
+                    {r.CPRecomendNum ? <Text type="secondary"> VS {r.CPRecomendNum}</Text> : null}
+                  </Text>
+                  {r.CPRecomendNum && <VSTag diffPercent={r.RecomendNumPercent} />}
+                </Space>
+              </>
+            ),
+          },
+        ],
       },
       {
         title: '使用比例',
-        dataIndex: 'RecommendRate_100',
+        children: [
-        key: 'RecommendRate_100',
+          {
-        render: (v, r) => (
+            title: (
-          <>
+              <>
-            <Space direction={'vertical'}>
+                <Space direction={'vertical'}>
-              <Text strong>
+                  <Text strong>
-                {v}
+                    {summaryRow.RecommendRate_100}
-                {r.RecommendRateDelta !== undefined && <Text type="secondary"> VS {r.CPRecommendRate_100}</Text>}
+                    {summaryRow.RecommendRateDelta ? <Text type="secondary"> VS {summaryRow.CPRecommendRate_100}</Text> : null}
-              </Text>
+                  </Text>
-              {r.RecommendRateDelta !== undefined && <VSTag diffPercent={r.RecommendRateDelta} />}
+                  {summaryRow.RecommendRateDelta && <VSTag diffPercent={summaryRow.RecommendRateDelta} />}
-            </Space>
+                </Space>
-          </>
+              </>
-        ),
+            ),
+            titleX: tableExportDataRow(summaryRow.RecommendRate_100, summaryRow.CPRecommendRate_100),
+            dataIndex: 'RecommendRate_100',
+            key: 'RecommendRate_100',
+            dataExport: (v, r) => tableExportDataRow(r.RecommendRate_100, r.CPRecommendRate_100),
+            render: (v, r) => (
+              <>
+                <Space direction={'vertical'}>
+                  <Text strong>
+                    {v}
+                    {r.RecommendRateDelta !== undefined && <Text type="secondary"> VS {r.CPRecommendRate_100}</Text>}
+                  </Text>
+                  {r.RecommendRateDelta !== undefined && <VSTag diffPercent={r.RecommendRateDelta} />}
+                </Space>
+              </>
+            ),
+          },
+        ],
       },
     ],
   };
@@ -84,8 +140,8 @@ export default observer((props) => {
                 ...date_picker_store.formValues,
                 ...HotelCruiseStore.searchValues,
               },
-              // 'countryArea', 'DateType', 'dates',
+              // 'countryArea', 'DateType', 'dates', 'hotelRecommandRate',
-              shows: ['DepartmentList', 'countryArea', 'orderStatus', 'hotelBookType', 'hotelRecommandRate', 'hotelStar', 'DateType', 'dates'],
+              shows: ['DepartmentList', 'countryArea', 'orderStatus', 'hotelBookType', 'hotelStar', 'DateType', 'dates'],
               sort: { DateType: 101, dates: 102 },
               fieldProps: {
                 DepartmentList: { show_all: true, mode: 'multiple' },
@@ -105,6 +161,9 @@ export default observer((props) => {
         </Col>
       </Row>
       <section>
+        <Divider orientation="right" >
+          <TableExportBtn label={'酒店'} {...{ columns: tableProps.columns, dataSource }} />
+        </Divider>
         <Table {...tableProps} bordered {...{ loading, dataSource }} rowKey={(record) => record.CityName} />
       </section>
     </>

src/views/Sale_KPI.jsx

@@ -241,7 +241,7 @@ const Sale_KPI = () => {
               <TableExportBtn label={'sales kpi'} {...{ columns: columnsForExport, dataSource: dataForExport }} />
             </Divider>
             <Table
-              sticky
+              sticky={{ offsetHeader: 64 }}
               key={`salesTradeTable`}
               loading={loading}
               columns={columns}

src/views/SalesCustomerCareRegular.jsx

@@ -1,10 +1,10 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import { Table, Row, Col, Divider, Button, Switch } from 'antd';
+import { Table, Row, Col, Divider, Switch, Space, Tabs } from 'antd';
 import SearchForm from '../components/search/SearchForm';
-import { TableExportBtn } from './../components/Data';
+import { TableExportBtn, VSTag } from './../components/Data';
-import { uniqWith, groupBy } from './../utils/commons';
+import { fixTo2Decimals, isEmpty } from './../utils/commons';
 
 // 注意TdCell要提到DataTable作用域外声明
 const TdCell = (tdprops) => {
@@ -16,14 +16,15 @@ const TdCell = (tdprops) => {
 const SalesCustomerCareRegular = (props) => {
   const { date_picker_store: searchFormStore, customer_store } = useContext(stores_Context);
   const { formValues, formValuesToSub, siderBroken } = searchFormStore;
-  const { sales_regular_data: pageData } = customer_store;
+  const { pivotData: pageData } = customer_store.sales_regular_data;
 
-  const allOPI1 = uniqWith(
+  const pivotOptions = [{key: 'operatorName', label: '顾问'}, {key: 'country', label: '国家'}];
-    pageData.data.map((rr) => ({ text: rr.operatorName, value: rr.operatorName })),
+  const [pivotRow, setPivotRow] = useState('operatorName');
-    (a, b) => JSON.stringify(a) === JSON.stringify(b)
+
-  ).sort((a, b) => a.text.localeCompare(b.text));
+  const onTabsChange = (key) => {
+    setPivotRow(key);
+  };
 
-  const [OPIFilters, setOPIFilters] = useState([]);
   const [dataSource, setDataSource] = useState([]);
   const [ifmerge, setIfmerge] = useState(false);
   const [dataForExport, setDataForExport] = useState([]);
@@ -31,32 +32,42 @@ const SalesCustomerCareRegular = (props) => {
 
   useEffect(() => {
     if ( ! ifmerge) {
-      // const allOPI1 = uniqWith(
+      setDataSource(pageData[pivotRow].data);
-      //   pageData.data.map((rr) => ({ text: rr.operatorName, value: rr.operatorName })),
+      setDataForExport(
-      //   (a, b) => JSON.stringify(a) === JSON.stringify(b)
+        pageData[pivotRow].data.reduce(
-      // ).sort((a, b) => a.text.localeCompare(b.text));
+          (r, c) =>
-      // setOPIFilters(allOPI1);
+            r.concat(
-      setDataSource(pageData.data);
+              [{ ...c, children: undefined }],
-      setDataForExport(pageData.data.reduce((r, c) => r.concat([{...c, children: undefined}], c.children.map(ele => ({...ele, operatorName: ele.rowLabel}))), []));
+              c.children
-      setDataForExportS(pageData.data.reduce((r, c) => r.concat([{...c, children: undefined}]), []));
+                .reduce((rc, ele) => rc.concat([{ ...ele, [pivotRow]: ele.rowLabel }], [{ ...ele.vsData, [pivotRow]: ele.vsData.rowLabel, vsData: {} }]), [])
+                .filter((ele) => ele.SumOrder !== undefined)
+            ),
+          []
+        )
+      );
+      setDataForExportS(pageData[pivotRow].data.reduce((r, c) => r.concat([{...c, children: undefined}], [{ ...c.vsData, vsData: {} }]), []).filter((ele) => ele.SumOrder !== undefined));
     } else {
-      // const allOPI1 = uniqWith(
+      setDataSource(pageData[pivotRow].mergedData);
-      //   pageData.mergedData.map((rr) => ({ text: rr.operatorName, value: rr.operatorName })),
+      setDataForExport(
-      //   (a, b) => JSON.stringify(a) === JSON.stringify(b)
+        pageData[pivotRow].mergedData.reduce(
-      // ).sort((a, b) => a.text.localeCompare(b.text));
+          (r, c) =>
-      // setOPIFilters(allOPI1);
+            r.concat(
-      setDataSource(pageData.mergedData);
+              [{ ...c, children: undefined }],
-      setDataForExport(pageData.mergedData.reduce((r, c) => r.concat([{...c, children: undefined}], c.children.map(ele => ({...ele, operatorName: ele.rowLabel}))), []));
+              c.children.reduce((rc, ele) => rc.concat([{ ...ele, operatorName: ele.rowLabel }], [{ ...ele.vsData, operatorName: ele.vsData.rowLabel, vsData: {} }]), [])
-      setDataForExportS(pageData.mergedData.reduce((r, c) => r.concat([{...c, children: undefined}]), []));
+              .filter((ele) => ele.SumOrder !== undefined)
+            ),
+          []
+        )
+      );
+      setDataForExportS(pageData[pivotRow].mergedData.reduce((r, c) => r.concat([{...c, children: undefined}], [{ ...c.vsData, vsData: {} }]), []).filter((ele) => ele.SumOrder !== undefined));
     }
 
-    return () => {
+    return () => {};
-
+  }, [ifmerge, pageData[pivotRow].data]);
-    };
-  }, [ifmerge, pageData.data]);
 
 
   const rowColumns = [
+    { title: '日期区间', dataIndex: 'seriesKey', key: 'seriesKey' },
     { title: '顾问', dataIndex: 'operatorName', key: 'operatorName' },
     { title: '订单号', dataIndex: 'o_id', key: 'o_id' },
     { title: '预定日期', dataIndex: 'applyDate', key: 'applyDate' },
@@ -73,19 +84,27 @@ const SalesCustomerCareRegular = (props) => {
     { title: '来源', dataIndex: 'SourceType', key: 'SourceType' },
     { title: '页面类型', dataIndex: 'COLI_LineClass', key: 'COLI_LineClass' },
   ];
+  const calcDelta = (r, key) => !isEmpty(Number(r.vsData[key])) ? fixTo2Decimals((Number(r[key] || 0) - Number(r.vsData[key]))/Number(r.vsData[key]) *100) : null;
+  const renderVS = (v, r, key) => {
+    const delta = calcDelta(r, key);
+    return <>
+      <Space direction={'vertical'}>
+        <span>
+          {v || 0}
+          {r.vsData[key] ? <span type="secondary"> VS {r.vsData[key]}</span> : null}
+        </span>
+        {delta && <VSTag diffPercent={delta} />}
+      </Space>
+    </>;
+  };
   const columns = [
-    { key: 'operatorName', title: '顾问', dataIndex: 'operatorName', width: '6em', filters: allOPI1, onFilter: (value, record) => value.includes(record.operatorName), filterSearch: true },
+    { key: 'SumOrder', title: '订单数', dataIndex: 'SumOrder', width: '5em', render: (v, r) => renderVS(v, r, 'SumOrder') },
-    { key: 'SumOrder', title: '订单数', dataIndex: 'SumOrder', width: '5em' },
+    { key: 'ConfirmOrder', title: '成交数', dataIndex: 'ConfirmOrder', width: '5em', render: (v, r) => renderVS(v, r, 'ConfirmOrder') },
-    { key: 'ConfirmOrder', title: '成交数', dataIndex: 'ConfirmOrder', width: '5em' },
+    { key: 'ConfirmPersonNum', title: '✔人数(SUM)', dataIndex: 'ConfirmPersonNum', width: '5em', render: (v, r) => renderVS(v, r, 'ConfirmPersonNum')  },
-    { key: 'ConfirmPersonNum', title: '✔人数(SUM)', dataIndex: 'ConfirmPersonNum', width: '5em' },
+    { key: 'confirmTourdays', title: '✔团天数(AVG)', dataIndex: 'confirmTourdays', width: '5em', render: (v, r) => renderVS(v, r, 'confirmTourdays')  },
-    { key: 'confirmTourdays', title: '✔团天数(AVG)', dataIndex: 'confirmTourdays', width: '5em' },
+    { key: 'SumML', title: '预计毛利', dataIndex: 'SumML', width: '5em', render: (v, r) => renderVS(v, r, 'SumML')  }, // SumML_txt
-    { key: 'SumML', title: '预计毛利', dataIndex: 'SumML', width: '5em' }, // SumML_txt
+    { key: 'ConfirmRates', title: '成交率', dataIndex: 'ConfirmRates_txt', width: '5em', render: (v, r) => renderVS(v, r, 'ConfirmRates')  },
-    { key: 'ConfirmRates', title: '成交率', dataIndex: 'ConfirmRates_txt', width: '5em' },
+    { key: 'SingleML', title: '单团毛利', dataIndex: 'SingleML', width: '5em', render: (v, r) => renderVS(v, r, 'SingleML')  },
-    { key: 'SingleML', title: '单团毛利', dataIndex: 'SingleML', width: '5em' },
-    { key: 'action', title: '', width: '5em', render: (_, r) => {
-      const rowChildren = pageData.rawData.filter(ele => ele.operatorName === r.operatorName);
-      return r.hasOld ? <TableExportBtn btnTxt='明细' label={`老客户明细-${r.operatorName}`} {...{ columns: rowColumns, dataSource: rowChildren }} /> : null;
-    } },
   ];
   return (
     <>
@@ -95,52 +114,87 @@ const SalesCustomerCareRegular = (props) => {
             defaultValue={{
               initialValue: {
                 ...formValues,
-                ...pageData.searchValues,
+                ...customer_store.sales_regular_data.searchValues,
               },
-              shows: ['DateType', 'DepartmentList', 'WebCode', 'dates'],
+              shows: ['DateType', 'DepartmentList', 'WebCode', 'dates', 'IncludeTickets'],
               fieldProps: {
                 DepartmentList: { show_all: false, mode: 'multiple' },
                 WebCode: { show_all: false, mode: 'multiple' },
-                dates: { hide_vs: true },
+                dates: { hide_vs: false },
               },
             }}
             onSubmit={(_err, obj, form, str) => {
               customer_store.setSearchValues(obj, form, 'sales_regular_data');
-              customer_store.get_sales_regular_data(obj);
+              customer_store.get_sales_regular_data_vs(obj, pivotRow);
-              // MeetingDataStore.setSearchValues(form);
-              // dataRefresh(obj);
             }}
           />
         </Col>
       </Row>
-      <h2>销售-老客户, 含推荐</h2>
+      <Tabs
-      <Divider orientation="right" plain>
+        type={'card'}
-        {pageData.data.length > 0 && (
+        activeKey={pivotRow}
-          <Switch
+        onChange={onTabsChange}
-            unCheckedChildren="各账户"
+        items={pivotOptions.map((ele) => {
-            checkedChildren="合并"
+          return {
-            key={'openOrMerge'}
+            ...ele,
-            checked={ifmerge}
+            children: (
-            onChange={(e) => {
+              <>
-              setIfmerge(e);
+                {/* <h2>{ele.label}-老客户, 含推荐</h2> */}
-            }}
+                <>
-          />
+                  <Divider orientation={'right'} style={{backgroundColor: '#fff', margin: 0, padding: '10px 0'}} >
-        )}
+                  {pageData[pivotRow].data.length > 0 && pivotRow === 'operatorName' && (
-        <Divider type={'vertical'} />
+                    <Switch
-        <TableExportBtn btnTxt='导出明细' label={`${formValuesToSub.Date1}-销售.老客户-明细`} {...{ columns: rowColumns, dataSource: pageData.rawData }} />
+                      unCheckedChildren="各账户"
-        <Divider type={'vertical'} />
+                      checkedChildren="合并"
-        <TableExportBtn btnTxt='导出下表-展开' label={`${formValuesToSub.Date1}-销售.老客户`} {...{ columns, dataSource: dataForExport }} />
+                      key={'openOrMerge'}
-        <Divider type={'vertical'} />
+                      checked={ifmerge}
-        <TableExportBtn btnTxt='导出下表-总' label={`${formValuesToSub.Date1}-销售.老客户`} {...{ columns, dataSource: dataForExportS }} />
+                      onChange={(e) => {
-      </Divider>
+                        setIfmerge(e);
-      <Table
+                      }}
-        sticky
+                    />
-        dataSource={dataSource}
+                  )}
-        loading={pageData.loading}
+                  <Divider type={'vertical'} />
-        columns={columns}
+                  <TableExportBtn
-        pagination={false}
+                    btnTxt="导出明细"
-        // defaultExpandAllRows
+                    label={`${formValuesToSub.Date1}-老客户-明细`}
-        // expandable={{ defaultExpandAllRows: true, expandedRowKeys: pageData.data.map((ele) => ele.key),  }}
+                    {...{ columns: [{ title: ele.label, dataIndex: pivotRow, key: pivotRow }, ...rowColumns], dataSource: pageData[pivotRow].rawData }}
+                  />
+                  <Divider type={'vertical'} />
+                  <TableExportBtn
+                    btnTxt="导出下表-展开"
+                    label={`${formValuesToSub.Date1}-${ele.label}.老客户`}
+                    {...{ columns: [{ title: ele.label, dataIndex: pivotRow, key: pivotRow }, ...columns], dataSource: dataForExport }}
+                  />
+                  <Divider type={'vertical'} />
+                  <TableExportBtn
+                    btnTxt="导出下表-总"
+                    label={`${formValuesToSub.Date1}-${ele.label}.老客户`}
+                    {...{ columns: [{ title: ele.label, dataIndex: pivotRow, key: pivotRow }, ...columns], dataSource: dataForExportS }}
+                  />
+                  </Divider>
+                </>
+                <Table
+                  sticky
+                  dataSource={dataSource}
+                  loading={pageData[ele.key].loading}
+                  columns={[
+                    {
+                      key: ele.key,
+                      title: ele.label,
+                      dataIndex: ele.key,
+                      width: '6em',
+                      filters: pageData[ele.key].filterColValues,
+                      onFilter: (value, record) => value.includes(record[ele.key]),
+                      filterSearch: true,
+                    },
+                    ...columns,
+                  ]}
+                  pagination={false}
+                />
+              </>
+            ),
+          };
+        })}
       />
     </>
   );