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

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}:&nbsp;&nbsp;&nbsp;</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;