m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

视频统计

Browse Source
courseware
杨树林 5 years ago
parent ee77244aba
commit e9a082736c
2 changed files with 306 additions and 187 deletions
Show Stats Download Patch File Download Diff File

369
public/react/src/modules/courses/videostatistics/component/Videostatisticscomtwo.js
Unescape View File

@ -1,13 +1,12 @@
import React, {Component} from "react";
import '../../signin/css/signincdi.css';
import {Pagination,Table, Menu, Dropdown} from 'antd';
import {getImageUrl,sortDirections} 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";
//条目
class Videostatisticscom extends Component {
//条目组件
@ -15,10 +14,10 @@ class Videostatisticscom extends Component {
super(props);
this.state = {
data:[],
page:1,
limit:10,
members_count:0,
data: [],
page: 1,
limit: 10,
members_count: 0,
columnsstu: [
{
title: '序号',
@ -50,8 +49,8 @@ class Videostatisticscom extends Component {
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>
<span style={{width: '98px'}}>{record.is_finished === true ?
<span style={{color: "#5091FF"}}>是</span> : <span style={{color: "#E02020"}}>否</span>}</span>
),
},
{
@ -88,7 +87,7 @@ class Videostatisticscom extends Component {
className: 'font-14 maxnamewidth100s',
width: '100px',
render: (text, record) => (
<span style={{width: '100px',color:'#5091FF'}} className="xiaoshou" >{record.start_at}</span>
<span style={{width: '100px', color: '#5091FF'}} className="xiaoshou">{record.start_at}</span>
),
},
{
@ -99,40 +98,40 @@ class Videostatisticscom extends Component {
className: 'font-14 maxnamewidth100s',
width: '100px',
render: (text, record) => (
<span style={{width: '100px',color:'#5091FF'}} className="xiaoshou" >{record.end_at}</span>
<span style={{width: '100px', color: '#5091FF'}} className="xiaoshou">{record.end_at}</span>
),
}
],
loading:false,
order:undefined,
course_groups:[],
fbbool:false,
groupsid:null,
loading: false,
order: undefined,
course_groups: [],
fbbool: false,
groupsid: null,
}
}
componentDidMount() {
this.setState({
order:undefined
order: undefined
})
if(this.props.isAdmin()){
//老师
const CourseId=this.props.match.params.coursesId;
if (this.props.isAdmin()) {
//老师
const CourseId = this.props.match.params.coursesId;
var data={
id:CourseId,
page:this.state.page,
var data = {
id: CourseId,
page: this.state.page,
}
this.getdatas(data);
this.getdatas(data);
}else{
//学生
var data={
page:this.state.page,
} else {
//学生
var data = {
page: this.state.page,
}
this.getdatas(data);
}
this.fenbans();
this.fenbans();
}
componentDidUpdate = (prevProps) => {
@ -141,21 +140,21 @@ class Videostatisticscom extends Component {
}
//分班
fenbans=()=>{
const CourseId=this.props.match.params.coursesId;
let url=`/courses/${CourseId}/course_groups.json`;
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,
})
}
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) => {
@ -163,101 +162,117 @@ class Videostatisticscom extends Component {
}
//学生
getdatas=(data)=>{
getdatas = (data) => {
this.setState({
loading:true
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`;
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=[];
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,
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,
data: datalists,
members_count: response.data.count,
})
}else{
} else {
this.setState({
data:[],
members_count:response.data.count,
data: [],
members_count: response.data.count,
})
}
}else{
} else {
this.setState({
data:[],
members_count:response.data.count,
data: [],
members_count: response.data.count,
})
}
}
}
this.setState({
loading:false
loading: false
})
}).catch((error) => {
this.setState({
loading:false
loading: false
})
});
}
paginationonChange = (pageNumber) => {
this.setState({
page: pageNumber,
})
}
fenbanone=()=>{
if(this.state.fbbool===false){
this.setState({
fbbool:true
})
}else{
this.setState({
fbbool:false
})
let data = {}
if (this.props.isAdmin()) {
//老师
const CourseId = this.props.match.params.coursesId;
data = {
id: CourseId,
page: pageNumber,
group_id: this.state.groupsid,
order: this.state.order,
}
} else {
//学生
data = {
page: pageNumber,
order: this.state.order,
}
}
this.getdatas(data);
}
fenbanone = () => {
if (this.state.fbbool === false) {
this.setState({
fbbool: true
})
} else {
this.setState({
fbbool: false
})
}
}
setcourse_groups=(id)=>{
setcourse_groups = (id) => {
this.setState({
groupsid:id
groupsid: id
})
//老师
const CourseId=this.props.match.params.coursesId;
var data={};
if(id){
data={
id:CourseId,
page:this.state.page,
group_id: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
} else {
data = {
id: CourseId,
page: this.state.page
}
}
this.getdatas(data);
@ -270,39 +285,39 @@ class Videostatisticscom extends Component {
} else {
try {
//学生学号排序
if (sorter.columnKey === "total_duration"||sorter.columnKey === "feq") {
let mysorder="";
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";
if (sorter.columnKey === "total_duration") {
mysorder = "total_duration-asc";
} else {
mysorder = "freq-asc";
}
//升序
let data={}
if(this.props.isAdmin()){
let data = {}
if (this.props.isAdmin()) {
//老师
const CourseId=this.props.match.params.coursesId;
if(groupsid){
data={
id:CourseId,
page:this.state.page,
order:mysorder,
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 = {
id: CourseId,
page: this.state.page,
group_id: this.state.groupsid,
order: mysorder,
}
}
}else{
} else {
//学生
data={
page:this.state.page,
order:mysorder,
data = {
page: this.state.page,
order: mysorder,
}
}
@ -311,43 +326,43 @@ class Videostatisticscom extends Component {
order: mysorder,
})
} else if (sorter.order === "descend") {
if(sorter.columnKey === "total_duration"){
mysorder="total_duration-desc";
if (sorter.columnKey === "total_duration") {
mysorder = "total_duration-desc";
}else{
mysorder="freq-desc";
} else {
mysorder = "freq-desc";
}
//降序
let data={}
if(this.props.isAdmin()){
let data = {}
if (this.props.isAdmin()) {
//老师
const CourseId=this.props.match.params.coursesId;
if(groupsid){
data={
id:CourseId,
page:this.state.page,
order:mysorder,
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 = {
id: CourseId,
page: this.state.page,
group_id: this.state.groupsid,
order: mysorder,
}
}
}else{
} else {
//学生
data={
page:this.state.page,
order:mysorder,
data = {
page: this.state.page,
order: mysorder,
}
}
this.getdatas(data);
this.setState({
order:mysorder,
order: mysorder,
})
@ -362,30 +377,29 @@ class Videostatisticscom extends Component {
}
render() {
let {loading,data,page,limit,members_count,columnsstu,fbbool,course_groups}=this.state;
const isAdmin =this.props.isAdmin();
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)}>
<a onClick={() => this.setcourse_groups(null)}>
<p className="maxnamewidth200s">全部</p>
</a>
</Menu.Item>
{
course_groups&&course_groups.length>0?
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>
)
})
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>
)
})
)
:
""
@ -394,30 +408,37 @@ class Videostatisticscom extends Component {
);
return (
<React.Fragment>
<div className="ws100s" >
<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",
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" >
<div className="xiaoshou" onClick={() => this.props.tisticsbools(false, null)}>
<span className="mr5 xiaoshou">视频统计总览</span><i className="iconfont icon-fanhui font-13 xiaoshou"></i>
</div>
{
isAdmin === true ?
<div className="xiaoshou" onClick={() => this.fenbanone()}>
<Dropdown getPopupContainer={trigger => trigger.parentNode} overlay={menu}
placement="bottomCenter">
<span>
<span className="mr5 xiaoshou">分班</span>
{
fbbool===true?
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>
</Dropdown>
</div>
:
""
}
</div>
</div>
@ -432,7 +453,7 @@ class Videostatisticscom extends Component {
}
</style>
{
loading===true?
loading === true ?
<div style={{
minHeight: "400px",
}} className="ws100s">
@ -441,7 +462,7 @@ class Videostatisticscom extends Component {
:
<div className="ws100s ysltableo teacherentrydivs">
{
data.length===0?
data.length === 0 ?
<div style={{
minHeight: "400px",
}} className="ws100s">
@ -465,11 +486,11 @@ class Videostatisticscom extends Component {
<div className="mb30 clearfix educontent mt40 intermediatecenter">
{
data&&data.length>0?
data && data.length > 0 ?
<Pagination showQuickJumper current={this.state.page} onChange={this.paginationonChange}
pageSize={this.state.limit}
total={this.state.members_count}></Pagination>
:""
: ""
}
</div>

124
public/react/src/modules/courses/videostatistics/component/Videostatisticslist.js
Unescape View File

@ -1,6 +1,6 @@
import React, {Component} from "react";
import '../../signin/css/signincdi.css';
import {Pagination,Table} from 'antd';
import {Pagination,Table,sortDirections} from 'antd';
import {getImageUrl} from 'educoder';
import axios from 'axios';
import LoadingSpin from "../../../../common/LoadingSpin";
@ -44,6 +44,8 @@ class Videostatisticslist extends Component {
align: "center",
className: 'font-14',
width: '98px',
sorter: true,
sortDirections: sortDirections,
render: (text, record) => (
<span style={{width: '98px'}}>{record.people_num}</span>
),
@ -55,6 +57,8 @@ class Videostatisticslist 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_time}</span>
),
@ -87,11 +91,16 @@ class Videostatisticslist extends Component {
page:1,
limit:10,
members_count:0,
order:undefined,
}
}
componentDidMount() {
this.togetdatas(1);
let data={
page:1,
order:this.state.order
}
this.togetdatas(data);
}
@ -103,27 +112,59 @@ class Videostatisticslist extends Component {
this.setState({
page: pageNumber,
})
this.togetdatas(pageNumber);
let data={
page:pageNumber,
order:this.state.order
}
this.togetdatas(data);
}
togetdatas(page){
togetdatas(data){
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
}
axios.get(url,{params:data
}).then((response) => {
if(response){
this.setState({
data:response.data&&response.data.videos?response.data.videos:[],
members_count:response.data.count,
})
if (response) {
if (response.data) {
if (response.data.videos.length > 0) {
let datalists = [];
for (var i = 0; i < response.data.videos.length; i++) {
datalists.push({
number: (parseInt(page) - 1) * parseInt(limit) + (i + 1),
title: response.data.videos[i].title,
people_num: response.data.videos[i].people_num,
total_time: response.data.videos[i].total_time,
user_name: response.data.videos[i].user_name,
id: response.data.videos[i].id,
x })
}
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
})
@ -135,6 +176,57 @@ class Videostatisticslist extends Component {
}
//实训作业tbale 列表塞选数据
table1handleChange = (pagination, filters, sorter) => {
if (JSON.stringify(sorter) === "{}") {
//没有选择
} else {
try {
//学生学号排序
if (sorter.columnKey === "people_num"||sorter.columnKey === "total_time") {
let mysorder="";
if (sorter.order === "ascend") {
if(sorter.columnKey === "people_num"){
mysorder="people_num-asc";
}else{
mysorder="total_time-asc";
}
//升序
let data={
page:this.state.page,
order:mysorder
}
this.togetdatas(data);
this.setState({
order: mysorder,
})
} else if (sorter.order === "descend") {
if(sorter.columnKey === "people_num"){
mysorder="people_num-desc";
}else{
mysorder="total_time-desc";
}
//降序
let data={
page:this.state.page,
order:mysorder
}
this.togetdatas(data);
this.setState({
order: mysorder,
})
}
}
} catch (e) {
}
}
}
render() {
@ -175,7 +267,13 @@ class Videostatisticslist extends Component {
<NoneDatas></NoneDatas>
</div>
:
<Table columns={columnsstu} dataSource={data} pagination={false}/>
<Table
columns={columnsstu}
dataSource={data}
pagination={false}
onChange={this.table1handleChange}
/>
}

Write Preview
Loading…
Cancel
Save