Merge branch 'ai-test' into dev

src/components/ai-test/exam/index.js

@@ -5,7 +5,13 @@ import { browser, getParam, http } from "@/utils"
 import { Toast } from 'antd-mobile'
 import storage from 'store2'
 import Navigation from "@components/ai-test/common/navigation"
-import { differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, lightFormat } from "date-fns";
+import {
+  differenceInSeconds,
+  differenceInMinutes,
+  differenceInHours,
+  differenceInDays,
+  differenceInMilliseconds,
+} from "date-fns";
 import { isEmpty } from 'lodash'
 import { connect } from 'react-redux'
 import { matchPath } from 'react-router-dom'
@@ -35,8 +41,8 @@ class Exam extends Component {
     if (user.hasError) {
       return history.push('/passport')
     }
-    if (this.store.get('submitted')) {
-      this.store.remove('submitted')
+    if (this.store.session.get('submitted')) {
+      this.store.session.clearAll()
       this.props.history.replace('/ai-test')
     }
     this.unlisten = history.listen((location) => {
@@ -49,6 +55,18 @@ class Exam extends Component {
       this.unlisten && this.unlisten()
     })
     this.getQuestions()
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        this.setState(state => {
+          return {
+            elapsed: state.elapsed + (Date.now() - this.store.session.get('hiddenTimestamp')) / 10,
+          }
+        })
+      } else {
+        this.store.session.set('hiddenTimestamp', Date.now())
+      }
+    })
   }
 
   componentWillUnmount() {
@@ -59,18 +77,18 @@ class Exam extends Component {
   setCounter = () => {
     this.timer = setInterval(() => {
       this.setState(state => {
-        const s = state.elapsed + 1
+        const fms = 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,
+            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,
           },
-          elapsed: s,
+          elapsed: fms,
         }
       })
-    }, 1000)
+    }, 10)
   }
 
   goBack = () => {
@@ -92,7 +110,7 @@ class Exam extends Component {
       .then(res => {
         const {code, msg, data} = res.data
         if (code === 200) {
-          let answer = this.store.get('answer') || {}
+          let answer = this.store.session.get('answer') || {}
           if (isEmpty(answer)) {
             data.forEach(item => {
               answer[item.id] = 0
@@ -123,7 +141,7 @@ class Exam extends Component {
         m: differenceInMinutes(now, createTime) % 60,
         s: differenceInSeconds(now, createTime) % 60,
       },
-      elapsed: differenceInSeconds(now, createTime),
+      elapsed: differenceInMilliseconds(now, createTime) / 10,
     });
   }
 
@@ -152,7 +170,7 @@ class Exam extends Component {
     const {answer, time, recordId, elapsed} = this.state
     const {history} = this.props
     clearInterval(this.timer)
-    this.store.setAll({time, answer, recordId, elapsed})
+    this.store.session.setAll({time, answer, recordId, elapsed})
     history.push('/ai-test/submit')
 
   }
@@ -169,21 +187,7 @@ class Exam extends Component {
             <i className={'iconfont iconzhong'}></i>
             <span>
               {
-                !!time.d && time.d
-              }
-              {
-                !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
-              }
-              {time.m.toString().padStart(2, '0')}:
-              {time.s.toString().padStart(2, '0')}
-            </span>
-          </div>
-          {/*
-          <div className="time">
-            <i className={'iconfont iconzhong'}></i>
-            <span>
-              {
-                !!time.d && time.d
+                !!time.d && <>{time.d}天</>
               }
               {
                 !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
@@ -192,7 +196,6 @@ class Exam extends Component {
               {time.s.toString().padStart(2, '0')}
             </span>
           </div>
-*/}
           <div className="count"
                onClick={this.storeData}>{Object.values(answer).filter(item => item).length}/{questions.length}</div>
         </header>

src/components/ai-test/index.js

@@ -8,27 +8,9 @@ import Analysis from "@components/ai-test/analysis"
 import Assist from "@components/ai-test/assist"
 import Help from '@components/ai-test/share'
 import Report from '@components/ai-test/report'
-import storage from 'store2'
 
 class AiTest extends Component {
 
-  examStore = storage.namespace('aiTestExam')
-
-
-  componentDidMount() {
-    window.addEventListener('beforeunload', this.handleBeforeUnload)
-  }
-
-  componentWillUnmount() {
-    this.handleBeforeUnload()
-    window.removeEventListener('beforeunload', this.handleBeforeUnload)
-  }
-
-  handleBeforeUnload = () => {
-    this.examStore.clearAll()
-  }
-
-
   render() {
     const {match} = this.props
     return (

src/components/ai-test/report/index.js

@@ -45,6 +45,9 @@ class scoreReport extends Component {
         let _this = this
         var canvas2 = document.createElement("canvas")
         let _canvas = document.getElementsByClassName('score-list')[0]
+        if(!_canvas){
+            return
+        }
         var w = parseInt(window.getComputedStyle(_canvas).width)
         var h = parseInt(window.getComputedStyle(_canvas).height)
         var scale = window.devicePixelRatio

src/components/ai-test/scores/index.js

@@ -278,7 +278,7 @@ class Scores extends Component {
               }
             </Tabs>
             {
-              !isExpandRankList ?
+              rankList.length > 10 && (!isExpandRankList ?
                   <div className="expand" onClick={() => {
                     this.setState({
                       isExpandRankList: true,
@@ -300,6 +300,7 @@ class Scores extends Component {
                     <i className={'iconfont iconiconfront-71'}></i>
                   </span>
                   </div>
+              )
             }
           </div>
         </div>
@@ -317,7 +318,7 @@ class Scores extends Component {
                     isShowRule: true,
                   })
                 }}>开始测试<span>（今日可测试{pageState.daily_test_num}次）</span></button>
-                : <Link to={'/ai-test/share'}>
+                : <Link to={`/ai-test/share?shareCode=${pageState.code}`}>
                   <button className={'get-chance'}>获取测试机会<span>（今日可测试0次）</span></button>
                 </Link>
               : <button className={'unavailable'}>活动已结束</button>

src/components/ai-test/scores/index.scss

@@ -296,6 +296,7 @@
     padding: 10px;
     color: #fff;
     font-size: 0;
+    z-index: 100;
 
     button {
       width: 100%;

src/components/ai-test/submit-answer/index.js

@@ -15,20 +15,20 @@ class SubmitAnswer extends Component {
   timer = null
 
   state = {
-    time: this.store.get('time') || {d: 0, h: 0, m: 0, s: 0},
-    answer: this.store.get('answer'),
-    recordId: this.store.get('recordId'),
+    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'),
     analysis: [],
     results: [],
-    elapsed: this.store.get('elapsed'),
+    elapsed: this.store.session.get('elapsed'),
   }
 
   componentDidMount() {
     if (isEmpty(this.state.answer) || !this.state.recordId) {
       this.props.history.replace('/ai-test')
-      this.store.remove('submitted')
+      this.store.session.remove('submitted')
     }
-    if (this.store.get('submitted')) {
+    if (this.store.session.get('submitted')) {
       this.getAnalysis()
     } else {
       this.setCounter()
@@ -43,18 +43,18 @@ class SubmitAnswer extends Component {
   setCounter = () => {
     this.timer = setInterval(() => {
       this.setState(state => {
-        const s = state.elapsed + 1
+        const fms = 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,
+            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,
           },
-          elapsed: s,
+          elapsed: fms,
         }
       })
-    }, 1000)
+    }, 10)
   }
 
 
@@ -62,12 +62,14 @@ class SubmitAnswer extends Component {
     const {answer, recordId} = this.state
     http.post(`${API.home}/sys/submit_answer`, {
       answer: JSON.stringify(answer),
-      cost_time: this.state.elapsed * 1000,
+      cost_time: this.state.elapsed * 10,
       record_id: recordId,
     }).then(res => {
       const {code, msg} = res.data
       if (code === 200) {
-        this.store.set('submitted', true)
+        this.store.session.set('submitted', true)
+        this.store.session.set('elapsed', this.state.elapsed)
+        this.store.session.set('time', this.state.time)
         clearInterval(this.timer)
         this.props.history.push('/ai-test/report')
       } else {
@@ -100,7 +102,7 @@ class SubmitAnswer extends Component {
           <div className="cost">用时：
             <span>
               {
-                !!time.d && time.d
+                !!time.d && <>{time.d}天</>
               }
               {
                 !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>