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
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;
|