|
|
/*
|
|
|
* @Description: 实践课程统计页面
|
|
|
* @Author: tangjiang
|
|
|
* @Github:
|
|
|
* @Date: 2020-01-10 09:33:45
|
|
|
* @LastEditors : tangjiang
|
|
|
* @LastEditTime : 2020-02-14 17:51:48
|
|
|
*/
|
|
|
import './index.scss';
|
|
|
import React, { useEffect } from 'react';
|
|
|
import StaticNumberAndTxt from './StaticNumberAndTxt';
|
|
|
import DisplayTableData from './DisplayTableData';
|
|
|
import { Tabs, Tooltip } from 'antd';
|
|
|
import { connect } from 'react-redux';
|
|
|
import moment from 'moment';
|
|
|
import actions from '../../../redux/actions';
|
|
|
const { TabPane } = Tabs;
|
|
|
const App = (props) => {
|
|
|
|
|
|
const {
|
|
|
subject_info,
|
|
|
other_info,
|
|
|
total,
|
|
|
staticList,
|
|
|
changeParams,
|
|
|
initTotal
|
|
|
} = props;
|
|
|
// const [datas, setDatas] = useState([]);
|
|
|
// const [sortedInfo, setSortedInfo] = useState({});
|
|
|
// console.log(props);
|
|
|
const {pathId} = props.match.params;
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
dataIndex: 'id',
|
|
|
key: 'id',
|
|
|
render: (text, record, i) => i + 1,
|
|
|
width: 100,
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '使用单位',
|
|
|
// key: 'school_name',
|
|
|
dataIndex: 'school_name',
|
|
|
// width: 300,
|
|
|
className: 'overflow_hidden',
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
// title: '使用课堂/个',
|
|
|
title: () => (<Tooltip title="将该课程使用到课堂的数量">使用课堂</Tooltip>),
|
|
|
// key: 'course_count',
|
|
|
width: 150,
|
|
|
dataIndex: 'course_count',
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.course_count - b.course_count,
|
|
|
// sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order
|
|
|
// sorter: (a, b) => true,
|
|
|
// sorter: (a, b) => a.age - b.age
|
|
|
},
|
|
|
{
|
|
|
title: () => (<Tooltip title="课堂的学生总数（去掉重复）">课堂学生</Tooltip>),
|
|
|
// key: 'student_count',
|
|
|
width:150,
|
|
|
dataIndex: 'student_count',
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.student_count - b.student_count,
|
|
|
// sorter: (a, b) => a.age - b.age
|
|
|
},
|
|
|
{
|
|
|
title: () => (<Tooltip title="选用该课程实训的个数（去重）">选用实训/个</Tooltip>),
|
|
|
width: 150,
|
|
|
// key: 'choice_shixun_num',
|
|
|
dataIndex: 'choice_shixun_num',
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.choice_shixun_num - b.choice_shixun_num,
|
|
|
// sorter: (a, b) => a.age - b.age
|
|
|
},
|
|
|
{
|
|
|
title: () => (<Tooltip title="选用该课程实训的次数">选用实训/次</Tooltip>),
|
|
|
width: 150,
|
|
|
// key: 'choice_shixun_frequency',
|
|
|
dataIndex: 'choice_shixun_frequency',
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.choice_shixun_frequency - b.choice_shixun_frequency,
|
|
|
// sorter: (a, b) => a.bbb - b.bbb
|
|
|
}
|
|
|
];
|
|
|
const sxColumns = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
dataIndex: 'id',
|
|
|
render: (text, record, i) => i + 1,
|
|
|
width: 60,
|
|
|
align: 'center'
|
|
|
}, {
|
|
|
title: '章节',
|
|
|
dataIndex: 'stage',
|
|
|
width: 80,
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '实训名称',
|
|
|
dataIndex: 'shixun_name',
|
|
|
align: 'center',
|
|
|
// ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '关卡数',
|
|
|
dataIndex: 'challenge_count',
|
|
|
width: 100,
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '使用课堂',
|
|
|
dataIndex: 'course_count',
|
|
|
width: 110,
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.course_count - b.course_count
|
|
|
},
|
|
|
{
|
|
|
title: '使用单位',
|
|
|
dataIndex: 'school_count',
|
|
|
width: 110,
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.school_count - b.school_count
|
|
|
},
|
|
|
{
|
|
|
title: '使用人数',
|
|
|
dataIndex: 'used_count',
|
|
|
width: 110,
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.used_count - b.used_count
|
|
|
},
|
|
|
{
|
|
|
title: '通关人数',
|
|
|
dataIndex: 'passed_count',
|
|
|
width: 110,
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.passed_count - b.passed_count
|
|
|
},
|
|
|
{
|
|
|
title: '评测次数',
|
|
|
dataIndex: 'evaluate_count',
|
|
|
width: 110,
|
|
|
align: 'center',
|
|
|
sorter: (a, b) => a.evaluate_count - b.evaluate_count
|
|
|
},
|
|
|
{
|
|
|
title: '通关平均时间',
|
|
|
dataIndex: 'passed_ave_time',
|
|
|
width: 140,
|
|
|
align: 'center',
|
|
|
render: (text) => (text && moment(text).format('HH:mm:ss')) || '-',
|
|
|
sorter: (a, b) => a.passed_ave_time - b.passed_ave_time
|
|
|
}
|
|
|
];
|
|
|
const stColumns = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
dataIndex: 'id',
|
|
|
render: (text, record, i) => i + 1,
|
|
|
width: 60,
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '姓名',
|
|
|
dataIndex: 'username',
|
|
|
align: 'center',
|
|
|
width: 200
|
|
|
},
|
|
|
{
|
|
|
title: '通关实训数',
|
|
|
dataIndex: 'passed_myshixun_count',
|
|
|
align: 'center',
|
|
|
with: 170,
|
|
|
render: (val) => val + '',
|
|
|
sorter: (a, b) => a.passed_myshixun_count - b.passed_myshixun_count
|
|
|
},
|
|
|
{
|
|
|
title: '完成关卡',
|
|
|
dataIndex: 'passed_games_count',
|
|
|
align: 'center',
|
|
|
with: 170,
|
|
|
render: (val) => val + '',
|
|
|
sorter: (a, b) => a.passed_games_count - b.passed_games_count
|
|
|
},
|
|
|
{
|
|
|
title: '代码行',
|
|
|
dataIndex: 'code_line_count',
|
|
|
align: 'center',
|
|
|
with: 170,
|
|
|
render: (val) => val + '',
|
|
|
sorter: (a, b) => a.code_line_count - b.code_line_count
|
|
|
},
|
|
|
{
|
|
|
title: '评测次数',
|
|
|
dataIndex: 'evaluate_count',
|
|
|
align: 'center',
|
|
|
with: 170,
|
|
|
render: (val) => val + '',
|
|
|
sorter: (a, b) => a.evaluate_count - b.evaluate_count
|
|
|
},
|
|
|
{
|
|
|
title: '所用时间',
|
|
|
dataIndex: 'cost_time',
|
|
|
align: 'center',
|
|
|
// with: 180,
|
|
|
render: (text) => (text && moment(text).format('HH:mm:ss')) || '-',
|
|
|
sorter: (a, b) => a.cost_time - b.cost_time
|
|
|
}
|
|
|
];
|
|
|
|
|
|
useEffect(() => {
|
|
|
changeParams({
|
|
|
page: 1
|
|
|
});
|
|
|
pathId && staticList(pathId);
|
|
|
}, []);
|
|
|
|
|
|
const handleFetchData = () => {
|
|
|
pathId && staticList(pathId);
|
|
|
}
|
|
|
|
|
|
// const {
|
|
|
// study_count,
|
|
|
// course_study_count,
|
|
|
// initiative_study,
|
|
|
// passed_count,
|
|
|
// course_used_count,
|
|
|
// school_used_count
|
|
|
// } = subject_info;
|
|
|
|
|
|
const maps = {
|
|
|
1: 'subject_info', // 实践课程使用情况
|
|
|
2: 'shixun_info', // 实训使用情况
|
|
|
3: 'user_info' // 用户使用情况
|
|
|
};
|
|
|
|
|
|
const handleTabChange = (key) => {
|
|
|
const type = maps[+key];
|
|
|
// console.log(type);
|
|
|
const params = {
|
|
|
page: 1,
|
|
|
type: type
|
|
|
}
|
|
|
// 恢复初始值
|
|
|
changeParams(params);
|
|
|
initTotal();
|
|
|
pathId && staticList(pathId);
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<div className="static_wrap">
|
|
|
<div className="ant-spin-container">
|
|
|
<div className="educontent">
|
|
|
<section className="static_section_header">
|
|
|
<div className="header_title">
|
|
|
<span className="title-p">学习统计</span>
|
|
|
<span className="title-sub"></span>
|
|
|
</div>
|
|
|
<div className="header-number header-flex">
|
|
|
<StaticNumberAndTxt
|
|
|
count={subject_info===null?0:subject_info.study_count} // 总数
|
|
|
txt={'学习总人数'} // 文字描述
|
|
|
desc={'学习该课程的全部人数（学习总人数=课堂学习人数+自主学习人数）'}
|
|
|
/>
|
|
|
<StaticNumberAndTxt
|
|
|
count={subject_info===null?0:subject_info.course_study_count} // 总数
|
|
|
txt={'课堂学习人数'} // 文字描述
|
|
|
desc={'通过课堂学习该课程的人数'}
|
|
|
/>
|
|
|
<StaticNumberAndTxt
|
|
|
count={subject_info===null?0:subject_info.initiative_study} // 总数
|
|
|
txt={'自主学习人数'} // 文字描述
|
|
|
desc={'通过自主学习该课程的人数'}
|
|
|
/>
|
|
|
<StaticNumberAndTxt
|
|
|
count={subject_info===null?0:subject_info.passed_count} // 总数
|
|
|
txt={'通关总人数'} // 文字描述
|
|
|
desc={'通关该课程所有实训的人数（去重。一个人数计算1次）'}
|
|
|
/>
|
|
|
<StaticNumberAndTxt
|
|
|
count={subject_info===null?0:subject_info.course_used_count} // 总数
|
|
|
txt={'使用课堂数'} // 文字描述
|
|
|
desc={'使用该课程的课堂数量'}
|
|
|
/>
|
|
|
<StaticNumberAndTxt
|
|
|
count={subject_info===null?0:subject_info.school_used_count} // 总数
|
|
|
txt={'使用单位数'} // 文字描述
|
|
|
desc={'使用该课程的单位数量（包括自主学习者所在单位）'}
|
|
|
/>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section className="static_section_table">
|
|
|
<Tabs defaultActiveKey="1" onChange={handleTabChange} style={{ paddingBottom: '15px'}}>
|
|
|
<TabPane tab="课堂使用情况" key="1">
|
|
|
<DisplayTableData
|
|
|
columns={columns}
|
|
|
datas={other_info}
|
|
|
total={total}
|
|
|
fetchData={handleFetchData}
|
|
|
/>
|
|
|
</TabPane>
|
|
|
<TabPane tab="实际使用情况" key="2">
|
|
|
<DisplayTableData
|
|
|
columns={sxColumns}
|
|
|
datas={other_info}
|
|
|
total={total}
|
|
|
fetchData={handleFetchData}
|
|
|
/>
|
|
|
</TabPane>
|
|
|
<TabPane tab="学习情况" key="3">
|
|
|
<DisplayTableData
|
|
|
columns={stColumns}
|
|
|
datas={other_info}
|
|
|
total={total}
|
|
|
fetchData={handleFetchData}
|
|
|
/>
|
|
|
</TabPane>
|
|
|
</Tabs>
|
|
|
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
const mapStateToProps = (state) => {
|
|
|
const { staticReducer: {subject_info, other_info, total} } = state;
|
|
|
return {
|
|
|
subject_info,
|
|
|
other_info,
|
|
|
total
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
|
staticList: (id) => dispatch(actions.staticList(id)),
|
|
|
changeParams: (params) => dispatch(actions.changeParams(params)),
|
|
|
initTotal: () => dispatch(actions.initTotal())
|
|
|
});
|
|
|
|
|
|
export default connect(
|
|
|
mapStateToProps,
|
|
|
mapDispatchToProps
|
|
|
)(App);
|
|
|
// export default App;
|
