|
|
|
@ -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>
|
|
|
|
</>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
YCC
2 years ago