index.js 4.58 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 19 20
    time: this.store.session.get('time') || {d: 0, h: 0, m: 0, s: 0},
    answer: this.store.session.get('answer'),
    recordId: this.store.session.get('recordId'),
zhanghaozhe committed
21 22
    analysis: [],
    results: [],
zhanghaozhe committed
23
    elapsed: this.store.session.get('elapsed'),
zhanghaozhe committed
24 25 26 27 28
  }

  componentDidMount() {
    if (isEmpty(this.state.answer) || !this.state.recordId) {
      this.props.history.replace('/ai-test')
zhanghaozhe committed
29
      this.store.session.remove('submitted')
zhanghaozhe committed
30
    }
zhanghaozhe committed
31
    if (this.store.session.get('submitted')) {
zhanghaozhe committed
32 33 34
      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

  setCounter = () => {
    this.timer = setInterval(() => {
      this.setState(state => {
zhanghaozhe committed
46
        const fms = state.elapsed + 1
zhanghaozhe committed
47 48
        return {
          time: {
zhanghaozhe committed
49 50 51 52
            d: Math.floor(fms / (60 * 60 * 100 * 24)),
            h: Math.floor(fms / (60 * 60 * 100)) % 24,
            m: Math.floor(fms / (60 * 100)) % 60,
            s: Math.floor(fms / 100) % 60,
zhanghaozhe committed
53
          },
zhanghaozhe committed
54
          elapsed: fms,
zhanghaozhe committed
55 56
        }
      })
zhanghaozhe committed
57
    }, 10)
zhanghaozhe committed
58 59 60
  }


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 * 10,
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
        this.store.session.set('submitted', true)
zhanghaozhe committed
71 72
        this.store.session.set('elapsed', this.state.elapsed)
        this.store.session.set('time', this.state.time)
zhanghaozhe committed
73
        clearInterval(this.timer)
zhanghaozhe committed
74
        this.props.history.push('/ai-test/report')
zhanghaozhe committed
75 76 77 78 79 80
      } else {
        Toast.fail(msg, 2, null, false)
      }
    })
  }

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

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

zhanghaozhe committed
155
export default SubmitAnswer;