educoder/public/react/src/modules/courses/statistics/Statistics.js

import React,{ Component } from "react";
import {Table, Pagination,Tooltip,Spin, Row, Col ,Tabs} from "antd";
import { WordsBtn,on, off, trigger ,getImageUrl} from 'educoder';
import {BrowserRouter as Router,Route,Switch,Link} from 'react-router-dom';
import axios from'axios';
import './Statistics.css';
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
		}
	}

	componentDidMount() {
 		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,[list[0].id],sort);
				}
			}
		}).catch((error) => {
			console.log(error);

		})
	}

	getwork_scoredata=(page,group_ids,sort)=>{
		let courseId=this.props.match.params.coursesId;
		let url=`/courses/${courseId}/work_score.json`;
		let data={
			limit:20,
			page:page,
			group_ids:group_ids,
			sort:sort
		}
		axios.get(url,{params:
			data
		}).then((result) => {
			if (result) {
				this.setState({
					bomdata:result.data.course_members,
					bomisSpin:false
				})
			}
		}).catch((error) => {
			console.log(error);
			this.setState({
				bomisSpin:false,
			})
		})
	}


	 callback=(key)=>{
		console.log(key);
	 }

	render(){
		let {nd1,nd2,nd3,data,bomdata,course_groups}=this.state;
		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
				}
			})}
		}

		// const columns = [
		// 	{
		// 		title: 'Name',
		// 		dataIndex: 'name',
		// 		sorter: true,
		// 		render: name => `${name.first} ${name.last}`,
		// 		width: '20%',
		// 	},
		// 	{
		// 		title: 'Gender',
		// 		dataIndex: 'gender',
		// 		filters: course_groups,
		// 		width: '20%',
		// 	},
		// 	{
		// 		title: 'Email',
		// 		dataIndex: 'email',
		// 	},
		// ];


		// console.log(bomdata)


		//common_score: 0
		// course_group: "威风威风急急急"
		// exercise_score: "0.0"
		// graduation_score: 0
		// group_score: 0
		// practice_score: 3232
		// total_score: 3232
		// user_login: "p40793521"
		// user_name: "李明霞"


		return(
			<React.Fragment  >
				<div>

					<div className="edu-back-white">
						<Spin size="large" spinning={this.state.topisSpin}>
						<p className="clearfix padding30">
							<Row gutter={24}>
								<Col>
									明星学员
								</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="https://test-newweb.educoder.net/images/educoder/huangguan.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>2th</Col>
											</Col>
										)
									}
								})}
								{data&&data.map((item,key)=>{
									if(key===0){
										return(
											<Col span={5} className={"Statisticscenter"}>
												<Col>{item.user_name}</Col>
												<Col>1th</Col>
											</Col>
										)
									}
								})}
								{data&&data.map((item,key)=>{
									if(key===2){
										return(
											<Col span={5} className={"Statisticscenter"}>
												<Col>{item.user_name}</Col>
												<Col>3th</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}>
						<Tabs  className="statisticsTabs" defaultActiveKey="1" onChange={this.callback}>
							<TabPane tab="学习成绩" key="1" className={"statisticsTabs1"}>
								{/*<Table*/}
									{/*columns={columns}*/}
									{/*dataSource={bomdata}*/}
									{/*onChange={this.handleTableChange}*/}
								{/*/>*/}
							</TabPane>
							<TabPane tab="课堂活跃度" key="2">
								Content of Tab Pane 2
							</TabPane>
						</Tabs>
						</Spin>
					</div>

				</div>
			</React.Fragment>
		)
	}
}
export default Statistics;