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.
585 lines
14 KiB
585 lines
14 KiB
import React,{ Component } from "react";
|
|
import {Table, Pagination,Tooltip,Spin, Row, Col ,Checkbox,Tabs,Menu, Dropdown, Icon,Input} from "antd";
|
|
import { WordsBtn,on, off, trigger ,getImageUrl,sortDirections} from 'educoder';
|
|
import axios from'axios';
|
|
import Dropdownbox from './Dropdownbox';
|
|
import Dynamiclist from './Dynamiclist';
|
|
import NoneData from "../../courses/coursesPublic/NoneData";
|
|
import './Statistics.css';
|
|
const qs = require('qs');
|
|
const { TabPane } = Tabs;
|
|
|
|
class Statistics extends Component{
|
|
constructor(props){
|
|
super(props);
|
|
this.state={
|
|
nd1:60,
|
|
nd2:40,
|
|
nd3:20,
|
|
data:undefined,
|
|
bomdata:undefined,
|
|
topisSpin:true,
|
|
bomisSpin:true,
|
|
sort:'desc',
|
|
course_groups:[],
|
|
page:1,
|
|
all_count:null,
|
|
activeKey:'1',
|
|
visible: false,
|
|
group_ids:[],
|
|
course_members:undefined
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getdatas()
|
|
}
|
|
|
|
getdatas=()=>{
|
|
let {page,group_ids,sort}=this.state;
|
|
let courseId=this.props.match.params.coursesId;
|
|
let url=`/courses/${courseId}/statistics.json`;
|
|
axios.get(url).then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
data:result.data.top_scores,
|
|
topisSpin:false
|
|
})
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
this.setState({
|
|
topisSpin:false,
|
|
})
|
|
})
|
|
let courseurl=`/courses/${courseId}/all_course_groups.json`;
|
|
axios.get(courseurl).then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
course_groups:result.data.course_groups
|
|
})
|
|
let list=result.data.course_groups;
|
|
// if(list.length>0){
|
|
// this.setState({
|
|
// group_ids:[list[0].id],
|
|
// })
|
|
// }
|
|
this.getwork_scoredata(page,undefined,sort);
|
|
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
getDynamiclistdatas=(group_ids)=>{
|
|
let {activeKey}=this.state;
|
|
if(activeKey==='2') {
|
|
let courseId = this.props.match.params.coursesId;
|
|
let url = `/courses/${courseId}/act_score.json`;
|
|
let data = {
|
|
group_ids: group_ids,
|
|
}
|
|
axios.get(url, {
|
|
params:
|
|
data
|
|
}).then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
course_members: result.data.course_members,
|
|
bomisSpin: false
|
|
})
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
this.setState({
|
|
bomisSpin: false,
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
getwork_scoredata=(page,group_ids,sort)=>{
|
|
let {activeKey}=this.state;
|
|
this.setState({
|
|
page:page,
|
|
sort:sort,
|
|
group_ids:this.props.isStudent()===true?undefined:group_ids,
|
|
bomisSpin:true,
|
|
})
|
|
|
|
if(activeKey==='1'){
|
|
let courseId=this.props.match.params.coursesId;
|
|
let url=`/courses/${courseId}/work_score.json`;
|
|
let data={
|
|
limit:20,
|
|
page:page,
|
|
group_ids:this.props.isStudent()===true?undefined:group_ids,
|
|
sort:sort
|
|
}
|
|
axios.get(url,{params:
|
|
data
|
|
}).then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
bomdata:result.data.course_members,
|
|
all_count:result.data.all_count,
|
|
bomisSpin:false
|
|
})
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
this.setState({
|
|
bomisSpin:false,
|
|
})
|
|
})
|
|
}else{
|
|
this.getDynamiclistdatas(group_ids)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
activeKey=(key)=>{
|
|
if(key==="1"){
|
|
let {page,group_ids,sort}=this.state;
|
|
// this.getdatas()
|
|
this.getwork_scoredata(page,group_ids,sort)
|
|
}else{
|
|
let{group_ids}=this.state;
|
|
this.getDynamiclistdatas(group_ids)
|
|
}
|
|
this.setState({
|
|
activeKey:key
|
|
})
|
|
}
|
|
|
|
|
|
PaginationCourse=(pageNumber)=>{
|
|
let {group_ids,sort}=this.state;
|
|
|
|
this.getwork_scoredata(pageNumber,group_ids,sort);
|
|
}
|
|
|
|
derivefun=(url)=>{
|
|
let{group_ids}=this.state;
|
|
let list=group_ids;
|
|
let urllist="";
|
|
if(list!=undefined&&list.length!=0)
|
|
list.map((item,key)=>{
|
|
if(key===0){
|
|
urllist=`group_id[]=${item}`
|
|
}else{
|
|
urllist=urllist+`&group_id[]=${item}`
|
|
}
|
|
|
|
})
|
|
this.props.slowDownload(`${url}?${urllist}`);
|
|
}
|
|
|
|
|
|
// 筛选
|
|
handleTableChange =(pagination, filters, data)=>{
|
|
let order=data.order;
|
|
let {page,group_ids}=this.state;
|
|
if(order==="descend"){
|
|
this.getwork_scoredata(page,group_ids,'desc')
|
|
}else{
|
|
this.getwork_scoredata(page,group_ids,'asc')
|
|
}
|
|
|
|
}
|
|
|
|
render(){
|
|
let {nd1,nd2,nd3,data,bomdata,course_members}=this.state;
|
|
|
|
const columns = [
|
|
{
|
|
title: this.props.isAdmin()===true?'序号':'排名',
|
|
dataIndex: 'index',
|
|
render: (text, record,index) => {
|
|
return this.props.isAdmin()===true?(this.state.page - 1) * 20 + index + 1:record.rank
|
|
}
|
|
},
|
|
{
|
|
title: '姓名',
|
|
dataIndex:'user_name',
|
|
className: 'maxnamewidth180',
|
|
render: (text, record) => (
|
|
<a title={record.user_name} className="maxnamewidth180">{record.user_name}</a>
|
|
)
|
|
},
|
|
{
|
|
title: '分班',
|
|
dataIndex: 'course_group',
|
|
className: 'maxnamewidth200',
|
|
render: (text, record) => (
|
|
<a title={record.course_group} className="maxnamewidth200">{record.course_group}</a>
|
|
)
|
|
},
|
|
{
|
|
title: '实训作业',
|
|
dataIndex: 'practice_score',
|
|
render: (text, record) => (
|
|
<span >{record.practice_score.toFixed(2)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: '普通作业',
|
|
dataIndex: 'common_score',
|
|
render: (text, record) => (
|
|
<span >{record.common_score.toFixed(2)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: '分组作业',
|
|
dataIndex: 'group_score',
|
|
render: (text, record) => (
|
|
<span >{record.group_score.toFixed(2)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: '毕设任务',
|
|
dataIndex: 'graduation_score',
|
|
render: (text, record) => (
|
|
<span >{record.graduation_score.toFixed(2)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: '试卷',
|
|
dataIndex: 'exercise_score',
|
|
render: (text, record) => (
|
|
<span >{record.exercise_score}</span>
|
|
)
|
|
},
|
|
{
|
|
title: '总成绩',
|
|
dataIndex: 'total_score',
|
|
sorter: this.props.isAdmin()===true?true:false,
|
|
defaultSortOrder: 'descend',
|
|
sortDirections: sortDirections,
|
|
render: (text, record) => (
|
|
<span >{record.total_score.toFixed(2)}</span>
|
|
)
|
|
},
|
|
];
|
|
|
|
|
|
let shixun_homeworktype=false;
|
|
let common_homeworktype=false;
|
|
let group_homeworktype=false;
|
|
let graduationtype=false;
|
|
let exercisetype=false;
|
|
let course_grouptype=false;
|
|
if(this.props&&this.props.course_modules!=undefined){
|
|
{this.props&&this.props.course_modules.map((item,key)=>{
|
|
if(item.type==="course_group"){
|
|
course_grouptype=true
|
|
}
|
|
|
|
if(item.type==="shixun_homework"){
|
|
shixun_homeworktype=true
|
|
}
|
|
if(item.type==="common_homework"){
|
|
common_homeworktype=true
|
|
}
|
|
if(item.type==="group_homework"){
|
|
group_homeworktype=true
|
|
} if(item.type==="graduation"){
|
|
graduationtype=true
|
|
}
|
|
|
|
if(item.type==="exercise"){
|
|
exercisetype=true
|
|
}
|
|
|
|
})}
|
|
}
|
|
|
|
|
|
if(course_grouptype===false){
|
|
columns.some((item,key)=> {
|
|
if (item.title === "分班") {
|
|
columns.splice(key, 1)
|
|
return true
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
if(shixun_homeworktype===false){
|
|
columns.some((item,key)=> {
|
|
if (item.title === "实训作业") {
|
|
columns.splice(key, 1)
|
|
return true
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
if(common_homeworktype===false){
|
|
columns.some((item,key)=> {
|
|
if (item.title === "普通作业") {
|
|
columns.splice(key, 1)
|
|
return true
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
if(group_homeworktype===false){
|
|
columns.some((item,key)=> {
|
|
if (item.title === "分组作业") {
|
|
columns.splice(key, 1)
|
|
return true
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
if(graduationtype===false){
|
|
columns.some((item,key)=> {
|
|
if (item.title === "毕设任务") {
|
|
columns.splice(key, 1)
|
|
return true
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
if(exercisetype===false){
|
|
columns.some((item,key)=> {
|
|
if (item.title === "试卷") {
|
|
columns.splice(key, 1)
|
|
return true
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
// console.log(this.props.isAdmin)
|
|
|
|
|
|
const operations = <React.Fragment>
|
|
{course_grouptype===false||this.state.course_groups.length===0?"":<Dropdownbox
|
|
{...this.props}
|
|
{...this.state}
|
|
postwork_scoredata={(group_idss)=>this.getwork_scoredata(1,group_idss,'desc')}
|
|
/>}
|
|
<a className={"ml20 ant-btn-link"} onClick={()=>this.derivefun(this.state.activeKey==="1"?`/courses/${this.props.match.params.coursesId}/export_member_scores_excel.xlsx`:`/courses/${this.props.match.params.coursesId}/export_member_act_score.xlsx`)}>导出</a>
|
|
</React.Fragment>;
|
|
return(
|
|
<React.Fragment>
|
|
<div className="edu-back-white">
|
|
<Spin size="large" spinning={this.state.topisSpin}>
|
|
<p className="clearfix padding30">
|
|
<Row gutter={24}>
|
|
<Col className={"Statisticsmxxy"}>
|
|
明星学员
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row type="flex" justify="center" align="bottom">
|
|
{data&&data.map((item,key)=>{
|
|
if(key===3){
|
|
return(
|
|
<Col span={3}>
|
|
<li className="pr rankingss">
|
|
<a href={`/users/${item.user_login}`} className="color-dark">
|
|
<img src={getImageUrl(`images/${item.avatar_url}`)}/>
|
|
</a>
|
|
</li>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
})}
|
|
{data&&data.map((item,key)=>{
|
|
if(key===1){
|
|
return(
|
|
<Col span={5}>
|
|
<li className="pr rankingss">
|
|
<a href={`/users/${item.user_login}`} className="color-dark">
|
|
<img src={getImageUrl(`images/${item.avatar_url}`)} className={"mb10"}/>
|
|
</a>
|
|
</li>
|
|
<Col className={`height-${nd2}`}>
|
|
|
|
</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
})}
|
|
|
|
{data&&data.map((item,key)=>{
|
|
if(key===0){
|
|
return(
|
|
<Col span={5} className={"relatives"}>
|
|
<li className="pr rankingss">
|
|
<img src={getImageUrl("images/educoder/imperialcrown.png")} className="huangguans mb5" />
|
|
<a href={`/users/${item.user_login}`} className="color-dark">
|
|
<img src={getImageUrl(`images/${item.avatar_url}`)} className={"mb10 mt5"}/>
|
|
</a>
|
|
</li>
|
|
<Col className={`height-${nd1}`}>
|
|
|
|
</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
})}
|
|
|
|
{data&&data.map((item,key)=>{
|
|
if(key===2){
|
|
return(
|
|
<Col span={5}>
|
|
<li className="pr rankingss">
|
|
<a href={`/users/${item.user_login}`} className="color-dark">
|
|
<img src={getImageUrl(`images/${item.avatar_url}`)} className={"mb10"}/>
|
|
</a>
|
|
</li>
|
|
<Col className={`height-${nd3}`}>
|
|
|
|
</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
})}
|
|
|
|
|
|
{data&&data.map((item,key)=>{
|
|
if(key===4){
|
|
return(
|
|
<Col span={3}>
|
|
<li className="pr rankingss">
|
|
<a href={`/users/${item.user_login}`} className="color-dark">
|
|
<img src={getImageUrl(`images/${item.avatar_url}`)}/>
|
|
</a>
|
|
</li>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
})}
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row className="mt10" type="flex" justify="center" align="bottom">
|
|
|
|
{data&&data.map((item,key)=>{
|
|
if(key===3){
|
|
return(
|
|
<Col span={3} className={"Statisticscenter"}>
|
|
<Col>{item.user_name}</Col>
|
|
<Col>4th</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
})}
|
|
{data&&data.map((item,key)=>{
|
|
if(key===1){
|
|
return(
|
|
<Col span={5} className={"Statisticscenter"}>
|
|
<Col>{item.user_name}</Col>
|
|
<Col>2nd</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
})}
|
|
{data&&data.map((item,key)=>{
|
|
if(key===0){
|
|
return(
|
|
<Col span={5} className={"Statisticscenter"}>
|
|
<Col>{item.user_name}</Col>
|
|
<Col>1st</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
})}
|
|
{data&&data.map((item,key)=>{
|
|
if(key===2){
|
|
return(
|
|
<Col span={5} className={"Statisticscenter"}>
|
|
<Col>{item.user_name}</Col>
|
|
<Col>3rd</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
})}
|
|
{data&&data.map((item,key)=>{
|
|
if(key===4){
|
|
return(
|
|
<Col span={3} className={"Statisticscenter"}>
|
|
<Col>{item.user_name}</Col>
|
|
<Col>5th</Col>
|
|
</Col>
|
|
)
|
|
}
|
|
})}
|
|
|
|
</Row>
|
|
</p>
|
|
</Spin>
|
|
</div>
|
|
|
|
<div className="mt20 edu-back-white">
|
|
<Spin size="large" spinning={this.state.bomisSpin}>
|
|
<style>{
|
|
`
|
|
.ant-select-dropdown-menu {
|
|
max-height: 320px;
|
|
}
|
|
.ant-tabs-extra-content{
|
|
margin-top:20px;
|
|
}
|
|
.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
|
|
padding: 16px 0px;
|
|
text-align: center;
|
|
}
|
|
`
|
|
}</style>
|
|
<Tabs className="statisticsTabs" activeKey={this.state.activeKey} onChange={this.activeKey} tabBarExtraContent={this.props.isAdmin()===true?operations:""}>
|
|
<TabPane tab="学习成绩" key="1" className={"statisticsTabs1"} >
|
|
{bomdata===undefined||bomdata===null?"":bomdata.length===0?<NoneData/>:<Table
|
|
columns={columns}
|
|
dataSource={bomdata}
|
|
pagination={false}
|
|
onChange={this.handleTableChange}
|
|
/>}
|
|
</TabPane>
|
|
<TabPane tab="课堂活跃度" key="2">
|
|
{course_members===undefined||course_members===null?"":course_members.length===0?<NoneData/>:<Dynamiclist
|
|
{...this.state}
|
|
{...this.props}
|
|
/>}
|
|
</TabPane>
|
|
</Tabs>
|
|
</Spin>
|
|
</div>
|
|
|
|
{this.state.all_count===undefined||this.state.all_count===null||this.state.activeKey==="2"?'':this.state.all_count >20&&this.props.isAdmin()===true?<div className="mb40 edu-txt-center padding20-30"
|
|
|
|
>
|
|
|
|
<Pagination
|
|
showQuickJumper
|
|
defaultCurrent={1}
|
|
pageSize={20}
|
|
total={this.state.all_count===undefined?0:this.state.all_count===null?0:this.state.all_count}
|
|
current={this.state.page}
|
|
onChange={this.PaginationCourse}
|
|
/>
|
|
|
|
</div>:""}
|
|
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
}
|
|
export default Statistics;
|