视频统计

public/react/src/modules/courses/signin/css/signincdi.css

@@ -394,6 +394,15 @@
     white-space:nowrap;
     cursor: default;
 }
+.maxnamewidth200s{
+    text-align: center;
+    width: 200px;
+    max-width:200px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    cursor: default;
+}
 .maxnamewidth100s{
     width: 100px;
     max-width: 100px;

public/react/src/modules/courses/videostatistics/component/Videostatisticscomtwo.js

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import '../../signin/css/signincdi.css';
-import {Pagination,Table} from 'antd';
-import {getImageUrl} from 'educoder';
+import {Pagination,Table, Menu, Dropdown} from 'antd';
+import {getImageUrl,sortDirections} from 'educoder';
 import axios from 'axios';
 import LoadingSpin from "../../../../common/LoadingSpin";
 import NoneDatas from "../../signin/component/NoneDatas";
@@ -60,6 +60,8 @@ class Videostatisticscom extends Component {
 					align: "center",
 					className: 'font-14 maxnamewidth150s',
 					width: '150px',
+					sorter: true,
+					sortDirections: sortDirections,
 					render: (text, record) => (
 						<span style={{width: '150px'}} className="maxnamewidth150s">{record.total_duration}</span>
 					),
@@ -71,6 +73,8 @@ class Videostatisticscom extends Component {
 					align: "center",
 					className: 'font-14 maxnamewidth100s',
 					width: '100px',
+					sorter: true,
+					sortDirections: sortDirections,
 					render: (text, record) => (
 						<span style={{width: '100px'}} className="maxnamewidth100s">{record.feq}</span>
 					),
@@ -101,10 +105,15 @@ class Videostatisticscom extends Component {
 			loading:false,
 			order:undefined,
 			course_groups:[],
+			fbbool:false,
+			groupsid:null,
 		}
 	}
 
 	componentDidMount() {
+		this.setState({
+			order:undefined
+		})
     if(this.props.isAdmin()){
     	//老师
 			const CourseId=this.props.match.params.coursesId;
@@ -218,11 +227,170 @@ class Videostatisticscom extends Component {
 			page: pageNumber,
 		})
 	}
+	fenbanone=()=>{
+		  if(this.state.fbbool===false){
+				this.setState({
+					fbbool:true
+				})
+			}else{
+				this.setState({
+					fbbool:false
+				})
+			}
+	}
+	setcourse_groups=(id)=>{
+		this.setState({
+			groupsid:id
+		})
+//老师
+		const CourseId=this.props.match.params.coursesId;
+
+		var data={};
+		if(id){
+			data={
+				id:CourseId,
+				page:this.state.page,
+				group_id:id
+			}
+
+		}else {
+			data={
+				id:CourseId,
+				page:this.state.page
+			}
+		}
+		this.getdatas(data);
+	}
+
+	//实训作业tbale 列表塞选数据
+	table1handleChange = (pagination, filters, sorter) => {
+		if (JSON.stringify(sorter) === "{}") {
+			//没有选择
+		} else {
+			try {
+				//学生学号排序
+				if (sorter.columnKey === "total_duration"||sorter.columnKey === "feq") {
+					let mysorder="";
+					if (sorter.order === "ascend") {
+						if(sorter.columnKey === "total_duration"){
+							mysorder="total_duration-asc";
+						}else{
+							mysorder="freq-asc";
+
+						}
+						//升序
+						let data={}
+						if(this.props.isAdmin()){
+							//老师
+							const CourseId=this.props.match.params.coursesId;
+							if(groupsid){
+								data={
+									id:CourseId,
+									page:this.state.page,
+									order:mysorder,
+								}
+							}else{
+								data={
+									id:CourseId,
+									page:this.state.page,
+									group_id:this.state.groupsid,
+									order:mysorder,
+								}
+							}
+						}else{
+							//学生
+							 data={
+								page:this.state.page,
+								 order:mysorder,
+							}
+						}
+
+						this.getdatas(data);
+						this.setState({
+							order: mysorder,
+						})
+					} else if (sorter.order === "descend") {
+						if(sorter.columnKey === "total_duration"){
+							mysorder="total_duration-desc";
+
+						}else{
+							mysorder="freq-desc";
+
+						}
+						//降序
+						let data={}
+						if(this.props.isAdmin()){
+							//老师
+							const CourseId=this.props.match.params.coursesId;
+							if(groupsid){
+								data={
+									id:CourseId,
+									page:this.state.page,
+									order:mysorder,
+								}
+							}else{
+								data={
+									id:CourseId,
+									page:this.state.page,
+									group_id:this.state.groupsid,
+									order:mysorder,
+								}
+							}
+						}else{
+							//学生
+							data={
+								page:this.state.page,
+								order:mysorder,
+							}
+						}
+
+						this.getdatas(data);
+						this.setState({
+							order:mysorder,
+						})
+
+
+					}
+				}
+			} catch (e) {
+
+			}
+
+		}
+
+	}
+
+
 
 	render() {
-  let {loading,data,page,limit,members_count,columnsstu}=this.state;
+  let {loading,data,page,limit,members_count,columnsstu,fbbool,course_groups}=this.state;
 		const  isAdmin =this.props.isAdmin();
 
+		const menu = (
+			<Menu>
+				<Menu.Item>
+					<a onClick={()=>this.setcourse_groups(null)}>
+						<p className="maxnamewidth200s">全部</p>
+					</a>
+				</Menu.Item>
+				{
+					course_groups&&course_groups.length>0?
+						(
+							course_groups.map((item,key) => {
+									return (
+										<Menu.Item>
+											<a  onClick={()=>this.setcourse_groups(item.id)} key={key}>
+												<p className="maxnamewidth200s">{item.name}</p>
+											</a>
+										</Menu.Item>
+									)
+								})
+						)
+						:
+						""
+				}
+			</Menu>
+		);
 		return (
 			<React.Fragment>
 				<div className="ws100s" >
@@ -236,8 +404,18 @@ class Videostatisticscom extends Component {
                <div className="xiaoshou" onClick={()=>this.props.tisticsbools(false,null)}>
 								 <span className="mr5 xiaoshou">视频统计总览</span><i className="iconfont icon-fanhui  font-13 xiaoshou"></i>
 							 </div>
-								<div className="xiaoshou">
-									<span className="mr5 xiaoshou">分班</span><i className="iconfont icon-sanjiaoxing-up  font-13 mr32 xiaoshou"></i>
+								<div className="xiaoshou"  onClick={()=>this.fenbanone()}>
+									<Dropdown  getPopupContainer={trigger => trigger.parentNode}   overlay={menu} placement="bottomCenter" >
+								   <span>
+										 	<span className="mr5 xiaoshou">分班</span>
+										 {
+											 fbbool===true?
+												 <i className="iconfont icon-sanjiaoxing-down  font-13 mr32 xiaoshou"></i>
+												 :
+												 <i className="iconfont icon-sanjiaoxing-up  font-13 mr32 xiaoshou"></i>
+										 }
+									 </span>
+									</Dropdown>
 								</div>
 							</div>
 						</div>
@@ -269,7 +447,12 @@ class Videostatisticscom extends Component {
 												<NoneDatas></NoneDatas>
 											</div>
 											:
-											<Table columns={columnsstu} dataSource={data} pagination={false}/>
+											<Table
+												columns={columnsstu}
+												dataSource={data}
+												pagination={false}
+												onChange={this.table1handleChange}
+											/>
 									}