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

Feature/pangguoming/20210607/answer detail

See merge request !37

package.json

@@ -105,6 +105,10 @@
   },
   },
   "scripts": {
   "scripts": {
     "start": "node scripts/start.js",
     "start": "node scripts/start.js",
+    "start:dev": "cross-env DEPLOY_ENV=dev node scripts/start.js",
+    "start:dev1": "cross-env DEPLOY_ENV=dev node scripts/start.js",
+    "start:rc": "cross-env DEPLOY_ENV=rc node scripts/start.js",
+    "start:gray": "cross-env DEPLOY_ENV=gray node scripts/start.js",
     "build:dev": "cross-env DEPLOY_ENV=dev node scripts/build.js",
     "build:dev": "cross-env DEPLOY_ENV=dev node scripts/build.js",
     "build:dev1": "cross-env DEPLOY_ENV=dev node scripts/build.js",
     "build:dev1": "cross-env DEPLOY_ENV=dev node scripts/build.js",
     "build:rc": "cross-env DEPLOY_ENV=rc node scripts/build.js",
     "build:rc": "cross-env DEPLOY_ENV=rc node scripts/build.js",

src/common/js/user.ts

@@ -11,32 +11,34 @@ import Storage from './storage';
 import { PREFIX, USER_PREFIX } from '@/domains/basic-domain/constants';
 import { PREFIX, USER_PREFIX } from '@/domains/basic-domain/constants';
 
 
 class User {
 class User {
-  
-  getStoreId(){
-    return Storage.get(`${PREFIX}_storeId`)
+  getStoreId() {
+    return Storage.get(`${PREFIX}_storeId`);
   }
   }
 
 
   getEnterpriseId() {
   getEnterpriseId() {
-    return Storage.get(`${PREFIX}_enterpriseId`)
+    return Storage.get(`${PREFIX}_enterpriseId`);
   }
   }
 
 
-  getStoreName(){
-    return Storage.get(`${PREFIX}_storeName`) 
+  getStoreName() {
+    return Storage.get(`${PREFIX}_storeName`);
   }
   }
 
 
-  getStoreType(){
-    return Storage.get(`${PREFIX}_storeType`) 
+  getStoreType() {
+    return Storage.get(`${PREFIX}_storeType`);
   }
   }
 
 
-  getStoreUserId(){
-    return Storage.get(`${PREFIX}_storeUserId`)
+  getStoreUserId() {
+    return Storage.get(`${PREFIX}_storeUserId`);
   }
   }
 
 
-  getUserId(){
-    return Storage.get(`${PREFIX}_userId`)
+  getCustomerId() {
+    return Storage.get(`${PREFIX}_customerId`);
+  }
+  getUserId() {
+    return Storage.get(`${PREFIX}_userId`);
   }
   }
-  getUserRole(){
-    return Storage.get(`${PREFIX}_userRole`)
+  getUserRole() {
+    return Storage.get(`${PREFIX}_userRole`);
   }
   }
 
 
   getToken() {
   getToken() {
@@ -47,67 +49,71 @@ class User {
     return Storage.get(`${PREFIX}_isAdmin`);
     return Storage.get(`${PREFIX}_isAdmin`);
   }
   }
 
 
-  setStoreId(value:any){
-    return Storage.set(`${PREFIX}_storeId`,value)
+  setStoreId(value: any) {
+    return Storage.set(`${PREFIX}_storeId`, value);
   }
   }
 
 
   setEnterpriseId(value: any) {
   setEnterpriseId(value: any) {
-    return Storage.set(`${PREFIX}_enterpriseId`,value)
+    return Storage.set(`${PREFIX}_enterpriseId`, value);
+  }
+
+  setStoreName(value: any) {
+    return Storage.set(`${PREFIX}_storeName`, value);
   }
   }
 
 
-  setStoreName(value:any){
-    return Storage.set(`${PREFIX}_storeName`,value) 
+  setStoreType(value: any) {
+    return Storage.set(`${PREFIX}_storeType`, value);
   }
   }
 
 
-  setStoreType(value:any){
-    return Storage.set(`${PREFIX}_storeType`,value) 
+  setStoreUserId(value: any) {
+    return Storage.set(`${PREFIX}_storeUserId`, value);
   }
   }
 
 
-  setStoreUserId(value:any){
-    return Storage.set(`${PREFIX}_storeUserId`,value)
+  setCustomerId(value: any) {
+    return Storage.set(`${PREFIX}_customerId`, value);
   }
   }
 
 
-  setUserId(value:any){
-    return Storage.set(`${PREFIX}_userId`,value)
+  setUserId(value: any) {
+    return Storage.set(`${PREFIX}_userId`, value);
   }
   }
 
 
-  setUserRole(value:any){
-    return Storage.set(`${PREFIX}_userRole`,value)
+  setUserRole(value: any) {
+    return Storage.set(`${PREFIX}_userRole`, value);
   }
   }
 
 
-  setToken(value:any) {
-    return Storage.set(`${PREFIX}_token`,value);
+  setToken(value: any) {
+    return Storage.set(`${PREFIX}_token`, value);
   }
   }
 
 
   setIsAdmin(value: any) {
   setIsAdmin(value: any) {
     return Storage.set(`${PREFIX}_isAdmin`, value);
     return Storage.set(`${PREFIX}_isAdmin`, value);
   }
   }
 
 
-  removeToken(){
+  removeToken() {
     return Storage.remove(`${PREFIX}_token`);
     return Storage.remove(`${PREFIX}_token`);
   }
   }
 
 
-  removeUserId(){
+  removeUserId() {
     return Storage.remove(`${PREFIX}_userId`);
     return Storage.remove(`${PREFIX}_userId`);
   }
   }
 
 
   removeEnterpriseId() {
   removeEnterpriseId() {
-    return Storage.remove(`${PREFIX}_enterpriseId`)
+    return Storage.remove(`${PREFIX}_enterpriseId`);
   }
   }
 
 
-  getCustomerStoreId(){
+  getCustomerStoreId() {
     return Storage.get(`${PREFIX}_customerStoreId`);
     return Storage.get(`${PREFIX}_customerStoreId`);
   }
   }
-  setCustomerStoreId(value:any) {
-    return Storage.set(`${PREFIX}_customerStoreId`,value);
+  setCustomerStoreId(value: any) {
+    return Storage.set(`${PREFIX}_customerStoreId`, value);
   }
   }
-  setIdentifier(value:any){
-    return Storage.set(`${PREFIX}_identifier`,value);
+  setIdentifier(value: any) {
+    return Storage.set(`${PREFIX}_identifier`, value);
   }
   }
-  getIdentifier(){
+  getIdentifier() {
     return Storage.get(`${PREFIX}_identifier`);
     return Storage.get(`${PREFIX}_identifier`);
   }
   }
-  clearUserInfo(){
+  clearUserInfo() {
     Storage.remove(`${USER_PREFIX}_token`);
     Storage.remove(`${USER_PREFIX}_token`);
     Storage.remove(`${USER_PREFIX}_userId`);
     Storage.remove(`${USER_PREFIX}_userId`);
     Storage.remove(`${USER_PREFIX}_userPhone`);
     Storage.remove(`${USER_PREFIX}_userPhone`);

src/core/page.less

@@ -7,7 +7,7 @@
   left: 0px;
   left: 0px;
   right: 0;
   right: 0;
   bottom: 0;
   bottom: 0;
-  z-index:3;
+  z-index: 3;
   background-color: #fff;
   background-color: #fff;
   -webkit-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
@@ -20,12 +20,12 @@
     bottom: 0;
     bottom: 0;
     z-index: 102;
     z-index: 102;
     overflow: auto;
     overflow: auto;
-    margin:0 16px;
-    .box{
-      &:first-child{
+    margin: 0 16px;
+    .box {
+      &:first-child {
         margin-bottom: 8px;
         margin-bottom: 8px;
       }
       }
-      &:last-child{
+      &:last-child {
         margin-bottom: 16px;
         margin-bottom: 16px;
       }
       }
     }
     }
@@ -48,10 +48,10 @@
   .content-header {
   .content-header {
     padding: 16px 16px 8px 16px;
     padding: 16px 16px 8px 16px;
     line-height: 30px;
     line-height: 30px;
-    font-size:24px;
-    color:#333;
-    font-weight:bold;
-    background: #FFF;
+    font-size: 24px;
+    color: #333;
+    font-weight: bold;
+    background: #fff;
     h1 {
     h1 {
       font-weight: normal;
       font-weight: normal;
       display: inline-block;
       display: inline-block;

src/modules/course-manage/video-course/index.jsx

-import React from 'react'
-import { Tabs } from 'antd'
-import VideoCourseFilter from './components/VideoCourseFilter'
-import VideoCourseOpt from './components/VieoCourseOpt'
-import VideoCourseList from './components/VideoCourseList'
-import CourseService from '@/domains/course-domain/CourseService'
-import User from '@/common/js/user'
-const { TabPane } = Tabs
+import React from 'react';
+import { Tabs } from 'antd';
+import VideoCourseFilter from './components/VideoCourseFilter';
+import VideoCourseOpt from './components/VieoCourseOpt';
+import VideoCourseList from './components/VideoCourseList';
+import CourseService from '@/domains/course-domain/CourseService';
+import User from '@/common/js/user';
+const { TabPane } = Tabs;
 class VideoCourse extends React.Component {
 class VideoCourse extends React.Component {
   constructor(props) {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
     this.state = {
       query: {
       query: {
         size: 10,
         size: 10,
@@ -18,45 +18,43 @@ class VideoCourse extends React.Component {
       dataSource: [], // 视频课列表
       dataSource: [], // 视频课列表
       totalCount: 0, // 视频课数据总条数
       totalCount: 0, // 视频课数据总条数
       currentTabKey: 'internal',
       currentTabKey: 'internal',
-    }
+    };
   }
   }
 
 
   componentWillMount() {
   componentWillMount() {
     // 获取视频课列表
     // 获取视频课列表
-    this.handleFetchScheduleList()
+    this.handleFetchScheduleList();
   }
   }
 
 
   // 获取视频课列表
   // 获取视频课列表
   handleFetchScheduleList = (_query = {}) => {
   handleFetchScheduleList = (_query = {}) => {
-    const { currentTabKey } = this.state
+    const { currentTabKey } = this.state;
     const query = {
     const query = {
       ...this.state.query,
       ...this.state.query,
       ..._query,
       ..._query,
 
 
       courseDivision: currentTabKey === 'external' ? 1 : null,
       courseDivision: currentTabKey === 'external' ? 1 : null,
-    }
-
-    // 更新请求参数
-    this.setState({ query })
+    };
 
 
     CourseService.videoSchedulePage(query).then((res) => {
     CourseService.videoSchedulePage(query).then((res) => {
-      const { result = {} } = res || {}
-      const { records = [], total = 0 } = result
+      const { result = {} } = res || {};
+      const { records = [], total = 0 } = result;
       if (Number(total) && query.size * (query.current - 1) >= Number(total)) {
       if (Number(total) && query.size * (query.current - 1) >= Number(total)) {
         this.handleFetchScheduleList({
         this.handleFetchScheduleList({
           ...query,
           ...query,
           current: 1,
           current: 1,
-        })
-        return
+        });
+        return;
       }
       }
       this.setState({
       this.setState({
+        query,
         dataSource: records,
         dataSource: records,
         totalCount: Number(total),
         totalCount: Number(total),
-      })
-    })
-  }
+      });
+    });
+  };
   currenTabChange = (currentTabKey) => {
   currenTabChange = (currentTabKey) => {
-    const { query } = this.state
+    const { query } = this.state;
     this.setState(
     this.setState(
       {
       {
         currentTabKey,
         currentTabKey,
@@ -66,20 +64,21 @@ class VideoCourse extends React.Component {
         },
         },
       },
       },
       () => {
       () => {
-        this.handleFetchScheduleList()
-      }
-    )
+        console.log('this.state.query===>', this.state.query);
+        // this.handleFetchScheduleList()
       }
       }
+    );
+  };
   changeShelfState = (index, shelfState) => {
   changeShelfState = (index, shelfState) => {
-    const { dataSource } = this.state
-    dataSource[index].shelfState = shelfState
+    const { dataSource } = this.state;
+    dataSource[index].shelfState = shelfState;
     this.setState({
     this.setState({
       dataSource,
       dataSource,
-    })
-  }
+    });
+  };
 
 
   render() {
   render() {
-    const { dataSource, totalCount, query, currentTabKey } = this.state
+    const { dataSource, totalCount, query, currentTabKey } = this.state;
     return (
     return (
       <div className='page video-course-page'>
       <div className='page video-course-page'>
         <div className='content-header'>视频课</div>
         <div className='content-header'>视频课</div>
@@ -107,8 +106,8 @@ class VideoCourse extends React.Component {
           />
           />
         </div>
         </div>
       </div>
       </div>
-    )
+    );
   }
   }
 }
 }
 
 
-export default VideoCourse
+export default VideoCourse;

src/modules/teach-tool/components/AnswerDescPage.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-04-08 15:50:52
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-04-24 15:55:19
+ * @Description: 助学工具-考试-答案详情
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import { Route, withRouter } from 'react-router-dom';
+import User from '@/common/js/user';
+import Service from '@/common/js/service';
+import Lottie from 'lottie-web';
+import './AnswerDescPage.less';
+import { message } from 'antd';
+import XMAudio from './XMAudio';
+import ScanFileModal from '@/modules/prepare-lesson/modal/ScanFileModal';
+const NUM_TO_WORD_MAP = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+
+function AnswerDescPage(props) {
+  const examId = props.match.params.testId.replace(/\?.+/, '');
+  const paperId = window.getParameterByName('paperId');
+  const [customerId, setCustomerId] = useState('');
+  const [examDetail, setExamDetail] = useState({
+    examDesc: '',
+    examDuration: 0,
+    examEndTime: '',
+    examName: '',
+    examStartTime: '',
+    paperId: 0,
+    passRate: 0,
+    passScore: 0,
+    resultContent: '',
+    resultShow: '',
+    totalQuestionCount: 0,
+    totalScore: 0,
+    userCorrectQuestion: 0,
+    userExamDuration: 0,
+    userExamState: '',
+    userScore: 0,
+  });
+  const [paperDetail, setPaperDetail] = useState({}); // 试卷详情
+  const [userAnswerList, setUserAnswerList] = useState([]); // 用户当前答案列表
+  const [allUserAnswerList, setAllUserAnswerList] = useState([]); // 用户所有答案列表
+  const [errorUserAnswerList, setErrorUserAnswerList] = useState([]); // 用户错误答案列表
+
+  const [questionList, setQuestionList] = useState([]); // 用户当前题目列表
+  const [allQuestionList, setAllQuestionList] = useState([]); // 用户所有题目列表
+  const [errorQuestionList, setErrorQuestionList] = useState([]); // 用户错误题目列表
+  const [errorCount, setErrorCount] = useState(0);
+
+  const [onlyError, setOnlyError] = useState(true); // 只显示错题
+  const [activeIndex, setActiveIndex] = useState(0); // 当前答题索引
+  const [activeOrderIndex, setActiveOrderIndex] = useState(0); // 当前答题序号
+  const [isShowQuestionCard, setIsShowQuestionCard] = useState(false); // 答题卡是否展开
+  const [isShowErrorPage, setIsShowErrorPage] = useState(false); // 是否展示异常提示页面
+
+  // 是否打开预览文件弹框
+  const [showScanFile, setShowScanFile] = useState(false);
+  const [scanFileAddress, setScanFileAddress] = useState(false);
+  const [scanFileType, setScanFileType] = useState(false);
+  const questionTypeList = {
+    SINGLE_CHOICE: '单选题',
+    MULTI_CHOICE: '多选题',
+    JUDGE: '判断题',
+    GAP_FILLING: '填空题',
+    INDEFINITE_CHOICE: '不定项选择题',
+  };
+
+  useEffect(() => {
+    getPaperDetail();
+    getExamDetail();
+  }, []);
+  useEffect(() => {
+    Lottie.loadAnimation({
+      path: 'https://image.xiaomaiketang.com/xm/AcQWnGATCM.json',
+      name: 'test',
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      container: document.getElementById('empty-img-box'),
+    });
+  }, []);
+  // 获取考试详情
+  function getExamDetail() {
+    const params = {
+      examId,
+      source: 0,
+      tenantId: User.getStoreId() || window.getParameterByName('id'),
+      userId: props.userId,
+    };
+    Service.Hades('public/customerHades/queryUserExamResult', params, {
+      reject: true,
+    })
+      .then((res) => {
+        const data = { ...res.result };
+        setExamDetail(data);
+      })
+      .catch((res) => {
+        if (res.code === 'EXAM_IS_NOT_EXIST') {
+          handleChangeShowErrorPage();
+        } else {
+          message.error(res.message);
+        }
+      });
+  }
+
+  // 获取试卷详情
+  function getPaperDetail() {
+    Service.Hades('public/customerHades/queryUserExamAnswer', {
+      examId,
+      paperId,
+      readAnswer: true,
+      source: 0,
+      tenantId: User.getStoreId() || window.getParameterByName('id'),
+      userId: props.userId,
+    }).then((res) => {
+      const { paperDetailVO, userExamAnswerVO } = res.result;
+      const paperDetail = { ...paperDetailVO };
+      const allUserAnswerList = [...userExamAnswerVO];
+      let allQuestionList = [...paperDetail.questionList];
+      allQuestionList = allQuestionList.map((item, index) => {
+        item.orderIndex = index;
+        return item;
+      });
+
+      const errorUserAnswerList = _.filter(allUserAnswerList, (item) => {
+        return item.isCorrect === 0;
+      });
+
+      let errorQuestionList = [];
+      let userAnswerMap = {};
+      errorUserAnswerList.forEach((item) => {
+        userAnswerMap[item.questionId] = true;
+      });
+
+      allQuestionList.forEach((item) => {
+        if (userAnswerMap[item.questionId]) {
+          errorQuestionList.push(item);
+        }
+      });
+      setActiveOrderIndex(errorQuestionList.length > 0 ? errorQuestionList[0].orderIndex : 0);
+      setPaperDetail(paperDetail);
+      setAllUserAnswerList(allUserAnswerList);
+      setErrorUserAnswerList(errorUserAnswerList);
+      setErrorCount(errorUserAnswerList.length);
+      setUserAnswerList(errorUserAnswerList);
+      setAllQuestionList(allQuestionList);
+      setErrorQuestionList(errorQuestionList);
+      setQuestionList(errorQuestionList);
+    });
+  }
+
+  function handleChangeShowErrorPage() {
+    setIsShowErrorPage(true);
+  }
+
+  function handleChangeActiveIndex(isPre) {
+    if (onlyError) {
+      if (isPre && activeOrderIndex !== errorQuestionList[0].orderIndex) {
+        setActiveOrderIndex(errorQuestionList[activeIndex - 1].orderIndex);
+        setActiveIndex(activeIndex - 1);
+      } else if (!isPre && activeOrderIndex !== errorQuestionList[errorCount - 1].orderIndex) {
+        setActiveOrderIndex(errorQuestionList[activeIndex + 1].orderIndex);
+        setActiveIndex(activeIndex + 1);
+      }
+    } else {
+      if (isPre && activeOrderIndex !== 0) {
+        setActiveOrderIndex(activeIndex - 1);
+        setActiveIndex(activeIndex - 1);
+      } else if (!isPre && activeOrderIndex !== questionList.length - 1) {
+        setActiveOrderIndex(activeIndex + 1);
+        setActiveIndex(activeIndex + 1);
+      }
+    }
+  }
+
+  function renderFooterText() {
+    if (onlyError && errorCount > 0) {
+      // 只看错题
+      return (
+        <div className='footer-btn'>
+          <div className='pre-next'>
+            <div
+              className={`${activeOrderIndex === (errorQuestionList.length > 0 ? errorQuestionList[0].orderIndex : 0) ? 'disabled' : ''} pre`}
+              onClick={() => handleChangeActiveIndex(true)}>
+              <span className='icon iconfont'>&#xe79c;</span>
+              <div className='text'>上一题</div>
+            </div>
+            <div
+              className={`${activeOrderIndex === (errorQuestionList.length > 0 ? errorQuestionList[errorCount - 1].orderIndex : 0) ? 'disabled' : ''} next`}
+              onClick={() => handleChangeActiveIndex(false)}>
+              <div className='text'>下一题</div>
+              <span className='icon iconfont'>&#xe79b;</span>
+            </div>
+          </div>
+        </div>
+      );
+    } else if (!onlyError) {
+      return (
+        <div className='footer-btn'>
+          <div className='pre-next'>
+            <div className={`${activeOrderIndex === 0 ? 'disabled' : ''} pre`} onClick={() => handleChangeActiveIndex(true)}>
+              <span className='icon iconfont'>&#xe79c;</span>
+              <div className='text'>上一题</div>
+            </div>
+            <div className={`${activeOrderIndex === questionList.length - 1 ? 'disabled' : ''} next`} onClick={() => handleChangeActiveIndex(false)}>
+              <div className='text'>下一题</div>
+              <span className='icon iconfont'>&#xe79b;</span>
+            </div>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  function handleRenderQuestionItem() {
+    return _.map(questionList, (questionItem, questionIndex) => {
+      const { questionStemList, optionList, gapFillingAnswerList, questionAnswerDescList, questionType, score, questionId, orderIndex } = questionItem;
+      return (
+        <div className={`question-info-item`}>
+          {renderStem(questionItem, questionStemList, questionType, score, orderIndex, questionId, gapFillingAnswerList)}
+          {questionType !== 'GAP_FILLING' &&
+            _.map(optionList, (optionItem, optionIndex) => {
+              return renderOption(optionItem, optionIndex, questionId);
+            })}
+          {renderAnswerCompare(questionId, questionType, optionList, gapFillingAnswerList)}
+          {/* {renderAnswerDesc(questionAnswerDescList)} */}
+        </div>
+      );
+    });
+  }
+
+  // 查看图片或视频
+  function handleScanFile(scanFileType, scanFileAddress) {
+    setShowScanFile(true);
+    setScanFileAddress(scanFileAddress);
+    setScanFileType(scanFileType);
+  }
+
+  // 渲染多媒体内容
+  function renderMediaContent(mediaContent) {
+    return (
+      <div className='media-container'>
+        {_.map(mediaContent, (mediaItem, mediaIndex) => {
+          let dom = '';
+          let { type, content, size } = mediaItem;
+          switch (type) {
+            case 'PICTURE':
+              dom = (
+                <div key={mediaIndex + 1} className='picture-box'>
+                  <img src={content} onClick={() => handleScanFile('JPG', content)} />
+                </div>
+              );
+              break;
+            case 'VOICE':
+              dom = (
+                <div key={mediaIndex + 1} className='voice-box'>
+                  <XMAudio
+                    url={content}
+                    getDuration={(durationSize) => {
+                      size = durationSize;
+                    }}
+                    index={mediaIndex + 1}
+                    size={size || 1000}
+                  />
+                </div>
+              );
+              break;
+            case 'AUDIO':
+              dom = (
+                <div key={mediaIndex} className='voice-box'>
+                  <XMAudio
+                    url={content}
+                    getDuration={(durationSize) => {
+                      size = durationSize;
+                    }}
+                    index={mediaIndex}
+                    size={size || 1000}
+                  />
+                </div>
+              );
+              break;
+          }
+          return dom;
+        })}
+      </div>
+    );
+  }
+
+  // 渲染题干
+  function renderStem(questionItem, questionStemList, questionType, score, orderIndex, questionId, gapFillingAnswerList) {
+    const textContent = _.filter(questionStemList, (item) => {
+      return item.type === 'RICH_TEXT';
+    });
+
+    const mediaContent = _.filter(questionStemList, (item) => {
+      return item.type !== 'RICH_TEXT';
+    });
+
+    let content = textContent.length > 0 ? textContent[0].content : '';
+
+    const userAnswerItem = _.filter(userAnswerList, (item) => {
+      return item.questionId === questionId;
+    });
+
+    // 填空题题干渲染
+    if (questionType === 'GAP_FILLING' && userAnswerItem.length > 0) {
+      let userAnswer = [];
+      if (userAnswerItem[0].answer) {
+        userAnswer = userAnswerItem[0].answer;
+      } else {
+        gapFillingAnswerList.forEach((item, index) => {
+          userAnswer.push('');
+        });
+      }
+
+      gapFillingAnswerList.map((gapItem, gapIndex) => {
+        let gapValue = gapItem.correctAnswerList.includes(userAnswer[gapIndex])
+          ? `<img src="https://image.xiaomaiketang.com/xm/FwZa2Kaypc.png" />`
+          : `<img src="https://image.xiaomaiketang.com/xm/7tRHDf6ysA.png" />`;
+        content = content.replace(
+          /(_)|(<input.*?>)/,
+          `<div class="gap-line"><span>${userAnswer[gapIndex] === '@X#$' ? '' : userAnswer[gapIndex]} </span>${gapValue}</div>`
+        );
+      });
+    }
+
+    let textDom = (
+      <div
+        key={0}
+        className='text-dom'
+        dangerouslySetInnerHTML={{
+          __html: content,
+        }}
+      />
+    );
+
+    return (
+      <div className='stem-line__item' id={questionItem.questionId}>
+        <div className='text'>
+          <img
+            className='answer-icon'
+            src={userAnswerItem[0].isCorrect === 1 ? 'https://image.xiaomaiketang.com/xm/FwZa2Kaypc.png' : 'https://image.xiaomaiketang.com/xm/7tRHDf6ysA.png'}
+          />
+          <span className='question-index'>第{orderIndex + 1}题</span>
+          <span className='steam-line_type'>（{`${questionTypeList[questionType]} | ${score}分`}）</span>
+          {textDom}
+        </div>
+        {renderMediaContent(mediaContent)}
+      </div>
+    );
+  }
+
+  // 渲染选项
+  function renderOption(optionItem, optionIndex, questionId) {
+    const { questionOptionContentList, optionSort, isCorrectAnswer, id } = optionItem;
+    const textContent = _.filter(questionOptionContentList, (item) => {
+      return item.type === 'RICH_TEXT';
+    });
+
+    const mediaContent = _.filter(questionOptionContentList, (item) => {
+      return item.type !== 'RICH_TEXT';
+    });
+
+    let content = textContent.length > 0 ? textContent[0].content : '';
+    let textDom = (
+      <span
+        key={0}
+        className='text-dom'
+        dangerouslySetInnerHTML={{
+          __html: content,
+        }}
+      />
+    );
+
+    const userAnswerItem = _.filter(userAnswerList, (item) => {
+      return item.questionId === questionId;
+    });
+
+    let userAnswer = [];
+    if (userAnswerItem.length > 0) {
+      if (userAnswerItem[0].answer) {
+        userAnswer = userAnswerItem[0].answer;
+      }
+    }
+
+    let optionStatus = '';
+    if (userAnswer.includes(id)) {
+      // 选中
+      optionStatus = 'answered';
+    }
+
+    let answerStatusIcon = 'default';
+
+    if (isCorrectAnswer) {
+      answerStatusIcon = 'https://image.xiaomaiketang.com/xm/FwZa2Kaypc.png';
+    } else if (userAnswer.includes(id)) {
+      answerStatusIcon = 'https://image.xiaomaiketang.com/xm/7tRHDf6ysA.png';
+    } else {
+      answerStatusIcon = 'default';
+    }
+
+    return (
+      <div className='option-line__item'>
+        <div className={`text ${optionStatus}`}>
+          <div className='option-sort'>{NUM_TO_WORD_MAP[optionSort]}</div>
+          <div className='option-content'>
+            <div className='text-dom'>{textDom}</div>
+            {mediaContent.length > 0 && renderMediaContent(mediaContent)}
+          </div>
+        </div>
+        {answerStatusIcon !== 'default' && <img className='icon' src={answerStatusIcon} />}
+      </div>
+    );
+  }
+
+  // 渲染答案对比
+  function renderAnswerCompare(questionId, questionType, optionList, gapFillingAnswerList) {
+    const userAnswerItem = _.filter(userAnswerList, (item) => {
+      return item.questionId === questionId;
+    });
+    const userAnswer = userAnswerItem.length > 0 && userAnswerItem[0].answer;
+
+    if (questionType === 'GAP_FILLING') {
+      return (
+        <div className='answer-compare-box'>
+          <div className='answer-info' style={{ marginBottom: '0.16rem' }}>
+            <div className='title'>考试作答是</div>
+            {userAnswer &&
+              userAnswer.map((item, index) => {
+                return (
+                  <div className='content'>
+                    <span>[填空{index + 1}]</span>
+                    <span
+                      dangerouslySetInnerHTML={{
+                        __html: item === '@X#$' ? '' : item,
+                      }}
+                    />
+                    <span>;</span>
+                  </div>
+                );
+              })}
+          </div>
+          <div className='answer-info'>
+            <div className='title'>正确答案是</div>
+            {gapFillingAnswerList.map((item, index) => {
+              return (
+                <div className='content' style={{ color: '#20CECD' }}>
+                  <span>[填空{index + 1}]</span>
+                  {_.map(item.correctAnswerList, (childItem, childIndex) => {
+                    return (
+                      <span
+                        dangerouslySetInnerHTML={{
+                          __html: childItem,
+                        }}
+                      />
+                    );
+                  })}
+                  <span>;</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    } else {
+      // 正确答案序号
+      const rightOptionSort = _.filter(optionList, (item) => {
+        return item.isCorrectAnswer === 1;
+      }).map((sortItem) => {
+        return sortItem.optionSort;
+      });
+
+      const userAnswerSort = _.filter(optionList, (item) => {
+        if (userAnswer) {
+          return userAnswer.includes(item.id);
+        }
+      }).map((sortItem) => {
+        return sortItem.optionSort;
+      });
+
+      return (
+        <div className='answer-compare-box'>
+          <div className='answer-info'>
+            <div className='title'>考试作答是</div>
+            <div className='content'>
+              {userAnswerSort.map((item) => {
+                return <span>{NUM_TO_WORD_MAP[item]} </span>;
+              })}
+            </div>
+          </div>
+          <div className='answer-info'>
+            <div className='title'>正确答案是</div>
+            <div className='content' style={{ color: '#20CECD' }}>
+              {rightOptionSort.map((item) => {
+                return <span>{NUM_TO_WORD_MAP[item]} </span>;
+              })}
+            </div>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  // 渲染答案解析
+  function renderAnswerDesc(questionAnswerDescList) {
+    const textContent = _.filter(questionAnswerDescList, (item) => {
+      return item.type === 'RICH_TEXT';
+    });
+
+    const mediaContent = _.filter(questionAnswerDescList, (item) => {
+      return item.type !== 'RICH_TEXT';
+    });
+
+    let content = textContent.length > 0 ? `${textContent[0].content}：` : '';
+
+    let textDom = (
+      <div
+        key={0}
+        className='text-dom'
+        dangerouslySetInnerHTML={{
+          __html: content,
+        }}
+      />
+    );
+
+    return (
+      <div className='desc-line__item'>
+        {textDom}
+        {renderAnswerDescMedia(mediaContent)}
+      </div>
+    );
+  }
+
+  // 渲染答案解析的多媒体
+  function renderAnswerDescMedia(mediaContent) {
+    const pictureMediaList = _.filter(mediaContent, (mediaItem) => {
+      return mediaItem.type === 'PICTURE';
+    });
+    const voiceMediaList = _.filter(mediaContent, (mediaItem) => {
+      return mediaItem.type === 'VOICE';
+    });
+    const audioMediaList = _.filter(mediaContent, (mediaItem) => {
+      return mediaItem.type === 'AUDIO';
+    });
+    const videoMediaList = _.filter(mediaContent, (mediaItem) => {
+      return mediaItem.type === 'VIDEO';
+    });
+
+    return (
+      <div className='desc-media-container'>
+        {pictureMediaList.length > 0 && (
+          <div className='desc-picture-box'>
+            {_.map(pictureMediaList, (pictureItem, pictureIndex) => {
+              let { content } = pictureItem;
+              return (
+                <div className='picture-box' key={pictureIndex}>
+                  <img className='img-box' src={content} onClick={() => handleScanFile('JPG', content)} />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {audioMediaList.length > 0 && (
+          <div className='desc-audio-box'>
+            {_.map(audioMediaList, (audioItem, audioIndex) => {
+              let { content, size } = audioItem;
+              return (
+                <div className='audio-box' key={audioIndex}>
+                  <XMAudio
+                    forbidParse
+                    url={content}
+                    getDuration={(durationSize) => {
+                      size = durationSize;
+                    }}
+                    index={audioIndex}
+                    size={size || 1000}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {voiceMediaList.length > 0 && (
+          <div className='desc-audio-box'>
+            {_.map(voiceMediaList, (voiceItem, voiceIndex) => {
+              let { content, size } = voiceItem;
+              return (
+                <div className='audio-box' key={voiceIndex}>
+                  <XMAudio
+                    forbidParse
+                    url={content}
+                    getDuration={(durationSize) => {
+                      size = durationSize;
+                    }}
+                    index={voiceIndex}
+                    size={size || 1000}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {videoMediaList.length > 0 && (
+          <div className='desc-video-box'>
+            {_.map(videoMediaList, (videoItem, videoIndex) => {
+              let { content } = videoItem;
+              return (
+                <div className='video-box' key={videoIndex}>
+                  <img className='video-box_content' src={`${content}?x-oss-process=video/snapshot,t_0,m_fast`} />
+                  <img className='video-box_btn' src='https://image.xiaomaiketang.com/xm/r5H8cYm4ch.png' onClick={() => handleScanFile('MP4', content)} />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // 答题卡展开和收起
+  function handleToggleQuestionCardShow() {
+    setIsShowQuestionCard(!isShowQuestionCard);
+  }
+
+  // 快速跳转题目
+  function handleQuickActiveQuestion(orderIndex, answerIndex) {
+    setActiveOrderIndex(orderIndex);
+    setActiveIndex(answerIndex);
+    setIsShowQuestionCard(false);
+  }
+
+  // 只选错题
+  function chooseErrorAnswer() {
+    setOnlyError(!onlyError);
+    setActiveOrderIndex(!onlyError ? (errorCount > 0 ? errorQuestionList[0].orderIndex : 0) : 0);
+    setActiveIndex(0);
+    setUserAnswerList(!onlyError ? errorUserAnswerList : allUserAnswerList);
+    setQuestionList(!onlyError ? errorQuestionList : allQuestionList);
+  }
+
+  const { totalQuestionCount, userCorrectQuestion } = examDetail;
+
+  let sortedAnswerList = [];
+  let userAnswerMap = {};
+  userAnswerList.forEach((item) => {
+    userAnswerMap[item.questionId] = item;
+  });
+
+  questionList.forEach((item) => {
+    if (userAnswerMap[item.questionId]) {
+      sortedAnswerList.push({
+        ...userAnswerMap[item.questionId],
+        orderIndex: item.orderIndex,
+      });
+    }
+  });
+
+  return (
+    <div className='answer-desc-page'>
+      <div className='center'>
+        <div className='box-content'>
+          <div className='answer-desc-header'>
+            <div className='desc-header-container'>
+              <div className='desc-title'>答案详情</div>
+              <div className='choose-error-box'>
+                <img
+                  onClick={() => {
+                    chooseErrorAnswer();
+                  }}
+                  src={onlyError ? 'https://image.xiaomaiketang.com/xm/FwZa2Kaypc.png' : 'https://image.xiaomaiketang.com/xm/crtyKFjcAm.png'}
+                />
+                <span>只看错题</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={`empty ${errorCount === 0 && onlyError ? '' : 'empty-hide'}`}>
+          <div className='img-box'>
+            <div id='empty-img-box'></div>
+          </div>
+          <div className='empty-text'>本次考试无错题</div>
+        </div>
+
+        <If condition={!(errorCount === 0 && onlyError)}>
+          <div className='answer-desc-content'>
+            <div className='question-list-box'>{handleRenderQuestionItem()}</div>
+          </div>
+        </If>
+        {/* {renderFooterText()} */}
+      </div>
+      {showScanFile && (
+        <ScanFileModal
+          fileType={scanFileType}
+          item={{
+            ossAddress: scanFileAddress,
+          }}
+          close={() => {
+            setShowScanFile(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default withRouter(AnswerDescPage);

src/modules/teach-tool/components/AnswerDescPage.less

+.answer-desc-page {
+  background-color: #fff;
+  p {
+    margin: 0 !important;
+  }
+  .answer-desc-header {
+    .desc-header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .desc-title {
+        font-size: 20px;
+        font-weight: 500;
+        color: #333333;
+        position: relative;
+        margin-left: 8px;
+        line-height: 28px;
+        &::before {
+          position: absolute;
+          content: '';
+          left: -8px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 16px;
+          background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
+        }
+      }
+      .choose-error-box {
+        display: flex;
+        align-items: center;
+        img {
+          width: 18px;
+          height: 18px;
+          margin-right: 2px;
+        }
+        span {
+          font-size: 15px;
+          color: #999999;
+        }
+      }
+    }
+  }
+
+  .answer-desc-content {
+    width: 840px;
+    margin: 0 auto;
+    text-align: left;
+    .question-list-box {
+      padding: 21px 0;
+      .question-info-item {
+        margin-bottom: 20px;
+        .stem-line__item {
+          margin-bottom: 16px;
+
+          .text {
+            line-height: 1.8;
+            .answer-icon {
+              width: 20px;
+              height: 20px;
+              margin-right: 12px;
+              display: inline-block;
+              margin-bottom: 5px;
+            }
+            .question-index {
+              font-size: 16px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #333333;
+            }
+            .steam-line_type {
+              font-size: 13px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+            }
+            .text-dom {
+              color: #333333;
+              word-wrap: break-word;
+              word-break: break-all;
+              white-space: normal;
+              font-size: 17px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #333333;
+
+              * {
+                display: inline;
+              }
+              .gap-line {
+                border-bottom: 1px solid;
+                margin: 0 8px;
+                padding: 0 4px;
+                img {
+                  margin-left: 4px;
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+            }
+          }
+        }
+        .option-line__item {
+          margin-bottom: 12px;
+          display: flex;
+          align-items: center;
+          .icon {
+            margin-left: 12px;
+            width: 20px;
+            height: 20px;
+          }
+          .text {
+            width: 100%;
+            background: #f4f6fa;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            padding: 16px;
+            .option-sort {
+              font-size: 15px;
+              line-height: 21px;
+              position: relative;
+              &::after {
+                position: absolute;
+                left: 22px;
+                content: '';
+                width: 1px;
+                height: 20px;
+                background-color: rgba(238, 238, 238, 1);
+              }
+            }
+            .option-content {
+              margin-left: 32px;
+            }
+            .text-dom {
+              font-size: 15px;
+              color: #333333;
+              line-height: 21px;
+              word-wrap: break-word;
+              word-break: break-all;
+              white-space: normal;
+            }
+            &.answered {
+              background: rgba(41, 102, 255, 0.05);
+              border: 1px solid #2966ff;
+              color: #2966ff;
+              .text-dom {
+                color: #2966ff;
+              }
+            }
+            &.right {
+              background: rgba(21, 217, 177, 0.05);
+              border: 1px solid #15d9b1;
+              color: #15d9b1;
+            }
+            &.wrong {
+              background: rgba(255, 79, 79, 0.05);
+              border: 1px solid #ff4f4f;
+              color: #ff4f4f;
+            }
+          }
+        }
+        .desc-line__item {
+          margin-top: 20px;
+          .desc-title {
+            font-size: 20px;
+            font-weight: 500;
+            color: #333333;
+            position: relative;
+            margin-left: 8px;
+            line-height: 36px;
+            &::before {
+              position: absolute;
+              content: '';
+              left: -8px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 4px;
+              height: 16px;
+              background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
+            }
+          }
+          .text-dom {
+            font-size: 14px;
+            color: #999999;
+            line-height: 20px;
+            word-wrap: break-word;
+            word-break: break-all;
+            white-space: normal;
+            * {
+              display: inline;
+            }
+          }
+        }
+        .media-container {
+          .picture-box {
+            width: 88px;
+            height: 88px;
+            border-radius: 4px;
+            overflow: hidden;
+            align-items: center;
+            justify-content: center;
+            margin-top: 12px;
+            margin-right: 12px;
+            position: relative;
+            display: inline-flex;
+            border: 1px solid #e8e8e8;
+            img {
+              max-width: 100%;
+              max-height: 100%;
+              border-radius: 4px;
+              vertical-align: middle;
+              width: auto;
+              height: auto;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+            }
+          }
+          .voice-box {
+            width: 27px;
+            height: 40px;
+            margin-top: 12px;
+            margin-right: 12px;
+          }
+        }
+        .desc-media-container {
+          margin: 12px 0;
+          .desc-picture-box {
+            display: inline-flex;
+            margin-bottom: 12px;
+            .picture-box {
+              width: 88px;
+              height: 88px;
+              border-radius: 4px;
+              overflow: hidden;
+              align-items: center;
+              justify-content: center;
+              margin-right: 12px;
+              position: relative;
+              display: inline-flex;
+              border: 1px solid #e8e8e8;
+              .img-box {
+                max-width: 100%;
+                max-height: 100%;
+                border-radius: 4px;
+                vertical-align: middle;
+                width: auto;
+                height: auto;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              }
+            }
+          }
+          .desc-audio-box {
+            margin-bottom: 12px;
+            .audio-box {
+              margin-bottom: 12px;
+              border-radius: 5px;
+              height: 40px;
+            }
+          }
+          .desc-video-box {
+            .video-box {
+              position: relative;
+              display: inline-block;
+              width: 208px;
+              height: calc(208px * 9 / 16);
+              position: relative;
+              background-color: #000;
+              margin: 0px 12px 12px 0;
+              &_content {
+                max-width: 100%;
+                max-height: 100%;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              }
+              &_btn {
+                width: 32px;
+                height: 32px;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-top: -16px;
+                margin-left: -16px;
+              }
+              .icon_arrow {
+                position: absolute;
+                top: -12px;
+                right: -8px;
+                color: #bfbfbf;
+                cursor: pointer;
+                font-size: 16px;
+              }
+            }
+          }
+        }
+        .answer-compare-box {
+          margin-top: 16px;
+          padding-top: 12px;
+          padding-bottom: 12px;
+          font-size: 15px;
+          margin-bottom: 8px;
+          .answer-info {
+            margin-bottom: 8px;
+            .title {
+              color: #999999;
+              display: inline-block;
+              margin-right: 12px;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 20px;
+            }
+            .content {
+              font-weight: 500;
+              color: #333333;
+              display: inline;
+              word-wrap: break-word;
+              word-break: break-all;
+              white-space: normal;
+              span {
+                margin-right: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .footer-btn {
+    width: 100%;
+    height: 64px;
+    background: #ffffff;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid rgba(238, 238, 238, 1);
+    padding: 10px 16px;
+    .hand-in-paper {
+      display: flex;
+      .icon {
+        width: 15px;
+        line-height: 18px;
+        color: rgba(255, 183, 20, 1);
+        margin-right: 6px;
+      }
+    }
+
+    .pre-next {
+      width: 343px;
+      height: 44px;
+      border-radius: 5px;
+      border: 2px solid #eeeeee;
+      display: flex;
+      justify-content: space-between;
+      .pre,
+      .next {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 17px;
+          line-height: 11px;
+          margin-left: 5px;
+          color: #ccc;
+        }
+        .text {
+          font-size: 15px;
+          color: #666;
+          line-height: 21px;
+        }
+        &.disabled {
+          pointer-events: none;
+          .text {
+            color: #cccccc;
+          }
+        }
+      }
+    }
+  }
+}
+.empty {
+  z-index: 10;
+  width: 100%;
+  height: 360px;
+  background-color: #fff;
+  .img-box {
+    margin: 0 auto;
+    width: 120px;
+  }
+  img {
+    height: 120px;
+    display: inline-block;
+    margin-top: 100px;
+    margin-bottom: 18px;
+  }
+  .empty-text {
+    width: 250px;
+    height: 18px;
+    font-size: 13px;
+    color: #333;
+    line-height: 18px;
+    margin: 0 auto;
+    text-align: center;
+  }
+  &.empty-hide {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+  }
+}

src/modules/teach-tool/components/XMAudio.jsx

@@ -5,9 +5,9 @@
  * @Last Modified time: 2020-04-18 10:54:32
  * @Last Modified time: 2020-04-18 10:54:32
  */
  */
 
 
-import React, { useState, useEffect, useRef } from "react";
-import "./XMAudio.less";
-import VideoUpload from "@/core/upload";
+import React, { useState, useEffect, useRef } from 'react';
+import './XMAudio.less';
+import VideoUpload from '@/core/upload';
 
 
 let timerInterval;
 let timerInterval;
 
 
@@ -22,7 +22,7 @@ const XMAudio = (props) => {
   const [totalTime, setTotalTime] = useState(Math.round(Number(size)));
   const [totalTime, setTotalTime] = useState(Math.round(Number(size)));
   const prevTimeRef = useRef();
   const prevTimeRef = useRef();
   useEffect(() => {
   useEffect(() => {
-    if(!props.forbidParse){
+    if (!props.forbidParse) {
       VideoUpload.getVideoParseRoute(props.url).then((newUrl) => {
       VideoUpload.getVideoParseRoute(props.url).then((newUrl) => {
         setUrl(newUrl);
         setUrl(newUrl);
       });
       });
@@ -30,7 +30,7 @@ const XMAudio = (props) => {
     setLeftTime(Math.round(Number(size)));
     setLeftTime(Math.round(Number(size)));
     setTotalTime(Math.round(Number(size)));
     setTotalTime(Math.round(Number(size)));
 
 
-    ref.current.addEventListener("pause", () => {
+    ref.current.addEventListener('pause', () => {
       clearInterval(timer);
       clearInterval(timer);
       setPlaying(false);
       setPlaying(false);
       setTimer(null);
       setTimer(null);
@@ -42,7 +42,6 @@ const XMAudio = (props) => {
   }, [props.url]);
   }, [props.url]);
 
 
   useEffect(() => {
   useEffect(() => {
-
     if (playing) {
     if (playing) {
       timerInterval = setInterval(() => {
       timerInterval = setInterval(() => {
         setPlayedTime((preTime) => {
         setPlayedTime((preTime) => {
@@ -53,18 +52,18 @@ const XMAudio = (props) => {
         if ((prevTimeRef.current + 20) % 1000 === 0) {
         if ((prevTimeRef.current + 20) % 1000 === 0) {
           setLeftTime(totalTime - (prevTimeRef.current + 20));
           setLeftTime(totalTime - (prevTimeRef.current + 20));
         }
         }
-        if ((prevTimeRef.current + 30) >= totalTime) {
+        if (prevTimeRef.current + 30 >= totalTime) {
           clearInterval(timerInterval);
           clearInterval(timerInterval);
           setPlayedTime(0);
           setPlayedTime(0);
           setLeftTime(totalTime);
           setLeftTime(totalTime);
           setPlaying(false);
           setPlaying(false);
         }
         }
       }, 20);
       }, 20);
-      const audioDomList = document.querySelectorAll("audio");
+      const audioDomList = document.querySelectorAll('audio');
       for (let i = 0; i < Array.from(audioDomList).length; i++) {
       for (let i = 0; i < Array.from(audioDomList).length; i++) {
         if (audioDomList[i] === ref.current) {
         if (audioDomList[i] === ref.current) {
           ref.current.play();
           ref.current.play();
-          setTimer(timerInterval)
+          setTimer(timerInterval);
         } else {
         } else {
           audioDomList[i].pause();
           audioDomList[i].pause();
         }
         }
@@ -75,9 +74,7 @@ const XMAudio = (props) => {
     }
     }
   }, [playing]);
   }, [playing]);
 
 
-  const audioImg = `https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/${
-    playing ? 1584514990496 : 1584514999661
-    }.png`;
+  const audioImg = `https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/${playing ? 1584514990496 : 1584514999661}.png`;
 
 
   function _togglePlay() {
   function _togglePlay() {
     playing ? pausePlay() : startPlay();
     playing ? pausePlay() : startPlay();
@@ -112,78 +109,74 @@ const XMAudio = (props) => {
     }
     }
   }
   }
 
 
-
-
   function _startTime() {
   function _startTime() {
     let time = Math.floor(playedTime / 1000);
     let time = Math.floor(playedTime / 1000);
-    let second = 0
+    let second = 0;
     let minute = 0;
     let minute = 0;
-    let result = 0
+    let result = 0;
     if (time > 0) {
     if (time > 0) {
-      minute = Math.floor(time % 3600 / 60);
+      minute = Math.floor((time % 3600) / 60);
       second = Math.floor((time - 60 * minute) % 60);
       second = Math.floor((time - 60 * minute) % 60);
 
 
       if (minute < 10) {
       if (minute < 10) {
-        minute = "0" + minute;
+        minute = '0' + minute;
       }
       }
       if (second < 10) {
       if (second < 10) {
-        second = "0" + second;
+        second = '0' + second;
       }
       }
-      result = minute + ':' + second
-    }else{
-      result = "00:00"
+      result = minute + ':' + second;
+    } else {
+      result = '00:00';
     }
     }
     return result;
     return result;
   }
   }
 
 
   function _endTime() {
   function _endTime() {
     let time = Math.floor(totalTime / 1000);
     let time = Math.floor(totalTime / 1000);
-    let second = 0
+    let second = 0;
     let minute = 0;
     let minute = 0;
-    let result = 0
+    let result = 0;
     if (time > 0) {
     if (time > 0) {
-      minute = Math.floor(time % 3600 / 60);
+      minute = Math.floor((time % 3600) / 60);
       second = Math.floor((time - 60 * minute) % 60);
       second = Math.floor((time - 60 * minute) % 60);
 
 
       if (minute < 10) {
       if (minute < 10) {
-        minute = "0" + minute;
+        minute = '0' + minute;
       }
       }
       if (second < 10) {
       if (second < 10) {
-        second = "0" + second;
+        second = '0' + second;
       }
       }
-      result = minute + ':' + second
+      result = minute + ':' + second;
     }
     }
 
 
-    if(time === 0){
-      result = "00:00"
+    if (time === 0) {
+      result = '00:00';
     }
     }
     return result;
     return result;
   }
   }
 
 
-
   function putDownFlag(event) {
   function putDownFlag(event) {
     let dragDiv = event.target;
     let dragDiv = event.target;
-    dragDiv.style.cursor = "pointer";
+    dragDiv.style.cursor = 'pointer';
     let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离
     let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离
     let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
     let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
     // 按住鼠标时为div修改样式
     // 按住鼠标时为div修改样式
-    dragDiv.style.width = "16px";
-    dragDiv.style.height = "16px";
-    dragDiv.style.top = "-7px";
-    dragDiv.style.backGround = "linear-gradient(180deg, #FFB467 0%, #FF9143 100%)"
+    dragDiv.style.width = '16px';
+    dragDiv.style.height = '16px';
+    dragDiv.style.top = '-7px';
+    dragDiv.style.backGround = 'linear-gradient(180deg, #FFB467 0%, #FF9143 100%)';
     // 鼠标移动的时候不停的修改div的left和top值
     // 鼠标移动的时候不停的修改div的left和top值
     document.onmousemove = function (event) {
     document.onmousemove = function (event) {
-      dragDiv.style.left = event.clientX - innerX + "px";
+      dragDiv.style.left = event.clientX - innerX + 'px';
       // 边界判断
       // 边界判断
       if (parseInt(dragDiv.style.left) <= 0) {
       if (parseInt(dragDiv.style.left) <= 0) {
-        dragDiv.style.left = "0px";
+        dragDiv.style.left = '0px';
       }
       }
       if (parseInt(dragDiv.style.left) >= 154) {
       if (parseInt(dragDiv.style.left) >= 154) {
-        dragDiv.style.left = "149px";
-      }
-
-      setPlayedTime(parseInt(dragDiv.style.left) / 150 * totalTime)
+        dragDiv.style.left = '149px';
       }
       }
+      setPlayedTime((parseInt(dragDiv.style.left) / 150) * totalTime);
+    };
     // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
     // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
     // 否则鼠标抬起后还可以继续拖拽方块
     // 否则鼠标抬起后还可以继续拖拽方块
     document.onmouseup = function () {
     document.onmouseup = function () {
@@ -191,50 +184,43 @@ const XMAudio = (props) => {
       document.onmouseup = null;
       document.onmouseup = null;
       // 清除border
       // 清除border
 
 
-      dragDiv.style.top = "-4px";
-      dragDiv.style.width = "10px";
-      dragDiv.style.height = "10px";
-    }
+      dragDiv.style.top = '-4px';
+      dragDiv.style.width = '10px';
+      dragDiv.style.height = '10px';
+    };
   }
   }
-  function mouseOver(event){
+  function mouseOver(event) {
     let dragDiv = event.target;
     let dragDiv = event.target;
-    dragDiv.style.cursor = "pointer";
-    dragDiv.style.width = "16px";
-    dragDiv.style.height = "16px";
-    dragDiv.style.top = "-7px";
-    dragDiv.style.backGround = "linear-gradient(180deg, #FFB467 0%, #FF9143 100%)"
+    dragDiv.style.cursor = 'pointer';
+    dragDiv.style.width = '16px';
+    dragDiv.style.height = '16px';
+    dragDiv.style.top = '-7px';
+    dragDiv.style.backGround = 'linear-gradient(180deg, #FFB467 0%, #FF9143 100%)';
   }
   }
-  function mouseLeave (event){
+  function mouseLeave(event) {
     let dragDiv = event.target;
     let dragDiv = event.target;
-    dragDiv.style.top = "-4px";
-      dragDiv.style.width = "10px";
-      dragDiv.style.height = "10px";
+    dragDiv.style.top = '-4px';
+    dragDiv.style.width = '10px';
+    dragDiv.style.height = '10px';
+    ref.current.currentTime = playedTime / 1000;
   }
   }
   return (
   return (
-    <div className="xm-audio" style={style}>
-      <img src={audioImg} onClick={_togglePlay} className="audio-image" />
-      <div className="process-area">
+    <div className='xm-audio' style={style}>
+      <img src={audioImg} onClick={_togglePlay} className='audio-image' />
+      <div className='process-area'>
+        <div className='complete-area' style={{ width: `${(playedTime / totalTime) * 150}px ` }} />
         <div
         <div
-          className="complete-area"
-          style={{ width: `${(playedTime / totalTime) * 150}px ` }}
-        />
-        <div
-          className="flag"
+          className='flag'
           style={{ left: `${(playedTime / totalTime) * 150}px ` }}
           style={{ left: `${(playedTime / totalTime) * 150}px ` }}
           onMouseDown={(e) => putDownFlag(e)}
           onMouseDown={(e) => putDownFlag(e)}
-          onMouseOver={(e)=> mouseOver(e)}
-          onMouseLeave={(e)=>mouseLeave(e)}
+          onMouseOver={(e) => mouseOver(e)}
+          onMouseLeave={(e) => mouseLeave(e)}
         />
         />
       </div>
       </div>
-      <span className="sec-time">
+      <span className='sec-time'>
         {`${_startTime()}`}/{`${_endTime()}`}
         {`${_startTime()}`}/{`${_endTime()}`}
       </span>
       </span>
-      <audio
-        src={url}
-        ref={ref}
-        autoPlay={false}
-        onCanPlayThrough={_getDuration}
-      />
+      <audio src={url} ref={ref} autoPlay={false} onCanPlayThrough={_getDuration} />
     </div>
     </div>
   );
   );
 };
 };

src/modules/teach-tool/components/XMAudio.less

@@ -5,10 +5,11 @@
  * @Last Modified time: 2020-03-24 10:18:43
  * @Last Modified time: 2020-03-24 10:18:43
  */
  */
 
 
- .xm-audio {
+.xm-audio {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   width: 280px;
   width: 280px;
+  padding: 10px 20px;
   border-radius: 5px;
   border-radius: 5px;
   background-color: #ffffff;
   background-color: #ffffff;
   .audio-image {
   .audio-image {
@@ -24,11 +25,11 @@
     cursor: pointer;
     cursor: pointer;
   }
   }
   .play-icon {
   .play-icon {
-    color: #FC8540;
+    color: #fc8540;
   }
   }
-  .sec-time{
+  .sec-time {
     white-space: nowrap;
     white-space: nowrap;
-    color: #FF8534;
+    color: #ff8534;
     margin-left: 12px;
     margin-left: 12px;
     font-size: 13px;
     font-size: 13px;
   }
   }
@@ -38,11 +39,11 @@
     border-radius: 3px;
     border-radius: 3px;
     margin-left: 12px;
     margin-left: 12px;
     position: relative;
     position: relative;
-    background:rgba(255,133,52,0.2);
+    background: rgba(255, 133, 52, 0.2);
 
 
     .complete-area {
     .complete-area {
       height: 100%;
       height: 100%;
-      background-color: #FF8534;
+      background-color: #ff8534;
       border-top-left-radius: 3px;
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       border-bottom-left-radius: 3px;
     }
     }
@@ -52,7 +53,7 @@
       width: 10px;
       width: 10px;
       height: 10px;
       height: 10px;
       border-radius: 50%;
       border-radius: 50%;
-      background:linear-gradient(180deg,rgba(255,180,103,1) 0%,rgba(255,145,67,1) 100%);
+      background: linear-gradient(180deg, rgba(255, 180, 103, 1) 0%, rgba(255, 145, 67, 1) 100%);
     }
     }
   }
   }
 }
 }

src/modules/teach-tool/examination-manager/Index.tsx

-import React, { useState, useRef, useEffect, useContext } from 'react'
+import React, { useState, useRef, useEffect, useContext } from 'react';
 import { Input, Select, DatePicker, Tooltip, Button, Table, Dropdown, Menu, Modal } from 'antd';
 import { Input, Select, DatePicker, Tooltip, Button, Table, Dropdown, Menu, Modal } from 'antd';
 import TeacherSelect from '@/modules/common/TeacherSelect';
 import TeacherSelect from '@/modules/common/TeacherSelect';
 import { Route, withRouter } from 'react-router-dom';
 import { Route, withRouter } from 'react-router-dom';
-import Service from "@/common/js/service";
+import Service from '@/common/js/service';
 import moment from 'moment';
 import moment from 'moment';
-import { PageControl, XMTable } from "@/components";
+import { PageControl, XMTable } from '@/components';
 import AddExam from './AddExam';
 import AddExam from './AddExam';
-import User from "@/common/js/user";
-import { XMContext } from "@/store/context";
-import ExamShareModal from './ExamShareModal'
-import DataAnalysic from './DataAnalysic'
-import PreviewModal from './PreviewModal'
-import './index.less'
+import User from '@/common/js/user';
+import { XMContext } from '@/store/context';
+import ExamShareModal from './ExamShareModal';
+import DataAnalysic from './DataAnalysic';
+import PreviewModal from './PreviewModal';
+import './index.less';
 const { RangePicker } = DatePicker;
 const { RangePicker } = DatePicker;
 const { Search } = Input;
 const { Search } = Input;
 const { Option } = Select;
 const { Option } = Select;
 
 
 interface sortType {
 interface sortType {
-    type: "ascend" | "descend" | null | undefined
+  type: 'ascend' | 'descend' | null | undefined;
 }
 }
 
 
 interface fixType {
 interface fixType {
-    left :boolean | "right" | "left" | undefined,
-    right: "right" | "left" ,
+  left: boolean | 'right' | 'left' | undefined;
+  right: 'right' | 'left';
 }
 }
 
 
-const fixStr:fixType={
-    left:'left',
-    right:'right'
-}
+const fixStr: fixType = {
+  left: 'left',
+  right: 'right',
+};
 
 
 function ExaminationManager(props: any) {
 function ExaminationManager(props: any) {
   const queryInit: any = {
   const queryInit: any = {
     examName: '',
     examName: '',
-        current: 1, size: 10, order: 'EXAM_START_TIME_DESC'
-    }
+    current: 1,
+    size: 10,
+    order: 'EXAM_START_TIME_DESC',
+  };
 
 
   const sortStatus: sortType = {
   const sortStatus: sortType = {
-        type: undefined
-    }
-
-    const sortEnum = {
+    type: undefined,
+  };
 
 
-    }
+  const sortEnum = {};
   const { match } = props;
   const { match } = props;
   const sortState: any = false;
   const sortState: any = false;
   const ctx: any = useContext(XMContext);
   const ctx: any = useContext(XMContext);
@@ -53,7 +53,7 @@ function ExaminationManager(props: any) {
   const [field, setfield] = useState('');
   const [field, setfield] = useState('');
   const [order, setOrder] = useState(sortStatus.type);
   const [order, setOrder] = useState(sortStatus.type);
   const [modal, setModal] = useState(null);
   const [modal, setModal] = useState(null);
-    const [questionCntSort, setQuestionCntSort] = useState(sortState)
+  const [questionCntSort, setQuestionCntSort] = useState(sortState);
   const [openPreviewModal, setOpenPreviewModal] = useState(false);
   const [openPreviewModal, setOpenPreviewModal] = useState(false);
   const [info, setInfo] = useState({ examDuration: 0 });
   const [info, setInfo] = useState({ examDuration: 0 });
   const queryRef = useRef({});
   const queryRef = useRef({});
@@ -61,27 +61,27 @@ function ExaminationManager(props: any) {
   const orderEnum = {
   const orderEnum = {
     userCnt: {
     userCnt: {
       ascend: 'USER_CNT_ASC',
       ascend: 'USER_CNT_ASC',
-            descend: 'USER_CNT_DESC'
+      descend: 'USER_CNT_DESC',
     },
     },
     passCnt: {
     passCnt: {
       ascend: 'PASS_CNT_ASC',
       ascend: 'PASS_CNT_ASC',
-            descend: 'PASS_CNT_DESC'
+      descend: 'PASS_CNT_DESC',
     },
     },
     examCreateTime: {
     examCreateTime: {
       ascend: 'CREATED_ASC',
       ascend: 'CREATED_ASC',
-            descend: 'CREATED_DESC'
-        }
-    }
-
+      descend: 'CREATED_DESC',
+    },
+  };
 
 
   const columns = [
   const columns = [
     {
     {
-            title: "考试",
+      title: '考试',
       // fixed:fixStr.left,
       // fixed:fixStr.left,
-            width:320,
-            dataIndex: "examName",
+      width: 320,
+      dataIndex: 'examName',
       render: (text: any, record: any) => {
       render: (text: any, record: any) => {
-                var _text = '未开始', _color = 'rgba(255, 183, 20, 1)';
+        var _text = '未开始',
+          _color = 'rgba(255, 183, 20, 1)';
         if (moment().valueOf() > record.examEndTime) {
         if (moment().valueOf() > record.examEndTime) {
           _text = '已结束';
           _text = '已结束';
           _color = 'rgba(153, 153, 153, 1)';
           _color = 'rgba(153, 153, 153, 1)';
@@ -90,102 +90,106 @@ function ExaminationManager(props: any) {
           _color = 'rgba(59, 189, 170, 1)';
           _color = 'rgba(59, 189, 170, 1)';
         }
         }
 
 
-                return <div style={{ width: 320 }}>
-                    <div className='oneLineText' style={{ width: 320,color:'#333',fontWeight:'bold' }} >{text}</div>
-                    <div> <span >{moment(record.examStartTime).format("YYYY-MM-DD HH:mm")}~{moment(record.examEndTime).format("YYYY-MM-DD HH:mm")} </span> <div className="status" style={{ border: `1px solid  ${_color}`,borderRadius:2, color: _color }}>{_text}</div></div>
+        return (
+          <div style={{ width: 320 }}>
+            <div className='oneLineText' style={{ width: 320, color: '#333', fontWeight: 'bold' }}>
+              {text}
+            </div>
+            <div>
+              {' '}
+              <span>
+                {moment(record.examStartTime).format('YYYY-MM-DD HH:mm')}~{moment(record.examEndTime).format('YYYY-MM-DD HH:mm')}{' '}
+              </span>{' '}
+              <div className='status' style={{ border: `1px solid  ${_color}`, borderRadius: 2, color: _color }}>
+                {_text}
+              </div>
+            </div>
             <div>创建人:{record.examCreator}</div>
             <div>创建人:{record.examCreator}</div>
           </div>
           </div>
+        );
       },
       },
     },
     },
     {
     {
-            title: "考试时长",
-            dataIndex: "examDuration",
+      title: '考试时长',
+      dataIndex: 'examDuration',
       render: (text: any) => <span>{(text || 0) / 60 / 1000}分钟</span>,
       render: (text: any) => <span>{(text || 0) / 60 / 1000}分钟</span>,
     },
     },
     {
     {
-            title: "及格分/总分",
-            dataIndex: "totalScore",
+      title: '及格分/总分',
+      dataIndex: 'totalScore',
       render: (text: any, record: any) => <span>{`${record.passScore || 0}/${record.totalScore || 0}`}</span>,
       render: (text: any, record: any) => <span>{`${record.passScore || 0}/${record.totalScore || 0}`}</span>,
     },
     },
     {
     {
-            title: "题目数量",
-            align:fixStr.right,
-            dataIndex: "questionCnt",
-
+      title: '题目数量',
+      align: fixStr.right,
+      dataIndex: 'questionCnt',
     },
     },
     {
     {
-            title: "参与人数",
-            dataIndex: "userCnt",
-            align:fixStr.right,
+      title: '参与人数',
+      dataIndex: 'userCnt',
+      align: fixStr.right,
       sorter: true,
       sorter: true,
-            sortOrder: field === "userCnt" ? order : sortStatus.type,
-
+      sortOrder: field === 'userCnt' ? order : sortStatus.type,
     },
     },
     {
     {
-            title: "及格数",
-            dataIndex: "passCnt",
-            align:fixStr.right,
+      title: '及格数',
+      dataIndex: 'passCnt',
+      align: fixStr.right,
       sorter: true,
       sorter: true,
-            sortOrder: field === "passCnt" ? order : sortStatus.type,
-
+      sortOrder: field === 'passCnt' ? order : sortStatus.type,
     },
     },
     {
     {
-            title: "创建时间",
-            dataIndex: "examCreateTime",
-            align:fixStr.right,
+      title: '创建时间',
+      dataIndex: 'examCreateTime',
+      align: fixStr.right,
       sorter: true,
       sorter: true,
-            sortOrder: field === "examCreateTime" ? order : sortStatus.type,
-            render: (text: any, record: any) => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>,
-
+      sortOrder: field === 'examCreateTime' ? order : sortStatus.type,
+      render: (text: any, record: any) => <span>{moment(text).format('YYYY-MM-DD HH:mm')}</span>,
     },
     },
     {
     {
-            title: "操作",
-            fixed:fixStr.right,
-            dataIndex: "operate",
+      title: '操作',
+      fixed: fixStr.right,
+      dataIndex: 'operate',
       width: 150,
       width: 150,
-            render: (text: any, record: any) => <div className="table_operate">
-                {
-                    ctx.xmState?.userPermission?.SeeExamData() && [<div
-                        key="data"
-                        className="operate__item"
+      render: (text: any, record: any) => (
+        <div className='table_operate'>
+          {ctx.xmState?.userPermission?.SeeExamData() && [
+            <div
+              key='data'
+              className='operate__item'
               onClick={() => {
               onClick={() => {
                 props.history.push({
                 props.history.push({
-                                pathname: `${match.url}/analysic/${record.examId}`
-                            })
-                        }}
-                    >
+                  pathname: `${match.url}/analysic/${record.examId}`,
+                });
+              }}>
               数据
               数据
             </div>,
             </div>,
-                    <span className="operate__item split" > | </span>]
-                }
-
+            <span className='operate__item split'> | </span>,
+          ]}
 
 
           <div
           <div
-                    key="share"
-                    className="operate__item"
-                    onClick={() => { shareModal(record) }}
-                >
+            key='share'
+            className='operate__item'
+            onClick={() => {
+              shareModal(record);
+            }}>
             分享
             分享
           </div>
           </div>
-                <span className="operate__item split" > | </span>
+          <span className='operate__item split'> | </span>
           <Dropdown overlay={getOpe(record)}>
           <Dropdown overlay={getOpe(record)}>
             <span className='more'>更多</span>
             <span className='more'>更多</span>
           </Dropdown>
           </Dropdown>
-
-
-
-            </div>,
+        </div>
+      ),
     },
     },
-
-
   ];
   ];
 
 
   function queryExamDetail(examId: string) {
   function queryExamDetail(examId: string) {
-        Service.Hades("public/hades/queryExamDetail", {
+    Service.Hades('public/hades/queryExamDetail', {
       examId,
       examId,
       tenantId: User.getStoreId(),
       tenantId: User.getStoreId(),
       userId: User.getStoreUserId(),
       userId: User.getStoreUserId(),
-            source: 0
+      source: 0,
     }).then((res) => {
     }).then((res) => {
       setInfo(res.result);
       setInfo(res.result);
       setOpenPreviewModal(true);
       setOpenPreviewModal(true);
@@ -193,86 +197,84 @@ function ExaminationManager(props: any) {
   }
   }
 
 
   function shareModal(record: any) {
   function shareModal(record: any) {
-        const modal = <ExamShareModal
+    const modal = (
+      <ExamShareModal
         data={record}
         data={record}
         close={() => {
         close={() => {
-                setModal(null)
+          setModal(null);
         }}
         }}
       />
       />
-        setModal(modal as any)
+    );
+    setModal(modal as any);
   }
   }
 
 
   function getOpe(item: any) {
   function getOpe(item: any) {
-        return <Menu>
+    return (
+      <Menu>
         <Menu.Item
         <Menu.Item
-                key="1"
+          key='1'
           onClick={() => {
           onClick={() => {
             queryExamDetail(item.examId);
             queryExamDetail(item.examId);
-                }}
-            >预览</Menu.Item>
-            {
-                ctx.xmState?.userPermission?.AddExam() && (moment().valueOf() < item.examStartTime) && <Menu.Item key="2">
+          }}>
+          预览
+        </Menu.Item>
+        {ctx.xmState?.userPermission?.AddExam() && moment().valueOf() < item.examStartTime && (
+          <Menu.Item key='2'>
             <span
             <span
               onClick={() => {
               onClick={() => {
                 if (moment().valueOf() + 5 * 60 * 1000 > item.examStartTime) {
                 if (moment().valueOf() + 5 * 60 * 1000 > item.examStartTime) {
                   Modal.info({
                   Modal.info({
                     title: '无法编辑',
                     title: '无法编辑',
                     content: '离考试开始时间小于5分钟，为保证答题数据的准确性，不能再进行编辑了',
                     content: '离考试开始时间小于5分钟，为保证答题数据的准确性，不能再进行编辑了',
-
-                                })
+                  });
                 } else {
                 } else {
                   props.history.push({
                   props.history.push({
-                                    pathname: `${match.url}/edit/${item.examId}`
-                                })
-
+                    pathname: `${match.url}/edit/${item.examId}`,
+                  });
                 }
                 }
-                        }}
-                    >
+              }}>
               编辑
               编辑
             </span>
             </span>
           </Menu.Item>
           </Menu.Item>
-            }
+        )}
 
 
-            {ctx.xmState?.userPermission?.AddExam() &&
-                <Menu.Item key="3" onClick={() => props.history.push(`${match.url}/copy/${item.examId}`)}>复制</Menu.Item>
-            }
-            {
-                ctx.xmState?.userPermission?.DelExam() && ((moment().valueOf() + 30 * 60 * 1000 < item.examStartTime) || (moment().valueOf() > item.examEndTime)) && <Menu.Item key="4">
+        {ctx.xmState?.userPermission?.AddExam() && (
+          <Menu.Item key='3' onClick={() => props.history.push(`${match.url}/copy/${item.examId}`)}>
+            复制
+          </Menu.Item>
+        )}
+        {ctx.xmState?.userPermission?.DelExam() && (moment().valueOf() + 30 * 60 * 1000 < item.examStartTime || moment().valueOf() > item.examEndTime) && (
+          <Menu.Item key='4'>
             <span
             <span
               onClick={() => {
               onClick={() => {
-                            deleteExam(item)
-                        }}
-                    >
+                deleteExam(item);
+              }}>
               删除
               删除
             </span>
             </span>
           </Menu.Item>
           </Menu.Item>
-            }
-
-
+        )}
       </Menu>
       </Menu>
+    );
   }
   }
 
 
-
   function deleteExam(item: any) {
   function deleteExam(item: any) {
-
     Modal.confirm({
     Modal.confirm({
       title: '删除考试',
       title: '删除考试',
       content: '确定删除该考试吗？',
       content: '确定删除该考试吗？',
       okText: '删除',
       okText: '删除',
       cancelText: '取消',
       cancelText: '取消',
-            icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
+      icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
       onOk: () => {
       onOk: () => {
-                Service.Hades("public/hades/deleteExam", {
-                    "examId": item.examId,
+        Service.Hades('public/hades/deleteExam', {
+          examId: item.examId,
           userId: User.getStoreUserId(),
           userId: User.getStoreUserId(),
           tenantId: User.getStoreId(),
           tenantId: User.getStoreId(),
-                    source: 0
+          source: 0,
         }).then(() => {
         }).then(() => {
-                    getList()
-                })
-            }
-        })
-
+          getList();
+        });
+      },
+    });
   }
   }
 
 
   function getList() {
   function getList() {
@@ -281,131 +283,150 @@ function ExaminationManager(props: any) {
     //     _query.examCreator =parseInt(_query.examCreator)
     //     _query.examCreator =parseInt(_query.examCreator)
     // }
     // }
 
 
-        Service.Hades("public/hades/queryExamPageList", {
-            ..._query, userId: User.getStoreUserId(),
+    Service.Hades('public/hades/queryExamPageList', {
+      ..._query,
+      userId: User.getStoreUserId(),
       tenantId: User.getStoreId(),
       tenantId: User.getStoreId(),
-            source: 0
+      source: 0,
     }).then((res) => {
     }).then((res) => {
-            setList(res.result?.records || [])
-            setTotal(parseInt(res.result.total))
-        })
+      setList(res.result?.records || []);
+      setTotal(parseInt(res.result.total));
+    });
   }
   }
 
 
   useEffect(() => {
   useEffect(() => {
     queryRef.current = query;
     queryRef.current = query;
     getList();
     getList();
-    }, [query])
+  }, [query]);
 
 
   function onShowSizeChange(current: any, size: any) {
   function onShowSizeChange(current: any, size: any) {
-       ( queryRef.current as any).size =size
+    (queryRef.current as any).size = size;
   }
   }
 
 
-
   function onChange(pagination: any, filters: any, sorter: any, extra: any) {
   function onChange(pagination: any, filters: any, sorter: any, extra: any) {
     setfield(sorter.field);
     setfield(sorter.field);
-        setOrder(sorter.order)
+    setOrder(sorter.order);
     let _query: any = { ...queryRef.current };
     let _query: any = { ...queryRef.current };
-        _query.order = (orderEnum as any)[sorter.field][sorter.order] || 'EXAM_START_TIME_DESC'
-        setQuery(_query)
+    _query.order = (orderEnum as any)[sorter.field][sorter.order] || 'EXAM_START_TIME_DESC';
+    setQuery(_query);
   }
   }
 
 
-    return <div className="page examination-manager">
-        <div className="content-header">考试</div>
-        <div className="box content-body">
-            <div className="xm-search-filter">
+  return (
+    <div className='page examination-manager'>
+      <div className='content-header'>考试</div>
+      <div className='box content-body'>
+        <div className='xm-search-filter'>
           <div style={{ display: 'flex' }}>
           <div style={{ display: 'flex' }}>
-                    <div className="search-condition">
-                        <div className="search-condition__item">
-                            <span className="search-name">考试名称：</span>
+            <div className='search-condition'>
+              <div className='search-condition__item'>
+                <span className='search-name'>考试名称：</span>
                 <Search
                 <Search
                   value={query.examName}
                   value={query.examName}
                   className='search-input'
                   className='search-input'
-                                placeholder="搜索考试名称"
+                  placeholder='搜索考试名称'
                   onChange={(e) => {
                   onChange={(e) => {
-                                    const _query = { ...query }
-                                    _query.examName = e.target.value
+                    const _query = { ...query };
+                    _query.examName = e.target.value;
                     _query.current = 1;
                     _query.current = 1;
                     setQuery(_query);
                     setQuery(_query);
                   }}
                   }}
-                                onSearch={() => { }}
-                                enterButton={<span className="icon iconfont">&#xe832;</span>}
+                  onSearch={() => {}}
+                  enterButton={<span className='icon iconfont'>&#xe832;</span>}
                 />
                 />
               </div>
               </div>
 
 
-                        <TeacherSelect val={query.examCreator}
+              <TeacherSelect
+                val={query.examCreator}
                 onChange={(examCreator: any) => {
                 onChange={(examCreator: any) => {
-
-                                const _query = { ...query }
+                  const _query = { ...query };
                   _query.examCreator = examCreator;
                   _query.examCreator = examCreator;
                   _query.current = 1;
                   _query.current = 1;
                   setQuery(_query);
                   setQuery(_query);
                 }}
                 }}
-                            roleCodes={["CloudManager", 'StoreManager']}
-                        ></TeacherSelect>
+                roleCodes={['CloudManager', 'StoreManager']}></TeacherSelect>
 
 
-                        <div className="search-condition__item">
-                            <span className="search-name">考试时间：</span>
+              <div className='search-condition__item'>
+                <span className='search-name'>考试时间：</span>
                 <RangePicker
                 <RangePicker
                   className='search-input'
                   className='search-input'
-                                value={[
-                                    query.examStartTime ? moment(Number(query.examStartTime)) : null,
-                                    query.examStartTime ? moment(Number(query.examEndTime)) : null
-                                ]}
+                  value={[query.examStartTime ? moment(Number(query.examStartTime)) : null, query.examStartTime ? moment(Number(query.examEndTime)) : null]}
                   onChange={(date: any) => {
                   onChange={(date: any) => {
-                                    const _query = { ...query }
+                    const _query = { ...query };
                     _query.examStartTime = date && date[0]?.startOf('day').valueOf();
                     _query.examStartTime = date && date[0]?.startOf('day').valueOf();
                     _query.examEndTime = date && date[1]?.endOf('day').valueOf();
                     _query.examEndTime = date && date[1]?.endOf('day').valueOf();
                     _query.current = 1;
                     _query.current = 1;
                     setQuery(_query);
                     setQuery(_query);
-
-                                }} />
+                  }}
+                />
               </div>
               </div>
-                        {
-                            !!expandFilter && <div className="search-condition__item">
-                                <span className="search-name">创建时间：</span>
+              {!!expandFilter && (
+                <div className='search-condition__item'>
+                  <span className='search-name'>创建时间：</span>
                   <RangePicker
                   <RangePicker
                     className='search-input'
                     className='search-input'
                     value={[
                     value={[
                       query.createStartTime ? moment(Number(query.createStartTime)) : null,
                       query.createStartTime ? moment(Number(query.createStartTime)) : null,
-                                        query.createStartTime ? moment(Number(query.createEndTime)) : null
+                      query.createStartTime ? moment(Number(query.createEndTime)) : null,
                     ]}
                     ]}
                     onChange={(date: any) => {
                     onChange={(date: any) => {
-                                        const _query = { ...query }
+                      const _query = { ...query };
                       _query.createStartTime = date && date[0]?.startOf('day').valueOf();
                       _query.createStartTime = date && date[0]?.startOf('day').valueOf();
                       _query.createEndTime = date && date[1]?.endOf('day').valueOf();
                       _query.createEndTime = date && date[1]?.endOf('day').valueOf();
                       _query.current = 1;
                       _query.current = 1;
                       setQuery(_query);
                       setQuery(_query);
-
-                                    }} />
+                    }}
+                  />
                 </div>
                 </div>
-                        }
-
+              )}
             </div>
             </div>
-                    <div className="reset-fold-area">
-                        <Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={() => {
-                            setfield('')
+            <div className='reset-fold-area'>
+              <Tooltip title='清空筛选'>
+                <span
+                  className='resetBtn iconfont icon'
+                  onClick={() => {
+                    setfield('');
                     setQuery({ current: 1, size: 10, order: 'EXAM_START_TIME_DESC' });
                     setQuery({ current: 1, size: 10, order: 'EXAM_START_TIME_DESC' });
-                        }}>&#xe61b; </span></Tooltip>
-                        <span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
-                            setExpandFilter(!expandFilter)
-                        }}>{expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span>
+                  }}>
+                  &#xe61b;{' '}
+                </span>
+              </Tooltip>
+              <span
+                style={{ cursor: 'pointer' }}
+                className='fold-btn'
+                onClick={() => {
+                  setExpandFilter(!expandFilter);
+                }}>
+                {expandFilter ? (
+                  <span>
+                    <span>收起</span>
+                    <span className='iconfont icon fold-icon'>&#xe82d; </span>{' '}
+                  </span>
+                ) : (
+                  <span>
+                    展开<span className='iconfont icon fold-icon'>&#xe835; </span>
+                  </span>
+                )}
+              </span>
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
-            {
-                ctx.xmState?.userPermission?.AddExam() && <Button type='primary' onClick={() => {
+        {ctx.xmState?.userPermission?.AddExam() && (
+          <Button
+            type='primary'
+            onClick={() => {
               props.history.push({
               props.history.push({
-                        pathname: `${match.url}/add`
-                    })
-                }} style={{ margin: '4px 0 16px' }}>新建考试</Button>
-
-            }
-
+                pathname: `${match.url}/add`,
+              });
+            }}
+            style={{ margin: '4px 0 16px' }}>
+            新建考试
+          </Button>
+        )}
 
 
-            <div className="content">
+        <div className='content'>
           <XMTable
           <XMTable
             bordered
             bordered
-                    size="small"
+            size='small'
             columns={columns}
             columns={columns}
             dataSource={list}
             dataSource={list}
             scroll={{ x: 1150 }}
             scroll={{ x: 1150 }}
@@ -413,13 +434,11 @@ function ExaminationManager(props: any) {
             pagination={false}
             pagination={false}
             style={{ margin: '0px 0 16px' }}
             style={{ margin: '0px 0 16px' }}
             renderEmpty={{
             renderEmpty={{
-                      description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>
-                    }}
-                >
-                </XMTable>
-                {total > 0 &&
+              description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>,
+            }}></XMTable>
+          {total > 0 && (
             <PageControl
             <PageControl
-                        size="small"
+              size='small'
               current={query.current - 1}
               current={query.current - 1}
               pageSize={query.size}
               pageSize={query.size}
               total={total}
               total={total}
@@ -427,48 +446,75 @@ function ExaminationManager(props: any) {
               toPage={(page: any) => {
               toPage={(page: any) => {
                 let _query: any = { ...queryRef.current };
                 let _query: any = { ...queryRef.current };
                 _query.current = page + 1;
                 _query.current = page + 1;
-                            setQuery(_query)
+                setQuery(_query);
               }}
               }}
             />
             />
-                }
+          )}
         </div>
         </div>
       </div>
       </div>
-        {openPreviewModal &&
+      {openPreviewModal && (
         <PreviewModal
         <PreviewModal
           info={{ ...info, examDuration: (info.examDuration || 0) / 60000 }}
           info={{ ...info, examDuration: (info.examDuration || 0) / 60000 }}
-                onClose={() => { setOpenPreviewModal(false) }}
+          onClose={() => {
+            setOpenPreviewModal(false);
+          }}
         />
         />
-        }
-        <Route path={`${match.url}/add`} render={() => {
-            return <AddExam type="add" freshList={() => {
+      )}
+      <Route
+        path={`${match.url}/add`}
+        render={() => {
+          return (
+            <AddExam
+              type='add'
+              freshList={() => {
                 let _query: any = { ...queryRef.current };
                 let _query: any = { ...queryRef.current };
                 if (_query.current != 1) {
                 if (_query.current != 1) {
                   _query.current = 1;
                   _query.current = 1;
-                    setQuery(_query)
+                  setQuery(_query);
                 } else {
                 } else {
-                    getList()
+                  getList();
                 }
                 }
-            }} />;
-        }} />
-        <Route path={`${match.url}/edit/:id`} render={() => {
-            return <AddExam type='edit' freshList={() => {
-                getList()
-            }} />;
-        }} />
-        <Route path={`${match.url}/copy/:id`} render={() => {
-            return <AddExam type='copy' freshList={() => {
-                getList()
-            }} />;
-        }} />
+              }}
+            />
+          );
+        }}
+      />
+      <Route
+        path={`${match.url}/edit/:id`}
+        render={() => {
+          return (
+            <AddExam
+              type='edit'
+              freshList={() => {
+                getList();
+              }}
+            />
+          );
+        }}
+      />
+      <Route
+        path={`${match.url}/copy/:id`}
+        render={() => {
+          return (
+            <AddExam
+              type='copy'
+              freshList={() => {
+                getList();
+              }}
+            />
+          );
+        }}
+      />
 
 
-        <Route path={`${match.url}/analysic/:id`} render={() => {
+      <Route
+        path={`${match.url}/analysic/:id`}
+        render={() => {
           return <DataAnalysic />;
           return <DataAnalysic />;
-        }} />
-        {
-            modal
-        }
-
+        }}
+      />
+      {modal}
     </div>
     </div>
+  );
 }
 }
 
 
 export default withRouter(ExaminationManager);
 export default withRouter(ExaminationManager);

src/modules/teach-tool/examination-manager/TestDetailPage.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-04-07 16:10:21
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-04-26 10:21:19
+ * @Description: 助学工具-考试-考试结果
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React, { useState, useEffect } from 'react';
+import { withRouter } from 'react-router-dom';
+import User from '@/common/js/user';
+import './TestDetailPage.less';
+import Service from '@/common/js/service';
+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 userId = window.getParameterByName('userId');
+  const [examDetail, setExamDetail] = useState({
+    answerAnalysis: '',
+    resultShow: '',
+    examDesc: '',
+    examDuration: 0,
+    examEndTime: '',
+    examName: '',
+    examStartTime: '',
+    paperId: 0,
+    passRate: 0,
+    passScore: 0,
+    resultContent: '',
+    totalQuestionCount: 0,
+    totalScore: 0,
+    userCorrectQuestion: 0,
+    userExamDuration: 0,
+    userScore: 0,
+  }); // 考试详情
+  const [paperDetail, setPaperDetail] = useState({}); // 试卷详情
+  const [questionList, setQuestionList] = useState([]); // 试卷题目列表
+  const [userAnswerList, setUserAnswerList] = useState([]); // 用户答案列表
+  const [isScrollShow, setIsScrollShow] = useState(false); // 是否展示回到顶部按钮
+
+  const { answerAnalysis, resultContent, examName, totalScore, totalQuestionCount, passScore, examDuration, userExamDuration, userScore, userCorrectQuestion } =
+    examDetail;
+
+  useEffect(() => {
+    bindScroll();
+    getPaperDetail();
+    getExamDetail();
+  }, []);
+
+  function bindScroll() {
+    window.addEventListener('scroll', handleScroll, true);
+  }
+
+  function getExamDetail() {
+    const params = {
+      examId,
+      source: 0,
+      tenantId: User.getStoreId() || window.getParameterByName('id'),
+      userId,
+    };
+    Service.Hades('public/customerHades/queryUserExamResult', params, {
+      reject: true,
+    })
+      .then((res) => {
+        const data = { ...res.result };
+        setExamDetail(data);
+      })
+      .catch((res) => {
+        if (res.code === 'EXAM_IS_NOT_EXIST') {
+          handleChangeShowErrorPage();
+        } else {
+          message.error(res.message);
+        }
+      });
+  }
+
+  function getPaperDetail() {
+    Service.Hades('public/customerHades/queryUserExamAnswer', {
+      examId,
+      paperId,
+      source: 0,
+      readAnswer: true,
+      tenantId: User.getStoreId() || window.getParameterByName('id'),
+      userId,
+    }).then((res) => {
+      if (res.success) {
+        const { paperDetailVO, userExamAnswerVO } = res.result;
+        const userAnswerList = [...userExamAnswerVO];
+        const { questionList } = paperDetailVO;
+        setPaperDetail(paperDetail);
+        setUserAnswerList(userAnswerList);
+        setQuestionList(questionList || []);
+      }
+    });
+  }
+
+  function handleChangeShowErrorPage() {
+    setIsShowErrorPage(true);
+  }
+
+  // 用户时长转换
+  function formatTime(msTime) {
+    let time = msTime / 1000;
+    let hour = Math.floor(time / 60 / 60) % 24 > 9 ? Math.floor(time / 60 / 60) % 24 : '0' + (Math.floor(time / 60 / 60) % 24);
+    let minute = Math.floor(time / 60) % 60 > 9 ? Math.floor(time / 60) % 60 : '0' + (Math.floor(time / 60) % 60);
+    let second = time % 60 > 9 ? Math.round(time % 60) : '0' + Math.round(time % 60);
+    return `${hour}:${minute}:${second}`;
+  }
+
+  // 快速跳转题目
+  function handleQuickActiveQuestion(questionId) {
+    let selectDom = document.getElementById(`${questionId}`);
+    selectDom.scrollIntoView({
+      block: 'center',
+    });
+  }
+
+  // 回到顶部
+  function handleGoTop() {
+    window.scrollTo(0, 0);
+  }
+
+  // 监听滚动，200以后出现回到顶部按钮
+  function handleScroll() {
+    if (window.pageYOffset > 200) {
+      setIsScrollShow(true);
+    } else {
+      setIsScrollShow(false);
+    }
+  }
+
+  function renderResultInfo() {
+    return (
+      <div>
+        <div className='exam-info'>
+          <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-level item'>
+            <div className='current-level'>{userScore < passScore ? '不及格' : '及格'}</div>
+            <div className='origin-data'>及格分{passScore}</div>
+          </div>
+
+          <div className='info-correct item'>
+            <div className='current-correct'>
+              {userCorrectQuestion}
+              <div className='text'>答对题数</div>
+            </div>
+            <div className='origin-data'>共{totalQuestionCount}题</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>
+
+        <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 userId={userId} />
+      </div>
+    );
+  }
+
+  let sortedAnswerList = [];
+  questionList.map((item) => {
+    userAnswerList &&
+      userAnswerList.map((answerItem) => {
+        if (item.questionId === answerItem.questionId) {
+          sortedAnswerList.push(answerItem);
+        }
+      });
+  });
+
+  return (
+    <div className='exam-result-page page'>
+      <Breadcrumbs navList={'答题详情'} goBack={props.history.goBack} />
+
+      <div className='center'>
+        <div className='box'>
+          <div className='box-content'>
+            <div
+              className='exam-head'
+              style={{
+                padding: examName.length > 20 ? '8px 0 14px' : '16px 0 29px',
+              }}>
+              <div className={`exam-name ${examName.length > 20 ? 'many' : 'few'}`}>{examName}</div>
+            </div>
+            {renderResultInfo()}
+          </div>
+        </div>
+      </div>
+      {isScrollShow && <div className='go-top' onClick={handleGoTop}></div>}
+    </div>
+  );
+}
+
+export default withRouter(TestDetailPage);

src/modules/teach-tool/examination-manager/TestDetailPage.less

+.exam-result-page {
+  margin: 0 auto;
+  .go-top {
+    cursor: pointer;
+    position: fixed;
+    width: 48px;
+    height: 48px;
+    background-image: url('https://image.xiaomaiketang.com/xm/jWix2xDm4t.png');
+    background-size: 100%;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    bottom: 125px;
+    right: calc(~'(100vw - 1232px)/2');
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:hover {
+      background-image: url('https://image.xiaomaiketang.com/xm/GHBBNDtTDd.png');
+    }
+  }
+  .box {
+    .box-content {
+      position: relative;
+      width: 840px;
+      margin: 0 auto;
+      .exam-head {
+        color: #333;
+        text-align: center;
+        .exam-name {
+          width: 600px;
+          font-weight: 500;
+          margin: 0 auto;
+          font-size: 24px;
+          line-height: 33px;
+        }
+        .many {
+          font-size: 21px;
+          line-height: 29px;
+        }
+        .few {
+          font-size: 25px;
+          line-height: 36px;
+        }
+      }
+      .empty-result {
+        box-sizing: border-box;
+        margin: 0 16px;
+        background: #ffffff;
+        box-shadow: 0 -15px 10px 0 rgba(0, 34, 121, 0.1);
+        border-radius: 4px 4px 0 0;
+        padding-top: 56px;
+        .lack-desc {
+          margin-top: 16px;
+          .title {
+            font-size: 17px;
+            font-weight: 500;
+            color: #333333;
+            line-height: 24px;
+            margin-bottom: 4px;
+          }
+          .content {
+            font-size: 15px;
+            color: #999999;
+            line-height: 21px;
+          }
+        }
+        .after-desc {
+          margin-top: 16px;
+          .title {
+            font-size: 17px;
+            font-weight: 500;
+            color: #333333;
+            line-height: 24px;
+            margin-bottom: 20px;
+          }
+          .after-show-box {
+            // margin: 0 37px;
+            padding: 11px 21px;
+            background: #f4f6fa;
+            border-radius: 4px;
+            font-size: 15px;
+            color: #999999;
+            line-height: 21px;
+            text-align: center;
+          }
+        }
+      }
+
+      .exam-info {
+        width: 840px;
+        box-sizing: border-box;
+        margin: 0 auto;
+        padding: 24px 0 12px;
+        height: 130px;
+        background: #ffffff;
+        box-shadow: 0px 5px 30px 0px rgba(12, 54, 158, 0.08);
+        border-radius: 4px;
+        display: flex;
+
+        justify-content: center;
+        .item {
+          flex: 1 25%;
+          display: flex;
+          flex-direction: column;
+
+          // height: 130px;
+          align-items: center;
+          justify-content: space-between;
+          position: relative;
+          .origin-data {
+            text-align: center;
+            font-size: 14px;
+            color: #999999;
+            line-height: 20px;
+          }
+          .line {
+            &::before {
+              width: 1px;
+              height: 40px;
+              content: '';
+              position: absolute;
+              right: 0;
+              top: 0;
+              background-color: rgba(232, 232, 232, 1);
+            }
+          }
+          &.info-score {
+            .current-score {
+              font-size: 40px;
+              font-weight: 500;
+              color: #ff4f4f;
+              text-align: center;
+              line-height: 42px;
+              img {
+                display: block;
+                margin: 0 auto;
+                width: 27px;
+                height: 12px;
+                padding-left: 4px;
+              }
+            }
+          }
+          &.info-level {
+            .current-level {
+              font-size: 24px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #333333;
+              line-height: 33px;
+              text-align: center;
+            }
+          }
+          &.info-correct {
+            .current-correct {
+              display: flex;
+              flex-direction: column;
+              padding-bottom: 20px;
+              justify-content: space-between;
+              align-items: center;
+              font-size: 20px;
+              font-weight: 500;
+              color: #333333;
+              line-height: 28px;
+              .text {
+                margin-top: 4px;
+                width: 48px;
+                height: 17px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #9b9b9b;
+                line-height: 17px;
+                text-align: center;
+              }
+            }
+          }
+          &.info-time {
+            .current-time {
+              display: flex;
+              flex-direction: column;
+              padding-bottom: 20px;
+              justify-content: space-between;
+              align-items: center;
+              font-size: 20px;
+              font-weight: 500;
+              color: #333333;
+              line-height: 28px;
+            }
+            .text {
+              margin-top: 4px;
+              width: 48px;
+              height: 17px;
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #9b9b9b;
+              line-height: 17px;
+              text-align: center;
+            }
+          }
+        }
+      }
+      .left-title {
+        font-size: 20px;
+        font-weight: 500;
+        color: #333333;
+        position: relative;
+        margin-left: 8px;
+        line-height: 28px;
+        &::before {
+          position: absolute;
+          content: '';
+          left: -8px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 16px;
+          background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
+        }
+      }
+      .exam-result {
+        padding: 44px 0 24px 0;
+        vertical-align: middle;
+        .result-title {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 30px;
+          line-height: 24px;
+          .right-tip {
+            font-size: 15px;
+            font-weight: 500;
+            color: #999999;
+            .correct-num {
+              color: #16e0b7;
+            }
+            .incorrect-num {
+              font-size: 11px;
+            }
+          }
+        }
+        .result-content {
+          display: flex;
+          flex-wrap: wrap;
+          &__item {
+            position: relative;
+            margin: 0 16px 16px 0;
+            width: 36px;
+            height: 36px;
+            background: #f4f6fa;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            &:nth-child(5n) {
+              margin-right: 50px;
+            }
+            &:nth-child(15n) {
+              margin-right: 0px;
+            }
+            .icon {
+              width: 16px;
+              height: 16px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              transform: translate(-50%, -50%);
+            }
+            .result-content-box {
+              width: 36px;
+              height: 36px;
+              font-size: 15px;
+              line-height: 36px;
+              background: #f4f6fa;
+              border-radius: 4px;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer-btn {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    height: 64px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid rgba(238, 238, 238, 1);
+    box-sizing: border-box;
+    .text {
+      cursor: pointer;
+      background: #ffb714;
+      border-radius: 5px;
+      width: 342px;
+      font-size: 15px;
+      color: #ffffff;
+      line-height: 44px;
+      text-align: center;
+      &.disabled {
+        background-color: #ccc;
+      }
+    }
+  }
+}

src/modules/teach-tool/examination-manager/UserData.tsx

-import React, { useState, useRef, useEffect } from 'react'
-import Service from "@/common/js/service";
-import { PageControl } from "@/components";
+import React, { useState, useRef, useEffect } from 'react';
+import Service from '@/common/js/service';
+import { PageControl } from '@/components';
 import { Input, Select, Tooltip, Table, Button } from 'antd';
 import { Input, Select, Tooltip, Table, Button } from 'antd';
-import User from "@/common/js/user";
+import { ColumnsType } from 'antd/es/table';
+import User from '@/common/js/user';
 import moment from 'moment';
 import moment from 'moment';
-import './userData.less'
+import './userData.less';
 const { Search } = Input;
 const { Search } = Input;
 const { Option } = Select;
 const { Option } = Select;
 declare var window: any;
 declare var window: any;
 
 
 interface sortType {
 interface sortType {
-    type: "ascend" | "descend" | null | undefined
+  type: 'ascend' | 'descend' | null | undefined;
+}
+interface User {
+  key: number;
+  name: string;
 }
 }
-
 
 
 function DataAnalysic(props: any) {
 function DataAnalysic(props: any) {
   const sortStatus: sortType = {
   const sortStatus: sortType = {
-        type: undefined
-    }
+    type: undefined,
+  };
 
 
   const useDataInit: any = {};
   const useDataInit: any = {};
-    const queryInit: any = { current: 1, size: 10, };
+  const queryInit: any = { current: 1, size: 10 };
   const [useData, setUserData] = useState(useDataInit);
   const [useData, setUserData] = useState(useDataInit);
   const [list, setList] = useState([]);
   const [list, setList] = useState([]);
   const [query, setQuery] = useState(queryInit);
   const [query, setQuery] = useState(queryInit);
@@ -31,136 +35,172 @@ function DataAnalysic(props: any) {
 
 
   const userTypeEnum = {
   const userTypeEnum = {
     WORK_WE_CHAT: '企业微信',
     WORK_WE_CHAT: '企业微信',
-        WE_CHAT: '微信'
-    }
+    WE_CHAT: '微信',
+  };
 
 
   const userExamStateEnum = {
   const userExamStateEnum = {
     EXAM: '进行中',
     EXAM: '进行中',
     LACK_EXAM: '缺考',
     LACK_EXAM: '缺考',
-        FINISH_EXAM: '已考试'
-    }
+    FINISH_EXAM: '已考试',
+  };
 
 
   const ExamPassColorEnum = {
   const ExamPassColorEnum = {
     EXAM_FAIL: 'rgba(255, 79, 79, 1)',
     EXAM_FAIL: 'rgba(255, 79, 79, 1)',
     EXAM_PASS: 'rgba(59, 189, 170, 1)',
     EXAM_PASS: 'rgba(59, 189, 170, 1)',
-
-    }
+  };
 
 
   const ExamPassEnum = {
   const ExamPassEnum = {
     EXAM_FAIL: '不及格',
     EXAM_FAIL: '不及格',
     EXAM_PASS: '及格',
     EXAM_PASS: '及格',
-    }
+  };
 
 
   const userExamStateColorEnum = {
   const userExamStateColorEnum = {
     EXAM: 'rgba(35, 143, 255, 1)',
     EXAM: 'rgba(35, 143, 255, 1)',
     LACK_EXAM: 'rgba(204, 204, 204, 1)',
     LACK_EXAM: 'rgba(204, 204, 204, 1)',
-        FINISH_EXAM: 'rgba(47, 200, 60, 1)'
-    }
-
+    FINISH_EXAM: 'rgba(47, 200, 60, 1)',
+  };
 
 
   const orderEnum = {
   const orderEnum = {
     score: {
     score: {
       ascend: 'EXAM_SCORE_ASC',
       ascend: 'EXAM_SCORE_ASC',
-            descend: 'EXAM_SCORE_DESC'
+      descend: 'EXAM_SCORE_DESC',
     },
     },
     userDuration: {
     userDuration: {
       ascend: 'USER_DURATION_ASC',
       ascend: 'USER_DURATION_ASC',
-            descend: 'USER_DURATION_DESC'
+      descend: 'USER_DURATION_DESC',
     },
     },
-
-    }
-
+  };
 
 
   const queryRef = useRef({});
   const queryRef = useRef({});
 
 
   useEffect(() => {
   useEffect(() => {
     queryExamUserData();
     queryExamUserData();
-    }, [])
+  }, []);
 
 
   useEffect(() => {
   useEffect(() => {
     queryRef.current = query;
     queryRef.current = query;
     queryExamUserDataList();
     queryExamUserDataList();
-    }, [query])
+  }, [query]);
 
 
   function queryExamUserData() {
   function queryExamUserData() {
     Service.Hades('public/hades/queryExamUserData', {
     Service.Hades('public/hades/queryExamUserData', {
       examId: props.examId,
       examId: props.examId,
       tenantId: User.getStoreId(),
       tenantId: User.getStoreId(),
       userId: User.getStoreUserId(),
       userId: User.getStoreUserId(),
-            source: 0
+      source: 0,
     }).then((res) => {
     }).then((res) => {
-            setUserData(res.result)
-
-        })
+      setUserData(res.result);
+    });
   }
   }
 
 
-
   function queryExamUserDataList() {
   function queryExamUserDataList() {
     Service.Hades('public/hades/queryExamUserDataList', {
     Service.Hades('public/hades/queryExamUserDataList', {
       ...query,
       ...query,
       examId: props.examId,
       examId: props.examId,
       tenantId: User.getStoreId(),
       tenantId: User.getStoreId(),
       userId: User.getStoreUserId(),
       userId: User.getStoreUserId(),
-            source: 0
+      source: 0,
     }).then((res) => {
     }).then((res) => {
       setList(res.result.records);
       setList(res.result.records);
-            setTotal(parseInt(res.result.total))
+      setTotal(parseInt(res.result.total));
       if (!allData) {
       if (!allData) {
-                setAllData(parseInt(res.result.total))
+        setAllData(parseInt(res.result.total));
       }
       }
-        })
+    });
   }
   }
 
 
-
-    const columns = [
-
+  const columns: ColumnsType<User> = [
     {
     {
-            title: "学员",
-            dataIndex: "userName",
-            render: (text: any, record: any) => <span>{text}<span style={{ color: record.userSource === 'WORK_WE_CHAT' ? 'rgba(255, 157, 20, 1)' : 'rgba(29, 204, 101, 1)' }} >@{(userTypeEnum as any)[record.userSource]}</span></span>,
+      title: '学员',
+      dataIndex: 'userName',
+      render: (text: any, record: any) => (
+        <span>
+          {text}
+          <span style={{ color: record.userSource === 'WORK_WE_CHAT' ? 'rgba(255, 157, 20, 1)' : 'rgba(29, 204, 101, 1)' }}>
+            @{(userTypeEnum as any)[record.userSource]}
+          </span>
+        </span>
+      ),
     },
     },
     {
     {
-            title: "手机号",
-            dataIndex: "phone",
+      title: '手机号',
+      dataIndex: 'phone',
     },
     },
     {
     {
-            title: "考试状态",
-            dataIndex: "userExamState",
-            render: (text: any) => <span> <span className='exstatus' style={{ background: (userExamStateColorEnum as any)[text] }}></span> {(userExamStateEnum as any)[text]}</span>,
-
+      title: '考试状态',
+      dataIndex: 'userExamState',
+      render: (text: any) => (
+        <span>
+          {' '}
+          <span className='exstatus' style={{ background: (userExamStateColorEnum as any)[text] }}></span> {(userExamStateEnum as any)[text]}
+        </span>
+      ),
     },
     },
     {
     {
-            title: "考试成绩",
-            dataIndex: "score",
+      title: '考试成绩',
+      dataIndex: 'score',
       sorter: true,
       sorter: true,
-            sortOrder: field === "score" ? order : sortStatus.type,
-            render: (text: any, record: any) => <span> {text} <span style={{ border: `1px solid ${(ExamPassColorEnum as any)[record.examPass]}`, fontSize: 12, color: (ExamPassColorEnum as any)[record.examPass], display: 'inline-block', padding: '0px 2px' }}>{(ExamPassEnum as any)[record.examPass]}</span></span>,
-
+      sortOrder: field === 'score' ? order : sortStatus.type,
+      render: (text: any, record: any) => (
+        <span>
+          {' '}
+          {text}{' '}
+          <span
+            style={{
+              border: `1px solid ${(ExamPassColorEnum as any)[record.examPass]}`,
+              fontSize: 12,
+              color: (ExamPassColorEnum as any)[record.examPass],
+              display: 'inline-block',
+              padding: '0px 2px',
+            }}>
+            {(ExamPassEnum as any)[record.examPass]}
+          </span>
+        </span>
+      ),
     },
     },
     {
     {
-            title: "进入考试时间",
-            dataIndex: "examStartTime",
-            render: (text: any) => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>,
-
+      title: '进入考试时间',
+      dataIndex: 'examStartTime',
+      render: (text: any) => <span>{moment(text).format('YYYY-MM-DD HH:mm')}</span>,
     },
     },
     {
     {
-            title: "考试用时",
-            dataIndex: "userDuration",
+      title: '考试用时',
+      dataIndex: 'userDuration',
       sorter: true,
       sorter: true,
-            sortOrder: field === "userDuration" ? order : sortStatus.type,
-            render: (text: any,record:any) => <span>{ record.userExamState==='FINISH_EXAM' ? window.formatHourTime(text):'-'}  </span>,
+      sortOrder: field === 'userDuration' ? order : sortStatus.type,
+      render: (text: any, record: any) => <span>{record.userExamState === 'FINISH_EXAM' ? window.formatHourTime(text) : '-'} </span>,
+    },
+    //TODO:
+    {
+      title: '操作',
+      key: '',
+      dataIndex: 'edit',
+      render: (value: any, record: any) => {
+        return (
+          <Choose>
+            <When condition={record.userExamState === 'FINISH_EXAM'}>
+              <div
+                className='answer-detail'
+                onClick={() => {
+                  checkAnswerDetail(record);
+                }}>
+                答题详情
+              </div>
+            </When>
+            <Otherwise>-</Otherwise>
+          </Choose>
+        );
+      },
     },
     },
-
-
   ];
   ];
 
 
   function onChange(pagination: any, filters: any, sorter: any, extra: any) {
   function onChange(pagination: any, filters: any, sorter: any, extra: any) {
     setfield(sorter.field);
     setfield(sorter.field);
-        setOrder(sorter.order)
-        console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field])
+    setOrder(sorter.order);
+    console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field]);
     let _query: any = { ...queryRef.current };
     let _query: any = { ...queryRef.current };
-        _query.order = (orderEnum as any)[sorter.field][sorter.order]
-        setQuery(_query)
+    _query.order = (orderEnum as any)[sorter.field][sorter.order];
+    setQuery(_query);
   }
   }
 
 
   function download() {
   function download() {
@@ -170,149 +210,157 @@ function DataAnalysic(props: any) {
       exportDataType: 'EXAM_USER_DATA',
       exportDataType: 'EXAM_USER_DATA',
       tenantId: User.getStoreId(),
       tenantId: User.getStoreId(),
       userId: User.getStoreUserId(),
       userId: User.getStoreUserId(),
-            source: 0
+      source: 0,
     }).then((res) => {
     }).then((res) => {
-            const dom = (document as any).getElementById("load-play-back-excel")
+      const dom = (document as any).getElementById('load-play-back-excel');
       dom.setAttribute('href', res.result);
       dom.setAttribute('href', res.result);
       dom.click();
       dom.click();
-
-        })
+    });
+  }
+  //查看答题详情
+  function checkAnswerDetail(record: any) {
+    const { paperId, userExamState } = props.examDetail?.examPaper;
+    const { userId } = record;
+    window.RCHistory.push({
+      pathname: `/test-detail/${props.examId}?paperId=${paperId}&userExamState=${userExamState}&userId=${userId}`,
+    });
   }
   }
 
 
-
-    return <div className="rr">
-        <a
-            download
-            id="load-play-back-excel"
-            style={{ position: "absolute", left: "-10000px" }}
-        >
+  return (
+    <div className='rr'>
+      <a target='_blank' download id='load-play-back-excel' style={{ position: 'absolute', left: '-10000px' }}>
         111
         111
       </a>
       </a>
-        <div className="dataPanal">
-            <div className="item">
-                <div className="num">{useData.joinCnt || 0}</div>
-                <div className="percent"></div>
-                <div className="subTitle">参与人数</div>
+      <div className='dataPanal'>
+        <div className='item'>
+          <div className='num'>{useData.joinCnt || 0}</div>
+          <div className='percent'></div>
+          <div className='subTitle'>参与人数</div>
         </div>
         </div>
-            <div className="item">
-                <div className="num">{useData.finishCnt || 0}</div>
-                <div className="percent">占比{parseInt(((useData.finishCnt || 0) / (useData.joinCnt || 1)) * 100 + '')}%</div>
-                <div className="subTitle">完成考试数 (人)</div>
+        <div className='item'>
+          <div className='num'>{useData.finishCnt || 0}</div>
+          <div className='percent'>占比{parseInt(((useData.finishCnt || 0) / (useData.joinCnt || 1)) * 100 + '')}%</div>
+          <div className='subTitle'>完成考试数 (人)</div>
         </div>
         </div>
-            <div className="item">
-                <div className="num">{useData.passCnt || 0}</div>
-                <div className="percent">占比{parseInt(((useData.passCnt || 0) / (useData.finishCnt || 1)) * 100 + '')}%</div>
-                <div className="subTitle">及格数 (人)</div>
+        <div className='item'>
+          <div className='num'>{useData.passCnt || 0}</div>
+          <div className='percent'>占比{parseInt(((useData.passCnt || 0) / (useData.finishCnt || 1)) * 100 + '')}%</div>
+          <div className='subTitle'>及格数 (人)</div>
         </div>
         </div>
-            <div className="item">
-                <div className="num">{useData.averageScore || 0}</div>
-                <div className="percent">总分{props.examDetail?.examPaper?.totalScore}</div>
-                <div className="subTitle">平均分</div>
+        <div className='item'>
+          <div className='num'>{useData.averageScore || 0}</div>
+          <div className='percent'>总分{props.examDetail?.examPaper?.totalScore}</div>
+          <div className='subTitle'>平均分</div>
         </div>
         </div>
-            <div className="item">
-                <div className="num">  {window.formatHourTime(useData.averageDuration || 0)} </div>
-                <div className="percent"></div>
-                <div className="subTitle">平均用时</div>
+        <div className='item'>
+          <div className='num'> {window.formatHourTime(useData.averageDuration || 0)} </div>
+          <div className='percent'></div>
+          <div className='subTitle'>平均用时</div>
         </div>
         </div>
       </div>
       </div>
 
 
-        <div className="xm-search-filter" style={{ marginTop: 16 }}>
+      <div className='xm-search-filter' style={{ marginTop: '24px' }}>
         <div style={{ display: 'flex' }}>
         <div style={{ display: 'flex' }}>
-                <div className="search-condition">
-                    <div className="search-condition__item">
-                        <span className="search-name">学员:</span>
+          <div className='search-condition'>
+            <div className='search-condition__item'>
+              <span className='search-name'>学员:</span>
               <Search
               <Search
                 value={query.examName}
                 value={query.examName}
                 className='search-input'
                 className='search-input'
-                            placeholder="搜索学员名或手机号"
+                placeholder='搜索学员名或手机号'
                 onChange={(e) => {
                 onChange={(e) => {
-                                const _query = { ...query }
-                                _query.searchKey = e.target.value
+                  const _query = { ...query };
+                  _query.searchKey = e.target.value;
                   setQuery(_query);
                   setQuery(_query);
                 }}
                 }}
-                            onSearch={() => { }}
-                            enterButton={<span className="icon iconfont">&#xe832;</span>}
+                onSearch={() => {}}
+                enterButton={<span className='icon iconfont'>&#xe832;</span>}
               />
               />
             </div>
             </div>
 
 
-                    <div className="search-condition__item">
-                        <span className="search-name">学员类型:</span>
-                        <Select value={query.userSource} placeholder="请选择学员类型" onChange={(val) => {
-                            const _query = { ...query }
-                            _query.userSource = val
+            <div className='search-condition__item'>
+              <span className='search-name'>学员类型:</span>
+              <Select
+                value={query.userSource}
+                placeholder='请选择学员类型'
+                onChange={(val) => {
+                  const _query = { ...query };
+                  _query.userSource = val;
                   setQuery(_query);
                   setQuery(_query);
-                        }} className='search-input' allowClear>
-                            {
-                                Object.keys(userTypeEnum).map((key: any) => {
-                                    return <Option value={key}>{(userTypeEnum as any)[key]}</Option>
-                                })
-                            }
-
-
+                }}
+                className='search-input'
+                allowClear>
+                {Object.keys(userTypeEnum).map((key: any) => {
+                  return (
+                    <Option value={key} key={key}>
+                      {(userTypeEnum as any)[key]}
+                    </Option>
+                  );
+                })}
               </Select>
               </Select>
             </div>
             </div>
 
 
-                    <div className="search-condition__item">
-                        <span className="search-name">考试状态:</span>
-                        <Select value={query.userExamState} placeholder="请选择考试状态" onChange={(val) => {
-                            const _query = { ...query }
-                            _query.userExamState = val
+            <div className='search-condition__item'>
+              <span className='search-name'>考试状态:</span>
+              <Select
+                value={query.userExamState}
+                placeholder='请选择考试状态'
+                onChange={(val) => {
+                  const _query = { ...query };
+                  _query.userExamState = val;
                   setQuery(_query);
                   setQuery(_query);
-                        }} className='search-input' allowClear>
-                            {
-                                Object.keys(userExamStateEnum).map((key: any) => {
-                                    return <Option value={key}>{(userExamStateEnum as any)[key]}</Option>
-                                })
-                            }
-
-
+                }}
+                className='search-input'
+                allowClear>
+                {Object.keys(userExamStateEnum).map((key: any) => {
+                  return (
+                    <Option value={key} key={key}>
+                      {(userExamStateEnum as any)[key]}
+                    </Option>
+                  );
+                })}
               </Select>
               </Select>
             </div>
             </div>
-
           </div>
           </div>
-                <div className="reset-fold-area">
-                    <Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={() => {
-                        setfield('')
+          <div className='reset-fold-area'>
+            <Tooltip title='清空筛选'>
+              <span
+                className='resetBtn iconfont icon'
+                onClick={() => {
+                  setfield('');
                   setQuery({ current: 1, size: 10 });
                   setQuery({ current: 1, size: 10 });
-                    }}>&#xe61b; </span></Tooltip>
-
+                }}>
+                &#xe61b;{' '}
+              </span>
+            </Tooltip>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
-        {
-            !!allData && <Button style={{ marginBottom: 12 }} onClick={download} >导出</Button>
-        }
-
-
-        <div className="content">
-            <Table
-                bordered
-                size="small"
-                columns={columns}
-                dataSource={list}
-                onChange={onChange}
-                pagination={false}
-            >
-            </Table>
-            {total > 0 &&
+      {!!allData && (
+        <Button style={{ marginBottom: 12 }} onClick={download}>
+          导出
+        </Button>
+      )}
+
+      <div className='content analysic-content'>
+        <Table bordered size='small' rowClassName='analysic-content-row' columns={columns} dataSource={list} onChange={onChange} pagination={false}></Table>
+        {total > 0 && (
           <PageControl
           <PageControl
-                    size="small"
+            size='small'
             current={query.current - 1}
             current={query.current - 1}
             pageSize={query.size}
             pageSize={query.size}
             total={total}
             total={total}
-
             toPage={(page: any) => {
             toPage={(page: any) => {
-                        console.log(page)
+              console.log(page);
               let _query: any = { ...queryRef.current };
               let _query: any = { ...queryRef.current };
               _query.current = page + 1;
               _query.current = page + 1;
-                        setQuery(_query)
+              setQuery(_query);
             }}
             }}
           />
           />
-            }
+        )}
       </div>
       </div>
-
     </div>
     </div>
+  );
 }
 }
 
 
-
 export default DataAnalysic;
 export default DataAnalysic;

src/modules/teach-tool/examination-manager/dataAnalysic.less

-.dataAnalysic{
-    .titleBox{
+.dataAnalysic {
+  .titleBox {
     position: relative;
     position: relative;
-        padding-left: 28px;
     font-size: 19px;
     font-size: 19px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     font-weight: 500;
     color: #333333;
     color: #333333;
     line-height: 26px;
     line-height: 26px;
-        background: #FFFFFF;
-        &::before{
-          width:4px;
-          height:12px;
-          content:'';
-          background-image: linear-gradient(#2966FF 83.5%, #0ACCA4 16.5%);
-          display:inline-block;
-          position: absolute;
-          left:16px;
-          top:7px;
+    background: #ffffff;
+    &::before {
+      width: 4px;
+      height: 12px;
+      content: '';
+      background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
+      display: inline-block;
+      margin-right: 8px;
     }
     }
   }
   }
   .ant-tabs-content-holder {
   .ant-tabs-content-holder {

src/modules/teach-tool/examination-manager/index.less

-.examination-manager{
-    .status{
+.examination-manager {
+  .status {
     display: inline-block;
     display: inline-block;
     margin-left: 4px;
     margin-left: 4px;
     border: 1px solid #999;
     border: 1px solid #999;
     padding: 2px 4px;
     padding: 2px 4px;
     line-height: 16px;
     line-height: 16px;
   }
   }
-    .ant-table-column-sorters {
-        justify-content: flex-end;
-    }
 
 
   .ant-table-column-sorter {
   .ant-table-column-sorter {
     margin-top: 0px !important;
     margin-top: 0px !important;

src/modules/teach-tool/examination-manager/userData.less

-.dataPanal{
+.dataPanal {
   border-radius: 4px;
   border-radius: 4px;
-    border: 1px solid #E8E8E8;
+  border: 1px solid #e8e8e8;
   display: flex;
   display: flex;
-    .item{
+  .item {
     text-align: center;
     text-align: center;
     // width: 29.9%;
     // width: 29.9%;
     position: relative;
     position: relative;
     flex: 1;
     flex: 1;
-        .num{
-         
+    .num {
       font-size: 26px;
       font-size: 26px;
       font-family: PingFangSC-Medium, PingFang SC;
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       font-weight: 500;
@@ -16,7 +15,7 @@
       line-height: 26px;
       line-height: 26px;
       margin-top: 12px;
       margin-top: 12px;
     }
     }
-        .percent{
+    .percent {
       margin-top: 6px;
       margin-top: 6px;
       font-size: 12px;
       font-size: 12px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-family: PingFangSC-Regular, PingFang SC;
@@ -26,7 +25,7 @@
       height: 20px;
       height: 20px;
       margin-bottom: 18px;
       margin-bottom: 18px;
     }
     }
-        .subTitle{
+    .subTitle {
       font-size: 14px;
       font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       font-weight: 400;
@@ -34,16 +33,16 @@
       line-height: 20px;
       line-height: 20px;
       margin-bottom: 12px;
       margin-bottom: 12px;
     }
     }
-        .type{
+    .type {
       font-size: 14px;
       font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       font-weight: 400;
       color: #333333;
       color: #333333;
       line-height: 20px;
       line-height: 20px;
-            span{
+      span {
         color: rgba(153, 153, 153, 1);
         color: rgba(153, 153, 153, 1);
       }
       }
-            .icon{
+      .icon {
         color: rgba(204, 204, 204, 1);
         color: rgba(204, 204, 204, 1);
         font-size: 16px;
         font-size: 16px;
         margin-right: 4px;
         margin-right: 4px;
@@ -52,7 +51,7 @@
       }
       }
     }
     }
 
 
-        &:after{
+    &:after {
       content: '';
       content: '';
       width: 0px;
       width: 0px;
       height: 40px;
       height: 40px;
@@ -63,14 +62,13 @@
       right: 0px;
       right: 0px;
     }
     }
 
 
-        &:last-child{
-            &:after{
+    &:last-child {
+      &:after {
         display: none;
         display: none;
       }
       }
     }
     }
-
   }
   }
-    .exstatus{
+  .exstatus {
     width: 4px;
     width: 4px;
     height: 4px;
     height: 4px;
     background: rgb(35, 143, 255);
     background: rgb(35, 143, 255);
@@ -80,3 +78,13 @@
     top: -4px;
     top: -4px;
   }
   }
 }
 }
+.answer-detail {
+  color: rgb(35, 143, 255);
+}
+.analysic-content {
+  .ant-table-bordered .ant-table-tbody tr {
+    &.analysic-content-row {
+      height: 50px;
+    }
+  }
+}

src/modules/teach-tool/question-manage/components/OperateQuestionTab.less

@@ -24,7 +24,7 @@
     color: #999999;
     color: #999999;
     margin-top: 8px;
     margin-top: 8px;
     .fill-info_icon {
     .fill-info_icon {
-      color: #2966FF;
+      color: #2966ff;
       font-size: 14px;
       font-size: 14px;
       padding-left: 9px;
       padding-left: 9px;
       cursor: pointer;
       cursor: pointer;
@@ -72,7 +72,6 @@
     }
     }
     .audio-box {
     .audio-box {
       box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
       box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
-      padding: 10px 20px;
     }
     }
     .img-box {
     .img-box {
       max-width: 88px;
       max-width: 88px;
@@ -229,7 +228,7 @@
     line-height: 33px;
     line-height: 33px;
     align-self: stretch;
     align-self: stretch;
     .option-operate_item__icon:hover {
     .option-operate_item__icon:hover {
-      color: #2966FF;
+      color: #2966ff;
     }
     }
     .icon {
     .icon {
       color: #bfbfbf;
       color: #bfbfbf;
@@ -252,7 +251,7 @@
     border-radius: 4px;
     border-radius: 4px;
     border: 1px dashed #e8e8e8;
     border: 1px dashed #e8e8e8;
     font-size: 14px;
     font-size: 14px;
-    color: #2966FF;
+    color: #2966ff;
     line-height: 44px;
     line-height: 44px;
     text-align: center;
     text-align: center;
     cursor: pointer;
     cursor: pointer;

src/modules/teach-tool/question-manage/components/QuestionList.jsx

@@ -26,15 +26,15 @@ import {
 import _ from "underscore";
 import _ from "underscore";
 import { Route, withRouter } from "react-router-dom";
 import { Route, withRouter } from "react-router-dom";
 import { DownOutlined } from '@ant-design/icons';
 import { DownOutlined } from '@ant-design/icons';
-import { PageControl, XMTable } from "@/components";
-import User from "@/common/js/user";
-import AidToolService from "@/domains/aid-tool-domain/AidToolService";
-import PreviewQuestionModal from "../modal/PreviewQuestionModal";
-import BatchImportQuestionModal from "../modal/BatchImportQuestionModal";
-import OperateQuestion from "../OperateQuestion";
-import Bus from "@/core/bus";
+import { PageControl, XMTable } from '@/components';
+import User from '@/common/js/user';
+import AidToolService from '@/domains/aid-tool-domain/AidToolService';
+import PreviewQuestionModal from '../modal/PreviewQuestionModal';
+import BatchImportQuestionModal from '../modal/BatchImportQuestionModal';
+import OperateQuestion from '../OperateQuestion';
+import Bus from '@/core/bus';
 import moment from 'moment';
 import moment from 'moment';
-import Service from "@/common/js/service";
+import Service from '@/common/js/service';
 import MoveModal from '../../modal/MoveModal';
 import MoveModal from '../../modal/MoveModal';
 import "./QuestionList.less";
 import "./QuestionList.less";
 
 
@@ -42,33 +42,33 @@ const { RangePicker } = DatePicker;
 const { Search } = Input;
 const { Search } = Input;
 
 
 const questionTypeEnum = {
 const questionTypeEnum = {
-  SINGLE_CHOICE: "单选题",
-  MULTI_CHOICE: "多选题",
-  JUDGE: "判断题",
-  GAP_FILLING: "填空题",
-  INDEFINITE_CHOICE: "不定项选择题",
+  SINGLE_CHOICE: '单选题',
+  MULTI_CHOICE: '多选题',
+  JUDGE: '判断题',
+  GAP_FILLING: '填空题',
+  INDEFINITE_CHOICE: '不定项选择题',
 };
 };
 
 
 const questionTypeList = [
 const questionTypeList = [
   {
   {
-    label: "单选题",
-    value: "SINGLE_CHOICE",
+    label: '单选题',
+    value: 'SINGLE_CHOICE',
   },
   },
   {
   {
-    label: "多选题",
-    value: "MULTI_CHOICE",
+    label: '多选题',
+    value: 'MULTI_CHOICE',
   },
   },
   {
   {
-    label: "判断题",
-    value: "JUDGE",
+    label: '判断题',
+    value: 'JUDGE',
   },
   },
   {
   {
-    label: "填空题",
-    value: "GAP_FILLING",
+    label: '填空题',
+    value: 'GAP_FILLING',
   },
   },
   {
   {
-    label: "不定项选择题",
-    value: "INDEFINITE_CHOICE",
+    label: '不定项选择题',
+    value: 'INDEFINITE_CHOICE',
   },
   },
 ];
 ];
 
 
@@ -79,7 +79,7 @@ class QuestionList extends Component {
       query: {
       query: {
         current: 1,
         current: 1,
         size: 10,
         size: 10,
-        order: "UPDATED_DESC", // 排序规则[ ACCURACY_DESC, ACCURACY_ASC, CREATED_DESC, CREATED_ASC, UPDATED_DESC, UPDATED_ASC ]
+        order: 'UPDATED_DESC', // 排序规则[ ACCURACY_DESC, ACCURACY_ASC, CREATED_DESC, CREATED_ASC, UPDATED_DESC, UPDATED_ASC ]
         categoryId: null, // 当前题库分类Id
         categoryId: null, // 当前题库分类Id
         questionName: null, // 题目名称
         questionName: null, // 题目名称
         questionType: null, // 题目类型
         questionType: null, // 题目类型
@@ -96,16 +96,15 @@ class QuestionList extends Component {
   componentDidMount() {
   componentDidMount() {
     this.queryQuestionPageList();
     this.queryQuestionPageList();
     this.queryCategoryTree();
     this.queryCategoryTree();
-    Bus.bind("queryQuestionPageList", (selectedCategoryId) => {
-      selectedCategoryId =
-        selectedCategoryId === "null" ? null : selectedCategoryId;
+    Bus.bind('queryQuestionPageList', (selectedCategoryId) => {
+      selectedCategoryId = selectedCategoryId === 'null' ? null : selectedCategoryId;
       this.clearSelect();
       this.clearSelect();
       this.InitSearch(selectedCategoryId);
       this.InitSearch(selectedCategoryId);
     });
     });
   }
   }
 
 
   componentWillUnmount() {
   componentWillUnmount() {
-    Bus.unbind("queryQuestionPageList", this.queryQuestionPageList);
+    Bus.unbind('queryQuestionPageList', this.queryQuestionPageList);
   }
   }
 
 
   // 查询分类树
   // 查询分类树
@@ -143,7 +142,7 @@ class QuestionList extends Component {
       ...this.state.query,
       ...this.state.query,
       categoryId,
       categoryId,
       current: 1,
       current: 1,
-      order: "UPDATED_DESC", // 排序规则
+      order: 'UPDATED_DESC', // 排序规则
       questionName: null, // 题目名称
       questionName: null, // 题目名称
       questionType: null, // 题目类型
       questionType: null, // 题目类型
     };
     };
@@ -163,7 +162,7 @@ class QuestionList extends Component {
         },
         },
       },
       },
       () => {
       () => {
-        if (searchType === "questionName") return;
+        if (searchType === 'questionName') return;
         this.queryQuestionPageList();
         this.queryQuestionPageList();
       }
       }
     );
     );
@@ -174,7 +173,7 @@ class QuestionList extends Component {
     const _query = {
     const _query = {
       ...this.state.query,
       ...this.state.query,
       current: 1,
       current: 1,
-      order: "UPDATED_DESC", // 排序规则
+      order: 'UPDATED_DESC', // 排序规则
       questionName: null, // 题目名称
       questionName: null, // 题目名称
       questionType: null, // 题目类型
       questionType: null, // 题目类型
       updateDateStart: null,
       updateDateStart: null,
@@ -197,68 +196,65 @@ class QuestionList extends Component {
   handleChangeTable = (pagination, filters, sorter) => {
   handleChangeTable = (pagination, filters, sorter) => {
     const { columnKey, order } = sorter;
     const { columnKey, order } = sorter;
     let sort = null;
     let sort = null;
-    if (columnKey === "accuracy" && order === "ascend") {
-      sort = "ACCURACY_ASC";
+    if (columnKey === 'accuracy' && order === 'ascend') {
+      sort = 'ACCURACY_ASC';
     }
     }
-    if (columnKey === "accuracy" && order === "descend") {
-      sort = "ACCURACY_DESC";
+    if (columnKey === 'accuracy' && order === 'descend') {
+      sort = 'ACCURACY_DESC';
     }
     }
-    if (columnKey === "updateTime" && order === "ascend") {
-      sort = "UPDATED_ASC";
+    if (columnKey === 'updateTime' && order === 'ascend') {
+      sort = 'UPDATED_ASC';
     }
     }
-    if (columnKey === "updateTime" && order === "descend") {
-      sort = "UPDATED_DESC";
+    if (columnKey === 'updateTime' && order === 'descend') {
+      sort = 'UPDATED_DESC';
     }
     }
     const _query = this.state.query;
     const _query = this.state.query;
-    _query.order = sort || "UPDATED_DESC";
+    _query.order = sort || 'UPDATED_DESC';
     this.setState({ query: _query }, () => this.queryQuestionPageList());
     this.setState({ query: _query }, () => this.queryQuestionPageList());
   };
   };
 
 
   // 表头设置
   // 表头设置
   parseColumns = () => {
   parseColumns = () => {
     // 权限判断
     // 权限判断
-    const isPermiss = ["CloudManager", "StoreManager"].includes(
-      User.getUserRole()
-    );
+    const isPermiss = ['CloudManager', 'StoreManager'].includes(User.getUserRole());
     const columns = [
     const columns = [
       {
       {
-        title: "题型",
-        key: "questionTypeEnum",
-        dataIndex: "questionTypeEnum",
-        width: "16%",
+        title: '题型',
+        key: 'questionTypeEnum',
+        dataIndex: 'questionTypeEnum',
+        width: '16%',
         render: (val) => {
         render: (val) => {
           return questionTypeEnum[val];
           return questionTypeEnum[val];
         },
         },
       },
       },
       {
       {
-        title: "题目",
-        key: "questionStem",
-        dataIndex: "questionStem",
+        title: '题目',
+        key: 'questionStem',
+        dataIndex: 'questionStem',
         ellipsis: {
         ellipsis: {
           showTitle: false,
           showTitle: false,
         },
         },
         render: (val) => {
         render: (val) => {
           var handleVal = val;
           var handleVal = val;
-          handleVal = handleVal.replace(/<(?!img|input).*?>/g, "");
-          handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、");
-          handleVal = handleVal.replace(/\&nbsp\;/gi, " ");
-          handleVal = handleVal.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/gi, "");
+          handleVal = handleVal.replace(/<(?!img|input).*?>/g, '');
+          handleVal = handleVal.replace(/<\s?input[^>]*>/gi, '_、');
+          handleVal = handleVal.replace(/\&nbsp\;/gi, ' ');
+          handleVal = handleVal.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/gi, '');
           return (
           return (
             <Tooltip
             <Tooltip
-              overlayClassName="aid-tool-list"
+              overlayClassName='aid-tool-list'
               title={
               title={
                 <div
                 <div
-                  style={{ maxWidth: 700, width: "auto" }}
+                  style={{ maxWidth: 700, width: 'auto' }}
                   dangerouslySetInnerHTML={{
                   dangerouslySetInnerHTML={{
                     __html: handleVal,
                     __html: handleVal,
                   }}
                   }}
                 />
                 />
               }
               }
-              placement="topLeft"
-              overlayStyle={{ maxWidth: 700 }}
-            >
+              placement='topLeft'
+              overlayStyle={{ maxWidth: 700 }}>
               <div
               <div
-                className="one-line-text"
+                className='one-line-text'
                 dangerouslySetInnerHTML={{
                 dangerouslySetInnerHTML={{
                   __html: handleVal,
                   __html: handleVal,
                 }}
                 }}
@@ -268,62 +264,47 @@ class QuestionList extends Component {
         },
         },
       },
       },
       {
       {
-        title: "正确率",
-        key: "accuracy",
-        dataIndex: "accuracy",
+        title: '正确率',
+        key: 'accuracy',
+        dataIndex: 'accuracy',
         sorter: true,
         sorter: true,
         showSorterTooltip: false,
         showSorterTooltip: false,
-        width: "14%",
+        width: '14%',
         render: (val) => {
         render: (val) => {
-          return parseInt(val * 100) + "%";
+          return parseInt(val * 100) + '%';
         },
         },
       },
       },
       {
       {
-        title: "更新时间",
-        key: "updateTime",
-        dataIndex: "updateTime",
+        title: '更新时间',
+        key: 'updateTime',
+        dataIndex: 'updateTime',
         sorter: true,
         sorter: true,
         showSorterTooltip: false,
         showSorterTooltip: false,
-        width: "24%",
+        width: '24%',
         render: (val) => {
         render: (val) => {
-          return formatDate("YYYY-MM-DD H:i:s", val);
+          return formatDate('YYYY-MM-DD H:i:s', val);
         },
         },
       },
       },
       {
       {
-        title: "操作",
-        key: "operate",
-        dataIndex: "operate",
-        width: "24%",
+        title: '操作',
+        key: 'operate',
+        dataIndex: 'operate',
+        width: '24%',
         render: (val, record) => {
         render: (val, record) => {
           return (
           return (
-            <div className="record-operate">
-              <div
-                className="record-operate__item"
-                onClick={() => this.previewQuestion(record.id)}
-              >
+            <div className='record-operate'>
+              <div className='record-operate__item' onClick={() => this.previewQuestion(record.id)}>
                 预览
                 预览
               </div>
               </div>
+              {isPermiss && <span className='record-operate__item split'> | </span>}
               {isPermiss && (
               {isPermiss && (
-                <span className="record-operate__item split"> | </span>
-              )}
-              {isPermiss && (
-                <div
-                  className="record-operate__item"
-                  onClick={() =>
-                    this.editQuestion(record.id, record.questionTypeEnum)
-                  }
-                >
+                <div className='record-operate__item' onClick={() => this.editQuestion(record.id, record.questionTypeEnum)}>
                   编辑
                   编辑
                 </div>
                 </div>
               )}
               )}
+              {isPermiss && <span className='record-operate__item split'> | </span>}
               {isPermiss && (
               {isPermiss && (
-                <span className="record-operate__item split"> | </span>
-              )}
-              {isPermiss && (
-                <div
-                  className="record-operate__item"
-                  onClick={() => this.delQuestionConfirm(record)}
-                >
+                <div className='record-operate__item' onClick={() => this.delQuestionConfirm(record)}>
                   删除
                   删除
                 </div>
                 </div>
               )}
               )}
@@ -372,13 +353,11 @@ class QuestionList extends Component {
   // 删除题目确认弹窗
   // 删除题目确认弹窗
   delQuestionConfirm(record) {
   delQuestionConfirm(record) {
     return Modal.confirm({
     return Modal.confirm({
-      title: "提示",
-      content: "确定要删除此题目吗？",
-      icon: (
-        <span className="icon iconfont default-confirm-icon">&#xe839; </span>
-      ),
-      okText: "删除",
-      cancelText: "取消",
+      title: '提示',
+      content: '确定要删除此题目吗？',
+      icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
+      okText: '删除',
+      cancelText: '取消',
       onOk: () => {
       onOk: () => {
         this.deleteQuestion(record);
         this.deleteQuestion(record);
       },
       },
@@ -395,7 +374,7 @@ class QuestionList extends Component {
     };
     };
     AidToolService.deleteQuestion(params).then((res) => {
     AidToolService.deleteQuestion(params).then((res) => {
       if (res.success) {
       if (res.success) {
-        message.success("删除成功");
+        message.success('删除成功');
         const { query, total, selectedRowKeys } = this.state;
         const { query, total, selectedRowKeys } = this.state;
         const { size, current } = query;
         const { size, current } = query;
         const _query = query;
         const _query = query;
@@ -407,11 +386,11 @@ class QuestionList extends Component {
         }
         }
         data.query = _query;
         data.query = _query;
         if (selectedRowKeys.includes(record.id)) {
         if (selectedRowKeys.includes(record.id)) {
-          data.selectedRowKeys = _.reject(selectedRowKeys, item => item === record.id);
+          data.selectedRowKeys = _.reject(selectedRowKeys, (item) => item === record.id);
         }
         }
         this.setState(data, () => {
         this.setState(data, () => {
           this.queryQuestionPageList();
           this.queryQuestionPageList();
-          Bus.trigger("queryCategoryTree", "remain");
+          Bus.trigger('queryCategoryTree', 'remain');
         });
         });
       }
       }
     });
     });
@@ -433,7 +412,7 @@ class QuestionList extends Component {
         close={() => {
         close={() => {
           this.setState({ batchImportQuestionModal: null }, () => {
           this.setState({ batchImportQuestionModal: null }, () => {
             this.queryQuestionPageList();
             this.queryQuestionPageList();
-            Bus.trigger("queryCategoryTree", "remain");
+            Bus.trigger('queryCategoryTree', 'remain');
           });
           });
         }}
         }}
         categoryId={categoryId}
         categoryId={categoryId}
@@ -457,23 +436,21 @@ class QuestionList extends Component {
   setMoreOperationOption() {
   setMoreOperationOption() {
     return (
     return (
       <Menu>
       <Menu>
-        <Menu.Item key="2">
+        <Menu.Item key='2'>
           <div
           <div
-            key="import"
+            key='import'
             onClick={() => {
             onClick={() => {
               this.batchMove();
               this.batchMove();
-            }}
-          >
+            }}>
             批量移动
             批量移动
           </div>
           </div>
         </Menu.Item>
         </Menu.Item>
-        <Menu.Item key="1">
+        <Menu.Item key='1'>
           <div
           <div
-            key="import"
+            key='import'
             onClick={() => {
             onClick={() => {
               this.batchDelete();
               this.batchDelete();
-            }}
-          >
+            }}>
             批量删除
             批量删除
           </div>
           </div>
         </Menu.Item>
         </Menu.Item>
@@ -488,7 +465,7 @@ class QuestionList extends Component {
       return null;
       return null;
     }
     }
     this.setState({ openMoveModal: true });
     this.setState({ openMoveModal: true });
-  }
+  };
 
 
   batchMoveRemote = (categoryId) => {
   batchMoveRemote = (categoryId) => {
     const { selectedRowKeys, query } = this.state;
     const { selectedRowKeys, query } = this.state;
@@ -499,7 +476,8 @@ class QuestionList extends Component {
       tenantId: User.getStoreId(),
       tenantId: User.getStoreId(),
       userId: User.getUserId(),
       userId: User.getUserId(),
     };
     };
-    Service.Hades('public/hades/batchMoveQuestion', data, { reject: true }).then((res) => {
+    Service.Hades('public/hades/batchMoveQuestion', data, { reject: true })
+      .then((res) => {
         if (res.success) {
         if (res.success) {
           message.success('移动成功');
           message.success('移动成功');
           Bus.trigger('queryCategoryTree', 'remain');
           Bus.trigger('queryCategoryTree', 'remain');
@@ -518,10 +496,11 @@ class QuestionList extends Component {
         } else {
         } else {
           message.error('移动失败');
           message.error('移动失败');
         }
         }
-    }).catch(() => {
-      message.error('移动失败');
       })
       })
-  }
+      .catch(() => {
+        message.error('移动失败');
+      });
+  };
 
 
   batchDelete = () => {
   batchDelete = () => {
     const { selectedRowKeys, query } = this.state;
     const { selectedRowKeys, query } = this.state;
@@ -530,13 +509,11 @@ class QuestionList extends Component {
       return null;
       return null;
     }
     }
     Modal.confirm({
     Modal.confirm({
-      title: "确定要删除题目吗？",
-      content: "删除后，不可恢复。",
-      icon: (
-        <span className="icon iconfont default-confirm-icon">&#xe839; </span>
-      ),
-      okText: "删除",
-      cancelText: "取消",
+      title: '确定要删除题目吗？',
+      content: '删除后，不可恢复。',
+      icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
+      okText: '删除',
+      cancelText: '取消',
       onOk: () => {
       onOk: () => {
         const data = {
         const data = {
           id: selectedRowKeys,
           id: selectedRowKeys,
@@ -544,7 +521,8 @@ class QuestionList extends Component {
           tenantId: User.getStoreId(),
           tenantId: User.getStoreId(),
           userId: User.getUserId(),
           userId: User.getUserId(),
         };
         };
-        Service.Hades('public/hades/batchDeleteQuestion', data, { reject: true }).then((res) => {
+        Service.Hades('public/hades/batchDeleteQuestion', data, { reject: true })
+          .then((res) => {
             if (res.success) {
             if (res.success) {
               message.success('删除成功');
               message.success('删除成功');
               Bus.trigger('queryCategoryTree', 'remain');
               Bus.trigger('queryCategoryTree', 'remain');
@@ -563,28 +541,20 @@ class QuestionList extends Component {
             } else {
             } else {
               message.error('删除失败');
               message.error('删除失败');
             }
             }
-        }).catch(() => {
-          message.error('删除失败');
           })
           })
+          .catch(() => {
+            message.error('删除失败');
+          });
       },
       },
-    })
-  }
+    });
+  };
 
 
   clearSelect = () => {
   clearSelect = () => {
     this.setState({ selectedRowKeys: [] });
     this.setState({ selectedRowKeys: [] });
-  }
+  };
 
 
   render() {
   render() {
-    const {
-      dataSource = [],
-      total,
-      query,
-      previewQuestionModal,
-      batchImportQuestionModal,
-      selectedRowKeys,
-      openMoveModal,
-      questionData,
-    } = this.state;
+    const { dataSource = [], total, query, previewQuestionModal, batchImportQuestionModal, selectedRowKeys, openMoveModal, questionData } = this.state;
     const { current, size, categoryId, questionName, questionType } = query;
     const { current, size, categoryId, questionName, questionType } = query;
     const { match } = this.props;
     const { match } = this.props;
     const rowSelection = {
     const rowSelection = {
@@ -593,47 +563,43 @@ class QuestionList extends Component {
       onChange: this.onSelectChange,
       onChange: this.onSelectChange,
     };
     };
     return (
     return (
-      <div className="question-list">
-        <div className="question-list-filter">
-          <Row type="flex" justify="space-between" align="top">
-            <div className="search-condition">
-              <div className="search-condition__item">
-                <span className="search-label">题目：</span>
+      <div className='question-list'>
+        <div className='question-list-filter'>
+          <Row type='flex' justify='space-between' align='top'>
+            <div className='search-condition'>
+              <div className='search-condition__item'>
+                <span className='search-label'>题目：</span>
                 <Search
                 <Search
-                  placeholder="搜索题目名称"
+                  placeholder='搜索题目名称'
                   value={questionName}
                   value={questionName}
                   style={{ width: '100%' }}
                   style={{ width: '100%' }}
                   onChange={(e) => {
                   onChange={(e) => {
-                    this.handleChangeQuery("questionName", e.target.value);
+                    this.handleChangeQuery('questionName', e.target.value);
                   }}
                   }}
                   onSearch={() => {
                   onSearch={() => {
                     this.queryQuestionPageList();
                     this.queryQuestionPageList();
                   }}
                   }}
-                  enterButton={<span className="icon iconfont">&#xe832;</span>}
+                  enterButton={<span className='icon iconfont'>&#xe832;</span>}
                 />
                 />
               </div>
               </div>
 
 
-              <div className="search-condition__item">
-                <span className="search-label">题型：</span>
+              <div className='search-condition__item'>
+                <span className='search-label'>题型：</span>
                 <Select
                 <Select
-                  placeholder="请选择题目类型"
+                  placeholder='请选择题目类型'
                   value={questionType}
                   value={questionType}
                   style={{ width: '100%' }}
                   style={{ width: '100%' }}
                   showSearch
                   showSearch
                   allowClear
                   allowClear
-                  enterButton={<span className="icon iconfont">&#xe832;</span>}
-                  filterOption={(inputVal, option) =>
-                    option.props.children.includes(inputVal)
-                  }
+                  filterOption={(inputVal, option) => option.props.children.includes(inputVal)}
                   onChange={(value) => {
                   onChange={(value) => {
                     if (_.isEmpty(value)) {
                     if (_.isEmpty(value)) {
-                      this.handleChangeQuery("questionType", value);
+                      this.handleChangeQuery('questionType', value);
                     }
                     }
                   }}
                   }}
                   onSelect={(value) => {
                   onSelect={(value) => {
-                    this.handleChangeQuery("questionType", value);
-                  }}
-                >
+                    this.handleChangeQuery('questionType', value);
+                  }}>
                   {_.map(questionTypeList, (item, index) => {
                   {_.map(questionTypeList, (item, index) => {
                     return (
                     return (
                       <Select.Option value={item.value} key={item.value}>
                       <Select.Option value={item.value} key={item.value}>
@@ -643,20 +609,16 @@ class QuestionList extends Component {
                   })}
                   })}
                 </Select>
                 </Select>
               </div>
               </div>
-              <div className="search-condition__item">
-                <span className="search-label">更新时间：</span>
+              <div className='search-condition__item'>
+                <span className='search-label'>更新时间：</span>
                 <RangePicker
                 <RangePicker
-                  value={
-                    query.updateDateStart
-                      ? [moment(query.updateDateStart), moment(query.updateDateEnd)]
-                      : null
-                  }
+                  value={query.updateDateStart ? [moment(query.updateDateStart), moment(query.updateDateEnd)] : null}
                   style={{ width: '100%' }}
                   style={{ width: '100%' }}
-                  format={"YYYY-MM-DD"}
+                  format={'YYYY-MM-DD'}
                   onChange={(dates) => {
                   onChange={(dates) => {
                     const _query = _.clone(query);
                     const _query = _.clone(query);
-                    _query.updateDateStart = dates ? dates[0].startOf("day").valueOf() : null;
-                    _query.updateDateEnd = dates ? dates[1].endOf("day").valueOf() : null;
+                    _query.updateDateStart = dates ? dates[0].startOf('day').valueOf() : null;
+                    _query.updateDateEnd = dates ? dates[1].endOf('day').valueOf() : null;
                     _query.current = 0;
                     _query.current = 0;
                     this.setState({ query: _query }, () => this.queryQuestionPageList());
                     this.setState({ query: _query }, () => this.queryQuestionPageList());
                   }}
                   }}
@@ -664,43 +626,44 @@ class QuestionList extends Component {
               </div>
               </div>
             </div>
             </div>
 
 
-            <div className="reset-fold-area">
-              <Tooltip title="清空筛选">
-                <span
-                  className="resetBtn iconfont icon"
-                  onClick={this.handleReset}
-                >
-                  &#xe61b;{" "}
+            <div className='reset-fold-area'>
+              <Tooltip title='清空筛选'>
+                <span className='resetBtn iconfont icon' onClick={this.handleReset}>
+                  &#xe61b;{' '}
                 </span>
                 </span>
               </Tooltip>
               </Tooltip>
             </div>
             </div>
           </Row>
           </Row>
         </div>
         </div>
-        {["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
-          (
+        {['CloudManager', 'StoreManager'].includes(User.getUserRole()) && (
           <Space size={8}>
           <Space size={8}>
-              {_.isEmpty(selectedRowKeys) ?
-                (!!categoryId && [
-                  <Button key="1" type="primary" onClick={this.handleCreateQuestion}>
+            {_.isEmpty(selectedRowKeys) ? (
+              !!categoryId && [
+                <Button key='1' type='primary' onClick={this.handleCreateQuestion}>
                   新建题目
                   新建题目
                 </Button>,
                 </Button>,
-                  <Button key="2" onClick={this.batchImportQuestion}>批量导入</Button>
-                ])
-                : <div className="select-container"> 
-                  <span className="con">
+                <Button key='2' onClick={this.batchImportQuestion}>
+                  批量导入
+                </Button>,
+              ]
+            ) : (
+              <div className='select-container'>
+                <span className='con'>
                   <div>
                   <div>
-                      <span className="icon iconfont tip">&#xe6f2;</span>
-                      <span className="text">已选择{selectedRowKeys.length}项</span>
+                    <span className='icon iconfont tip'>&#xe6f2;</span>
+                    <span className='text'>已选择{selectedRowKeys.length}项</span>
                   </div>
                   </div>
                   <div>
                   <div>
-                      <span className="clear" onClick={this.clearSelect}>清空</span>
+                    <span className='clear' onClick={this.clearSelect}>
+                      清空
+                    </span>
                   </div>
                   </div>
                 </span>
                 </span>
               </div>
               </div>
-              }
+            )}
             {!!categoryId ? (
             {!!categoryId ? (
               <Dropdown overlay={this.setMoreOperationOption()}>
               <Dropdown overlay={this.setMoreOperationOption()}>
-                  <Button id="more_operate">
+                <Button id='more_operate'>
                   更多操作
                   更多操作
                   <DownOutlined />
                   <DownOutlined />
                 </Button>
                 </Button>
@@ -713,7 +676,7 @@ class QuestionList extends Component {
             )}
             )}
           </Space>
           </Space>
         )}
         )}
-        <div className="question-list-content">
+        <div className='question-list-content'>
           <XMTable
           <XMTable
             rowKey={(record) => record.id}
             rowKey={(record) => record.id}
             dataSource={dataSource}
             dataSource={dataSource}
@@ -729,30 +692,28 @@ class QuestionList extends Component {
                     <span>
                     <span>
                       ，快去
                       ，快去
                       <span
                       <span
-                        className="empty-list-tip"
+                        className='empty-list-tip'
                         onClick={() => {
                         onClick={() => {
                           this.handleCreateQuestion();
                           this.handleCreateQuestion();
-                        }}
-                      >
+                        }}>
                         新建一个
                         新建一个
                       </span>
                       </span>
                       吧！
                       吧！
                     </span>
                     </span>
                   )}
                   )}
                 </span>
                 </span>
+              ),
             }}
             }}
           />
           />
           {total > 0 && (
           {total > 0 && (
-            <div className="box-footer">
+            <div className='box-footer'>
               <PageControl
               <PageControl
                 current={current - 1}
                 current={current - 1}
                 pageSize={size}
                 pageSize={size}
                 total={total}
                 total={total}
                 toPage={(page) => {
                 toPage={(page) => {
                   const _query = { ...query, current: page + 1 };
                   const _query = { ...query, current: page + 1 };
-                  this.setState({ query: _query }, () =>
-                    this.queryQuestionPageList()
-                  );
+                  this.setState({ query: _query }, () => this.queryQuestionPageList());
                 }}
                 }}
                 showSizeChanger={true}
                 showSizeChanger={true}
                 onShowSizeChange={this.onShowSizeChange}
                 onShowSizeChange={this.onShowSizeChange}
@@ -761,10 +722,10 @@ class QuestionList extends Component {
           )}
           )}
           {previewQuestionModal}
           {previewQuestionModal}
           {batchImportQuestionModal}
           {batchImportQuestionModal}
-          {openMoveModal &&
+          {openMoveModal && (
             <MoveModal
             <MoveModal
               visible={openMoveModal}
               visible={openMoveModal}
-              title="题目"
+              title='题目'
               data={questionData}
               data={questionData}
               categoryId={query.categoryId}
               categoryId={query.categoryId}
               length={selectedRowKeys.length}
               length={selectedRowKeys.length}
@@ -774,12 +735,9 @@ class QuestionList extends Component {
                 this.setState({ openMoveModal: false });
                 this.setState({ openMoveModal: false });
               }}
               }}
             />
             />
-          }
+          )}
         </div>
         </div>
-        <Route
-          path={`${match.url}/question-operate-page`}
-          component={OperateQuestion}
-        />
+        <Route path={`${match.url}/question-operate-page`} component={OperateQuestion} />
       </div>
       </div>
     );
     );
   }
   }

src/routes/config/mainRoutes.tsx

@@ -14,13 +14,13 @@ import UserManage from '@/modules/college-manage/UserManagePage';
 import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage';
 import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage';
 import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage';
 import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage';
 import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
 import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
-import AddLivePage from '@/modules/course-manage/AddLive'
-import VideoCoursePage from '@/modules/course-manage/video-course'
-import GraphicsCoursePage from '@/modules/course-manage/graphics-course'
-import OfflineCoursePage from '@/modules/course-manage/offline-course'
-import AddVideoCoursePage from '@/modules/course-manage/video-course/AddVideoCourse'
-import AddGraphicsCoursePage from '@/modules/course-manage/graphics-course/AddGraphicsCourse'
-import AddOfflineCoursePage from '@/modules/course-manage/offline-course/AddOfflineCourse'
+import AddLivePage from '@/modules/course-manage/AddLive';
+import VideoCoursePage from '@/modules/course-manage/video-course';
+import GraphicsCoursePage from '@/modules/course-manage/graphics-course';
+import OfflineCoursePage from '@/modules/course-manage/offline-course';
+import AddVideoCoursePage from '@/modules/course-manage/video-course/AddVideoCourse';
+import AddGraphicsCoursePage from '@/modules/course-manage/graphics-course/AddGraphicsCourse';
+import AddOfflineCoursePage from '@/modules/course-manage/offline-course/AddOfflineCourse';
 // import DataList from '@/modules/course-manage/DataList/DataList';
 // import DataList from '@/modules/course-manage/DataList/DataList';
 // import ClassBook from '@/modules/resource-disk';
 // import ClassBook from '@/modules/resource-disk';
 import ResourceDisk from '@/modules/resource-disk';
 import ResourceDisk from '@/modules/resource-disk';
@@ -33,145 +33,152 @@ import CourseCategoryManage from '@/modules/teach-tool/components/CourseCategory
 import QuestionManageIndex from '@/modules/teach-tool/question-manage/Index';
 import QuestionManageIndex from '@/modules/teach-tool/question-manage/Index';
 import PaperManageIndex from '@/modules/teach-tool/paper-manage/Index';
 import PaperManageIndex from '@/modules/teach-tool/paper-manage/Index';
 import ExaminationManagerIndex from '@/modules/teach-tool/examination-manager/Index';
 import ExaminationManagerIndex from '@/modules/teach-tool/examination-manager/Index';
-import KnowledgeBase from "@/modules/knowledge-base/index";
+import ExaminationManagerTestDetail from '@/modules/teach-tool/examination-manager/TestDetailPage';
+import KnowledgeBase from '@/modules/knowledge-base/index';
 import CollegeInfoPage from '@/modules/college-manage/CollegeInfoPage';
 import CollegeInfoPage from '@/modules/college-manage/CollegeInfoPage';
 
 
 const mainRoutes = [
 const mainRoutes = [
   {
   {
-    path: "/home",
+    path: '/home',
     component: Home,
     component: Home,
-    name: "中心首页",
+    name: '中心首页',
   },
   },
   {
   {
-    path: "/employees-manage",
+    path: '/employees-manage',
     component: EmployeesManagePage,
     component: EmployeesManagePage,
-    name: "员工管理",
+    name: '员工管理',
   },
   },
   {
   {
     path: '/college-employee',
     path: '/college-employee',
     component: EmployeeManage,
     component: EmployeeManage,
-		name: '员工管理'
+    name: '员工管理',
   },
   },
   {
   {
     path: '/personal-info',
     path: '/personal-info',
     component: personalInfoPage,
     component: personalInfoPage,
-		name: '个人信息'
+    name: '个人信息',
   },
   },
   {
   {
-    path: "/user-manage",
+    path: '/user-manage',
     component: UserManagePage,
     component: UserManagePage,
-    name: "学员管理",
+    name: '学员管理',
   },
   },
   {
   {
     path: '/college-user',
     path: '/college-user',
     component: UserManage,
     component: UserManage,
-		name: '学员管理'
+    name: '学员管理',
   },
   },
   {
   {
     path: '/store-decoration',
     path: '/store-decoration',
     component: StoreDecorationPage,
     component: StoreDecorationPage,
-		name: '学院装修'
+    name: '学院装修',
   },
   },
   {
   {
-    path: "/live-course",
+    path: '/live-course',
     component: LiveCoursePage,
     component: LiveCoursePage,
-    name: "直播课",
+    name: '直播课',
   },
   },
   {
   {
-    path: "/video-course",
+    path: '/video-course',
     component: VideoCoursePage,
     component: VideoCoursePage,
-    name: "视频课",
+    name: '视频课',
   },
   },
   {
   {
-    path: "/graphics-course",
+    path: '/graphics-course',
     component: GraphicsCoursePage,
     component: GraphicsCoursePage,
-    name: "图文课",
+    name: '图文课',
   },
   },
   {
   {
-    path: "/offline-course",
+    path: '/offline-course',
     component: OfflineCoursePage,
     component: OfflineCoursePage,
-    name: "线下课",
+    name: '线下课',
   },
   },
   {
   {
-    path: "/create-live-course",
+    path: '/create-live-course',
     component: AddLivePage,
     component: AddLivePage,
-    name: "创建直播课",
+    name: '创建直播课',
   },
   },
   {
   {
-    path: "/create-video-course",
+    path: '/create-video-course',
     component: AddVideoCoursePage,
     component: AddVideoCoursePage,
-    name: "创建视频课",
+    name: '创建视频课',
   },
   },
   {
   {
-    path: "/knowledge-base",
+    path: '/knowledge-base',
     // component:ResourceDisk,
     // component:ResourceDisk,
     component: KnowledgeBase,
     component: KnowledgeBase,
-    name: "知识库",
+    name: '知识库',
   },
   },
   {
   {
-    path: "/create-graphics-course",
+    path: '/create-graphics-course',
     component: AddGraphicsCoursePage,
     component: AddGraphicsCoursePage,
-    name: "创建图文课",
+    name: '创建图文课',
   },
   },
   {
   {
-    path: "/create-offline-course",
+    path: '/create-offline-course',
     component: AddOfflineCoursePage,
     component: AddOfflineCoursePage,
-    name: "创建线下课",
+    name: '创建线下课',
   },
   },
   {
   {
-    path: "/resource-disk",
+    path: '/resource-disk',
     component: ResourceDisk,
     component: ResourceDisk,
-    name: "资料云盘",
+    name: '资料云盘',
   },
   },
   {
   {
     path: '/question-manage-index',
     path: '/question-manage-index',
-		component:QuestionManageIndex,
-		name: '题库'
+    component: QuestionManageIndex,
+    name: '题库',
   },
   },
   {
   {
     path: '/paper-manage-index',
     path: '/paper-manage-index',
-		component:PaperManageIndex,
-		name: '试卷'
+    component: PaperManageIndex,
+    name: '试卷',
   },
   },
   {
   {
     path: '/examination-manage-index',
     path: '/examination-manage-index',
-		component:ExaminationManagerIndex,
-		name: '考试'
+    component: ExaminationManagerIndex,
+    name: '考试',
+  },
+  {
+    path: '/test-detail/:testId',
+    component: ExaminationManagerTestDetail,
+    // () => import('@/modules/teach-tool/examination-manager/TestDetailPage'),
+    name: '答题详情',
   },
   },
   {
   {
     path: '/course-category-manage',
     path: '/course-category-manage',
-		component:CourseCategoryManage,
-		name: '分类管理'
+    component: CourseCategoryManage,
+    name: '分类管理',
   },
   },
   {
   {
-    path: "/switch-route",
+    path: '/switch-route',
     component: SwitchRoute,
     component: SwitchRoute,
-    name: "登录后跳转承载页",
+    name: '登录后跳转承载页',
   },
   },
   {
   {
-    path: "/plan",
+    path: '/plan',
     component: PlanPage,
     component: PlanPage,
-    name: "培训计划",
+    name: '培训计划',
   },
   },
   {
   {
-    path: "/create-plan",
+    path: '/create-plan',
     component: AddPlanPage,
     component: AddPlanPage,
-    name: "创建视频课",
+    name: '创建视频课',
   },
   },
   {
   {
     path: '/store-info',
     path: '/store-info',
-		component:StoreInfoPage,
-		name: '学院信息'
+    component: StoreInfoPage,
+    name: '学院信息',
   },
   },
   {
   {
     path: '/college-info',
     path: '/college-info',
     component: CollegeInfoPage,
     component: CollegeInfoPage,
-		name: '学院信息'
+    name: '学院信息',
   },
   },
   {
   {
-    path: "/learning-data",
+    path: '/learning-data',
     component: LearningDataPage,
     component: LearningDataPage,
-    name: "学习数据",
+    name: '学习数据',
   },
   },
 ];
 ];