perf: 统计分布: 导出

src/components/Data.jsx

@@ -35,7 +35,7 @@ export const TableExportBtn = (props) => {
   const output_name = `${props.label}`;
   const [columnsMap, setColumnsMap] = useState([]);
   useEffect(() => {
-    const flatCols = props.columns.flatMap((v, k) => (v.children ? v.children.map((vc) => ({ ...vc, title: `${v.title}-${vc.title || ''}` })) : v)).filter(c => c.title);
+    const flatCols = props.columns.flatMap((v, k) => (v.children ? v.children.map((vc) => ({ ...vc, title: `${v?.titleX || v.title}-${vc.title || ''}` })) : v)).filter(c => c.title);
     // console.log('flatCols', flatCols);
     setColumnsMap(flatCols);
 

src/views/Distribution.jsx

@@ -1,12 +1,12 @@
 import { useContext, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import { Row, Col, Spin, Tabs, Table, Space, Typography } from 'antd';
+import { Row, Col, Spin, Tabs, Table, Space, Typography, Divider } 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 { VSTag, TableExportBtn } from './../components/Data';
 import MixYnQ from './../components/MixYnQ';
 
 import './kpi.css';
@@ -73,7 +73,7 @@ export default observer(() => {
     innerRadius: 0.90,
   };
   const columns = [
-    { title: '', dataIndex: 'label' },
+    { title: '#', dataIndex: 'label' },
     {
       title: '团数',
       dataIndex: 'ConfirmOrder',
@@ -132,36 +132,38 @@ export default observer(() => {
     },
     {
       title: () => <><div>去年同期</div><div>{dateStringY}</div></>,
+      titleX: ['去年同期', dateStringY], // 给导出按钮用
       align: 'center',
       children: [
         {
           title: '团数占比',
           width: 90,
-          dataIndex: 'ConfirmOrderPercent',
+          dataIndex: ['resultToY', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent',
           render: (v, r) => r.resultToY.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.ConfirmOrderPercent / 100} /> : '-',
         },
         {
           title: '业绩占比',
           width: 90,
-          dataIndex: 'SumMLPercent',
+          dataIndex: ['resultToY', 'SumMLPercent'], // 'SumMLPercent',
           render: (v, r) => r.resultToY.SumMLPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.SumMLPercent / 100} /> : '-',
         },
       ],
     },
     {
       title: () => <><div>上个时间段</div><div>{dateStringQ}</div></>,
+      titleX: ['上个时间段', dateStringY], // 给导出按钮用
       align: 'center',
       children: [
         {
           title: '团数占比',
           width: 90,
-          dataIndex: 'ConfirmOrderPercent',
+          dataIndex: ['resultToQ', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent',
           render: (v, r) => r.resultToQ.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.ConfirmOrderPercent / 100} /> : '-',
         },
         {
           title: '业绩占比',
           width: 90,
-          dataIndex: 'SumMLPercent',
+          dataIndex: ['resultToQ', 'SumMLPercent'], // 'SumMLPercent',
           render: (v, r) => r.resultToQ.SumMLPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.SumMLPercent / 100} /> : '-',
         },
       ],
@@ -205,6 +207,9 @@ export default observer(() => {
               children: (
                 <Spin spinning={DistributionStore.pageLoading}>
                   <MixYnQ {...chartsConfig} dataSource={DistributionStore[curTab].dataSource} />
+                  <Divider orientation="right" plain>
+                    <TableExportBtn label={`统计分布-${ele.label}`} {...{ columns, dataSource: DistributionStore[curTab].dataSource }} />
+                  </Divider>
                   <Table
                     id="table_to_xlsx_sale"
                     dataSource={DistributionStore[curTab].dataSource}