diff --git a/public/react/src/modules/courses/Video/VideoIndex.js b/public/react/src/modules/courses/Video/VideoIndex.js
index acf2f60eb..fe52b17dc 100644
--- a/public/react/src/modules/courses/Video/VideoIndex.js
+++ b/public/react/src/modules/courses/Video/VideoIndex.js
@@ -294,7 +294,7 @@ class VideoIndex extends Component{
 									videoData && videoData.category_name && type === "video" ?
 										<span className="font-18 fl color-dark-21 mt20 mb20">{videoData.category_name}</span>
 										:
-										<div className="task_menu_ul fl mt2" style={{width:"400px"}}>
+										<div className="task_menu_ul fl mt2" style={{width:"240px"}}>
 											<Menu mode="horizontal" selectedKeys={[type]} onClick={this.changeType}>
 												<Menu.Item key="video">视频</Menu.Item>
 												<Menu.Item key="live">直播</Menu.Item>
diff --git a/public/react/src/modules/courses/signin/css/signincdi.css b/public/react/src/modules/courses/signin/css/signincdi.css
index 6acea807a..5fe6a87cb 100644
--- a/public/react/src/modules/courses/signin/css/signincdi.css
+++ b/public/react/src/modules/courses/signin/css/signincdi.css
@@ -369,3 +369,37 @@
     color:rgba(136,136,136,1);
     line-height:40px;
 }
+.tbrt{
+    padding-top: 22px;
+    padding-left: 28px;
+}
+.tbrt .ts {
+    font-size:12px;
+    font-family:MicrosoftYaHei;
+    color:rgba(255,255,255,1);
+}
+
+.tbrt .tss{
+    font-size:30px;
+    font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
+    font-weight:bold;
+    color:rgba(255,255,255,1);
+    line-height: 33px;
+}
+.maxnamewidth150s{
+    width: 150px;
+    max-width: 150px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    cursor: default;
+}
+.maxnamewidth100s{
+    width: 100px;
+    max-width: 100px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    cursor: default;
+}
+
diff --git a/public/react/src/modules/courses/videostatistics/Videostatistics.js b/public/react/src/modules/courses/videostatistics/Videostatistics.js
index 8e6cab744..93c9f57e6 100644
--- a/public/react/src/modules/courses/videostatistics/Videostatistics.js
+++ b/public/react/src/modules/courses/videostatistics/Videostatistics.js
@@ -2,26 +2,49 @@ import React,{ Component } from "react";
 import axios from 'axios';
 import '../signin/css/signincdi.css';
 import Videostatisticscom from './component/Videostatisticscom';
+import Videostatisticslist from './component/Videostatisticslist';
 
 
 //在线学习
 class Videostatistics extends Component{
 	constructor(props){
 		super(props);
-
+    this.state={
+			watch_staticsdata:[],
+		}
 
 
 	}
 
 	componentDidMount() {
+		this.togetdatas();
 	}
-	mygetdatas=()=>{
+	details=()=>{
 
 	}
 
+   togetdatas(){
+		 const CourseId=this.props.match.params.coursesId;
+		 let url=`/courses/${CourseId}/watch_statics.json`;
+		 axios.get(url).then((response) => {
+			 if(response){
+         this.setState({
+					 watch_staticsdata:response.data,
+				 })
+
+			 }
+
+		 }).catch((error) => {
+
+
+		 });
+	 }
+
+
 
 
 	render(){
+		let {watch_staticsdata}= this.state;
 		return(
 			<React.Fragment>
 				<div className="ws100s">
@@ -38,11 +61,17 @@ class Videostatistics extends Component{
 							</p>
 
 						</div>
-						<Videostatisticscom {...this.state} {...this.props}></Videostatisticscom>
+						<Videostatisticscom {...this.state} {...this.props} watch_staticsdata={watch_staticsdata}></Videostatisticscom>
 
 
 
 						<div>
+						<Videostatisticslist  {...this.state} {...this.props} details={()=>this.details()}></Videostatisticslist>
+
+
+
+
+
 
 						</div>
 					</div>
diff --git a/public/react/src/modules/courses/videostatistics/component/Videostatisticscom.js b/public/react/src/modules/courses/videostatistics/component/Videostatisticscom.js
index 0c064f3e3..6dbe44ae3 100644
--- a/public/react/src/modules/courses/videostatistics/component/Videostatisticscom.js
+++ b/public/react/src/modules/courses/videostatistics/component/Videostatisticscom.js
@@ -25,6 +25,7 @@ class Videostatisticscom extends Component {
 	}
 
 
+
 	render() {
 
 		return (
@@ -42,23 +43,49 @@ class Videostatisticscom extends Component {
 								`
               .yslsprenshu{
                 background-image: url(${getImageUrl(`images/qiandao/sprenshu.png`)});
+                  background-repeat:no-repeat;
+                -moz-background-size:100% 100%; 
+                background-size:100% 100%;
               }
               .yslspcishu{
                 background-image: url(${getImageUrl(`images/qiandao/spcishu.png`)});
+                  background-repeat:no-repeat;
+                -moz-background-size:100% 100%; 
+                background-size:100% 100%;
               }
              .yslshipingshi{
                 background-image: url(${getImageUrl(`images/qiandao/shipingshi.png`)});
+                 background-repeat:no-repeat;
+                -moz-background-size:100% 100%; 
+                background-size:100% 100%;
               }
                   
               `
 							}
 						</style>
-						<div className="ws100s">
-							<div className="yslsprenshu"></div>
-
-							<div className="yslspcishu"></div>
-
-							<div className="yslshipingshi"></div>
+						<div className="ws100s spacearound mt20">
+							<div className="yslsprenshu" style={{width:260,height:100}}>
+								<div className="ws100s verticallayout tbrt">
+                 <div className="ws100s ts">观看总人数（人）</div>
+									<div className="ws100s tss">{this.props.watch_staticsdata&&this.props.watch_staticsdata.people_num?this.props.watch_staticsdata.people_num:0}</div>
+
+								</div>
+
+							</div>
+
+							<div className="yslspcishu" style={{width:260,height:100}}>
+								<div className="ws100s verticallayout tbrt">
+									<div className="ws100s ts">观看总人次（次）</div>
+									<div className="ws100s tss">{this.props.watch_staticsdata&&this.props.watch_staticsdata.freq?this.props.watch_staticsdata.freq:0}</div>
+								</div>
+							</div>
+
+							<div className="yslshipingshi" style={{width:260,height:100}}>
+								<div className="ws100s verticallayout tbrt">
+									<div className="ws100 ts">总观看时长（时）</div>
+									<div className="ws100s tss">{this.props.watch_staticsdata&&this.props.watch_staticsdata.total_duration?this.props.watch_staticsdata.total_duration:0}</div>
+								</div>
+							</div>
 
 						</div>
 
diff --git a/public/react/src/modules/courses/videostatistics/component/Videostatisticslist.js b/public/react/src/modules/courses/videostatistics/component/Videostatisticslist.js
new file mode 100644
index 000000000..692958517
--- /dev/null
+++ b/public/react/src/modules/courses/videostatistics/component/Videostatisticslist.js
@@ -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;