统计分布: 显示同比, 环比的占比数据

src/stores/Distribution.js

@@ -89,7 +89,18 @@ class Distribution {
     this.curTab = v;
   }
 
+  setFormDates(param) {
+    // 环比的参数: 计算上一个时间段
+    const [DateToQ1, DateToQ2] = [moment(param.Date1).subtract(moment(param.Date2).diff(param.Date1, 'days') + 1, 'days'), moment(param.Date1).subtract(1, 'days')];
+    // 同比的参数: 去年同期
+    const [DateToY1, DateToY2] = [moment(param.Date1).subtract(1, 'year'), moment(param.Date2).subtract(1, 'year')];
+    this.dateStringY = `${DateToY1.format(DATE_FORMAT)}~${DateToY2.format(DATE_FORMAT)}`;
+    this.dateStringQ = `${DateToQ1.format(DATE_FORMAT)}~${DateToQ2.format(DATE_FORMAT)}`;
+  }
+
   pageLoading = false;
+  dateStringY = '';
+  dateStringQ = '';
 
   detailData = { loading: false, dataSource: [] };
   scatterDays = [];
@@ -140,7 +151,7 @@ const calcDiff = ({ result, resultToY, resultToQ }) => {
       ConfirmOrderDiffY: resultMapped[row.key].ConfirmOrder - resultToYMapped[row.key].ConfirmOrder,
       ConfirmOrderDiffQ: resultMapped[row.key].ConfirmOrder - resultToQMapped[row.key].ConfirmOrder,
     };
-    return { ...resultMapped[row.key], ...diff };
+    return { ...resultMapped[row.key], ...diff, resultToY: resultToYMapped[row.key], resultToQ: resultToQMapped[row.key] };
   });
   // console.log(afterCalc, '==================');
   return afterCalc;

src/views/Distribution.jsx

@@ -26,7 +26,7 @@ const apartOptions = [
 export default observer(() => {
   const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
   const { formValues, formValuesToSub } = searchFormStore;
-  const { curTab } = DistributionStore;
+  const { curTab, dateStringQ, dateStringY } = DistributionStore;
 
   const pageRefresh = (obj) => {
     DistributionStore.getApartData({
@@ -41,6 +41,7 @@ export default observer(() => {
   }, [curTab]);
 
   useEffect(() => {
+    DistributionStore.setFormDates(formValuesToSub);
     DistributionStore.resetData();
     return () => {};
   }, [formValuesToSub]);
@@ -54,6 +55,19 @@ export default observer(() => {
     autoFit: false,
     color: ['#5B8FF9', '#E8EDF3'],
   };
+  const RingProgressConfigY = {
+    height: 50,
+    width: 50,
+    autoFit: false,
+    // color: ['#f6bd16', '#E8EDF3'],
+    color: ['#61ddaa', '#E8EDF3'], // #7cb305
+  };
+  const RingProgressConfigQ = {
+    height: 50,
+    width: 50,
+    autoFit: false,
+    color: ['#f6bd16', '#E8EDF3'],
+  };
   const columns = [
     { title: '', dataIndex: 'label' },
     {
@@ -112,6 +126,42 @@ export default observer(() => {
       dataIndex: 'SumMLPercent',
       render: (v, r) => <RingProgress {...RingProgressConfig} percent={v / 100} />,
     },
+    {
+      title: () => <><div>去年同期</div><div>{dateStringY}</div></>,
+      align: 'center',
+      children: [
+        {
+          title: '团数占比',
+          width: 90,
+          dataIndex: 'ConfirmOrderPercent',
+          render: (v, r) => <RingProgress {...RingProgressConfigY} percent={r.resultToY.ConfirmOrderPercent / 100} />,
+        },
+        {
+          title: '业绩占比',
+          width: 90,
+          dataIndex: 'SumMLPercent',
+          render: (v, r) => <RingProgress {...RingProgressConfigY} percent={r.resultToY.SumMLPercent / 100} />,
+        },
+      ],
+    },
+    {
+      title: () => <><div>上个时间段</div><div>{dateStringQ}</div></>,
+      align: 'center',
+      children: [
+        {
+          title: '团数占比',
+          width: 90,
+          dataIndex: 'ConfirmOrderPercent',
+          render: (v, r) => <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.ConfirmOrderPercent / 100} />,
+        },
+        {
+          title: '业绩占比',
+          width: 90,
+          dataIndex: 'SumMLPercent',
+          render: (v, r) => <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.SumMLPercent / 100} />,
+        },
+      ],
+    },
   ];
   return (
     <>