|
|
|
|
@ -1,98 +1,79 @@
|
|
|
|
|
import { Card, Col, DatePicker, Row, Tabs } from 'antd';
|
|
|
|
|
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
|
|
|
|
|
import type moment from 'moment';
|
|
|
|
|
import { Column } from '@ant-design/charts';
|
|
|
|
|
import { Card, Col, Row, Tabs } from 'antd';
|
|
|
|
|
import { DualAxes } from '@ant-design/plots';
|
|
|
|
|
|
|
|
|
|
import numeral from 'numeral';
|
|
|
|
|
import type { DataItem } from '../data.d';
|
|
|
|
|
import styles from '../style.less';
|
|
|
|
|
|
|
|
|
|
type RangePickerValue = RangePickerProps<moment.Moment>['value'];
|
|
|
|
|
// import { useRequest } from 'react';
|
|
|
|
|
import { getCredentialPersonStatistics } from '../service';
|
|
|
|
|
import cookie from 'react-cookies';
|
|
|
|
|
import { useRequest } from 'umi';
|
|
|
|
|
export type TimeType = 'today' | 'week' | 'month' | 'year';
|
|
|
|
|
|
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
|
|
|
|
|
|
const { TabPane } = Tabs;
|
|
|
|
|
// const credentialPersonStatistics = await getCredentialPersonStatistics({
|
|
|
|
|
// province_id: cookie.load('background_province_id')
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const SalesCard = () => {
|
|
|
|
|
const { loading: courseBrowseTimesLoading, data: credentialPersonStatistics = null } = useRequest(() => getCredentialPersonStatistics({
|
|
|
|
|
province_id: cookie.load('background_province_id')
|
|
|
|
|
}), {
|
|
|
|
|
formatResult: (result) => {
|
|
|
|
|
return result.list;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const data = []
|
|
|
|
|
// console.log(credentialPersonStatistics, 'credentialPersonStatistics')
|
|
|
|
|
|
|
|
|
|
const SalesCard = ({
|
|
|
|
|
rangePickerValue,
|
|
|
|
|
salesData,
|
|
|
|
|
isActive,
|
|
|
|
|
handleRangePickerChange,
|
|
|
|
|
loading,
|
|
|
|
|
selectDate,
|
|
|
|
|
}: {
|
|
|
|
|
rangePickerValue: RangePickerValue;
|
|
|
|
|
isActive: (key: TimeType) => string;
|
|
|
|
|
salesData: DataItem[];
|
|
|
|
|
loading: boolean;
|
|
|
|
|
handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
|
|
|
|
|
selectDate: (key: TimeType) => void;
|
|
|
|
|
}) => (
|
|
|
|
|
<Card loading={loading} bordered={false} bodyStyle={{ padding: 0, marginBottom: '24px' }}>
|
|
|
|
|
credentialPersonStatistics?.map((e, i) => {
|
|
|
|
|
|
|
|
|
|
data.push({
|
|
|
|
|
city: e.city_name,
|
|
|
|
|
count: e.count,
|
|
|
|
|
credential_rate: e.credential_rate
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const config = {
|
|
|
|
|
data: [data, data],
|
|
|
|
|
xField: 'city',
|
|
|
|
|
yField: ['count', 'credential_rate'],
|
|
|
|
|
yAxis: [{
|
|
|
|
|
title: {
|
|
|
|
|
text: '资质证书人数',
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
title: {
|
|
|
|
|
text: '证书比例',
|
|
|
|
|
},
|
|
|
|
|
}],
|
|
|
|
|
geometryOptions: [
|
|
|
|
|
{
|
|
|
|
|
geometry: 'column',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
geometry: 'line',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
lineWidth: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
return (<Card bordered={false} bodyStyle={{ padding: 0, marginBottom: '24px' }}>
|
|
|
|
|
<div className={styles.salesCard}>
|
|
|
|
|
<Tabs
|
|
|
|
|
tabBarExtraContent={
|
|
|
|
|
<div className={styles.salesExtraWrap}>
|
|
|
|
|
<div className={styles.salesExtra}>
|
|
|
|
|
<a className={isActive('today')} onClick={() => selectDate('today')}>
|
|
|
|
|
今日
|
|
|
|
|
</a>
|
|
|
|
|
<a className={isActive('week')} onClick={() => selectDate('week')}>
|
|
|
|
|
本周
|
|
|
|
|
</a>
|
|
|
|
|
<a className={isActive('month')} onClick={() => selectDate('month')}>
|
|
|
|
|
本月
|
|
|
|
|
</a>
|
|
|
|
|
<a className={isActive('year')} onClick={() => selectDate('year')}>
|
|
|
|
|
本年
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<RangePicker
|
|
|
|
|
value={rangePickerValue}
|
|
|
|
|
onChange={handleRangePickerChange}
|
|
|
|
|
style={{ width: 256 }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
size="large"
|
|
|
|
|
tabBarStyle={{ marginBottom: 24 }}
|
|
|
|
|
>
|
|
|
|
|
<TabPane tab="培训情况" key="train">
|
|
|
|
|
<TabPane tab="各市州资质证书情况" key="train">
|
|
|
|
|
<Row>
|
|
|
|
|
<Col xl={24} lg={24} md={24} sm={24} xs={24}>
|
|
|
|
|
<div className={styles.salesBar}>
|
|
|
|
|
<Column
|
|
|
|
|
height={300}
|
|
|
|
|
forceFit
|
|
|
|
|
data={salesData as any}
|
|
|
|
|
xField="x"
|
|
|
|
|
yField="y"
|
|
|
|
|
xAxis={{
|
|
|
|
|
visible: true,
|
|
|
|
|
title: {
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
yAxis={{
|
|
|
|
|
visible: true,
|
|
|
|
|
title: {
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
title={{
|
|
|
|
|
visible: true,
|
|
|
|
|
text: '销售趋势',
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
meta={{
|
|
|
|
|
y: {
|
|
|
|
|
alias: '销售量',
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<DualAxes {...config} />
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
@ -101,6 +82,7 @@ const SalesCard = ({
|
|
|
|
|
</Tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
);
|
|
|
|
|
)
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default SalesCard;
|
|
|
|
|
|
