|
|
import React, {Component} from "react";
|
|
|
import {WordsBtn,markdownToHTML, MarkdownToHtml} from 'educoder';
|
|
|
import { Form, Select, Input, Button,Checkbox,Upload,Icon,message,Modal, Table, Divider,InputNumber, Tag,DatePicker,Radio,Tooltip,Pagination} from "antd";
|
|
|
import {Link,Switch,Route,Redirect} from 'react-router-dom';
|
|
|
import axios from 'axios';
|
|
|
import Exercisetablesmubu from './Exercisetablesmubu';
|
|
|
import Exercisestatisticalresulttabel from './Exercisestatisticalresulttabel';
|
|
|
|
|
|
import '../css/members.css';
|
|
|
import '../css/busyWork.css';
|
|
|
import '../poll/pollStyle.css';
|
|
|
|
|
|
const CheckboxGroup = Checkbox.Group;
|
|
|
const $ = window.$
|
|
|
function createMarkup(value) { return {__html:value} };
|
|
|
class Exercisestatisticalresult extends Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
data:undefined,
|
|
|
sort:"percent",
|
|
|
exercise_group_id:[],
|
|
|
page:1,
|
|
|
limit:10,
|
|
|
searchtext:"",
|
|
|
order: "end_at",
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
let{sort,exercise_group_id,page,limit}=this.state;
|
|
|
this.updatefun(sort,exercise_group_id,page,limit);
|
|
|
try {
|
|
|
this.props.triggerRef(this);
|
|
|
}catch (e) {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
_getRequestParams() {
|
|
|
const { order, exercise_group_id,searchtext, page ,limit} = this.state
|
|
|
return {
|
|
|
page,
|
|
|
search:searchtext,
|
|
|
order,
|
|
|
limit: limit,
|
|
|
group_id:exercise_group_id,
|
|
|
}
|
|
|
}
|
|
|
updatefun=(sort,exercise_group_id,page,limit)=>{
|
|
|
let ExerciseId=this.props.match.params.Id;
|
|
|
let url = `/exercises/`+ExerciseId+`/exercise_result.json`;
|
|
|
axios.get(url,{
|
|
|
params:{
|
|
|
sort:sort,
|
|
|
exercise_group_id:exercise_group_id,
|
|
|
page:page,
|
|
|
limit:limit
|
|
|
}
|
|
|
}).then((result) => {
|
|
|
// console.log(result)
|
|
|
|
|
|
this.setState({
|
|
|
data:result.data
|
|
|
})
|
|
|
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
onSortTypeChange=(value)=>{
|
|
|
let{exercise_group_id,page,limit}=this.state;
|
|
|
this.setState({
|
|
|
sort:value
|
|
|
})
|
|
|
this.updatefun(value,exercise_group_id,page,limit)
|
|
|
}
|
|
|
|
|
|
funtaskstatustwo=(checkedValues,list)=>{
|
|
|
|
|
|
let{sort,page,limit}=this.state;
|
|
|
if(checkedValues.length===list.length){
|
|
|
this.setState({
|
|
|
exercise_group_id:[]
|
|
|
})
|
|
|
}else{
|
|
|
this.setState({
|
|
|
exercise_group_id:checkedValues
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
this.updatefun(sort,checkedValues,page,limit)
|
|
|
}
|
|
|
PaginationCourse=(pageNumber)=>{
|
|
|
let{sort,exercise_group_id,limit}=this.state;
|
|
|
|
|
|
this.setState({
|
|
|
page:pageNumber
|
|
|
})
|
|
|
|
|
|
// debugger
|
|
|
$('html').animate({
|
|
|
scrollTop: 10
|
|
|
}, 1000);
|
|
|
this.updatefun(sort,exercise_group_id,pageNumber,limit)
|
|
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
let{data,sort,page,limit} =this.state;
|
|
|
let choicetype=["满分作答","部分得分作答","零分作答","未批"]
|
|
|
return (
|
|
|
<div className=" ">
|
|
|
|
|
|
<style>
|
|
|
{`
|
|
|
div{
|
|
|
color: rgba(0, 0, 0, 0.65);
|
|
|
}
|
|
|
`}
|
|
|
</style>
|
|
|
<div className={"educontent mb30" } >
|
|
|
|
|
|
{data&&data.course_groups.length===0?"":<div className="stud-class-set">
|
|
|
<div className="clearfix edu-back-white">
|
|
|
<ul className="clearfix" style={{padding:'20px'}}>
|
|
|
<li className="clearfix mt10">
|
|
|
<span className="fl mr10 color-grey-8">分班情况：</span>
|
|
|
<span className="fl ">
|
|
|
<a id="graduation_comment_no_limit" className={this.state.exercise_group_id.length===0?"pl10 pr10 mr20 check_on":"pl10 pr10 mr20" }>不限</a>
|
|
|
</span>
|
|
|
<CheckboxGroup onChange={(e)=>this.funtaskstatustwo(e,data&&data.course_groups)} value={this.state.exercise_group_id} style={{width:'87%',paddingTop: '4px'}}>
|
|
|
{ data&&data.course_groups.map((item, key) => {
|
|
|
return (
|
|
|
<span key={key}>
|
|
|
<Checkbox value={item.exercise_group_id}
|
|
|
key={item.exercise_group_id}
|
|
|
// checked={course_group_info === undefined ? false : course_group_info[key].course_group_id === item.course_group_id ? true : false}
|
|
|
className="fl ">{item.exercise_group_name}
|
|
|
<span>({item.exercise_group_students})</span>
|
|
|
</Checkbox>
|
|
|
</span>
|
|
|
)
|
|
|
})}
|
|
|
</CheckboxGroup>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>}
|
|
|
|
|
|
<div className="stud-class-set">
|
|
|
<div className="clearfix edu-back-white exerciseTable ">
|
|
|
<Exercisestatisticalresulttabel
|
|
|
data={data}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<style>
|
|
|
{`
|
|
|
.fafafa{
|
|
|
background: #fafafa;
|
|
|
height:50px;
|
|
|
}
|
|
|
.drop_down_normal li{
|
|
|
text-align: center;
|
|
|
}
|
|
|
.mr33{
|
|
|
margin-right: 33px;
|
|
|
}
|
|
|
`}
|
|
|
</style>
|
|
|
|
|
|
<div className="stud-class-set fafafa">
|
|
|
<li className="drop_down fr mt10 mr33">
|
|
|
{sort==="percent"?"正确率":sort==="type"?"题型":sort==="position"?"题序":""}<i className="iconfont icon-xiajiantou font-12 ml2"></i>
|
|
|
<ul className="drop_down_normal">
|
|
|
{sort==='percent'?"":<li onClick={() => this.onSortTypeChange('percent')}>正确率</li>}
|
|
|
{sort==='type'?"":<li onClick={() => this.onSortTypeChange('type')}>题型</li>}
|
|
|
{sort==='position'?"":<li onClick={() => this.onSortTypeChange('position')}>题序</li>}
|
|
|
</ul>
|
|
|
</li>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<style>
|
|
|
{`
|
|
|
.CACFF{
|
|
|
color:#4CACFF;
|
|
|
}
|
|
|
.bor-greyE{
|
|
|
border: 1px solid #EEEEEE!important;
|
|
|
}
|
|
|
.padtop24{
|
|
|
padding-top: 24px;
|
|
|
}
|
|
|
.exerciseTable .shixunreporttitle{
|
|
|
padding:0px!important;
|
|
|
}
|
|
|
.exerciseTable .ant-table-thead > tr > th,.exerciseTable .ant-table-tbody > tr > td{
|
|
|
padding:16px 20px!important;
|
|
|
}
|
|
|
.exerciseTable .editormd-html-preview{
|
|
|
width:100%!important;
|
|
|
}
|
|
|
`}
|
|
|
</style>
|
|
|
{/* 从子组件将样式提出来，不然会循环多次 */}
|
|
|
<style>{`
|
|
|
// .ant-table-thead > tr > th{
|
|
|
// text-align: center;
|
|
|
// }
|
|
|
.tasknamebox{
|
|
|
width: 50px;
|
|
|
height: 24px;
|
|
|
border: 1px solid rgba(221,23,23,1);
|
|
|
border-radius: 12px;
|
|
|
color: rgba(221,23,23,1);
|
|
|
display: inline-block;
|
|
|
line-height: 24px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.tasknameboxs{
|
|
|
color: #666666 !important;
|
|
|
background:rgba(237,237,237,1) !important;
|
|
|
}
|
|
|
|
|
|
.ant-table-tbody > tr > td{
|
|
|
font-size:14px;
|
|
|
}
|
|
|
.task-hide{
|
|
|
max-width: 345px;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
// .ant-table-tbody > tr{
|
|
|
// height:64px;
|
|
|
// text-align: center;
|
|
|
// }
|
|
|
.ant-progress-success-bg, .ant-progress-bg{
|
|
|
background-color: #29BD8B !important;
|
|
|
}
|
|
|
.ant-table-thead > tr > th:nth-child(1){
|
|
|
text-align: left;
|
|
|
}
|
|
|
.ant-table-tbody > tr > td:nth-child(1){
|
|
|
text-align: left;
|
|
|
}
|
|
|
.Exermubu .ant-table-tbody > tr:nth-last-child(1) > td{
|
|
|
border:1px solid transparent;
|
|
|
}
|
|
|
.Exermubu .editormd-html-preview, .Exermubu .editormd-preview-container {
|
|
|
background: transparent;
|
|
|
}
|
|
|
`}
|
|
|
</style>
|
|
|
{data&&data.commit_results.map((item,key)=>{
|
|
|
return(
|
|
|
<div className="stud-class-set mb20 exerciseTable" key={key}>
|
|
|
<div className="clearfix edu-back-white poll_list" style={{padding: '20px'}}>
|
|
|
<div className="font-16 shixunreporttitle fl" style={{width:"1050px"}}>
|
|
|
<span className="CACFF">{item.ques_position+"."}{item.ques_type===0?"单选":item.ques_type===1?"多选":item.ques_type===2?"判断":item.ques_type===3?"填空":item.ques_type===4?"主观":item.ques_type===5?"实训":""}题</span>
|
|
|
<div>
|
|
|
{/*Q{item.ques_position}：*/}
|
|
|
{/* <div className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML1(item.ques_title).replace(/▁/g,"▁▁▁")}}></div> */}
|
|
|
<MarkdownToHtml content={item.ques_title} selector={'ques_title_' + key}
|
|
|
className=""
|
|
|
></MarkdownToHtml>
|
|
|
{/*<span className="markdown-body" dangerouslySetInnerHTML={createMarkup(item.ques_title)}></span>*/}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="fr shixunreporttitles mt3">正确率<span style={{color:'#FF6800'}}> {item.right_percent}%</span></div>
|
|
|
</div>
|
|
|
{item.ques_type===5?
|
|
|
|
|
|
item.ques_details.map((ite,k)=>{
|
|
|
return(
|
|
|
<div>
|
|
|
<div className="clearfix edu-back-white poll_list mb10" style={{padding: '0px 20px'}}>
|
|
|
<div className="font-16 shixunreporttitle fl pt20 pb20">
|
|
|
<span>{ite.challenge_position}：{ite.challenge_name}</span>
|
|
|
</div>
|
|
|
<div className="fr shixunreporttitles">正确率<span style={{color:'#FF6800'}}> {ite.challenge_percent}%</span></div>
|
|
|
</div>
|
|
|
<Exercisetablesmubu
|
|
|
tableNum={`${key}${k}`}
|
|
|
data={ite.challenge_details}
|
|
|
type={item.ques_type}
|
|
|
effictive_counts={item.effictive_counts}
|
|
|
choicetype={choicetype}
|
|
|
/>
|
|
|
</div>
|
|
|
)
|
|
|
}):
|
|
|
<Exercisetablesmubu
|
|
|
tableNum={key}
|
|
|
data={item.ques_details}
|
|
|
type={item.ques_type}
|
|
|
effictive_counts={item.effictive_counts}
|
|
|
choicetype={choicetype}
|
|
|
/>}
|
|
|
</div>
|
|
|
)
|
|
|
})}
|
|
|
|
|
|
</div>
|
|
|
{
|
|
|
data && data.questions_count > 10 &&
|
|
|
<div className="mb40 edu-txt-center padding20-30">
|
|
|
<Pagination
|
|
|
showQuickJumper
|
|
|
defaultCurrent={1}
|
|
|
pageSize={limit}
|
|
|
total={ data && data.questions_count }
|
|
|
current={page}
|
|
|
onChange={this.PaginationCourse}
|
|
|
/>
|
|
|
</div>
|
|
|
}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default Exercisestatisticalresult;
|
|
|
|
|
|
|
|
|
|
