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.

102 lines
3.3 KiB

//import { InfoCircleOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/charts';
import { Col, Row, } from 'antd';
import numeral from 'numeral';
import { ChartCard, } from './Charts';
// import type { SubjectAndCourseNumberStatistics } from '../data.d';
//import styles from '../style.less';
import { useRequest } from 'umi';
import { subjectAndCourseNumberStatistics, trainNumberBySubjectStatistics } from '../service';
const IntroduceRow = () => {
const { loading: subjectAndCourseLoading, data: subjectAndCourseData = null } = useRequest(subjectAndCourseNumberStatistics); // 主题数、课程数统计
const { loading: trainNumberBySubjectLoading, data: trainNumberBySubjectData = null } = useRequest(trainNumberBySubjectStatistics); // 主题数、课程数统计
console.log('subjectAndCourseData::', subjectAndCourseData);
console.log('trainNumberBySubjectData::', trainNumberBySubjectData);
return (
<Row gutter={24}>
<Col xs={6} sm={6} md={6} lg={6} xl={6}>
<ChartCard
bordered={false}
loading={subjectAndCourseLoading}
title="主题数"
action={false}
total={numeral(subjectAndCourseData?.subject_numbers || 0).format('0,0')}
footer={false}
//contentHeight={150}
style={{ flex: 1, marginBottom: 24, height: 120 }}
/>
<ChartCard
bordered={false}
loading={subjectAndCourseLoading}
title="课程数"
action={false}
total={numeral(subjectAndCourseData?.course_numbers || 0).format('0,0')}
footer={false}
//contentHeight={150}
style={{ flex: 1, marginBottom: 24, height: 120 }}
/>
</Col>
<Col xs={18} sm={18} md={18} lg={18} xl={18}>
<ChartCard
bordered={false}
loading={trainNumberBySubjectLoading}
title="培训情况"
action={false}
total={false}
footer={false}
// contentHeight={300}
style={{ marginBottom: 24 }}
>
<Column
height={202}
forceFit
data={trainNumberBySubjectData?.subject_train_list || [] as any}
xField="subject_name"
yField="train_number"
tooltip={{
formatter: (name, value: number) => {
// const {name, value} = args;
console.log('args', name)
return { name: '关联培训数量', value: value };
}
}}
xAxis={{
visible: true,
title: {
text: '主题名称',
visible: false,
},
label: {
interval: 0,//横轴信息全部显示
rotate: 0.3,//-30度角倾斜显示 \
autoEllipsis: true,
style: {
textAlign: 'left'
}
}
}}
yAxis={{
visible: true,
title: {
text: '数量',
visible: false,
},
}}
title={{
visible: false,
style: {
fontSize: 14,
},
}}
/>
</ChartCard>
</Col>
</Row>
);
}
export default IntroduceRow;