|
|
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 ',
|
|
|
render: (text, record) => (
|
|
|
<div style={{width: '200px'}} className="maxnamewidth200s textalignlefts">
|
|
|
<script>
|
|
|
{
|
|
|
`
|
|
|
a{
|
|
|
text-decoration:none;
|
|
|
color:#333;
|
|
|
}
|
|
|
a:hover{
|
|
|
text-decoration:none;
|
|
|
color:#333;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</script>
|
|
|
<a className="maxnamewidth200s textalignlefts" style={{
|
|
|
color:"#333333"
|
|
|
}} title={record.title}>{record.title}</a>
|
|
|
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
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) => (
|
|
|
<div style={{width: '100px'}} className="maxnamewidth100s textalignrights">
|
|
|
<script>
|
|
|
{
|
|
|
`
|
|
|
a{
|
|
|
text-decoration:none;
|
|
|
color:#333;
|
|
|
}
|
|
|
a:hover{
|
|
|
text-decoration:none;
|
|
|
color:#333;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</script>
|
|
|
<a className="maxnamewidth100s textalignrights" style={{
|
|
|
color:"#333333"
|
|
|
}} title={record.total_duration}>{record.total_duration}</a>
|
|
|
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '发布人',
|
|
|
dataIndex: 'user_name',
|
|
|
key: 'user_name',
|
|
|
align: "center",
|
|
|
className: 'font-14 maxnamewidth100s',
|
|
|
width: '100px',
|
|
|
render: (text, record) => (
|
|
|
<span style={{width: '100px'}} className="maxnamewidth100s">
|
|
|
<script>
|
|
|
{
|
|
|
`
|
|
|
a{
|
|
|
text-decoration:none;
|
|
|
color:#333;
|
|
|
}
|
|
|
a:hover{
|
|
|
text-decoration:none;
|
|
|
color:#333;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</script>
|
|
|
<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: "#333333"}}>是</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="freq-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="freq-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">
|
|
|
<script>
|
|
|
{
|
|
|
`
|
|
|
a{
|
|
|
text-decoration:none;
|
|
|
color:#333;
|
|
|
}
|
|
|
a:hover{
|
|
|
text-decoration:none;//鼠标放上面不显示下划线
|
|
|
color:#333;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</script>
|
|
|
<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>
|
|
|
|
|
|
</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;
|
