You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.4 KiB
132 lines
3.4 KiB
import { Card, Col, Row, Tabs } from 'antd';
|
|
import { DualAxes } from '@ant-design/plots';
|
|
|
|
import styles from '../style.less';
|
|
// 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 { 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')
|
|
|
|
credentialPersonStatistics?.map((e, i) => {
|
|
|
|
data.push({
|
|
city: e.city_name,
|
|
count: e.count,
|
|
credential_rate: e.credential_rate?e.credential_rate:0
|
|
})
|
|
})
|
|
|
|
const config = {
|
|
data: [data, data],
|
|
xField: 'city',
|
|
yField: ['count', 'credential_rate'],
|
|
yAxis: [{
|
|
title: {
|
|
text: '资质证书人数',
|
|
},
|
|
}, {
|
|
title: {
|
|
text: '证书比例',
|
|
},
|
|
label: {
|
|
formatter: (val) => `${val}%`,
|
|
},
|
|
}],
|
|
tooltip: {
|
|
customContent: (title, items) => {
|
|
return (
|
|
<>
|
|
<h5 style={{ marginTop: 16 }}>{title}</h5>
|
|
<ul style={{ paddingLeft: 0 }}>
|
|
{items?.map((item, index) => {
|
|
const { name, value, color } = item;
|
|
return (
|
|
<li
|
|
key={item.year}
|
|
className="g2-tooltip-list-item"
|
|
data-index={index}
|
|
style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}
|
|
>
|
|
<span className="g2-tooltip-marker" style={{ backgroundColor: color }}></span>
|
|
<span
|
|
style={{ display: 'inline-flex', flex: 1, justifyContent: 'space-between' }}
|
|
>
|
|
<span style={{ margiRight: 16 }}>{name}: </span>
|
|
<span className="g2-tooltip-list-item-value">{value}{index===0?'':'%'}</span>
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
geometryOptions: [
|
|
{
|
|
geometry: 'column',
|
|
},
|
|
{
|
|
geometry: 'line',
|
|
lineStyle: {
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
],
|
|
meta: {
|
|
city: {
|
|
alias: '类别',
|
|
},
|
|
count: {
|
|
alias: '资质证书人数',
|
|
},
|
|
credential_rate: {
|
|
alias: '证书比例',
|
|
},
|
|
}
|
|
};
|
|
return (<Card bordered={false} bodyStyle={{ padding: 0, marginBottom: '24px' }}>
|
|
<div className={styles.salesCard}>
|
|
<Tabs
|
|
size="large"
|
|
tabBarStyle={{ marginBottom: 24 }}
|
|
>
|
|
<TabPane tab="各市州资质证书情况" key="train">
|
|
<Row>
|
|
<Col xl={24} lg={24} md={24} sm={24} xs={24}>
|
|
<div className={styles.salesBar} style={{marginRight:'2rem'}}>
|
|
<DualAxes {...config} />
|
|
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</TabPane>
|
|
|
|
</Tabs>
|
|
</div>
|
|
</Card>
|
|
)
|
|
};
|
|
|
|
export default SalesCard;
|