统计分布: 显示同比, 环比. todo: 输入参数

src/components/Data.jsx

@@ -1,6 +1,12 @@
 import { Tag } from 'antd';
 import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
 
+/**
+ * @property diffPercent
+ * @property diffData
+ * @property data1
+ * @property data2
+ */
 export const VSTag = (props) => {
   const { diffPercent, diffData, data1, data2 } = props;
   const CaretIcon = parseInt(diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
@@ -9,11 +15,11 @@ export const VSTag = (props) => {
     '-'
   ) : (
     <span>
-      <div>
+      {/* <div>
         {data1} vs {data2}
-      </div>
+      </div> */}
       <Tag icon={<CaretIcon />} color={tagColor}>
-        {diffPercent} {diffData}
+        {diffPercent} <span>%</span>
       </Tag>
     </span>
   );

src/stores/Distribution.js

@@ -1,6 +1,6 @@
 import { makeAutoObservable, runInAction, toJS } from 'mobx';
 import * as req from '../utils/request';
-import { isEmpty, pick, sortBy } from '../utils/commons';
+import { isEmpty, pick, sortBy, fixTo2Decimals } from '../utils/commons';
 
 const modelMapper = {
   'tourDays': { url: '/service-Analyse2/GetTradeApartByTourDays' },
@@ -25,13 +25,19 @@ class Distribution {
     this.pageLoading = true;
     const mkey = this.curTab;
     this[mkey] = { loading: true, dataSource: [] };
+    param.operator = param?.operator || -1;
+    param.DateToY1 = '2022-08-01'; // todo: 同比, 环比的参数
+    param.DateToY2 = '2022-08-31 23:59:59';
+    param.DateToQ1 = '2023-07-01'; // todo: 同比, 环比的参数
+    param.DateToQ2 = '2023-07-31 23:59:59';
     const json = await req.fetchJSON(modelMapper[mkey].url, param);
     if (json.errcode === 0) {
       runInAction(() => {
         const dataLength = json.result.length;
         this[mkey].loading = false;
         this[mkey].originData = json.result;
-        this[mkey].dataSource = dataLength > 20 ? json.result.slice(0, 30) : json.result;
+        const pickResult = dataLength > 20 ? json.result.slice(0, 30) : json.result;
+        this[mkey].dataSource = calcDiff({ result: pickResult, resultToY: json.resultToY, resultToQ: json.resultToQ});
         this.pageLoading = false;
       });
     }
@@ -88,4 +94,33 @@ class Distribution {
   GlobalDestination = { loading: false, dataSource: [] };
   destinationCountry = { loading: false, dataSource: [] };
 }
+
+/**
+ * 计算 同比, 环比
+ */
+const calcDiff = ({ result, resultToY, resultToQ }) => {
+  if (isEmpty(resultToY) || isEmpty(resultToQ)) {
+    // return result;
+  }
+  const resultMapped = result.reduce((r,v) => ({...r, [v.key]: v}), {});
+  const resultToYMapped = resultToY.reduce((r,v) => ({...r, [v.key]: v}), {});
+  const resultToQMapped = resultToQ.reduce((r,v) => ({...r, [v.key]: v}), {});
+  const afterCalc = result.map(row => {
+    const diff = {
+      SumMLY: resultToYMapped?.[row.key]?.SumML || 0,
+      SumMLToY: resultToYMapped?.[row.key]?.SumML ? fixTo2Decimals((row.SumML-(resultToYMapped[row.key].SumML))/(resultToYMapped[row.key].SumML)*100) : 0,
+      SumMLQ: resultToQMapped?.[row.key]?.SumML || 0,
+      SumMLToQ: resultToQMapped?.[row.key]?.SumML ? fixTo2Decimals((row.SumML-(resultToQMapped[row.key].SumML))/(resultToQMapped[row.key].SumML)*100) : 0,
+
+      ConfirmOrderY: resultToYMapped?.[row.key]?.ConfirmOrder || 0,
+      ConfirmOrderToY: resultToYMapped?.[row.key]?.ConfirmOrder ? fixTo2Decimals((row.ConfirmOrder-(resultToYMapped[row.key].ConfirmOrder))/(resultToYMapped[row.key].ConfirmOrder)*100) : 0,
+      ConfirmOrderQ: resultToQMapped?.[row.key]?.ConfirmOrder || 0,
+      ConfirmOrderToQ: resultToQMapped?.[row.key]?.ConfirmOrder ? fixTo2Decimals((row.ConfirmOrder-(resultToQMapped[row.key].ConfirmOrder))/(resultToQMapped[row.key].ConfirmOrder)*100) : 0,
+    };
+    return {...row, ...diff};
+  });
+  console.log(afterCalc, '==================');
+  return afterCalc;
+};
+
 export default Distribution;

src/views/Distribution.jsx

@@ -1,14 +1,17 @@
 import { useContext, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import { Row, Col, Spin, Tabs, Table } from 'antd';
+import { Row, Col, Spin, Tabs, Table, Space, Typography } from 'antd';
 import { RingProgress } from '@ant-design/plots';
 import SearchForm from './../components/search/SearchForm';
 import { empty } from '../utils/commons';
 import { dataFieldAlias } from '../libs/ht';
+import { VSTag } from './../components/Data';
 
 import './kpi.css';
 
+const { Text } = Typography;
+
 const apartOptions = [
   { key: 'tourDays', value: 'tourDays', label: '团天数' },
   { key: 'PML', value: 'PML', label: '单团毛利' },
@@ -53,10 +56,51 @@ export default observer(() => {
   };
   const columns = [
     { title: '', dataIndex: 'label' },
-    { title: '团数', dataIndex: 'ConfirmOrder' },
+    { title: '团数', dataIndex: 'ConfirmOrder', render: (v, r) => (
-    { title: '业绩', dataIndex: 'SumML', render: (v) => dataFieldAlias.SumML.formatter(v) },
+      <>
-    { title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
+        <Space size={'large'}>
-    { title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
+          <Text strong>{v}</Text>
+          <Space direction={'vertical'}>
+            <span>
+              <span>同比: </span> <VSTag diffPercent={r.ConfirmOrderToY} />
+            </span>
+            <span>
+              <span>环比: </span> <VSTag diffPercent={r.ConfirmOrderToQ} />
+            </span>
+          </Space>
+        </Space>
+      </>
+
+    ) },
+    {
+      title: '业绩',
+      dataIndex: 'SumML',
+      render: (v, r) => (
+        <>
+          <Space size={'large'}>
+            <Text strong>{dataFieldAlias.SumML.formatter(v)}</Text>
+            <Space direction={'vertical'}>
+              <span>
+                <span>同比: </span> <VSTag diffPercent={r.SumMLToY} />
+              </span>
+              <span>
+                <span>环比: </span> <VSTag diffPercent={r.SumMLToQ} />
+              </span>
+            </Space>
+          </Space>
+        </>
+      ),
+    },
+    {
+      title: '团数占比',
+      dataIndex: 'ConfirmOrderPercent',
+      render: (v, r) => <RingProgress {...RingProgressConfig} percent={v / 100} />,
+    },
+    {
+      title: '业绩占比',
+      dataIndex: 'SumMLPercent',
+      render: (v, r) => <RingProgress {...RingProgressConfig} percent={v / 100} />,
+    },
   ];
   return (
     <>
@@ -67,7 +111,7 @@ export default observer(() => {
               initialValue: {
                 ...formValues,
               },
-              shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
+              shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates', 'operator'],
               fieldProps: {
                 DepartmentList: { show_all: true },
                 WebCode: { show_all: true },