import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import './index.less'; import { Tooltip, Icon } from 'antd'; import Page from '@src/containers/Page'; import Assets from '@src/components/Assets'; import { zeroFill, formatPercent, formatDate, formatSeconds, getMap } from '@src/services/Tools'; import { asyncSMessage } from '@src/services/AsyncTools'; import moment from 'moment'; import Date from '../../../components/Date'; import UserLayout from '../../../layouts/User'; import Tabs from '../../../components/Tabs'; import Button from '../../../components/Button'; import { Icon as GIcon } from '../../../components/Icon'; import UserTable from '../../../components/UserTable'; import Examination from '../../../components/Examination'; import menu from '../index'; import { BindPhone, BindEmail, EditInfo, RealAuth, EditAvatar, InviteModal } from '../../../components/OtherModal'; import VipRenew from '../../../components/VipRenew'; import { My } from '../../../stores/my'; import { Main } from '../../../stores/main'; import { QuestionType } from '../../../../Constant'; import { User } from '../../../stores/user'; const QuestionTypeMap = getMap(QuestionType, 'value', 'label'); class LogItem extends Component { constructor(props) { super(props); this.columns = [ { title: '', key: 'title' }, { title: '语法SC', key: 'sc' }, { title: '逻辑CR', key: 'cr' }, { title: '阅读RC', key: 'rc' }, ]; this.state = { open: false, showTop: true }; } render() { const { data = {} } = this.props; const { total = [], type } = data; const { open } = this.state; return (
{total.map(item => { return (
); })}
this.setState({ open: !open })} />
{type === 'exercise' && this.renderExercise()} {type === 'examination' && this.renderExamination()} {type === 'course' && this.renderCourse()}
); } renderExercise() { const { data } = this.props; const { detail = [] } = data; const { open } = this.state; return ( ); } renderExamination() { const { data } = this.props; const { detail = [] } = data; const { open } = this.state; return ( ); } renderCourse() { const { data } = this.props; const { detail = [] } = data; const { open } = this.state; return ( ); } } export default class extends Page { constructor(props) { super(props); this.colors = ['#3C39CC', '#9E9CFF', '#4292F0', '#4374EC', '#6865FD', '#8D65FD', '#6BABF6', '#7BBEFF', '#6BABF6']; } initState() { return { day: 'today', showExamination: false, showTop: true, timeList: [ { title: '长难句', time: '3h60min', ratio: 10, color: '#3C39CC' }, { title: '综合推理IR', time: '3h60min', ratio: 10, color: '#9E9CFF' }, { title: '语法SC', time: '3h60min', ratio: 10, color: '#4292F0' }, { title: '作文AWA', time: '3h60min', ratio: 10, color: '#4374EC' }, { title: '阅读RC', time: '3h60min', ratio: 10, color: '#6865FD' }, { title: '模考', time: '3h60min', ratio: 10, color: '#8D65FD' }, { title: '逻辑CR', time: '3h60min', ratio: 10, color: '#6BABF6' }, { title: '自由组卷', time: '3h60min', ratio: 10, color: '#7BBEFF' }, { title: '数学Quant', time: '3h60min', ratio: 10, color: '#6BABF6' }, ], logList: [ { total: [ { title: '练习和订正', width: 130 }, { title: '60min', width: 90 }, { title: '30题', width: 80 }, { title: '超过了30%的用户' }, ], detail: [ { title: '做题数', sc: '10', cr: '10', rc: '20' }, { title: '平均正确率', sc: '86%', cr: '86%', rc: '86%' }, { title: '平均用时', sc: '1min', cr: '1min20s', rc: '1min' }, ], }, { total: [ { title: '模考和订正', width: 130 }, { title: '60min', width: 90 }, { title: '30套卷', width: 80 }, { title: '超过了30%的用户' }, ], detail: [ { title: '做题数', sc: '10', cr: '10', rc: '20' }, { title: '平均正确率', sc: '86%', cr: '86%', rc: '86%' }, { title: '平均用时', sc: '1min', cr: '1min20s', rc: '1min' }, ], }, { total: [ { title: '课程学习', width: 130 }, { title: '60min', width: 90 }, { title: '30课', width: 80 }, { title: '超过了30%的用户' }, ], detail: [ { title: '做题数', sc: '10', cr: '10', rc: '20' }, { title: '平均正确率', sc: '86%', cr: '86%', rc: '86%' }, { title: '平均用时', sc: '1min', cr: '1min20s', rc: '1min' }, ], }, ], }; } initData() { // 获取学习数据 My.getStudyTotal().then((total) => { total.categorys = total.categorys.map((row, index) => { row.ratio = formatPercent(row.time, total.time, true); row.time = formatSeconds(row.time); row.color = this.colors[index]; return row; }); this.setState({ total }); }); My.getStudyWeek(0).then(latest => { const diff = latest.time - latest.avgTime; const diffPercent = diff > 0 ? formatPercent(latest.time - latest.avgTime, latest.avgTime, true) : formatPercent(latest.avgTime - latest.time, latest.avgTime, true); this.setState({ latest, diff, diffPercent }); My.getStudyWeek(1).then(last => { const diffLast = latest.time - last.time; const diffLastPercent = diffLast > 0 ? formatPercent(latest.time - last.time, last.time, true) : formatPercent(last.time - latest.time, last.time, true); this.setState({ last, diffLast, diffLastPercent }); }); }); // 获取广告 Main.getAd('my-self').then(result => { this.setState({ ads: result }); }); this.refreshDay(this.state.day); this.refreshMessage(); } refreshMessage() { // 获取未读消息 My.message({ page: 1, size: 2, read: 0 }).then(result => { this.setState({ messages: result.list }); }); } readAllMessage() { My.readAllMessage().then(() => { User.refreshToken(); this.refreshMessage(); asyncSMessage('操作成功'); }); } refreshDay(value) { let time = ''; switch (value) { case 'today': time = moment().format('YYYY-MM-DD'); break; case 'yesterday': time = moment() .add(-1, 'days') .format('YYYY-MM-DD'); break; case 'before': time = moment() .add(-2, 'days') .format('YYYY-MM-DD'); break; default: time = value.format('YYYY-MM-DD'); value = 'other'; } My.getStudy(time).then(result => { const study = []; const exerciseMap = {}; result.exerciseList.forEach(row => { exerciseMap[row.key] = row; }); study.push({ type: 'exercise', total: [ { title: '练习和订正', width: 130 }, { title: result.exerciseTime ? formatSeconds(result.exerciseTime).replace(/([0-9]+)(min|m|hour|h|s)/g, '$1$2') : '-', width: 90, }, { title: `${result.exerciseQuestion || '-'}题`, width: 80 }, { title: `超过了${result.exerciseExceed ? formatPercent(result.exerciseExceed.rank, result.exerciseExceed.total) : '-%'}的用户`, }, ], detail: [ { title: '做题数', sc: exerciseMap.sc ? exerciseMap.sc.number : '-', cr: exerciseMap.cr ? exerciseMap.cr.number : '-', rc: exerciseMap.rc ? exerciseMap.rc.number : '-', }, { title: '平均正确率', sc: exerciseMap.sc ? formatPercent(exerciseMap.sc.correct, exerciseMap.sc.number, false) : '-%', cr: exerciseMap.cr ? formatPercent(exerciseMap.cr.correct, exerciseMap.cr.number, false) : '-%', rc: exerciseMap.rc ? formatPercent(exerciseMap.rc.correct, exerciseMap.rc.number, false) : '-%', }, { title: '平均用时', sc: exerciseMap.sc ? formatSeconds(exerciseMap.sc.time / exerciseMap.sc.number) : '-', cr: exerciseMap.cr ? formatSeconds(exerciseMap.cr.time / exerciseMap.cr.number) : '-', rc: exerciseMap.rc ? formatSeconds(exerciseMap.rc.time / exerciseMap.rc.number) : '-', }, ], }); study.push({ type: 'examination', total: [ { title: '模考和订正', width: 130 }, { title: result.examinationTime ? formatSeconds(result.examinationTime).replace(/([0-9]+)(min|m|hour|h|s)/g, '$1$2') : '-', width: 90, }, { title: `${result.examinationPaper || '-'}套卷`, width: 80 }, { title: `超过了${result.examinationExceed ? formatPercent(result.examinationExceed.rank, result.examinationExceed.total) : '-%'}的用户`, }, ], detail: result.examinationList.map(row => { return { title: row.title, time: formatDate(row.report.createTime, 'YYYY-MM-DD HH:mm:ss'), score: row.report.score, }; }), }); study.push({ type: 'course', total: [ { title: '课程学习', width: 130 }, { title: result.courseTime ? formatSeconds(result.courseTime).replace(/([0-9]+)(min|m|hour|h|s)/g, '$1$2') : '-', width: 90, }, { title: `${result.courseNumber || '-'}课时`, width: 80 }, { title: `超过了${result.courseExceed ? formatPercent(result.courseExceed.rank, result.courseExceed.total) : '-%'}的用户`, }, ], detail: result.courseList.map(row => { return { type: QuestionTypeMap[row.extend], title: `课时${row.no}: ${row.title}`, time: formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss'), }; }), }); this.setState({ study }); }); this.setState({ day: value, time, showCal: false }); } renderView() { const { config } = this.props; return ( { return ( ); })} onClick={() => { if (this.state.showCal) this.setState({ showCal: false }); }} /> ); } renderTop() { const { info } = this.props.user; const { showTop } = this.state; return !info.bindPrepare && showTop &&
this.setState({ showExamination: true })} />
{ e.stopPropagation(); this.setState({ showTop: false }); }} />
this.setState({ showExamination: true })} />
; } renderLog() { const { study = [{}, { type: 'examination' }, { type: 'course' }] } = this.state; const { latest = {}, diff = 0, diffPercent = 0, diffLast = 0, diffLastPercent = 0, day, time, showCal, } = this.state; return (
学习记录
$1$2')}`, }} /> 同比上周{diffLastPercent}% 0 ? 'up' : 'down'} /> 同比全站{diffPercent}% 0 ? 'up' : 'down'} />
{ this.refreshDay(value); }} />
{day === 'other' && {formatDate(time, 'YYYY-MM-DD')}} { e.stopPropagation(); this.setState({ showCal: true }); }} /> {showCal && ( date.unix() <= moment.unix()} onChange={date => { this.refreshDay(date); this.setState({ showCal: false }); }} /> )}
{study.map((data, index) => { return ; })}
); } renderTime() { const { total = {} } = this.state; return (
时间分配
自 {total.createTime && formatDate(total.createTime, 'YYYY-MM-DD')} ,您已在千行学习{total.days} 天,累计 $1$2'), }} />
{(total.categorys || []).map(item => { return ( ); })}
{(total.categorys || []).map(item => { return (
{item.title}
{item.time}
); })}
); } renderInfo() { const { info = {} } = this.props.user; const { showExamination, showPhone, showEmail, showEdit, showReal, showAvatar, showInvite, showVip } = this.state; return (
{ this.setState({ showEdit: true }); }}> 编辑
{ this.setState({ showEdit: true }); }} > {(info.nickname || '') || `qx${info.mobile}`}{' '}
ID: {zeroFill(info.id, 4)}
{ this.setState({ showPhone: true }); }} /> { this.setState({ showReal: true }); }} /> { this.setState({ showEmail: true }); }} /> { this.setState({ showExamination: true }); }} />
{!info.bindReal &&
完成实名认证送6个月VIP this.setState({ showReal: true })}>去完成
}
{info.vip &&
{info.vip && {formatDate(info.vip, 'YYYY-MM-DD')}到期} { this.setState({ showVip: true }); }} > 续费
} this.setState({ showExamination: false })} onCancel={() => this.setState({ showExamination: false })} onClose={() => this.setState({ showExamination: false })} /> this.setState({ showPhone: false })} onCancel={() => this.setState({ showPhone: false })} /> this.setState({ showEmail: false })} onCancel={() => this.setState({ showEmail: false })} /> this.setState({ showEdit: false, showAvatar: true, avatarImage: file })} onConfirm={() => this.setState({ showEdit: false, avatarFile: null })} onCancel={() => this.setState({ showEdit: false, avatarFile: null })} /> this.setState({ showReal: false })} /> this.setState({ showAvatar: false, showEdit: true, avatarFile: file, avatarImage: null })} onCancel={() => this.setState({ showAvatar: false, showEdit: true, avatarImage: null })} /> this.setState({ showInvite: false })} /> this.setState({ showVip: false, showReal: true })} onPrepare={() => this.setState({ showVip: false, showExamination: true })} onClose={(result) => { if (result) { this.refresh(); } else { this.setState({ showVip: false }); } }} />
); } renderVip() { const { info } = this.props.user; return !info.vip &&
开通 解锁海量权限
自由组卷
导出笔记
专享解析
换库提醒
加强版报告
; } renderMessage() { const { messages = [] } = this.state; const number = (messages || []).length; return ( number > 0 && (
{ this.readAllMessage(); }}> 全部已读
{(messages || []).map(row => { return (
{row.title}
{formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss')}
{row.link && ( { openLink(row.link); }} /> )}
); })}
) ); } }