index.js 4.36 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
    analysis: [],
    results: [],
    elapsed: this.store.get('elapsed'),
  }

  componentDidMount() {
    if (isEmpty(this.state.answer) || !this.state.recordId) {
      this.props.history.replace('/ai-test')
zhanghaozhe committed
29 30 31 32 33 34
      this.store.remove('submitted')
    }
    if (this.store.get('submitted')) {
      this.getAnalysis()
    } else {
      this.setCounter()
zhanghaozhe committed
35 36 37 38 39
    }
  }

  componentWillUnmount() {
    clearInterval(this.timer)
zhanghaozhe committed
40 41
  }

zhanghaozhe committed
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

  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
61 62 63
  submit = () => {
    const {answer, recordId} = this.state
    http.post(`${API.home}/sys/submit_answer`, {
zhanghaozhe committed
64
      answer: JSON.stringify(answer),
zhanghaozhe committed
65
      cost_time: this.state.elapsed * 1000,
zhanghaozhe committed
66 67
      record_id: recordId,
    }).then(res => {
zhanghaozhe committed
68
      const {code, msg} = res.data
zhanghaozhe committed
69
      if (code === 200) {
zhanghaozhe committed
70 71
        this.store.set('submitted', true)
        clearInterval(this.timer)
zhanghaozhe committed
72
        this.props.history.push('/ai-test/report')
zhanghaozhe committed
73 74 75 76 77 78
      } else {
        Toast.fail(msg, 2, null, false)
      }
    })
  }

zhanghaozhe committed
79 80 81 82 83 84 85 86 87 88 89 90 91
  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
92 93 94
  }

  render() {
zhanghaozhe committed
95
    const {time, answer, analysis, recordId} = this.state
zhanghaozhe committed
96 97 98 99 100 101 102
    return (
      <div className={'submit-answer'}>
        <HeaderBar title={'提交试卷'} arrow={true}/>
        <div className="content">
          <div className="cost">用时:
            <span>
              {
zhanghaozhe committed
103 104 105
                !!time.d && time.d
              }
              {
zhanghaozhe committed
106 107 108 109 110 111
                !!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
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 143 144 145 146
          {
            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
147 148 149 150 151 152 153
        </div>
      </div>
    );
  }
}

export default SubmitAnswer;