index.js 4.24 KB
Newer Older
zhanghaozhe committed
1 2 3 4 5 6
import React, { Component } from 'react';
import './index.scss'
import { HeaderBar } from "@common/index"
import storage from 'store2'
import { Toast } from "antd-mobile";
import { http } from "@/utils"
zhanghaozhe committed
7 8 9 10
import classnames from 'classnames'
import { Link } from "react-router-dom";
import { isEmpty } from 'lodash'

zhanghaozhe committed
11 12 13 14

class SubmitAnswer extends Component {

  store = storage.namespace('aiTestExam')
zhanghaozhe committed
15
  timer = null
zhanghaozhe committed
16 17

  state = {
zhanghaozhe committed
18
    time: this.store.get('time') || {d: 0, h: 0, m: 0, s: 0},
zhanghaozhe committed
19 20
    answer: this.store.get('answer'),
    recordId: this.store.get('recordId'),
zhanghaozhe committed
21 22 23 24 25 26 27 28 29 30 31 32 33 34
    analysis: [],
    results: [],
    elapsed: this.store.get('elapsed'),
  }

  componentDidMount() {
    this.setCounter()
    if (isEmpty(this.state.answer) || !this.state.recordId) {
      this.props.history.replace('/ai-test')
    }
  }

  componentWillUnmount() {
    clearInterval(this.timer)
zhanghaozhe committed
35 36
  }

zhanghaozhe committed
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

  setCounter = () => {
    this.timer = setInterval(() => {
      this.setState(state => {
        const s = state.elapsed + 1
        return {
          time: {
            d: Math.floor(s / (60 * 60 * 24)),
            h: Math.floor(s / (60 * 60)) % 24,
            m: Math.floor(s / 60) % 60,
            s: s % 60,
          },
          elapsed: s,
        }
      })
    }, 1000)
  }


zhanghaozhe committed
56 57 58
  submit = () => {
    const {answer, recordId} = this.state
    http.post(`${API.home}/sys/submit_answer`, {
zhanghaozhe committed
59 60
      answer: JSON.stringify(answer),
      cost_time: this.state.elapsed,
zhanghaozhe committed
61 62 63 64 65
      record_id: recordId,
    }).then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {
        this.store.clearAll()
zhanghaozhe committed
66 67 68
        this.store.set('submitted', true)
        clearInterval(this.timer)
        this.getAnalysis()
zhanghaozhe committed
69 70 71 72 73 74
      } else {
        Toast.fail(msg, 2, null, false)
      }
    })
  }

zhanghaozhe committed
75 76 77 78 79 80 81 82 83 84 85 86 87
  getAnalysis = () => {
    http.post(`${API.home}/sys/get_analysis`, {
      record_id: this.state.recordId,
    }).then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {
        this.setState({
          analysis: data,
        });
      } else {
        Toast.fail(msg, 2, null, false)
      }
    })
zhanghaozhe committed
88 89 90
  }

  render() {
zhanghaozhe committed
91
    const {time, answer, analysis, recordId} = this.state
zhanghaozhe committed
92 93 94 95 96 97 98
    return (
      <div className={'submit-answer'}>
        <HeaderBar title={'提交试卷'} arrow={true}/>
        <div className="content">
          <div className="cost">用时:
            <span>
              {
zhanghaozhe committed
99 100 101
                !!time.d && time.d
              }
              {
zhanghaozhe committed
102 103 104 105 106 107
                !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
              }
              {time.m.toString().padStart(2, '0')}:
              {time.s.toString().padStart(2, '0')}
            </span>
          </div>
zhanghaozhe committed
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
          {
            analysis.length
              ? <>
                <ul className={'answers'}>
                  {
                    analysis.map((item, index) => {
                      const userSelectIndex = item.options.findIndex(item => item.user_select)
                      const rightAnswerIndex = item.options.findIndex(item => item.is_ans)
                      return <li key={item.id}
                                 className={classnames({
                                   correct: userSelectIndex === rightAnswerIndex,
                                   wrong: userSelectIndex >= 0 && userSelectIndex !== rightAnswerIndex,
                                   unselect: userSelectIndex < 0,
                                 })}>{index + 1}</li>
                    })
                  }
                </ul>
                {
                  !!analysis.length && <div className={'score'}>总分:{analysis[0].score}</div>
                }
                <Link to={`/ai-test/analysis/${recordId}`}>
                  <button>查看解析</button>
                </Link>
              </>
              : <>
                <ul className={'answers'}>
                  {
                    answer && !!Object.keys(answer).length && Object.keys(answer).map((item, index) => {
                      return <li key={item} className={answer[item] ? 'selected' : ''}>{index + 1}</li>
                    })
                  }
                </ul>
                <button onClick={this.submit}>提交</button>
              </>
          }
zhanghaozhe committed
143 144 145 146 147 148 149
        </div>
      </div>
    );
  }
}

export default SubmitAnswer;