Skip to content

M
mr-julyedu
Commit e19e4bc0 by zhanghaozhe
Options

Merge branch 'ai-test' of gitlab.julyedu.com:baiguangyao/mr-julyedu into ai-test

parents 462badba 50f7de97
Showing with 197 additions and 190 deletions
src/components/ai-test/report/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import { HeaderBar } from '@/common' import {HeaderBar} from '@/common'
import { http } from '@/utils' import {http} from '@/utils'
import './index.scss' import './index.scss'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import scoreIconL from '@assets/image/score_icon-l.png' import scoreIconL from '@assets/image/score_icon-l.png'
import scoreIconR from '@assets/image/score_icon-r.png' import scoreIconR from '@assets/image/score_icon-r.png'
import scoreReportBg from '@assets/image/scoreReport_bg.png' import scoreReportBg from '@assets/image/scoreReport_bg.png'
import { connect } from "react-redux" import {connect} from "react-redux"
@connect(state => ({ @connect(state => ({
user: state.user, user: state.user,
}), }),
) )
class scoreReport extends Component { class scoreReport extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
tab: ['当前成绩', '今日最佳', '本月最佳'], tab: ['当前成绩', '今日最佳', '本月最佳'],
cutIndex: 0, cutIndex: 0,
myRankList: '', myRankList: '',
imgUrl: '', imgUrl: '',
codeSrc: '', codeSrc: '',
avatar_file: '', avatar_file: ''
}
} }
}
componentDidMount() { componentDidMount() {
const {user, history} = this.props const {user, history} = this.props
if (user.hasError) { if (user.hasError) {
history.push('/passport') history.push('/passport')
return return
}
this.getCodeWe()
this.handleFetchInfo(0)
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.props.user.data.avatar!==nextProps.user.data.avatar) {
this.getCanvas()
return false
}
return true
} }
this.getCodeWe()
this.handleFetchInfo(0) getCanvas() {
} let _this = this
var canvas2 = document.createElement("canvas")
let _canvas = document.getElementsByClassName('score-list')[0]
getCanvas() { var w = parseInt(window.getComputedStyle(_canvas).width)
let _this = this var h = parseInt(window.getComputedStyle(_canvas).height)
var canvas2 = document.createElement("canvas") var scale = window.devicePixelRatio
let _canvas = document.getElementsByClassName('score-list')[0] canvas2.width = w * scale
var w = parseInt(window.getComputedStyle(_canvas).width) canvas2.height = h * scale
var h = parseInt(window.getComputedStyle(_canvas).height)
var scale = window.devicePixelRatio var context = canvas2.getContext("2d")
canvas2.width = w * scale context.scale(1, 1)
canvas2.height = h * scale html2canvas(document.getElementsByClassName('score-list')[0], {canvas: canvas2}).then(function (canvas) {
//document.body.appendChild(canvas);
var context = canvas2.getContext("2d")
context.scale(1, 1) let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
html2canvas(document.getElementsByClassName('score-list')[0], {canvas: canvas2}).then(function (canvas) { _this.setState({
//document.body.appendChild(canvas); imgUrl: imgUrl,
})
let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream") })
_this.setState({ }
imgUrl: imgUrl,
})
})
}
// 获取二维码 // 获取二维码
getCodeWe() { getCodeWe() {
let _this = this let _this = this
let qrCodeLink = '/ai-test' let qrCodeLink = `${API.m}/ai-test`
return new Promise(resolve => { return new Promise(resolve => {
QRCode.toDataURL(qrCodeLink, {}, function (err, url) { QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
_this.setState({ _this.setState({
codeSrc: url, codeSrc: url,
})
})
resolve()
}) })
}) }
resolve()
}) handleFetchInfo = (index) => {
} http.get(`${API.home}/sys/at/user_score/${index}`).then(res => {
const {code, data} = res.data
handleFetchInfo = (index) => { if (code === 200) {
http.get(`${API.home}/sys/at/user_score/${index}`).then(res => { this.setState({
const {code, data} = res.data myRankList: data
if (code === 200) { })
this.setState({
myRankList: data, let avatar = this.props.user && this.props.user.data.avatar
this.getBase64(avatar)
setTimeout(() => {
this.getCanvas()
},100)
}
}) })
}
let avatar = this.props.user && this.props.user.data.avatar
this.getBase64(avatar) getBase64Image = (img) => {
var canvas = document.createElement("canvas")
setTimeout(() => { canvas.width = img.width
this.getCanvas() canvas.height = img.height
}, 100)
} var ctx = canvas.getContext("2d")
}) ctx.drawImage(img, 0, 0, img.width, img.height)
} var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
var dataURL = canvas.toDataURL("image/" + ext)
return dataURL
getBase64Image = (img) => {
var canvas = document.createElement("canvas")
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, img.width, img.height)
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
var dataURL = canvas.toDataURL("image/" + ext)
return dataURL
}
getBase64 = (img) => {
let base64 = null
let image = new Image()
let timeStamp = +new Date()
image.setAttribute('crossOrigin', 'anonymous')
image.src = img + '?' + timeStamp
image.onload = () => {
base64 = this.getBase64Image(image)
this.setState({
avatar_file: base64,
})
} }
image.onerror = () => {
console.log('onerror') getBase64 = (img) => {
let timeStamp = +new Date() let base64 = null
this.getBase64(img + '?' + timeStamp) let image = new Image()
let timeStamp = +new Date()
image.setAttribute('crossOrigin', 'anonymous')
image.src = img + '?' + timeStamp
image.onload = () => {
base64 = this.getBase64Image(image)
this.setState({
avatar_file: base64,
})
}
image.onerror = () => {
console.log('onerror')
let timeStamp = +new Date()
this.getBase64(img + '?' + timeStamp)
}
} }
}
change = (index) => {
this.setState({
cutIndex: index,
})
this.handleFetchInfo(index)
}
render() {
const {tab, cutIndex, myRankList, codeSrc, imgUrl, avatar_file} = this.state
return (
<div className={'score-content'}>
<HeaderBar
title='成绩报告'
arrow={true}
home={false}
/>
<div className={'score-report'}>
<ul className={'tab-list'}>
{
tab.map((item, index) => {
return (
<li key={index} className={cutIndex === index ? 'active' : ''}
onClick={() => this.change(index)}>{item}</li>
)
})
}
</ul>
<div className="score-list-box">
<div className={'score-list'} style={{backgroundImage: `url(${scoreReportBg})`}}>
<div className="title">
<img src={scoreIconL} alt=""/>
成绩报告
<img src={scoreIconR} alt=""/>
</div>
<table border="0" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<td>分数</td>
<td>用时</td>
<td>{cutIndex === 0 && '最终'}排名</td>
</tr>
</thead>
<tbody>
{
myRankList.r_id !== 0 &&
<tr className={'has'}>
<td>{myRankList.score}分</td>
<td>{myRankList.cost_time}</td>
<td className={'rank'}>{myRankList.rank}</td>
</tr>
}
{
myRankList.r_id == 0 &&
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
}
</tbody>
</table>
<div className="comment text-overflow-4">
<img className={'avatar_file'} src={avatar_file} alt=""/>
{myRankList && myRankList.title && myRankList.title.comment}
</div>
<div className="code">
<img src={codeSrc} alt=""/>
<p>AI水平测试</p>
</div>
</div>
<img className={'imgUrl'} src={imgUrl} alt=""/> change = (index) => {
</div> this.setState({
cutIndex: index,
})
this.handleFetchInfo(index)
}
<div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>
</div> render() {
</div> const {tab, cutIndex, myRankList, codeSrc, imgUrl, avatar_file} = this.state
) return (
} <div className={'score-content'}>
<HeaderBar
title='成绩报告'
arrow={true}
home={false}
/>
<div className={'score-report'}>
<ul className={'tab-list'}>
{
tab.map((item, index) => {
return (
<li key={index} className={cutIndex === index ? 'active' : ''}
onClick={() => this.change(index)}>{item}</li>
)
})
}
</ul>
<div className="score-list-box">
<div className={'score-list'} style={{backgroundImage: `url(${scoreReportBg})`}}>
<div className="title">
<img src={scoreIconL} alt=""/>
成绩报告
<img src={scoreIconR} alt=""/>
</div>
<table border="0" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<td>分数</td>
<td>用时</td>
<td>{cutIndex === 0 && '最终'}排名</td>
</tr>
</thead>
<tbody>
{
myRankList.r_id !== 0 &&
<tr className={'has'}>
<td>{myRankList.score}分</td>
<td>{myRankList.cost_time}</td>
<td className={'rank'}>{myRankList.rank}</td>
</tr>
}
{
myRankList.r_id == 0 &&
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
}
</tbody>
</table>
<div className="comment text-overflow-4">
<img className={'avatar_file'} src={avatar_file} alt=""/>
{myRankList && myRankList.title && myRankList.title.comment}
</div>
<div className="code">
<img src={codeSrc} alt=""/>
<p>AI水平测试</p>
</div>
</div>
<img className={'imgUrl'} src={imgUrl} alt=""/>
</div>
<div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>
</div>
</div>
)
}
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment