统计分布: 业绩的输出格式

feature/2.0-sales-trade
Lei OT 2 years ago
parent 9b982aa243
commit 47609219fb

@ -1,31 +1,31 @@
import { useContext, useEffect, useMemo } from 'react'; import { useContext, useEffect } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { stores_Context } from '../config'; import { stores_Context } from '../config';
import { Row, Col, Spin, Space, Radio, Tabs, Table } from 'antd'; import { Row, Col, Spin, Tabs, Table } from 'antd';
import { RingProgress } from '@ant-design/plots'; import { RingProgress } from '@ant-design/plots';
import SearchForm from './../components/search/SearchForm'; import SearchForm from './../components/search/SearchForm';
import "./kpi.css";
import { empty } from '../utils/commons'; import { empty } from '../utils/commons';
import { dataFieldAlias } from '../libs/ht';
import './kpi.css';
const apartOptions = [ const apartOptions = [
{ key: 'tourDays', value: 'tourDays', label: '团天数', }, { key: 'tourDays', value: 'tourDays', label: '团天数' },
{ key: 'PML', value: 'PML', label: '单团毛利', }, { key: 'PML', value: 'PML', label: '单团毛利' },
{ key: 'ConfirmDays', value: 'ConfirmDays', label: '成团周期', }, { key: 'ConfirmDays', value: 'ConfirmDays', label: '成团周期' },
{ key: 'ApplyDays', value: 'ApplyDays', label: '预定周期', }, { key: 'ApplyDays', value: 'ApplyDays', label: '预定周期' },
{ key: 'PersonNum', value: 'PersonNum', label: '人等', }, { key: 'PersonNum', value: 'PersonNum', label: '人等' },
{ key: 'destination', value: 'destination', label: '国内目的地', }, { key: 'destination', value: 'destination', label: '国内目的地' },
{ key: 'GlobalDestination', value: 'GlobalDestination', label: '海外目的地', }, { key: 'GlobalDestination', value: 'GlobalDestination', label: '海外目的地' },
]; ];
export default observer((props) => { export default observer(() => {
const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context); const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
const { formValues, formValuesToSub } = searchFormStore; const { formValues, formValuesToSub } = searchFormStore;
const { curTab } = DistributionStore; const { curTab } = DistributionStore;
const pageRefresh = (obj) => { const pageRefresh = (obj) => {
DistributionStore.getData({ DistributionStore.getApartData({
DateType: 'applyDate',
Date1: searchFormStore.start_date.startOf('year').format('YYYY-MM-DD'),
Date2: searchFormStore.end_date.endOf('year').format('YYYY-MM-DD 23:59'),
...(obj || formValuesToSub), ...(obj || formValuesToSub),
}); });
}; };
@ -41,7 +41,6 @@ export default observer((props) => {
return () => {}; return () => {};
}, [formValuesToSub]); }, [formValuesToSub]);
const onTabsChange = (tab) => { const onTabsChange = (tab) => {
DistributionStore.setCurTab(tab); DistributionStore.setCurTab(tab);
}; };
@ -49,69 +48,62 @@ export default observer((props) => {
height: 60, height: 60,
width: 60, width: 60,
autoFit: false, autoFit: false,
// percent: Number(_)/100,
color: ['#5B8FF9', '#E8EDF3'], color: ['#5B8FF9', '#E8EDF3'],
}; };
const columns = [ const columns = [
{ { title: '', dataIndex: 'label' },
title: '', { title: '团数', dataIndex: 'ConfirmOrder' },
dataIndex: 'label', { title: '业绩', dataIndex: 'SumML', render: (v) => dataFieldAlias.SumML.formatter(v) },
}, { title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
{ title: '团数', dataIndex: 'ConfirmOrder'}, { title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
{ title: '业绩', dataIndex: 'SumML', render1: (v) => `1`},
{ title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v/100} /> },
{ title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v/100} />},
]; ];
return ( return (
<> <>
<Row gutter={16} style={{ margin: '-16px -8px' }}> <Row gutter={16} style={{ margin: '-16px -8px' }}>
{/* style={{ margin: '-16px -8px', padding: 0 }} */}
<Col className="gutter-row" span={24}> <Col className="gutter-row" span={24}>
<SearchForm <SearchForm
defaultValue={{ defaultValue={{
initialValue: { initialValue: {
...formValues, ...formValues,
}, },
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'years'], shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
fieldProps: { fieldProps: {
DepartmentList: { show_all: true }, DepartmentList: { show_all: true },
WebCode: { show_all: true }, WebCode: { show_all: true },
years: { hide_vs: true }, dates: { hide_vs: true },
}, },
}} }}
onSubmit={(_err, obj, form, str) => { onSubmit={(_err, obj) => {
pageRefresh(obj); pageRefresh(obj);
}} }}
/> />
</Col> </Col>
</Row> </Row>
<section>
<Tabs
onChange={onTabsChange}
type="card"
items={apartOptions.map((ele, i) => {
// const ObjectItemPanel = objectComponents[ele.key];
return {
...ele,
children: (
<Spin spinning={DistributionStore.pageLoading}>
{/* <ObjectItemPanel title={ele.label} {...{ curObject, onSearchSubmit, objects: retObjects }} /> */}
<Table <section>
id="table_to_xlsx_sale" <Tabs
dataSource={DistributionStore[curTab].dataSource} onChange={onTabsChange}
columns={columns} type="card"
size="small" items={apartOptions.map((ele) => {
rowKey={(record) => record.label} return {
loading={DistributionStore[curTab].loading} ...ele,
pagination={false} children: (
scroll={{ x: '100%' }} <Spin spinning={DistributionStore.pageLoading}>
/> <Table
</Spin> id="table_to_xlsx_sale"
), dataSource={DistributionStore[curTab].dataSource}
}; columns={columns}
})} size="small"
/> rowKey={(record) => record.label}
loading={DistributionStore[curTab].loading}
pagination={false}
scroll={{ x: '100%' }}
/>
</Spin>
),
};
})}
/>
</section> </section>
</> </>
); );

Loading…
Cancel
Save