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

import React from 'react';
import './index.less';
import { Tooltip, Popover, Checkbox } from 'antd';
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);
    this.columns = [
      { key: 'title', title: '练习册名称', fixSort: true },
      {
        key: 'create_time',
        title: '做题时间',
        fixSort: true,
        render: (text, row, index) => {
          return (
            <div>
              <div className="t-2">
                2019-12-12
                {row.children && (
                  <Popover
                    trigger="click"
                    content={
                      <table className="user-report-history-overlay">
                        <tbody>
                          {row.children.map((child, i) => {
                            return (
                              <tr>
                                <td>{row.children.length - i}</td>
                                <td>2019-12-12 13:13:13</td>
                                <td>3/20</td>
                                <td>
                                  <Checkbox
                                    checked={!child.disabled}
                                    onChange={e => this.onChangeShowHistory(index, i, e.target.checked)}
                                  />
                                </td>
                              </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    }
                  >
                    <Tooltip overlayClassName="gray" title="历史数据">
                      <span>
                        <Assets className="m-l-5" name="down_normal" />
                      </span>
                    </Tooltip>
                  </Popover>
                )}
              </div>
              <div className="t-6">13:13:13</div>
            </div>
          );
        },
      },
      { key: 'correct', title: '正确率', sort: true },
      { key: 'time', title: '平均耗时', sort: true },
      { key: 'progress', title: '完成度' },
      {
        key: 'report',
        title: '报告',
        render() {
          return <IconButton type="report" tip="report" />;
        },
      },
    ];
    Main.getExaminationNumber().then(nums => {
      this.nums = nums;
      this.setState({ load: false });
    });
  }

  initState() {
    return {
      tab: 'exercise',
      timerange: 'today',
      filterMap: {},
      sortMap: {},
      list: [], // { children: [{}, {}], title: 'channgnanjue' }, {}, {}, {}
      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, index, childIndex) => {
          const { reports, show } = record;
          const report = childIndex === -1 ? reports[0] : record;
          const time = formatDate(report.updateTime, 'YYYY-MM-DD HH:mm:ss');
          return <div className="">
            <div className="t-2 t-s-12">{time.split(' ')[0]}
              {childIndex === -1 && reports && reports.length > 1 && (
                <Popover
                  trigger="click"
                  content={
                    <table className="user-report-history-overlay">
                      <tbody>
                        {reports.map((child, ii) => {
                          if (ii === 0) return null;
                          return <tr>
                            <td>{reports.length - ii}</td>
                            <td>{formatDate(child.updateTime, 'YYYY-MM-DD HH:mm:ss')}</td>
                            <td>{child.userNumber}/{child.questionNumber}</td>
                            <td>
                              <Checkbox
                                checked={show.indexOf(child.id) >= 0}
                                onChange={e => this.onChangeShowHistory(index, ii, e.target.checked)}
                              />
                            </td>
                          </tr>;
                        })}
                      </tbody>
                    </table>
                  }
                >
                  <Tooltip overlayClassName="gray" title="历史数据">
                    <span>
                      <Assets className="m-l-5" name="down_normal" />
                    </span>
                  </Tooltip>
                </Popover>
              )}</div>
            <div className="t-6 t-s-12">{time.split(' ')[1]}</div>
          </div>;
        },
      },
      {
        key: 'correct',
        title: '正确率',
        sort: true,
        render: (text, record, index, childIndex) => {
          const { reports } = record;
          const report = childIndex === -1 ? reports[0] : record;
          const user = formatPercent(report.userCorrect, report.userNumber);
          const all = formatPercent(record.stat.totalCorrect, record.stat.totalNumber);
          return <div className="">
            <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, index, childIndex) => {
          const { reports } = record;
          const report = childIndex === -1 ? reports[0] : record;
          const user = report.userTime / report.userNumber;
          const all = record.stat.totalTime / record.stat.totalNumber;
          return <div className="">
            <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, index, childIndex) => {
          const { reports } = record;
          const report = childIndex === -1 ? reports[0] : record;
          return (
            <div className="">
              <div className="t-2 t-s-12">{formatPercent(report.userNumber, report.questionNumber, false)}</div>
            </div>
          );
        },
      },
      {
        key: 'report',
        title: '报告',
        render: (text, record, index, childIndex) => {
          const { reports } = record;
          const report = childIndex === -1 ? reports[0] : record;
          return (
            <div className="">
              <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 { reports } = record;
          if (!reports) return null;
          const report = reports[0];
          if (!report) return null;
          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: '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) => {
          return <div className="sub">{text}</div>;
        },
      },
      {
        key: 'latest_time',
        title: '做题时间',
        fixSort: true,
        render: (text, record) => {
          const { reports } = record;
          if (!reports) return null;
          const report = reports[0];
          if (!report) return null;
          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: 'questionType',
        title: '题型',
        render: (text, record) => {
          return record.questionTypes.map(row => <p>{QuestionnTypeMap[row]}</p>);
        },
      },
      {
        key: 'progress',
        title: '完成度',
        render: (text, record) => {
          const { reports } = record;
          if (!reports) return null;
          const report = reports[0];
          if (!report) return null;
          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;
          if (!reports) return null;
          const report = reports[0];
          if (!report) return null;
          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;
          if (!reports) return null;
          const report = reports[0];
          if (!report) return null;
          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;
          if (!reports) return null;
          const report = reports[0];
          if (!report) return null;
          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 };
    } else {
      data.sortMap = { latest_time: 'desc' };
    }
    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 }) => {
          return refreshStruct(this, questionTypes, data.tab, data.one, data.two, {
            all: true,
            needPreview: true,
            needTextbook: false,
          }).then(({ structIds, courseModules }) => {
            My.listReport(
              Object.assign(
                { module: data.tab, questionTypes, structIds, 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 || {};
                row.reports.forEach(r => {
                  r.stat = row.stat;
                });
                row.children = [];
                row.show = [];
                return row;
              });
              this.setState({
                list: result.list,
                total: result.total,
                page: data.page,
                columns: data.tab === 'exercise' ? this.exerciseColumns : this.examinationColumns,
              });
            });
          });
        });
    }
  }

  onChangeShowHistory(index, childIndex, checked) {
    const { list } = this.state;
    const item = list[index];
    const { reports } = item;
    const { children } = item;
    const show = children.map(row => row.id);
    const childId = reports[childIndex].id;
    // 第一个不允许切换
    if (checked) {
      if (show.indexOf(childId) >= 0) return;
      children.push(reports[childIndex]);
    } else {
      const k = show.indexOf(childId);
      if (k < 0) return;
      children.splice(k, 1);
    }
    list[index].children = children;
    list[index].show = children.map(row => row.id);
    this.setState({ list });
  }

  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 && value[keys[index]] ? 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 = [],
    } = this.state;
    const { page, total, columns } = 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
          even="children"
          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>
    );
  }
}