feat: 综合看板: 去年总数据对比

src/components/StatisticCard2.jsx

@@ -5,15 +5,16 @@ import { RingProgress, Progress, Bullet } from '@ant-design/plots';
 import RcResizeObserver from 'rc-resize-observer';
 import { stores_Context } from '../config';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
-import { Table } from 'antd';
+import { Table, Space } from 'antd';
 
 const { Statistic, Divider } = StatisticCard;
 
 export default observer((props) => {
-  const { icon, traditional, biz, kpiVal, originVal, ...extProps } = props;
+  const { icon, traditional, biz, kpiVal, originVal, diff, ...extProps } = props;
   const ValueIcon = props.icon;
-  const valueStyle = { color: (props?.VSrate || -1) < 0 ? '#3f8600' : '#cf1322' };
+  const valueStyle = { color: '#3f8600' };
-  const VSIcon = () => ((props?.VSrate || -1) < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
+  // const valueStyle = { color: (props?.VSrate || -1) < 0 ? '#3f8600' : '#cf1322' };
+  // const VSIcon = () => ((props?.VSrate || -1) < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
   // console.log(props, ';;;;');
   const [responsive, setResponsive] = useState(false);
   const showMulti = traditional.value && biz.value;
@@ -70,9 +71,16 @@ export default observer((props) => {
             valueStyle,
             ...extProps,
             value: props.valueSuffix ? `${props.value} ${props.valueSuffix}` : props.value,
-            prefix: <ValueIcon twoToneColor="#89B67F" />,
+            prefix: <ValueIcon twoToneColor={"#89B67F"} />,
+            description: (
+              <Space>
+                <Statistic title={diff.label} value={` ${diff.value}`} />
+                {diff.VSrate && <Statistic title="同比" value={`${diff.VSrate}%`} trend={diff.VSrate > 0 ? 'up' : 'down'} />}
+              </Space>
+            ),
           }}
           chart={showMulti ? <Bullet data={bulletData} {...bulletConfig} layout={'horizontal'} />: false}
+          footer={null}
         />
       </StatisticCard.Group>
     </RcResizeObserver>

src/stores/Trade.js

@@ -1,7 +1,9 @@
 import { makeAutoObservable, runInAction, toJS } from 'mobx';
 import * as req from '../utils/request';
+import moment from 'moment';
 import { isEmpty, sortBy, pick, merge, fixTo2Decimals, groupBy, sortKeys, fixToInt, cloneDeep } from '../utils/commons';
 import { dataFieldAlias } from './../libs/ht';
+import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from './../config';
 
 class Trade {
   constructor(rootStore) {
@@ -14,11 +16,15 @@ class Trade {
    */
   async fetchSummaryData(queryData) {
     this.summaryData.loading = true;
-    queryData.groupType = queryData?.groupType || 'overview';
+    const curQueryData = cloneDeep(queryData);
-    queryData.groupDateType = 'year';
+    curQueryData.groupType = curQueryData?.groupType || 'overview';
-    const multiData = await this.fetchTradeDataAll(cloneDeep(queryData));
+    curQueryData.groupDateType = 'year';
+    curQueryData.DateDiff1 = moment(curQueryData.Date1).subtract(1, 'year').format(DATE_FORMAT);
+    curQueryData.DateDiff2 = moment(curQueryData.Date2).subtract(1, 'year').format(SMALL_DATETIME_FORMAT);
+    const multiData = await this.fetchTradeDataAll((curQueryData));
       const { summary, traditional, biz } = multiData.result1;
-      // console.log(JSON.stringify(summary), 'mmmmmmmmmmm');
+      const { summary: summary2, traditional: traditional2, biz: biz2 } = multiData.result2;
+      // console.log(JSON.stringify(summary), 'mmmmmmmmmmm', multiData);
         const summaryData = {
           loading: false,
           dataSource: [
@@ -26,7 +32,8 @@ class Trade {
               title: '成团',col: 6,
               value: summary?.[0]?.ConfirmOrder,
               originVal: (summary?.[0]?.ConfirmOrder || 0),
-              valueSuffix: summary?.[0]?.ConfirmRates ? ` / ${summary?.[0]?.ConfirmRates} %` : undefined,
+              valueSuffix: undefined,
+              // valueSuffix: summary?.[0]?.ConfirmRates ? ` / ${summary?.[0]?.ConfirmRates} %` : undefined,
               // VSrate: summary?.[0]?.ConfirmOrderrate,
               KPIrate: summary?.[0]?.[dataFieldAlias.ConfirmOrder.nestkey.p],
               // hasKPI: !isEmpty(summary?.[0]?.[dataFieldAlias.ConfirmOrder.nestkey.p]),
@@ -35,6 +42,11 @@ class Trade {
               kpiVal: summary?.[0]?.[dataFieldAlias.ConfirmOrder.nestkey.v],
               traditional: { title: '传统', value: traditional?.[0]?.ConfirmOrder },
               biz: { title: '商务', value: biz?.[0]?.ConfirmOrder },
+              diff: {
+                label: summary2?.[0]?.groupDateVal || '对比',
+                value: summary2?.[0]?.ConfirmOrder || 0,
+                VSrate: summary2?.[0]?.ConfirmOrder ? fixTo2Decimals((summary?.[0]?.ConfirmOrder - summary2?.[0]?.ConfirmOrder)/summary2?.[0]?.ConfirmOrder*100) : null ,
+              },
             },
             {
               title: '毛利',col: 8,
@@ -46,6 +58,11 @@ class Trade {
               kpiVal: summary?.[0]?.[dataFieldAlias.SumML.nestkey.v],
               traditional: { title: '传统', value: (traditional?.[0]?.SumML || 0) },
               biz: { title: '商务', value: (biz?.[0]?.SumML || 0) },
+              diff: {
+                label: summary2?.[0]?.groupDateVal || '对比',
+                value: dataFieldAlias.SumML.formatter(summary2?.[0]?.SumML || 0),
+                VSrate: summary2?.[0]?.SumML ? fixTo2Decimals((summary?.[0]?.SumML - summary2?.[0]?.SumML)/summary2?.[0]?.SumML*100) : null ,
+              },
             },
             {
               title: '完成率',col: 5,
@@ -56,6 +73,11 @@ class Trade {
               kpiVal: 0 , // summary?.[0]?.[dataFieldAlias.SumML.nestkey.p],
               traditional: { title: '传统', value: traditional?.[0]?.[dataFieldAlias.SumML.nestkey.p] || 0, },
               biz: { title: '商务', value: biz?.[0]?.[dataFieldAlias.SumML.nestkey.p] || 0, },
+              diff: {
+                label: summary2?.[0]?.groupDateVal || '对比',
+                value: `${summary2?.[0]?.[dataFieldAlias.SumML.nestkey.p] || '-'}%`,
+                VSrate: null ,
+              },
             },
             {
               title: '人数', col: 5,
@@ -68,6 +90,11 @@ class Trade {
               // kpiVal: summary?.[0]?.[dataFieldAlias.SumPersonNum.nestkey.v],
               traditional: { title: '传统', value: traditional?.[0]?.SumPersonNum, },
               biz: { title: '商务', value: biz?.[0]?.SumPersonNum, },
+              diff: {
+                label: summary2?.[0]?.groupDateVal || '对比',
+                value: summary2?.[0]?.SumPersonNum,
+                VSrate: summary2?.[0]?.SumPersonNum ? fixTo2Decimals((summary?.[0]?.SumPersonNum - summary2?.[0]?.SumPersonNum)/summary2?.[0]?.SumPersonNum*100) : null ,
+              },
             },
           ],
         };
@@ -275,6 +302,7 @@ class Trade {
     {key: 'transactions', title: '营收', dataIndex: 'transactions', render: (v) => dataFieldAlias.transactions.formatter(v)},
   ], dataSource: [] };
 }
+
 export const parseMergeItem = ({traditional, biz}) => {
   return ['result1', 'result2'].reduce((res, resKey) => {
     const mergeItem = {