Skip to content

X
xiaomai-cloud-class-web
Commit 79aea1c8 by wufan
Options

feat:完成考试详情页

parent 11f4ee76
Showing with 402 additions and 24 deletions
src/domains/basic-domain/constants.ts
/* /*
* @Author: 陈剑宇 * @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01 * @Date: 2020-05-07 14:43:01
* @LastEditTime: 2021-06-22 16:49:06 * @LastEditTime: 2021-08-09 15:52:49
* @LastEditors: Please set LastEditors * @LastEditors: wufan
* @Description: * @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
*/ */
import { MapInterface } from '@/domains/basic-domain/interface' import { MapInterface } from '@/domains/basic-domain/interface'
// 默认是 dev 环境 // 默认是 dev 环境
const ENV: string = process.env.DEPLOY_ENV || 'dev' const ENV: string = process.env.DEPLOY_ENV || 'dev1'
console.log('process.env.DEPLOY_ENV', process) console.log('process.env.DEPLOY_ENV', process)
const BASIC_HOST_MAP: MapInterface = { const BASIC_HOST_MAP: MapInterface = {
dev: 'https://dev-heimdall.xiaomai5.com/', dev: 'https://dev-heimdall.xiaomai5.com/',
......
src/domains/course-domain/constants.ts
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-20 09:21:40 * @Date: 2020-08-20 09:21:40
* @LastEditors: Please set LastEditors * @LastEditors: wufan
* @LastEditTime: 2021-06-11 15:17:56 * @LastEditTime: 2021-08-09 15:52:57
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import { MapInterface } from '@/domains/basic-domain/interface' import { MapInterface } from '@/domains/basic-domain/interface'
const ENV: string = process.env.DEPLOY_ENV || 'dev'; const ENV: string = process.env.DEPLOY_ENV || 'dev1';
const appIdMap: MapInterface = { const appIdMap: MapInterface = {
dev: 'wx3ea60e78ddfa277e', dev: 'wx3ea60e78ddfa277e',
......
src/modules/course-manage/modal/RelatedPlanModal.jsx
...@@ -66,7 +66,7 @@ class RelatedPlanModal extends React.Component { ...@@ -66,7 +66,7 @@ class RelatedPlanModal extends React.Component {
}; };
renderTitle = () => { renderTitle = () => {
return <div className="tip-title" > return <div className="tip-title">
<p>为了不影响学员学习，系统已对数据进行筛选</p> <p>为了不影响学员学习，系统已对数据进行筛选</p>
<p>1、课程不能直接关联「已发布」的培训任务筛选；</p> <p>1、课程不能直接关联「已发布」的培训任务筛选；</p>
<p>2、一个课程不能重复出现在同一培训任务中</p> <p>2、一个课程不能重复出现在同一培训任务中</p>
...@@ -75,8 +75,7 @@ class RelatedPlanModal extends React.Component { ...@@ -75,8 +75,7 @@ class RelatedPlanModal extends React.Component {
renderTableTitle = ()=> { renderTableTitle = ()=> {
return <div> return <div>
<Tooltip title={this.renderTitle()} overlayClassName="table-title-tooltip">
<Tooltip title={this.renderTitle()} arrowPointAtCenter overlayClassName="table-title-tooltip">
培训任务<span className='icon iconfont table-title'>&#xe6f2;</span> 培训任务<span className='icon iconfont table-title'>&#xe6f2;</span>
</Tooltip> </Tooltip>
</div> </div>
......
src/modules/course-manage/modal/RelatedPlanModal.less
.table-title-tooltip { .table-title-tooltip {
width: 500px; max-width: 600px!important;
} }
.related-plan-modal { .related-plan-modal {
.table-title { .table-title {
......
src/modules/knowledge-base/components/KnowledgeBaseList.jsx
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
* @Description: * @Description:
* @Author: zangsuyun * @Author: zangsuyun
* @Date: 2021-03-12 14:49:40 * @Date: 2021-03-12 14:49:40
* @LastEditors: yuananting * @LastEditors: wufan
* @LastEditTime: 2021-07-15 14:07:42 * @LastEditTime: 2021-08-09 15:53:03
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -22,7 +22,7 @@ import "./KnowledgeBaseList.less"; ...@@ -22,7 +22,7 @@ import "./KnowledgeBaseList.less";
const DEFAULT_SIZE_UNIT = 1000 * 1000 // 将B转换成M const DEFAULT_SIZE_UNIT = 1000 * 1000 // 将B转换成M
const { confirm } = Modal const { confirm } = Modal
const ENV = process.env.DEPLOY_ENV || "dev" const ENV = process.env.DEPLOY_ENV || "dev1"
class KnowledgeBaseList extends React.Component { class KnowledgeBaseList extends React.Component {
constructor(props) { constructor(props) {
......
src/modules/knowledge-base/modal/VideoList.jsx
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: zangsuyun * @Author: zangsuyun
* @Date: 2021-03-13 11:48:24 * @Date: 2021-03-13 11:48:24
* @LastEditors: wufan * @LastEditors: wufan
* @LastEditTime: 2021-05-30 10:08:09 * @LastEditTime: 2021-08-09 15:53:08
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -19,7 +19,7 @@ import "./LiveList.less"; ...@@ -19,7 +19,7 @@ import "./LiveList.less";
import CourseService from "@/domains/course-domain/CourseService"; import CourseService from "@/domains/course-domain/CourseService";
import User from "@/common/js/user"; import User from "@/common/js/user";
const ENV = process.env.DEPLOY_ENV || "dev"; const ENV = process.env.DEPLOY_ENV || "dev1";
class VideoList extends React.Component { class VideoList extends React.Component {
constructor(props) { constructor(props) {
......
src/modules/task-center/data-center/UserLearningData.jsx
/* /*
* @Author: yuananting * @Author: yuananting
* @Date: 2021-08-05 10:55:49 * @Date: 2021-08-05 10:55:49
* @LastEditors: yuananting * @LastEditors: wufan
* @LastEditTime: 2021-08-05 16:10:51 * @LastEditTime: 2021-08-09 15:49:31
* @Description: 个人学习详情 * @Description: 个人学习详情
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
...@@ -12,6 +12,7 @@ import { Progress, Space, Tabs } from 'antd'; ...@@ -12,6 +12,7 @@ import { Progress, Space, Tabs } from 'antd';
import Breadcrumbs from '@/components/Breadcrumbs'; import Breadcrumbs from '@/components/Breadcrumbs';
import WholeData from './components/WholeData'; import WholeData from './components/WholeData';
import ENUM from '../enum'; import ENUM from '../enum';
import TestLinkTaskData from './components/TestLinkTaskData';
import './UserLearningData.less'; import './UserLearningData.less';
...@@ -27,7 +28,7 @@ function UserLearningData(props) { ...@@ -27,7 +28,7 @@ function UserLearningData(props) {
{ {
name: '考试', name: '考试',
key: 'exam', key: 'exam',
compoment: WholeData, // todo compoment: TestLinkTaskData, // todo
}, },
]; ];
......
src/modules/task-center/data-center/components/LeftStageList.jsx 0 → 100644
import React, { useState, useEffect } from "react";
import "./LeftStageList.less";
import ENUM from "../../enum";
function LeftStageList(props) {
const { stageExamList, activeExam, activeStage } = props;
const [stageList, setStageList] = useState(stageExamList || []);
// 展开和收起阶段下面的考试
function handleToggleExpand(stageIndex) {
let _taskList = [...stageList];
_taskList = _taskList.map((item, index) => {
if (stageIndex === index) {
item.isShowMoreCourse = !item.isShowMoreCourse;
}
return item;
});
setStageList(_taskList || []);
}
return (
<div className="left-stage-list">
{stageList.map((item, index) => {
return (
<div key={index} className="stage-list">
<div
className={`stage-item ${
item.stageId === activeStage.stageId ? "active" : ""
}`}
onClick={() => handleToggleExpand(index)}
>
<div className="icon">
{item.isShowMoreCourse ? (
<img
src="https://image.xiaomaiketang.com/xm/YtihN8T7sT.png"
alt=""
/>
) : (
<img
src="https://image.xiaomaiketang.com/xm/RmG5tbhmep.png"
alt=""
/>
)}
</div>
<div className="stage-name">
{ENUM.IndexToSort[index + 1]}、{item.stageName}
</div>
</div>
{!item.isShowMoreCourse && (
<div className="exam-list">
{item.courseVOList.map((examItem, examIdndex) => {
return (
<div
key={examIdndex}
className={`exam-item ${
examItem.contentId === activeExam.contentId ? "active" : ""
}`}
onClick={()=>{
props.changeActiveExam(examItem,item)
}}
>
<div className="exam-name">
{item.sequence}.{examItem.sequence}{' '}{examItem.contentName}
</div>
</div>
);
})}
</div>
)}
</div>
);
})}
</div>
);
}
export default LeftStageList;
src/modules/task-center/data-center/components/LeftStageList.less 0 → 100644
.left-stage-list {
width: 229px;
.stage-list {
.stage-item {
display: flex;
width: 229px;
height: 44px;
background: rgba(255, 255, 255, 0.06);
color: #666;
font-size: 14px;
color: #666;
line-height: 44px;
margin-right: 8px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
&.active {
background: rgba(41, 102, 255, 0.06);
color: #2966ff;
}
}
.exam-list {
.exam-item {
width: 229px;
height: 44px;
background: rgba(255, 255, 255, 0.06);
width: 100%;
font-size: 14px;
color: #666666;
line-height: 44px;
padding-left: 48px;
cursor: pointer;
.exam-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&.active {
background-color: RGBA(243, 246, 250, 1);
}
}
}
}
}
src/modules/task-center/data-center/components/TestLinkTaskData.jsx 0 → 100644
import React, { useState, useEffect } from "react";
import "./TestLinkTaskData.less";
import LeftStageList from "./LeftStageList";
import TestDetailPage from "@/modules/teach-tool/examination-manager/TestDetailPage";
import { Route, withRouter } from "react-router-dom";
import Service from "@/common/js/service";
import LottieIcon from "@/components/LottieIcon";
function TestLinkTaskData(props) {
const [stageExamList, setStageExamList] = useState([]);
const [activeExam, setActiveExam] = useState({});
const [activeStage, setActiveStage] = useState({});
const [isShow, setIsShow] = useState(true);
useEffect(() => {
getTrainingTaskDetail();
}, []);
function getTrainingTaskDetail() {
Service.Hades("public/hades/getTaskCustomerDetail", {
taskId: "1412706381214687233",
storeId: "1192022572770412395",
storeCustomerId: "1384073988114677761",
// todolist 数据写死调接口
// taskId: props.match.params.taskId.replace(/\?.+/, ""),
// storeId: User.getStoreId(),
// storeCustomerId: User.getCustomerId(),
}).then((res) => {
const data = { ...res.result };
const { stageCustomerVOList = [] } = data;
if (!!stageCustomerVOList.length) {
setStageExamList(stageCustomerVOList);
setActiveStage(stageCustomerVOList[0]);
setActiveExam(stageCustomerVOList[0].courseVOList[0]);
const { contentId, paperId } = stageCustomerVOList[0].courseVOList[0];
const { match } = props;
const path = `${match.url}/test-detail/1424698828831531009?paperId=1408034318353940481&userId=1351455073595023362&fromTrainingTask=true`;
window.RCHistory.push(path);
}
// const { stageExamCustomerVOList = [] } = data;
// if (stageExamCustomerVOList.length) {
// setStageExamList(stageExamCustomerVOList);
// setActiveStage(stageExamCustomerVOList[0]);
// setActiveExam(stageExamCustomerVOList[0].courseVOList[0]);
// }
});
}
function changeActiveExam(_activeExam, _activeStage) {
console.log("_activeExam", _activeExam);
setActiveExam(_activeExam);
setActiveStage(_activeStage);
const { contentId, paperId } = _activeExam;
window.RCHistory.push({
pathname: `${
props.match.url
}/test-detail/${1424698828831531009}?paperId=${1408034318353940481}&userId=${1351455073595023362}&fromTrainingTask=true`,
});
// window.RCHistory.push({
// pathname: `${
// props.match.url
// }/test-detail/${contentId}?paperId=${paperId}&userId=${111}`,
// });
}
function toggleShowBar(diretion) {
if (diretion === "left") {
setIsShow(false);
} else {
setIsShow(true);
}
}
return (
<div>
{stageExamList.length ? (
<div className={`test-link-task-data ${!isShow ? 'hidden':''}`}>
<div className={`left-stage-list-box ${!isShow ? 'hidden':''}`}>
{isShow ? (
<div
className="left-bar"
onClick={() => {
toggleShowBar("left");
}}
></div>
) : (
<div
className="right-bar"
onClick={() => {
toggleShowBar("right");
}}
></div>
)}
<LeftStageList
stageExamList={stageExamList}
activeExam={activeExam}
changeActiveExam={changeActiveExam}
activeStage={activeStage}
/>
</div>
<div className={`right-exam-data-box ${!isShow ? 'hidden':''}`}>
<Route
path={`${props.match.url}/test-detail/:testId`}
component={TestDetailPage}
/>
</div>
</div>
) : (
<LottieIcon
title={<span className="desc">暂无考试数据</span>}
type="college"
size={150}
/>
)}
</div>
);
}
export default withRouter(TestLinkTaskData);
src/modules/task-center/data-center/components/TestLinkTaskData.less 0 → 100644
.test-link-task-data {
position: relative;
height: calc(100vh - 300px);
border-right: 1px solid #cccccc;
display: flex;
.left-stage-list-box {
border-right: 1px solid #cccccc;
width: 245px;
height: 100%;
overflow-y: auto;
position: relative;
&.hidden {
border-left: 1px solid #cccccc;
border-right: none;
width: 15px;
.left-stage-list {
display: none;
}
}
.left-bar {
width: 8px;
height: 68px;
background: #d6d6d6;
border-radius: 12px 0px 0px 12px;
position: absolute;
right: 0;
top: 50%;
&::before {
content: "";
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 0;
height: 0;
transform: rotate(45deg);
background-color: #fff;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
}
&:hover {
width: 12px;
height: 68px;
background: #666666;
border-radius: 12px 0px 0px 12px;
}
}
.right-bar {
width: 8px;
height: 68px;
background: #d6d6d6;
border-radius: 0px 12px 12px 0px;
position: absolute;
left: 0;
top: 50%;
&::before {
content: "";
left: -190%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 0;
height: 0;
transform: rotate(315deg);
background-color: #fff;
box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
}
&:hover {
width: 12px;
height: 68px;
background: #666666;
border-radius: 0px 12px 12px 0px;
&::before {
content: "";
left: -120%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 0;
height: 0;
transform: rotate(315deg);
background-color: #fff;
box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
}
}
}
}
.right-exam-data-box {
width: calc(100vw - 450px);
height: 100%;
overflow-y: auto;
&.hidden {
width: calc(100vw - 200px);
}
}
}
src/modules/task-center/enum.ts
/* /*
* @Author: yuananting * @Author: yuananting
* @Date: 2021-08-03 18:10:15 * @Date: 2021-08-03 18:10:15
* @LastEditors: yuananting * @LastEditors: wufan
* @LastEditTime: 2021-08-03 18:31:28 * @LastEditTime: 2021-08-09 18:24:21
* @Description: 描述一下咯 * @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
...@@ -59,6 +59,20 @@ const ENUM: any = { ...@@ -59,6 +59,20 @@ const ENUM: any = {
EXAM: 'https://image.xiaomaiketang.com/xm/fCDPp2Eenc.png', EXAM: 'https://image.xiaomaiketang.com/xm/fCDPp2Eenc.png',
HOMEWORK: 'https://image.xiaomaiketang.com/xm/hShsAzzppZ.png', HOMEWORK: 'https://image.xiaomaiketang.com/xm/hShsAzzppZ.png',
}, },
// index to 中文序号
IndexToSort: {
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六',
7: '七',
8: '八',
9: '九',
10: '十',
11: '十一'
}
} }
export default ENUM export default ENUM
\ No newline at end of file
src/modules/teach-tool/examination-manager/TestDetailPage.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-04-07 16:10:21 * @Date: 2021-04-07 16:10:21
* @LastEditors: wufan * @LastEditors: wufan
* @LastEditTime: 2021-04-26 10:21:19 * @LastEditTime: 2021-08-10 14:19:22
* @Description: 助学工具-考试-考试结果 * @Description: 助学工具-考试-考试结果
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -18,6 +18,7 @@ import Breadcrumbs from '@/components/Breadcrumbs'; ...@@ -18,6 +18,7 @@ import Breadcrumbs from '@/components/Breadcrumbs';
function TestDetailPage(props) { function TestDetailPage(props) {
const examId = props.match.params.testId.replace(/\?.+/, ''); const examId = props.match.params.testId.replace(/\?.+/, '');
const paperId = window.getParameterByName('paperId'); const paperId = window.getParameterByName('paperId');
const fromTrainingTask = window.getParameterByName('fromTrainingTask'); // 是否来自培训任务
const userId = window.getParameterByName('userId'); const userId = window.getParameterByName('userId');
const [examDetail, setExamDetail] = useState({ const [examDetail, setExamDetail] = useState({
answerAnalysis: '', answerAnalysis: '',
...@@ -41,6 +42,7 @@ function TestDetailPage(props) { ...@@ -41,6 +42,7 @@ function TestDetailPage(props) {
const [questionList, setQuestionList] = useState([]); // 试卷题目列表 const [questionList, setQuestionList] = useState([]); // 试卷题目列表
const [userAnswerList, setUserAnswerList] = useState([]); // 用户答案列表 const [userAnswerList, setUserAnswerList] = useState([]); // 用户答案列表
const [isScrollShow, setIsScrollShow] = useState(false); // 是否展示回到顶部按钮 const [isScrollShow, setIsScrollShow] = useState(false); // 是否展示回到顶部按钮
const [isShowErrorPage, setIsShowErrorPage] = useState(false); // 是否展示异常提示页面
const { answerAnalysis, resultContent, examName, totalScore, totalQuestionCount, passScore, examDuration, userExamDuration, userScore, userCorrectQuestion } = const { answerAnalysis, resultContent, examName, totalScore, totalQuestionCount, passScore, examDuration, userExamDuration, userScore, userCorrectQuestion } =
examDetail; examDetail;
...@@ -211,16 +213,20 @@ function TestDetailPage(props) { ...@@ -211,16 +213,20 @@ function TestDetailPage(props) {
}); });
return ( return (
<div className='exam-result-page page'> <div className={`${fromTrainingTask ? 'exam-result-page' :'exam-result-page page'}`}>
<Breadcrumbs navList={'答题详情'} goBack={props.history.goBack} /> {fromTrainingTask ? null : <Breadcrumbs navList={'答题详情'} goBack={props.history.goBack} />}
<div className='center'> <div className='center'>
<div className='box'> <div className='box'>
<img
className="header-img"
src="https://image.xiaomaiketang.com/xm/6Kt6PkJcWa.png"
/>
<div className='box-content'> <div className='box-content'>
<div <div
className='exam-head' className='exam-head'
style={{ style={{
padding: examName.length > 20 ? '8px 0 14px' : '16px 0 29px', padding: examName.length > 20 ? '8px 0 14px' : '26px 0 29px',
}}> }}>
<div className={`exam-name ${examName.length > 20 ? 'many' : 'few'}`}>{examName}</div> <div className={`exam-name ${examName.length > 20 ? 'many' : 'few'}`}>{examName}</div>
</div> </div>
......
src/modules/teach-tool/examination-manager/TestDetailPage.less
...@@ -19,6 +19,14 @@ ...@@ -19,6 +19,14 @@
} }
} }
.box { .box {
position: relative;
.header-img {
height: 180px;
width: calc(100vw - 450px);
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.box-content { .box-content {
position: relative; position: relative;
width: 840px; width: 840px;
...@@ -40,6 +48,7 @@ ...@@ -40,6 +48,7 @@
.few { .few {
font-size: 25px; font-size: 25px;
line-height: 36px; line-height: 36px;
color: #fff;
} }
} }
.empty-result { .empty-result {
......
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