Skip to content

X
xiaomai-cloud-class-web
Commit 4502b4e4 by guomingpang
Options

Merge branch 'feature/pangguoming/20210607/answer_detail' into dev

parents 7f4ff4a1 e8aec20f
Showing with 65 additions and 136 deletions
src/modules/teach-tool/examination-manager/TestDetailPage.jsx
......@@ -7,19 +7,17 @@
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useState, useEffect } from 'react';
import { Route, withRouter } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import User from '@/common/js/user';
import './TestDetailPage.less';
import Service from '@/common/js/service';
import { message, Empty } from 'antd';
import moment from 'moment';
import { message } from 'antd';
import AnswerDescPage from '../components/AnswerDescPage';
import Breadcrumbs from '@/components/Breadcrumbs';
function TestDetailPage(props) {
const examId = props.match.params.testId.replace(/\?.+/, '');
const paperId = window.getParameterByName('paperId');
const [customerId, setCustomerId] = useState('');
const [examDetail, setExamDetail] = useState({
answerAnalysis: '',
resultShow: '',
......@@ -36,34 +34,15 @@ function TestDetailPage(props) {
totalScore: 0,
userCorrectQuestion: 0,
userExamDuration: 0,
userExamState: 'INIT',
userScore: 0,
}); // 考试详情
const [testState, setTestState] = useState({
isDelete: false,
}); // 考试状态
const [paperDetail, setPaperDetail] = useState({}); // 试卷详情
const [questionList, setQuestionList] = useState([]); // 试卷题目列表
const [userAnswerList, setUserAnswerList] = useState([]); // 用户答案列表
const [isScrollShow, setIsScrollShow] = useState(false); // 是否展示回到顶部按钮
const {
answerAnalysis,
resultContent,
resultShow,
examName,
examStartTime,
examEndTime,
totalScore,
totalQuestionCount,
passScore,
examDuration,
examDesc,
userExamDuration,
userExamState,
userScore,
userCorrectQuestion,
} = examDetail;
const { answerAnalysis, resultContent, examName, totalScore, totalQuestionCount, passScore, examDuration, userExamDuration, userScore, userCorrectQuestion } =
examDetail;
useEffect(() => {
bindScroll();
......@@ -120,9 +99,6 @@ function TestDetailPage(props) {
function handleChangeShowErrorPage() {
setIsShowErrorPage(true);
setTestState({
isDelete: true,
});
}
// 用户时长转换
......@@ -157,120 +133,73 @@ function TestDetailPage(props) {
}
function renderResultInfo() {
console.log('userExamState====>', userExamState);
if (userExamState !== 'INIT') {
if (userExamState === 'FINISH_EXAM') {
if (resultShow === 'IMMEDIATELY' || (resultShow === 'AFTER_EXAM_END' && Date.now() > examEndTime)) {
return (
<div>
<div className='exam-info'>
{['PASS_AND_SCORE', 'ONLY_SCORE'].includes(resultContent) && (
<div className='info-score item'>
<div className='current-score'>
{userScore}
<img src='https://image.xiaomaiketang.com/xm/TsaApiPyxA.png' />
</div>
<div className='origin-data'>总分{totalScore}</div>
</div>
)}
{['PASS_AND_SCORE', 'ONLY_PASS'].includes(resultContent) && (
<div className='info-level item'>
<div className='current-level'>{userScore < passScore ? '不及格' : '及格'}</div>
<div className='origin-data'>及格分{passScore}</div>
</div>
)}
return (
<div>
<div className='exam-info'>
{['PASS_AND_SCORE', 'ONLY_SCORE'].includes(resultContent) && (
<div className='info-score item'>
<div className='current-score'>
{userScore}
<img src='https://image.xiaomaiketang.com/xm/TsaApiPyxA.png' />
</div>
<div className='origin-data'>总分{totalScore}</div>
</div>
)}
<div className='info-correct item'>
<div className='current-correct'>
{userCorrectQuestion}
<div className='text'>答对题数</div>
</div>
<div className='origin-data'>共{totalQuestionCount}题</div>
</div>
{['PASS_AND_SCORE', 'ONLY_PASS'].includes(resultContent) && (
<div className='info-level item'>
<div className='current-level'>{userScore < passScore ? '不及格' : '及格'}</div>
<div className='origin-data'>及格分{passScore}</div>
</div>
)}
<div className='info-time item'>
<div className='current-time'>
{formatTime(Number(userExamDuration > examDuration ? examDuration : userExamDuration || 0))}
<div className='text'>用时</div>
</div>
<div className='origin-data'>考试时长{(examDuration || 0) / 60 / 1000}分钟</div>
</div>
</div>
{['ANALYSE_AND_RIGHT_OR_WRONG', 'RIGHT_OR_WRONG'].includes(answerAnalysis) && (
<div className='exam-result'>
<div className='result-title'>
<div className='left-title'>答题情况</div>
<div className='right-tip'>
<span className='correct-num'>{userCorrectQuestion}</span>
<span className='incorrect-num'>/{totalQuestionCount} </span>
道正确
</div>
</div>
<div className='result-content'>
{sortedAnswerList.map((item, index) => {
return (
<div
className='result-content__item'
onClick={() => {
console.log('item', item);
handleQuickActiveQuestion(item.questionId);
}}>
<img
className='icon'
src={
item.isCorrect === 1 ? 'https://image.xiaomaiketang.com/xm/FwZa2Kaypc.png' : 'https://image.xiaomaiketang.com/xm/7tRHDf6ysA.png'
}
/>
<div className='result-content-box'>{index + 1}</div>
</div>
);
})}
</div>
</div>
)}
<AnswerDescPage />
<div className='info-correct item'>
<div className='current-correct'>
{userCorrectQuestion}
<div className='text'>答对题数</div>
</div>
);
} else if (resultShow === 'AFTER_EXAM_END') {
return customizeRenderEmpty('after');
}
} else {
return customizeRenderEmpty('lack');
}
}
}
<div className='origin-data'>共{totalQuestionCount}题</div>
</div>
function customizeRenderEmpty(status) {
return (
<div className='empty-result'>
<Empty
image={status === 'lack' ? 'https://image.xiaomaiketang.com/xm/7xi4YTXmHK.png' : 'https://image.xiaomaiketang.com/xm/bhGtST27Hf.png'}
imageStyle={{
height: '100px',
}}
description={
status === 'lack' ? (
<div className='lack-desc'>
<div className='title'>缺考</div>
<div className='content'>你没有成功交卷哦</div>
<div className='info-time item'>
<div className='current-time'>
{formatTime(Number(userExamDuration > examDuration ? examDuration : userExamDuration || 0))}
<div className='text'>用时</div>
</div>
<div className='origin-data'>考试时长{(examDuration || 0) / 60 / 1000}分钟</div>
</div>
</div>
{['ANALYSE_AND_RIGHT_OR_WRONG', 'RIGHT_OR_WRONG'].includes(answerAnalysis) && (
<div className='exam-result'>
<div className='result-title'>
<div className='left-title'>答题情况</div>
<div className='right-tip'>
<span className='correct-num'>{userCorrectQuestion}</span>
<span className='incorrect-num'>/{totalQuestionCount} </span>
道正确
</div>
) : (
<div className='after-desc'>
<div className='title'>恭喜你完成考试！</div>
<div className='after-show-box'>
<div>本次考试用时 {window.formatHourTime(Number(userExamDuration || 0))}</div>
<div>
考试结果会在
<span style={{ color: '#333333' }}>
{moment(Number(examEndTime)).format('YYYY.MM.DD HH:mm')}
公布哦
</span>
</div>
<div className='result-content'>
{sortedAnswerList.map((item, index) => {
return (
<div
className='result-content__item'
onClick={() => {
console.log('item', item);
handleQuickActiveQuestion(item.questionId);
}}>
<img
className='icon'
src={item.isCorrect === 1 ? 'https://image.xiaomaiketang.com/xm/FwZa2Kaypc.png' : 'https://image.xiaomaiketang.com/xm/7tRHDf6ysA.png'}
/>
<div className='result-content-box'>{index + 1}</div>
</div>
</div>
</div>
)
}></Empty>
);
})}
</div>
</div>
)}
<AnswerDescPage />
</div>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment