sourcecode/front/project/www/routes/my/report/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { timeRange, formatPercent, formatSeconds, formatDate, getMap } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserAction from '../../../components/UserAction';
import UserTable from '../../../components/UserTable';
import IconButton from '../../../components/IconButton';
import menu, { refreshQuestionType, refreshStruct } from '../index';
import Tabs from '../../../components/Tabs';
import { TimeRange, QuestionType } from '../../../../Constant';
import { My } from '../../../stores/my';
import { Main } from '../../../stores/main';
import { Question } from '../../../stores/question';

const QuestionnTypeMap = getMap(QuestionType, 'value', 'label');


export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
    Main.getExaminationNumber().then(nums => {
      this.nums = nums;
      this.setState({ load: false });
    });
  }

  initState() {
    return {
      tab: 'exercise',
      timerange: 'today',
      filterMap: {},
      sortMap: {},
      selectList: [],
      allChecked: false,
    };
  }

  init() {
    this.exerciseColumns = [
      {
        key: 'title',
        title: '练习册名称',
        fixSort: true,
        render: (text, record) => {
          const { reports } = record;
          return reports.map((report, index) => {
            return <div className="sub">
              {index === 0 && text}
            </div>;
          });
        },
      },
      {
        key: 'latest_time',
        title: '做题时间',
        fixSort: true,
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            const time = formatDate(report.updateTime, 'YYYY-MM-DD HH:mm:ss');
            return <div className="sub">
              <div className="t-2 t-s-12">{time.split(' ')[0]}</div>
              <div className="t-6 t-s-12">{time.split(' ')[1]}</div>
            </div>;
          });
        },
      },
      {
        key: 'correct',
        title: '正确率',
        sort: true,
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            const user = formatPercent(report.userCorrect, report.userNumber);
            const all = formatPercent(record.stat.totalCorrect, record.stat.totalNumber);
            return <div className="sub">
              <div className="t-2 t-s-12">{user}%<Assets height={10} width={10} name={user > all ? 'up' : 'down'} /></div>
              <div className="t-6 t-s-12">全站{all}%</div>
            </div>;
          });
        },
      },
      {
        key: 'time',
        title: '平均耗时',
        sort: true,
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            const user = report.userTime / report.userNumber;
            const all = record.stat.totalTime / record.stat.totalNumber;
            return <div className="sub">
              <div className="t-2 t-s-12">{formatSeconds(user)}<Assets height={10} width={10} name={user > all ? 'up' : 'down'} /></div>
              <div className="t-6 t-s-12">全站{formatSeconds(all)}</div>
            </div>;
          });
        },
      },
      {
        key: 'progress',
        title: '完成度',
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            return <div className="sub">
              <div className="t-2 t-s-12">{formatPercent(report.userNumber, report.questionNumber)}</div>
            </div>;
          });
        },
      },
      {
        key: 'report',
        title: '报告',
        render(text, record) {
          const { reports } = record;
          return reports.map(report => {
            return <div className="sub">
              <IconButton type="report" tip="report" onClick={() => {
                Question.reportLink({ report });
              }} />
            </div>;
          });
        },
      },
    ];

    this.examinationColumns = [
      { key: 'title', title: '模考名称', fixSort: true },
      {
        key: 'latest_time',
        title: '做题时间',
        fixSort: true,
        render: (text, record) => {
          const time = formatDate(record.latestTime, 'YYYY-MM-DD HH:mm:ss');
          return <div className="sub">
            <div className="t-2 t-s-12">{time.split(' ')[0]}</div>
            <div className="t-6 t-s-12">{time.split(' ')[1]}</div>
          </div>;
        },
      },
      {
        key: 'overall',
        title: 'Overall',
        render: (text, record) => {
          const [report] = record.reports;
          if (!report) return null;
          if (!report.qxCat) return <div className="f-s-12">仅CAT模考<br />提供分数</div>;
          return <div className="sub">
            <div className="t-2 t-s-12">{report.score.totalScore}</div>
            <div className="t-6 t-s-12">{record.qxCat === 1 ? Math.round(record.origin.totalScore / record.origin.totalTimes) : Math.round(record.origin.secondTotalScore / record.origin.secondTotalTimes)}</div>
          </div>;
        },
      },
      {
        key: 'verbal',
        title: 'Verbal',
        render: (text, record) => {
          const [report] = record.reports;
          if (!report) return null;
          if (!report.qxCat) return <div className="f-s-12">{formatPercent(report.setting.number.verbal, this.nums.verbal.number, false)}</div>;
          return <div className="sub">
            <div className="t-2 t-s-12">{report.score.verbalScore}</div>
            <div className="t-6 t-s-12">{record.qxCat === 1 ? Math.round(record.origin.verbalScore / record.origin.totalTimes) : Math.round(record.origin.secondVerbalScore / record.origin.secondTotalTimes)}</div>
          </div>;
        },
      },
      {
        key: 'quant',
        title: 'Quant',
        render: (text, record) => {
          const [report] = record.reports;
          if (!report) return null;
          if (!report.qxCat) return <div className="f-s-12">{formatPercent(report.setting.number.quant, this.nums.quant.number, false)}</div>;
          return <div className="sub">
            <div className="t-2 t-s-12">{report.score.quantScore}</div>
            <div className="t-6 t-s-12">{record.qxCat === 1 ? Math.round(record.origin.quantScore / record.origin.totalTimes) : Math.round(record.origin.secondQuantScore / record.origin.secondTotalTimes)}</div>
          </div>;
        },
      },
      {
        key: 'ir',
        title: 'IR',
        render: (text, record) => {
          const [report] = record.reports;
          if (!report) return null;
          if (!report.qxCat) return <div className="f-s-12">{formatPercent(report.setting.number.ir, this.nums.ir.number, false)}</div>;
          return <div className="sub">
            <div className="t-2 t-s-12">{report.score.irScore}</div>
            <div className="t-6 t-s-12">{record.qxCat === 1 ? Math.round(record.origin.irScore / record.origin.totalTimes) : Math.round(record.origin.secondIrScore / record.origin.secondTotalTimes)}</div>
          </div>;
        },
      },
      {
        key: 'report',
        title: '报告',
        render: (text, record) => {
          const [report] = record.reports;
          return <IconButton type="report" tip="report" onClick={() => {
            Question.reportLink({ report });
          }} />;
        },
      },
    ];

    this.originColumns = [
      {
        key: 'title',
        title: '名称',
        fixSort: true,
        render: (text, record) => {
          const { reports } = record;
          return reports.map((report, index) => {
            return <div className="sub">
              {index === 0 && text}
            </div>;
          });
        },
      },
      {
        key: 'latest_time',
        title: '做题时间',
        fixSort: true,
        render: (text, record) => {
          const time = formatDate(record.latestTime, 'YYYY-MM-DD HH:mm:ss');
          return <div className="sub">
            <div className="t-2 t-s-12">{time.split(' ')[0]}</div>
            <div className="t-6 t-s-12">{time.split(' ')[1]}</div>
          </div>;
        },
      },
      {
        key: 'questionType',
        title: '题型',
        render: (text, record) => {
          return record.questionTypes.map(row => <p>{QuestionnTypeMap[row]}</p>);
        },
      },
      {
        key: 'progress',
        title: '完成度',
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            return <div className="sub">
              <div className="t-2 t-s-12">{formatPercent(report.userNumber, report.questionNumber, false)}</div>
              <div className="t-6 t-s-12">{report.userNumber}/{report.questionNumber}</div>
            </div>;
          });
        },
      },
      {
        key: 'correct',
        title: '正确率',
        sort: true,
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            return <div className="sub">
              <div className="t-2 t-s-12">{formatPercent(report.userCorrect, report.userNumber, false)}</div>
            </div>;
          });
        },
      },
      {
        key: 'time',
        title: '平均耗时',
        sort: true,
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            return <div className="sub">
              <div className="t-2 t-s-12">{formatSeconds(report.userTime / report.userNumber)}</div>
            </div>;
          });
        },
      },
      {
        key: 'report',
        title: '报告',
        render: (text, record) => {
          const { reports } = record;
          return reports.map(report => {
            return <div className="sub">
              <IconButton type="report" tip="report" onClick={() => {
                Question.reportLink({ report });
              }} />
            </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 [startTime, endTime] = timeRange(data.timerange);
    switch (data.tab) {
      case 'error':
      case 'collect':
        My.listReport(Object.assign({ origin: data.tab, startTime, endTime }, this.state.search, {
          order: Object.keys(data.sortMap).map(key => {
            return `${key} ${data.sortMap[key]}`;
          }).join(','),
        })).then(result => {
          result.list = result.list.map(row => {
            row.questionTypes = row.questionTypes || [];
            row.reports = row.reports || [];
            row.stat = row.stat || {};
            return row;
          });
          this.setState({ list: result.list, total: result.total, page: data.page, columns: this.originColumns });
        });
        break;
      case 'exercise':
      case 'examination':
      default:
        refreshQuestionType(this, data.subject, data.questionType, { all: true, needSentence: true, allSubject: true })
          .then(({ questionTypes, courseModules }) => {
            return refreshStruct(this, data.tab, data.one, data.two, {
              all: true, needPreview: true, needTextbook: false,
            })
              .then(({ structIds, latest, year }) => {
                My.listReport(Object.assign({ module: data.tab, questionTypes, structIds, latest, year, courseModules, startTime, endTime }, this.state.search, {
                  order: Object.keys(data.sortMap).map(key => {
                    return `${key} ${data.sortMap[key]}`;
                  }).join(','),
                })).then(result => {
                  result.list = result.list.map(row => {
                    row.questionTypes = row.questionTypes || [];
                    row.reports = row.reports || [];
                    row.stat = row.stat || {};
                    return row;
                  });
                  this.setState({ list: result.list, total: result.total, page: data.page, columns: data.tab === 'exercise' ? this.exerciseColumns : this.examinationColumns });
                });
              });
          });
    }
  }

  onTabChange(tab) {
    const data = { tab };
    this.refreshQuery(data);
  }

  onFilter(value) {
    this.search(value, false);
    this.initData();
  }

  onSearch(value) {
    this.search({ 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 ? keys[index] : null, direction: keys.length ? value[keys[index]] : null }, false);
    this.initData();
  }

  onChangePage(page) {
    this.search({ page }, false);
    this.initData();
  }

  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 = [], columns = [] } = this.state;
    const { page, total } = this.state;
    const selectList = [];
    if (tab === 'exercise') {
      selectList.push({
        children: [{
          key: 'subject',
          placeholder: '学科',
          select: questionSubjectSelect,
        }, {
          placeholder: '题型',
          key: 'questionType',
          be: 'subject',
          selectMap: questionSubjectMap,
        }],
      });
    }
    if (tab === 'exercise' || tab === 'examination') {
      selectList.push({
        label: '范围',
        children: [{
          key: 'one',
          placeholder: '全部',
          select: oneSelect,
        }, {
          key: 'two',
          be: 'one',
          placeholder: '全部',
          selectMap: twoSelectMap,
        }],
      });
    }
    selectList.push({
      right: true,
      key: 'timerange',
      select: TimeRange,
    });
    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: '模考' }, { key: 'error', title: '错误组卷' }, { key: 'collect', title: '收藏组卷' }]}
          onChange={key => this.onTabChange(key)}
        />
        <UserAction
          search
          defaultSearch={filterMap.keyword}
          selectList={selectList}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onChange={key => this.onChangeTab(key)}
          onSearch={value => this.onSearch(value)}
        />
        <UserTable
          columns={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)}
        />
      </div>
    );
  }
}