feat: 统计分布
parent
a56ff400e7
commit
2cac464363
@ -0,0 +1,61 @@
|
|||||||
|
import { makeAutoObservable, runInAction, toJS } from 'mobx';
|
||||||
|
import * as req from '../utils/request';
|
||||||
|
import { isEmpty, sortBy } from '../utils/commons';
|
||||||
|
|
||||||
|
const modelMapper = {
|
||||||
|
'tourDays': { url: '/service-Analyse2/GetTradeApartByTourDays' },
|
||||||
|
'PML': { url: '/service-Analyse2/GetTradeApartByPML' },
|
||||||
|
'ConfirmDays': { url: '/service-Analyse2/GetTradeApartByConfirmDays' },
|
||||||
|
'ApplyDays': { url: '/service-Analyse2/GetTradeApartByApplyDays' },
|
||||||
|
'PersonNum': { url: '/service-Analyse2/GetTradeApartByPersonNum' },
|
||||||
|
'destination': { url: '/service-Analyse2/GetTradeApartByDestination' },
|
||||||
|
'GlobalDestination': { url: '/service-Analyse2/GetTradeApartByGlobalDestination' },
|
||||||
|
};
|
||||||
|
class Distribution {
|
||||||
|
constructor(appStore){
|
||||||
|
this.appStore = appStore;
|
||||||
|
makeAutoObservable(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getData(param){
|
||||||
|
const mkey = this.curTab;
|
||||||
|
this[mkey] = { loading: true, dataSource: [] };
|
||||||
|
const json = await req.fetchJSON(modelMapper[mkey].url, param);
|
||||||
|
if (json.errcode === 0) {
|
||||||
|
runInAction(() => {
|
||||||
|
const dataLength = json.result.length;
|
||||||
|
this[mkey].loading = false;
|
||||||
|
this[mkey].originData = json.result;
|
||||||
|
this[mkey].dataSource = dataLength > 20 ? json.result.slice(0, 30) : json.result;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return this[mkey];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
resetData() {
|
||||||
|
this.tourDays = { loading: false, dataSource: [] };
|
||||||
|
this.PML = { loading: false, dataSource: [] };
|
||||||
|
this.ConfirmDays = { loading: false, dataSource: [] };
|
||||||
|
this.ApplyDays = { loading: false, dataSource: [] };
|
||||||
|
this.PersonNum = { loading: false, dataSource: [] };
|
||||||
|
this.destination = { loading: false, dataSource: [] };
|
||||||
|
this.GlobalDestination = { loading: false, dataSource: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
curTab = 'tourDays';
|
||||||
|
setCurTab(v) {
|
||||||
|
this.curTab = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
pageLoading = false;
|
||||||
|
|
||||||
|
tourDays = { loading: false, dataSource: [] };
|
||||||
|
PML = { loading: false, dataSource: [] };
|
||||||
|
ConfirmDays = { loading: false, dataSource: [] };
|
||||||
|
ApplyDays = { loading: false, dataSource: [] };
|
||||||
|
PersonNum = { loading: false, dataSource: [] };
|
||||||
|
destination = { loading: false, dataSource: [] };
|
||||||
|
GlobalDestination = { loading: false, dataSource: [] };
|
||||||
|
}
|
||||||
|
export default Distribution;
|
@ -0,0 +1,118 @@
|
|||||||
|
import { useContext, useEffect, useMemo } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { stores_Context } from '../config';
|
||||||
|
import { Row, Col, Spin, Space, Radio, Tabs, Table } from 'antd';
|
||||||
|
import { RingProgress } from '@ant-design/plots';
|
||||||
|
import SearchForm from './../components/search/SearchForm';
|
||||||
|
import "./kpi.css";
|
||||||
|
import { empty } from '../utils/commons';
|
||||||
|
|
||||||
|
const apartOptions = [
|
||||||
|
{ key: 'tourDays', value: 'tourDays', label: '团天数', },
|
||||||
|
{ key: 'PML', value: 'PML', label: '单团毛利', },
|
||||||
|
{ key: 'ConfirmDays', value: 'ConfirmDays', label: '成团周期', },
|
||||||
|
{ key: 'ApplyDays', value: 'ApplyDays', label: '预定周期', },
|
||||||
|
{ key: 'PersonNum', value: 'PersonNum', label: '人等', },
|
||||||
|
{ key: 'destination', value: 'destination', label: '国内目的地', },
|
||||||
|
{ key: 'GlobalDestination', value: 'GlobalDestination', label: '海外目的地', },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
|
||||||
|
const { formValues, formValuesToSub } = searchFormStore;
|
||||||
|
const { curTab } = DistributionStore;
|
||||||
|
const pageRefresh = (obj) => {
|
||||||
|
DistributionStore.getData({
|
||||||
|
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),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (empty(DistributionStore[curTab].dataSource)) {
|
||||||
|
pageRefresh();
|
||||||
|
}
|
||||||
|
}, [curTab]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
DistributionStore.resetData();
|
||||||
|
return () => {};
|
||||||
|
}, [formValuesToSub]);
|
||||||
|
|
||||||
|
|
||||||
|
const onTabsChange = (tab) => {
|
||||||
|
DistributionStore.setCurTab(tab);
|
||||||
|
};
|
||||||
|
const RingProgressConfig = {
|
||||||
|
height: 60,
|
||||||
|
width: 60,
|
||||||
|
autoFit: false,
|
||||||
|
// percent: Number(_)/100,
|
||||||
|
color: ['#5B8FF9', '#E8EDF3'],
|
||||||
|
};
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '',
|
||||||
|
dataIndex: 'label',
|
||||||
|
},
|
||||||
|
{ title: '团数', dataIndex: 'ConfirmOrder'},
|
||||||
|
{ 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 (
|
||||||
|
<>
|
||||||
|
<Row gutter={16} style={{ margin: '-16px -8px' }}>
|
||||||
|
{/* style={{ margin: '-16px -8px', padding: 0 }} */}
|
||||||
|
<Col className="gutter-row" span={24}>
|
||||||
|
<SearchForm
|
||||||
|
defaultValue={{
|
||||||
|
initialValue: {
|
||||||
|
...formValues,
|
||||||
|
},
|
||||||
|
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'years'],
|
||||||
|
fieldProps: {
|
||||||
|
DepartmentList: { show_all: true },
|
||||||
|
WebCode: { show_all: true },
|
||||||
|
years: { hide_vs: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onSubmit={(_err, obj, form, str) => {
|
||||||
|
pageRefresh(obj);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</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
|
||||||
|
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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
Loading…
Reference in New Issue