123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620 |
- import React from 'react';
- import { Link } from 'react-router-dom';
- import './index.less';
- import { Icon, Checkbox } from 'antd';
- import Page from '@src/containers/Page';
- import Assets from '@src/components/Assets';
- import { timeRange, formatDate, getMap, formatSeconds, formatPercent } from '@src/services/Tools';
- import UserLayout from '../../../layouts/User';
- import UserTable from '../../../components/UserTable';
- import UserAction from '../../../components/UserAction';
- import { RealAuth, QuestionNoteModal } from '../../../components/OtherModal';
- import Examination from '../../../components/Examination';
- import VipRenew from '../../../components/VipRenew';
- import menu, { refreshQuestionType, refreshStruct } from '../index';
- import Tabs from '../../../components/Tabs';
- import Modal from '../../../components/Modal';
- import Select from '../../../components/Select';
- import GIcon from '../../../components/Icon';
- import { TimeRange, QuestionType } from '../../../../Constant';
- import { My } from '../../../stores/my';
- import { Question } from '../../../stores/question';
- import { User } from '../../../stores/user';
- const QuestionTypeMap = getMap(QuestionType, 'value', 'label');
- const exportType = [
- { key: 'question', title: '题目' },
- { key: 'official', title: '官方解析' },
- { key: 'note', title: '我的笔记' },
- { key: 'qx', title: '千行解析', auth: true },
- { key: 'association', title: '题源联想', auth: true },
- { key: 'qa', title: '相关问答', auth: true },
- ];
- export default class extends Page {
- constructor(props) {
- props.size = 10;
- super(props);
- }
- initState() {
- return {
- tab: 'exercise',
- timerange: 'today',
- filterMap: {},
- sortMap: {},
- data: [{}, {}],
- selectList: [],
- allChecked: false,
- };
- }
- init() {
- this.columns = [
- {
- key: 'question_type',
- title: '题型',
- width: 115,
- render: (text, record) => {
- return QuestionTypeMap[record.questionType];
- },
- fixSort: true,
- },
- {
- key: 'title',
- title: '题目ID',
- width: 100,
- fixSort: true,
- render: (text, record) => {
- return <Link to={`/paper/question/${record.id}`}>{text}</Link>;
- },
- },
- {
- key: 'description',
- title: '内容',
- width: 220,
- render: (text) => {
- return <div style={{ maxHeight: '80px', overflow: 'hidden' }}>{text}</div>;
- },
- },
- {
- key: 'time',
- title: '耗时',
- width: 80,
- sort: true,
- render: (text, record) => {
- const user = record.stat ? record.stat.userTime / record.stat.userNumber : 0;
- const all = record.questionNo.totalNumber ? record.questionNo.totalTime / record.questionNo.totalNumber : 0;
- return <div className="sub">
- <div className="t-2 t-s-12">{user > 0 ? formatSeconds(user) : '-'}{user > 0 && <Assets height={10} width={10} name={user > all ? 'up' : 'down'} />}</div>
- <div className="t-6 t-s-12">全站{all > 0 ? formatSeconds(all) : '-'}</div>
- </div>;
- },
- },
- {
- key: 'correct',
- title: '错误率',
- width: 95,
- sort: true,
- render: (text, record) => {
- return <div className="sub">
- <div className="t-2 t-s-12">{record.stat ? formatPercent(record.stat.userNumber - record.stat.userCorrect, record.stat.userNumber, false) : '-'}</div>
- <div className="t-6 t-s-12">{record.stat ? `${record.stat.userNumber - record.stat.userCorrect}/${record.stat.userNumber}` : '-'}</div>
- </div>;
- },
- },
- {
- key: 'latest_time',
- title: '最近做题',
- width: 95,
- render: (text) => {
- return <div className="sub">
- <div className="t-2 t-s-12">{text.split(' ')[0]}</div>
- <div className="t-6 t-s-12">{text.split(' ')[1]}</div>
- </div>;
- },
- },
- {
- key: '',
- title: '',
- render: (text, record, index) => {
- return <div><GIcon name="star" active={record.collect} className="m-r-5" onClick={() => this.toggleCollect(index)} /><GIcon name="note" active={record.note} onClick={() => this.note(index)} /></div>;
- },
- },
- ];
- }
- initData() {
- const data = Object.assign(this.state, this.state.search);
- data.filterMap = this.state.search;
- if (data.order) {
- data.sortMap = { [data.order]: data.direction };
- }
- if (data.timerange) {
- data.filterMap.timerange = data.timerange;
- }
- const { info = {} } = this.props.user;
- if (info.latestExercise) {
- // 获取最后一次错题记录
- Question.baseReport(info.latestError).then(result => {
- this.setState({ latest: result });
- });
- }
- const [startTime, endTime] = timeRange(data.timerange);
- refreshQuestionType(this, data.subject, data.questionType, {
- all: true,
- needSentence: true,
- allSubject: true,
- }).then(({ questionTypes }) => {
- return refreshStruct(this, questionTypes, data.tab, data.one, data.two, {
- all: true,
- needPreview: false,
- needTextbook: true,
- }).then(({ structIds, latest, year }) => {
- My.listError(
- Object.assign(
- { module: data.tab, questionTypes, structIds, latest, year, startTime, endTime },
- this.state.search,
- {
- order: Object.keys(data.sortMap)
- .map(key => {
- if (key === 'title') return 'pid desc, no desc';
- return `${key} ${data.sortMap[key]}`;
- })
- .join(','),
- },
- ),
- ).then(result => {
- result.list = result.list.map(row => {
- row.questionNo = row.questionNo || {};
- row.key = row.questionNoId;
- row.questionType = row.question.questionType;
- row.title = row.questionNo.title;
- row.description = row.question.description;
- row.latest_time = row.latestTime ? formatDate(row.latestTime, 'YYYY-MM-DD HH:mm:ss') : '';
- return row;
- });
- this.setState({ list: result.list, total: result.total });
- });
- });
- });
- }
- toggleCollect(index) {
- const { list } = this.props;
- const userQuestion = list[index];
- if (!userQuestion.collect) {
- My.addQuestionCollect(userQuestion.questionNo.id).then(() => {
- userQuestion.collect = true;
- this.setState({ list });
- });
- } else {
- My.delQuestionCollect(userQuestion.questionNo.id).then(() => {
- userQuestion.collect = false;
- this.setState({ list });
- });
- }
- }
- note(index) {
- const { list } = this.props;
- const userQuestion = list[index];
- const { questionNo } = userQuestion;
- My.getQuestionNote(questionNo.id)
- .then(result => {
- this.setState({ questionNo, note: result || {}, showNote: true, index });
- });
- }
- onTabChange(tab) {
- const data = { tab };
- this.refreshQuery(data);
- }
- onFilter(value) {
- this.search(value, false);
- this.initData();
- }
- onSearch(value) {
- this.search({ page: 1, keyword: value }, false);
- this.initData();
- }
- onSort(value) {
- const keys = Object.keys(value);
- // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
- const { sortMap } = this.state;
- const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
- this.search({ order: keys.length && value[keys[index]] && value[keys[index]] ? keys[index] : null, direction: keys.length ? value[keys[index]] : null }, false);
- this.initData();
- }
- onChangePage(page) {
- this.search({ page }, false);
- this.initData();
- }
- onAll(checked) {
- const { selectList } = this.state;
- const { list = [] } = this.state;
- if (checked) {
- list.forEach(item => {
- if (selectList.indexOf(item.key) >= 0) return;
- selectList.push(item.key);
- });
- } else {
- list.forEach(item => {
- const index = selectList.indexOf(item.key);
- if (index < 0) return;
- selectList.splice(index, 1);
- });
- }
- this.setState({ selectList, allChecked: checked });
- }
- onSelect(selectList) {
- this.setState({ selectList, allCheckbox: false });
- }
- onAction(key) {
- const { info } = this.props.user;
- const { selectList } = this.state;
- switch (key) {
- case 'help':
- this.setState({ showTips: true });
- return;
- case 'clear':
- if (selectList.length === 0) {
- this.setState({ showWarn: true, warn: { title: '移除', content: '不可少于1题,请重新选择' } });
- return;
- }
- this.setState({ showClearConfirm: true, clearInfo: { questionNoIds: selectList } });
- break;
- case 'group':
- if (!info.vip) {
- this.setState({ showVip: true });
- return;
- }
- if (selectList.length < 10) {
- this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可小于10题,请重新选择' } });
- return;
- }
- if (selectList.length > 50) {
- this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可多余50题,请重新选择' } });
- return;
- }
- if (selectList.length === 0) {
- this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可同时选中语文题和数学题,请重新选择。' } });
- return;
- }
- this.setState({ showGroupConfirm: true, groupInfo: { questionNoIds: selectList, filterTimes: 2 } });
- break;
- case 'export':
- if (!info.vip) {
- this.setState({ showVip: true });
- return;
- }
- if (selectList.length < 1) {
- this.setState({ showWarn: true, warn: { title: '导出', content: '不可小于1题,请重新选择' } });
- return;
- }
- if (selectList.length > 100) {
- this.setState({ showWarn: true, warn: { title: '导出', content: '不可多余100题,请重新选择' } });
- return;
- }
- if (info.bindReal) {
- this.setState({ showExportConfirm: true, exportInfo: { include: exportType.map(row => row.key), questionNoIds: selectList, answer: true } });
- } else {
- this.setState({ showExportAuthConfirm: true, exportInfo: { include: exportType.filter(row => !row.auth).map(row => row.key), questionNoIds: selectList, answer: true } });
- }
- break;
- default:
- }
- }
- clearErrorQuestion() {
- const { clearInfo } = this.state;
- My.clearError(clearInfo.questionNoIds)
- .then(() => {
- this.refresh();
- })
- .catch(e => {
- this.setState({ showWarn: true, warn: { title: '移除', content: e.message }, showClearConfirm: false });
- });
- }
- group() {
- const { groupInfo } = this.state;
- My.groupQuestionCollect(groupInfo)
- .then((result) => {
- Question.startLink('error', result);
- this.setState({ showGroupConfirm: false });
- })
- .catch(e => {
- this.setState({ showWarn: true, warn: { title: '组卷练习', content: e.message }, showGroupConfirm: false });
- });
- }
- export() {
- const { exportInfo } = this.state;
- this.setState({ showExportWait: true, showExportConfirm: false, showExportAuthConfirm: false });
- My.exportQuestionError(exportInfo)
- .then((result) => {
- openLink(`/export/${result}`);
- this.setState({ showExportWait: false });
- })
- .catch(e => {
- this.setState({ showWarn: true, warn: { title: '导出', content: e.message }, showExportWait: false });
- });
- }
- remove(report) {
- My.removeError(report.id)
- .then(() => {
- this.refresh();
- });
- }
- clearErrorReport() {
- My.clearLatestError()
- .then(() => {
- const { info } = this.props.user;
- info.latestError = 0;
- User.infoHandle(info);
- });
- this.setState({ latest: null });
- }
- renderView() {
- const { config } = this.props;
- return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
- }
- renderTable() {
- const {
- tab,
- questionSubjectSelect,
- questionSubjectMap = {},
- oneSelect,
- twoSelectMap = {},
- filterMap = {},
- sortMap = {},
- list = [],
- latest,
- } = this.state;
- const { selectList = [], allChecked, page, total } = this.state;
- const { info } = this.props.user;
- return (
- <div className="table-layout">
- <Tabs
- border
- type="division"
- theme="theme"
- size="small"
- space={2.5}
- width={100}
- active={tab}
- tabs={[{ key: 'exercise', title: '练习' }, { key: 'examination', title: '模考' }]}
- onChange={key => this.onTabChange(key)}
- />
- <UserAction
- search
- defaultSearch={filterMap.keyword}
- selectList={[
- {
- children: [
- {
- key: 'subject',
- placeholder: '学科',
- select: questionSubjectSelect,
- },
- {
- placeholder: '题型',
- key: 'questionType',
- be: 'subject',
- selectMap: questionSubjectMap,
- },
- ],
- },
- {
- label: '范围',
- children: [
- {
- key: 'one',
- placeholder: '全部',
- select: oneSelect,
- },
- {
- key: 'two',
- be: 'one',
- placeholder: '全部',
- selectMap: twoSelectMap,
- },
- ],
- },
- {
- right: true,
- key: 'timerange',
- select: TimeRange,
- },
- ]}
- filterMap={filterMap}
- onFilter={value => this.onFilter(value)}
- onSearch={value => this.onSearch(value)}
- />
- <UserAction
- allCheckbox
- allChecked={allChecked}
- help
- btnList={[
- { title: '移除', key: 'clear' },
- { title: '组卷', key: 'group', tag: 'vip', disabled: !info.vip },
- { title: '导出', key: 'export', tag: 'vip', disabled: !info.vip },
- ]}
- right={
- latest && <div className="tip">
- {formatDate(latest.updateTime, 'YYYY-MM-DD HH:mm')} 组卷{latest.questionNumber}题,做对{latest.userCorrect}题。<span onClick={() => {
- this.remove(latest);
- }}>移除正确题目</span>
- <Icon type="close-circle" theme="filled" onClick={() => {
- this.clearErrorReport();
- }} />
- </div>
- }
- onAll={checked => this.onAll(checked)}
- onAction={key => this.onAction(key)}
- />
- <UserTable
- select
- columns={this.columns}
- sortMap={sortMap}
- data={list}
- current={page}
- total={total}
- pageSize={this.state.search.size}
- selectList={selectList}
- onSelect={l => this.onSelect(l)}
- onSort={v => this.onSort(v)}
- onChange={p => this.onChangePage(p)}
- />
- {this.renderModal()}
- </div>
- );
- }
- renderModal() {
- const { showTips, showWarn, warn = {}, showClearConfirm, clearInfo = {}, showGroupConfirm, groupInfo = {}, showExportConfirm, showExportAuthConfirm, exportInfo = {}, showExportWait, showExamination, showVip, showReal, showNote, note = {}, questionNo = {}, list } = this.state;
- const { info } = this.props.user;
- return [
- <Modal show={showTips} title="操作提示" confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showTips: false })}>
- <div className="flex-layout m-b-2">
- <div className="flex-block">
- <div className="t-1 t-s-18">组卷功能</div>
- <div className="t-2">操作数量:10-50;</div>
- <div className="t-2">注意事项:可跨题型、不可跨学科。</div>
- </div>
- <div className="flex-block">
- <div className="t-1 t-s-18">导出功能</div>
- <div className="t-2">操作数量:1-100;</div>
- <div className="t-2">注意事项:“综合推理IR”暂时无法导出。</div>
- </div>
- </div>
- <div className="t-3">
- *您可点击
- <Icon type="question-circle" theme="filled" />
- 查阅以上信息。
- </div>
- </Modal>,
- <Modal show={showWarn} title={warn.title} confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showWarn: false })}>
- <div className="t-2 t-s-18">{warn.content}</div>
- </Modal>,
- <Modal show={showGroupConfirm} title="组卷练习" confirmText="开始练习" onConfirm={() => this.group()} onCancel={() => this.setState({ showGroupConfirm: false })}>
- <div className="t-2 t-s-18">
- 您共选择了 <span className="t-4">{groupInfo.questionNoIds ? groupInfo.questionNoIds.length : 0}</span> 道题目,是否开始练习?</div>
- <div className="t-2 t-s-16">
- <Checkbox checked className="m-r-5" />
- 剔除已组卷练习 <Select
- theme="white"
- value={groupInfo.filterTimes}
- list={[{ key: 2, title: '2' }, { key: 3, title: '3' }]}
- onChange={({ key }) => {
- groupInfo.filterTimes = key;
- this.setState({ groupInfo });
- }}
- />{' '}
- 次以上的错题
- </div>
- </Modal>,
- <Modal show={showClearConfirm} title="移出" onConfirm={() => this.clearErrorQuestion()} onCancel={() => this.setState({ showClearConfirm: false })}>
- <div className="t-2 t-s-18">
- 当前选中的 <span className="t-4">{clearInfo.questionNoIds ? clearInfo.questionNoIds.length : 0}</span> 道题即将被移出错题本,移出后无法恢复,是否继续?
- </div>
- </Modal>,
- <Modal show={showExportWait} title="导出" confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showExportWait: false })}>
- <div className="t-2 t-s-18">正在下载中,请不要关闭当前页面!</div>
- </Modal>,
- <Modal show={showExportConfirm} title="导出" confirmText="导出" onConfirm={() => this.export()} onCancel={() => this.setState({ showExportConfirm: false })}>
- <div className="t-2 t-s-18 m-b-5">
- 当前共选中 <span className="t-4">{exportInfo.questionNoIds ? exportInfo.questionNoIds.length : 0}</span> 道题,请确认需要导出的内容:
- </div>
- <div className="t-2 t-s-16">
- {exportType.map(item => {
- return (
- <div className="d-i-b m-b-5" style={{ width: 135 }}>
- <Checkbox checked={exportInfo.include ? exportInfo.include.indexOf(item.key) >= 0 : false} className="m-r-5" onChange={() => {
- exportInfo.include.push(item.key);
- this.setState({ exportInfo });
- }} />
- {item.title}
- </div>
- );
- })}
- </div>
- </Modal>,
- <Modal show={showExportAuthConfirm} title="导出" confirmText="导出" onConfirm={() => this.export()} onCancel={() => this.setState({ showExportAuthConfirm: false })}>
- <div className="t-2 t-s-18 m-b-5">
- 当前共选中 <span className="t-4">{exportInfo.questionNoIds ? exportInfo.questionNoIds.length : 0}</span> 道题,请确认需要导出的内容:
- </div>
- <div className="t-2 t-s-16 m-b-2">
- {exportType
- .filter(item => !item.auth)
- .map(item => {
- return (
- <div className="d-i-b m-b-2" style={{ width: 135 }}>
- <Checkbox checked={exportInfo.include ? exportInfo.include.indexOf(item.key) >= 0 : false} className="m-r-5" onChange={() => {
- exportInfo.include.push(item.key);
- this.setState({ exportInfo });
- }} />
- {item.title}
- </div>
- );
- })}
- </div>
- <div className="b-b m-b-2 m-t-2" />
- <div className="t-3 m-b-1">
- 以下内容需实名认证后才可导出: <a className="f-r" onClick={() => this.setState({ showExportAuthConfirm: false, showReal: true })}>去认证 ></a>
- </div>
- <div className="t-2 t-s-16 m-b-2">
- {exportType
- .filter(item => item.auth)
- .map(item => {
- return (
- <div className="d-i-b" style={{ width: 135 }}>
- <Checkbox disabled className="m-r-5" />
- {item.title}
- </div>
- );
- })}
- </div>
- </Modal>,
- <Examination
- show={showExamination}
- data={info}
- onConfirm={() => this.setState({ showExamination: false })}
- onCancel={() => this.setState({ showExamination: false })}
- onClose={() => this.setState({ showExamination: false })}
- />,
- <RealAuth show={showReal} data={info} onConfirm={() => this.setState({ showReal: false })} />,
- <VipRenew
- show={showVip}
- data={info}
- onReal={() => this.setState({ showVip: false, showReal: true })}
- onPrepare={() => this.setState({ showVip: false, showExamination: true })}
- onClose={(result) => {
- if (result) {
- this.refresh();
- } else {
- this.setState({ showVip: false });
- }
- }}
- />,
- <QuestionNoteModal show={showNote} defaultData={note} questionNo={questionNo} onConfirm={() => {
- list[this.state.index].note = true;
- this.setState({ showNote: false, list });
- }} onCancel={() => this.setState({ showNote: false })} />,
- ];
- }
- }
|