courseware
commit
0dfb20c5bf
@ -0,0 +1,483 @@
|
||||
import React, {Component} from "react";
|
||||
import '../../signin/css/signincdi.css';
|
||||
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";
|
||||
|
||||
|
||||
|
||||
//条目
|
||||
class Videostatisticscom extends Component {
|
||||
//条目组件
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
data:[],
|
||||
page:1,
|
||||
limit:10,
|
||||
members_count:0,
|
||||
columnsstu: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'number',
|
||||
key: 'number',
|
||||
align: "center",
|
||||
className: 'font-14',
|
||||
width: '50px',
|
||||
render: (text, record) => (
|
||||
<span style={{width: '50px'}}>{record.number}</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">{record.user_name}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '视频是否看完',
|
||||
dataIndex: 'is_finished',
|
||||
key: 'is_finished',
|
||||
align: "center",
|
||||
className: 'font-14',
|
||||
width: '98px',
|
||||
render: (text, record) => (
|
||||
<span style={{width: '98px'}}>{record.is_finished===true?
|
||||
<span style={{color:"#5091FF"}}>是</span>:<span style={{color:"#E02020"}}>否</span>}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '视频累计观看时长',
|
||||
dataIndex: 'total_duration',
|
||||
key: 'total_duration',
|
||||
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>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '累计观看次数(次)',
|
||||
dataIndex: 'feq',
|
||||
key: 'feq',
|
||||
align: "center",
|
||||
className: 'font-14 maxnamewidth100s',
|
||||
width: '100px',
|
||||
sorter: true,
|
||||
sortDirections: sortDirections,
|
||||
render: (text, record) => (
|
||||
<span style={{width: '100px'}} className="maxnamewidth100s">{record.feq}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '最早观看时间',
|
||||
dataIndex: 'start_at',
|
||||
key: 'start_at',
|
||||
align: "center",
|
||||
className: 'font-14 maxnamewidth100s',
|
||||
width: '100px',
|
||||
render: (text, record) => (
|
||||
<span style={{width: '100px',color:'#5091FF'}} className="xiaoshou" >{record.start_at}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '最后观看时间',
|
||||
dataIndex: 'end_at',
|
||||
key: 'end_at',
|
||||
align: "center",
|
||||
className: 'font-14 maxnamewidth100s',
|
||||
width: '100px',
|
||||
render: (text, record) => (
|
||||
<span style={{width: '100px',color:'#5091FF'}} className="xiaoshou" >{record.end_at}</span>
|
||||
),
|
||||
}
|
||||
],
|
||||
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;
|
||||
|
||||
var data={
|
||||
id:CourseId,
|
||||
page:this.state.page,
|
||||
}
|
||||
this.getdatas(data);
|
||||
|
||||
}else{
|
||||
//学生
|
||||
var data={
|
||||
page:this.state.page,
|
||||
}
|
||||
this.getdatas(data);
|
||||
}
|
||||
this.fenbans();
|
||||
}
|
||||
|
||||
componentDidUpdate = (prevProps) => {
|
||||
|
||||
|
||||
}
|
||||
|
||||
//分班
|
||||
fenbans=()=>{
|
||||
const CourseId=this.props.match.params.coursesId;
|
||||
let url=`/courses/${CourseId}/course_groups.json`;
|
||||
axios.get(url).then((response) => {
|
||||
if(response){
|
||||
console.log("分班");
|
||||
console.log("response");
|
||||
console.log(response);
|
||||
this.setState({
|
||||
course_groups:response.data.course_groups,
|
||||
current_group_id:response.data.current_group_id,
|
||||
none_group_member_count:response.data.none_group_member_count,
|
||||
group_count:response.data.group_count,
|
||||
})
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//学生
|
||||
getdatas=(data)=>{
|
||||
this.setState({
|
||||
loading:true
|
||||
})
|
||||
const CourseId=this.props.match.params.coursesId;
|
||||
let url="";
|
||||
if(this.props.isAdmin()){
|
||||
url=`/course_videos/${this.props.tisid}/watch_histories.json`;
|
||||
}else {
|
||||
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(page) - 1) * parseInt(limit) + (i + 1),
|
||||
user_name:response.data.data[i].user_name,
|
||||
is_finished:response.data.data[i].is_finished,
|
||||
total_duration:response.data.data[i].total_duration,
|
||||
feq:response.data.data[i].feq,
|
||||
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
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
paginationonChange = (pageNumber) => {
|
||||
this.setState({
|
||||
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,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" >
|
||||
<div className="ws100s teacherentrydivs edu-back-white ">
|
||||
<div className="ws100s sortinxdirection">
|
||||
<div className="ws50s sptits">视频名称视频名称…</div>
|
||||
<div className="ws50s sptitss xaxisreverseorder font-14" style={{
|
||||
color:"#5091FF",
|
||||
lineHeight: "42px",
|
||||
}}>
|
||||
<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" 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>
|
||||
|
||||
|
||||
<style>
|
||||
{
|
||||
`
|
||||
.ysltableo .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
|
||||
padding: 10px 10px;
|
||||
}
|
||||
`
|
||||
}
|
||||
</style>
|
||||
{
|
||||
loading===true?
|
||||
<div style={{
|
||||
minHeight: "400px",
|
||||
}} className="ws100s">
|
||||
<LoadingSpin></LoadingSpin>
|
||||
</div>
|
||||
:
|
||||
<div className="ws100s ysltableo teacherentrydivs">
|
||||
{
|
||||
data.length===0?
|
||||
<div style={{
|
||||
minHeight: "400px",
|
||||
}} className="ws100s">
|
||||
<NoneDatas></NoneDatas>
|
||||
</div>
|
||||
:
|
||||
<Table
|
||||
columns={columnsstu}
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
onChange={this.table1handleChange}
|
||||
/>
|
||||
}
|
||||
|
||||
|
||||
</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 Videostatisticscom;
|
||||
Loading…
Reference in new issue