educoder/public/react/src/modules/courses/videostatistics/component/Studentstatistics.js

import React, {Component} from "react";
import '../../signin/css/signincdi.css';
import {Pagination,Table,Spin} from 'antd';
import {getImageUrl,sortDirections,formatSeconds} from 'educoder';
import axios from 'axios';
import LoadingSpin from "../../../../common/LoadingSpin";
import NoneDatas from "../../signin/component/NoneDatas";


//条目
class Studentstatistics extends Component {
	//条目组件
	constructor(props) {
		super(props);

		this.state = {
			columnsstu: [
				{
					title: '序号',
					dataIndex: 'number',
					key: 'number',
					align: "center",
					className: 'font-14',
					width: '90px',
					render: (text, record) => (
						<span style={{width: '90px'}}>{record.number}</span>
					),
				},
				{
					title: '视频名称',
					dataIndex: 'title',
					key: 'title',
					align: "center",
					className: 'font-14 maxnamewidth150s',
					width: '150px',
					render: (text, record) => (
						<span style={{width: '150px'}} className="maxnamewidth150s">
							<a className="maxnamewidth150s" style={{
								color:"#333333"
							}} title={record.title}>{record.title}</a>

						</span>
					),
				},
				{
					title: '观看次数（次）',
					dataIndex: 'feq',
					key: 'feq',
					align: "center",
					className: 'font-14',
					width: '98px',
					sorter: true,
					sortDirections: sortDirections,
					render: (text, record) => (
						<span style={{width: '98px'}}>{record.feq}</span>
					),
				},
				{
					title: '观看时长',
					dataIndex: 'total_duration',
					key: 'total_duration',
					align: "center",
					className: 'font-14 maxnamewidth100s',
					width: '100px',
					sorter: true,
					sortDirections: sortDirections,
					render: (text, record) => (
						<span style={{width: '100px'}} className="maxnamewidth100s">
										<a className="maxnamewidth100s" style={{
											color:"#333333"
										}} title={record.total_duration}>{record.total_duration}</a>

							</span>
					),
				},
				{
					title: '发布人',
					dataIndex: 'user_name',
					key: 'user_name',
					align: "center",
					className: 'font-14 maxnamewidth100s',
					width: '100px',
					render: (text, record) => (
						<span style={{width: '100px'}} className="maxnamewidth100s">
							<a className="maxnamewidth100s" style={{
								color:"#333333"
							}} title={record.user_name}>{record.user_name}</a>

						</span>
					),
				},
				{
					title: '是否看完',
					dataIndex: 'is_finished',
					key: 'is_finished',
					align: "center",
					className: 'font-14',
					width: '90px',
					render: (text, record) => (
						<span style={{width: '90px'}}>{record.is_finished === true ?
							<span style={{color: "#5091FF"}}>是</span> : <span style={{color: "#E02020"}}>否</span>}</span>
					),
				},
			],
			loading:false,
			data:[],
			page:1,
			limit:20,
			members_count:0,
			order:undefined,
		}
	}

	componentDidMount() {
		let data={
			page:1,
			order:this.state.order
		}
		this.togetdatas(data);

	}

	componentDidUpdate = (prevProps) => {


	}
	paginationonChange = (pageNumber) => {
		this.setState({
			page: pageNumber,
		})
		let data={
			page:pageNumber,
			order:this.state.order
		}
		this.togetdatas(data);
	}


	togetdatas(data){
		this.setState({
			loading:true
		})
		const CourseId=this.props.match.params.coursesId;
		let url=`/courses/${CourseId}/own_watch_histories.json`;
		axios.get(url,{params:data
		}).then((response) => {
			if (response) {
				if (response.data) {
					if (response.data.data.length > 0) {
						let datalists = [];
						for (var i = 0; i < response.data.data.length; i++) {
							datalists.push({
								number: (parseInt(this.state.page) - 1) * parseInt(this.state.limit) + (i + 1),
								title: response.data.data[i].title,
								user_name: response.data.data[i].user_name,
								is_finished: response.data.data[i].is_finished,
								total_duration:response.data.data[i].total_duration?formatSeconds(response.data.data[i].total_duration):0,
								feq:response.data.data[i].freq,
								start_at:response.data.data[i].start_at,
								end_at:response.data.data[i].end_at,
							})
						}

						this.setState({
							data: datalists,
							members_count: response.data.count,
						})
					} else {
						this.setState({
							data: [],
							members_count: response.data.count,
						})
					}
				} else {
					this.setState({
						data: [],
						members_count: response.data.count,
					})
				}


			}



			this.setState({
				loading:false
			})
		}).catch((error) => {
			this.setState({
				loading:false
			})
		});
	}


	//实训作业tbale 列表塞选数据
	table1handleChange = (pagination, filters, sorter) => {
		if (JSON.stringify(sorter) === "{}") {
			//没有选择
		} else {
			try {
				//学生学号排序
				if (sorter.columnKey === "feq"||sorter.columnKey === "total_duration") {
					let mysorder="";
					if (sorter.order === "ascend") {
						if(sorter.columnKey === "feq"){
							mysorder="feq-asc";
						}else{
							mysorder="total_duration-asc";

						}
						//升序
						let data={
							page:this.state.page,
							order:mysorder
						}
						this.togetdatas(data);
						this.setState({
							order: mysorder,
						})
					} else if (sorter.order === "descend") {
						if(sorter.columnKey === "feq"){
							mysorder="feq-desc";
						}else{
							mysorder="total_duration-desc";

						}
						//降序
						let data={
							page:this.state.page,
							order:mysorder
						}
						this.togetdatas(data);
						this.setState({
							order: mysorder,
						})
					}
				}
			} catch (e) {

			}

		}

	}



	render() {
		let {loading,data,columnsstu,page,members_count,limit}=this.state;
		return (
			<React.Fragment>
				<div className="ws100s  mt20">
					<div className="ws100s edu-back-white">
						<div className="ws100s teacherentrydivss pd15s">
							<div className="ws100s sortinxdirection">
								<div className="ws100s sptits font-18">统计列表</div>
							</div>

						</div>
						<style>
							{
								`
								 .ysltableo .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
									 padding: 10px 5px;
									}
								`
							}
						</style>

						<div className="ws100s ysltableo teacherentrydivs pdinstop0" style={{	minHeight: "400px"}}>
							{
								data&&data.length===0?
									<div style={{
										minHeight: "400px",
									}} className="ws100s">
										<NoneDatas></NoneDatas>
									</div>
									:	data&&data.length>0?
									<Spin spinning={loading}>
										<Table
											columns={columnsstu}
											dataSource={data}
											pagination={false}
											onChange={this.table1handleChange}
										/>
									</Spin>:
									<div style={{
										minHeight: "400px",
									}} className="ws100s">
										<NoneDatas></NoneDatas>
									</div>
							}


						</div>

					</div>

					<div className="mb30 clearfix educontent mt40 intermediatecenter">
						{
							data&&data.length>0?
								<Pagination showQuickJumper current={this.state.page} onChange={this.paginationonChange}
														pageSize={this.state.limit}
														total={this.state.members_count}></Pagination>
								:""
						}

					</div>
				</div>

			</React.Fragment>
		)
	}
}

export default Studentstatistics;