parent
f38b1217b9
commit
0fbd802587
@ -0,0 +1,204 @@
|
||||
import React, {Component} from "react";
|
||||
import '../../signin/css/signincdi.css';
|
||||
import {Pagination,Table} from 'antd';
|
||||
import {getImageUrl} from 'educoder';
|
||||
import axios from 'axios';
|
||||
import LoadingSpin from "../../../../common/LoadingSpin";
|
||||
import NoneDatas from "../../signin/component/NoneDatas";
|
||||
|
||||
|
||||
//条目
|
||||
class Videostatisticslist 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">{record.title}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '观看人数（人）',
|
||||
dataIndex: 'people_num',
|
||||
key: 'people_num',
|
||||
align: "center",
|
||||
className: 'font-14',
|
||||
width: '98px',
|
||||
render: (text, record) => (
|
||||
<span style={{width: '98px'}}>{record.people_num}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '累计观看时长',
|
||||
dataIndex: 'total_time',
|
||||
key: 'total_time',
|
||||
align: "center",
|
||||
className: 'font-14 maxnamewidth150s',
|
||||
width: '150px',
|
||||
render: (text, record) => (
|
||||
<span style={{width: '150px'}} className="maxnamewidth150s">{record.total_time}</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: 'id',
|
||||
key: 'id',
|
||||
align: "center",
|
||||
className: 'font-14',
|
||||
width: '90px',
|
||||
render: (text, record) => (
|
||||
<span style={{width: '90px',color:'#5091FF'}} className="xiaoshou" onClick={()=>this.props.details()}>详情</span>
|
||||
),
|
||||
}
|
||||
],
|
||||
loading:false,
|
||||
data:[],
|
||||
page:1,
|
||||
limit:10,
|
||||
members_count:0,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.togetdatas(1);
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate = (prevProps) => {
|
||||
|
||||
|
||||
}
|
||||
paginationonChange = (pageNumber) => {
|
||||
this.setState({
|
||||
page: pageNumber,
|
||||
})
|
||||
this.togetdatas(pageNumber);
|
||||
}
|
||||
|
||||
|
||||
togetdatas(page){
|
||||
this.setState({
|
||||
loading:true
|
||||
})
|
||||
const CourseId=this.props.match.params.coursesId;
|
||||
let url=`/courses/${CourseId}/watch_video_histories.json`;
|
||||
axios.get(url,{params:{
|
||||
page:page
|
||||
}
|
||||
}).then((response) => {
|
||||
if(response){
|
||||
this.setState({
|
||||
data:response.data&&response.data.videos?response.data.videos:[],
|
||||
members_count:count,
|
||||
})
|
||||
|
||||
}
|
||||
this.setState({
|
||||
loading:false
|
||||
})
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
loading:false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
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 teacherentrydivs ">
|
||||
<div className="ws100s sortinxdirection">
|
||||
<div className="ws100s sptits">统计详情</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}/>
|
||||
}
|
||||
|
||||
|
||||
</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 Videostatisticslist;
|
||||
Loading…
Reference in new issue