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

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
// import LineChart from '@src/components/LineChart';
import BarChart from '@src/components/BarChart';
import PieChart from '@src/components/PieChart';
// import { getMap } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserTable from '../../../components/UserTable';
import UserAction from '../../../components/UserAction';
import Select from '../../../components/Select';
import menu from '../index';
import Tabs from '../../../components/Tabs';
import { My } from '../../../stores/my';
import { QuestionDifficult, QuestionType, TimeRange, TextbookMinYear, CourseModule } from '../../../../Constant';
import { getMap, formatPercent, formatSeconds, timeRange, formatTreeData } from '../../../../../src/services/Tools';
import { Main } from '../../../stores/main';

const QuestionDifficultMap = getMap(QuestionDifficult, 'value', 'label');
const QuestionTypeMap = getMap(QuestionType, 'value', 'label');

const columns = [
  {
    key: 'title',
    title: '',
    render(text) {
      return <b>{text}</b>;
    },
  },
  {
    key: 'progress',
    title: '进度',
    render(text, record) {
      return (
        <div className="v">
          <div className="t">{formatPercent(record.userQuestion, record.questionNumber, false)}</div>
          <div className="d">已做{record.userQuestion}道</div>
        </div>
      );
    },
  },
  {
    key: 'ratio',
    title: '正确率',
    render(text, record) {
      return (
        <div className="v">
          <div className="t">{formatPercent(record.userCorrect, record.userNumber, false)}</div>
          <div className="d">{record.userCorrect}/{record.userNumber}</div>
        </div>
      );
    },
  },
  {
    key: 'time',
    title: '平均用时',
    help: '',
    render(text, record) {
      return formatSeconds(record.userTime / record.userNumber);
    },
  },
];

// const QuestionDifficultMap = getMap(QuestionDifficult, 'value', 'label');

function pieOption1(value, text, subtext) {
  return {
    title: {
      text,
      textAlign: 'center',
      textVerticalAlign: 'middle',
      subtext,
      top: '28%',
      left: '48%',
    },
    // value < 50 ? '#f19057' :
    color: ['#6966fb', '#f7f7f7'],
    series: [
      {
        type: 'pie',
        radius: ['90%', '100%'],
        label: {
          show: false,
        },
        data: [value, 100 - value],
      },
    ],
  };
}

function barOption1(avgTotal, avgCorrect, avgIncorrent) {
  return {
    xAxis: {
      type: 'category',
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#D1D6DF' } },
      splitLine: { show: false },
      data: [
        {
          value: 'Avg Time\nTotal',
          textStyle: { color: '#686872', fontWeight: '500', fontSize: 14, lineHeight: 20 },
        },
        {
          value: 'Avg Time\nCorrect',
          textStyle: { color: '#686872', fontWeight: '500', fontSize: 14, lineHeight: 20 },
        },
        {
          value: 'Avg Time\nIncorrect',
          textStyle: { color: '#686872', fontWeight: '500', fontSize: 14, lineHeight: 20 },
        },
      ],
    },
    yAxis: {
      show: false,
      min: 0,
      max: 100,
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
    },
    grid: { width: 300, left: '10%' },
    series: {
      type: 'bar',
      barWidth: 50,
      data: [
        {
          value: avgTotal,
          name: 'Avg Time\nTotal',
          itemStyle: { color: '#92AFD2' },
          label: {
            show: true,
            position: 'top',
            formatter: `{a|${formatSeconds(avgTotal)}}`,
            rich: { a: { fontSize: 16, fontWeight: 'bold', color: '#686872' } },
          },
        },
        {
          value: avgCorrect,
          name: 'Avg Time\nCorrect',
          itemStyle: { color: '#989FC1' },
          label: {
            show: true,
            position: 'top',
            formatter: `{a|${formatSeconds(avgCorrect)}}`,
            rich: { a: { fontSize: 16, fontWeight: 'bold', color: '#686872' } },
          },
        },
        {
          value: avgIncorrent,
          name: 'Avg Time\nIncorrect',
          itemStyle: { color: '#BFD4EE' },
          label: {
            show: true,
            position: 'top',
            formatter: `{a|${formatSeconds(avgIncorrent)}}`,
            rich: { a: { fontSize: 16, fontWeight: 'bold', color: '#686872' } },
          },
        },
      ],
    },
  };
}

function barOption2(title, subTitle, data) {
  return {
    title: {
      text: title,
      subtext: subTitle,
      textStyle: { fontSize: 16 },
    },
    tooltip: {
      trigger: 'axis',
    },
    color: '#989FC1',
    dataset: {
      source: [['type', 'self'], ...data],
    },
    grid: { left: 30, right: 30, height: 250 },
    xAxis: {
      type: 'category',
      axisLabel: { color: '#686872' },
      axisLine: { lineStyle: { color: '#D1D6DF' } },
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: { color: '#686872' },
      axisLine: { lineStyle: { color: '#D1D6DF' } },
    },
    series: {
      type: 'bar',
      barWidth: 40,
    },
  };
}
function barOption3(titles, source, data1, data2, color1, color2) {
  return {
    title: [
      {
        text: titles[0],
        textStyle: { fontSize: 16, fontWeight: 'bold', color: '#686872' },
        left: 30,
        top: 15,
      },
      {
        text: titles[1],
        textStyle: { fontSize: 16, fontWeight: 'bold', color: '#686872' },
        left: 100,
        top: 15,
      },
      {
        text: titles[2],
        textStyle: { fontSize: 16, fontWeight: 'bold', color: '#686872' },
        left: 430,
        top: 15,
      },
    ],
    grid: [{ width: 200, x: 100, bottom: 30 }, { width: 200, x: 430, bottom: 30 }],
    xAxis: [
      {
        gridIndex: 0,
        show: false,
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
      },
      {
        gridIndex: 1,
        show: false,
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        type: 'category',
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        offset: 15,
        data: source,
        axisLabel: { color: '#686872', fontSize: 12 },
      },
      {
        gridIndex: 1,
        type: 'category',
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
      },
    ],
    series: [
      {
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        barWidth: 24,
        data: data1.map((item, index) => ({
          value: item,
          itemStyle: { color: index % 2 ? color1[0] : color1[1] },
          label: {
            show: true,
            color: '#303036',
            align: 'right',
            position: [250, 5],
            fontSize: 12,
            formatter: item,
          },
        })),
      },
      {
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barWidth: 24,
        data: data2.map((item, index) => ({
          value: item,
          itemStyle: { color: index % 2 ? color2[0] : color2[1] },
          label: {
            show: true,
            color: '#303036',
            align: 'right',
            fontSize: 12,
            position: [260, 5],
            formatter: item,
          },
        })),
      },
    ],
  };
}

export default class extends Page {
  initState() {
    return {
      filterMap: {},
      selectList: [],
      tab: 'exercise',
      subject: 'verbal',
      questionType: '',
      timerange: 'today',
      info: 'base',
    };
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    data.filterMap = this.state;
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    const [startTime, endTime] = timeRange(data.timerange);
    this.refreshQuestionType(data.subject, { needSentence: false, allSubject: false })
      .then(() => {
        return this.refreshStruct(data.tab, data.one, data.two, { needPreview: false, needTextbook: false });
      })
      .then(({ structIds }) => {
        My.getData(data.tab, data.subject, structIds, startTime, endTime).then(result => {
          this.data = result;
          this.setState({
            list: Object.values(result).map(row => {
              row.title = QuestionTypeMap[row.questionType];
              return row;
            }),
          });
          this.onQuestionTypeChange(Object.keys(result)[0]);
        });
      });
  }

  refreshQuestionType(subject, { needSentence, allSubject }) {
    return Main.getExercise().then(result => {
      const list = result.filter(row => (needSentence ? true : row.isExamination)).map(row => {
        row.title = `${row.titleZh}${row.titleEn}`;
        row.key = row.extend;
        return row;
      });
      const tree = formatTreeData(list, 'id', 'title', 'parentId');
      this.questionSubjectMap = getMap(tree, 'key', 'children');
      this.questionSubjectSelect = tree.filter(row => row.level === 1 && (allSubject ? true : row.children.length > 1));
      this.setState({
        questionSubjectSelect: this.questionSubjectSelect,
        questionSubjectMap: this.questionSubjectMap,
      });
      return {
        questionTypes: subject ? this.questionSubjectMap[subject].map(row => row.key) : null,
      };
    });
  }

  refreshStruct(module, one, two, { needTextbook, needPreview }) {
    switch (module) {
      case 'exercise':
        return Main.getExerciseAll().then(result => {
          const tmp = result.filter(row => row.level > 2).map(row => {
            row.title = `${row.titleZh}`;
            row.key = row.titleEn;
            return row;
          });
          const idsMap = getMap(tmp, 'id', 'key');
          const map = {};
          tmp.forEach(row => {
            if (!map[row.key]) {
              map[row.key] = {
                title: row.title,
                key: row.key,
                structIds: [],
                parentId: row.level > 3 ? idsMap[row.parentId] : null,
                subject: [],
                questionType: [],
              };
            }
            const item = map[row.key];
            item.structIds.push(row.id);
            if (item.subject.indexOf(row.subject) < 0) {
              item.subject.push(row.subject);
            }
            if (item.questionType.indexOf(row.questionType) < 0) {
              item.questionType.push(row.questionType);
            }
          });
          const list = Object.values(map);
          if (needPreview) {
            list.push({
              title: '预习作业',
              key: 'preview',
              id: 'preview',
            });
            CourseModule.forEach(row => {
              list.push({
                title: row.label,
                key: row.value,
                parentId: 'preview',
              });
            });
          }
          let courseModules = null;
          let structIds = null;
          if (one === 'preview') {
            if (!two) {
              courseModules = CourseModule.map(row => row.value);
            } else {
              courseModules = [two];
            }
          } else if (one) {
            const resultMap = getMap(list, 'key', 'structIds');
            if (!two) {
              structIds = resultMap[one];
            } else {
              structIds = resultMap[two];
            }
          }

          const tree = formatTreeData(list, 'key', 'title', 'parentId');
          const oneSelect = tree;
          const twoSelectMap = getMap(tree, 'key', 'children');
          this.setState({ oneSelect, twoSelectMap });

          return {
            structIds,
            courseModules,
          };
        });
      case 'examination':
        return Main.getExamination().then(result => {
          const list = result.map(row => {
            row.title = `${row.titleZh}${row.titleEn}`;
            row.key = `${row.id}`;
            return row;
          });
          if (needTextbook) {
            list.push({
              title: '数学机经',
              key: 'textbook',
              id: 'textbook',
            });
            list.push({
              title: '最新',
              key: 'latest',
              parentId: 'textbook',
            });

            const nowYear = new Date().getFullYear();
            for (let i = TextbookMinYear; i <= nowYear; i += 1) {
              list.push({
                title: i.toString(),
                key: i.toString(),
                parentId: 'textbook',
              });
            }
          }
          let latest = null;
          let year = null;
          let structIds = null;
          if (one === 'textbook') {
            if (!two) {
              latest = true;
            } else if (two === 'latest') {
              latest = true;
            } else {
              year = two;
            }
          } else if (one) {
            if (!two) {
              structIds = [Number(one)];
            } else {
              structIds = [Number(two)];
            }
          }

          const tree = formatTreeData(list, 'key', 'title', 'parentId');
          const oneSelect = tree;
          const twoSelectMap = getMap(tree, 'key', 'children');

          this.setState({ oneSelect, twoSelectMap });
          return {
            structIds,
            latest,
            year,
          };
        });
      default:
        return Promise.resolve({});
    }
  }


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

  onQuestionTypeChange(questionType) {
    const data = this.data[questionType];
    this.setState({ questionType, data });
  }

  onInfoChange(info) {
    this.setState({ info });
  }

  onFilter(value) {
    this.search(value);
  }

  onAction() { }

  onSelect(selectList) {
    this.setState({ selectList });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  }

  renderTable() {
    const { tab, subject, questionType, info, questionSubjectSelect, questionSubjectMap = {}, oneSelect, twoSelectMap = {}, filterMap = {}, list = [] } = this.state;
    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
          selectList={[
            {
              key: 'subject',
              select: questionSubjectSelect,
            },
            {
              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)}
        />
        <div className="title">整体情况</div>
        <UserTable size="small" columns={columns} data={list} />
        <div className="title">
          单项分析
          <Select
            size="small"
            theme="default"
            value={questionType}
            list={questionSubjectMap[subject]}
            onChange={({ key }) => this.onQuestionTypeChange(key)}
          />
        </div>
        <Tabs
          border
          type="line"
          theme="theme"
          size="small"
          width={80}
          active={info}
          tabs={[{ key: 'base', title: '基本情况' }, { key: 'difficult', title: '难度分析' }, { key: 'place', title: '考点分析' }]}
          onChange={key => this.onInfoChange(key)}
        />
        {this[`renderTab${info}`]()}
      </div>
    );
  }

  renderTabbase() {
    const { data = {} } = this.state;
    return (
      <div className="tab-1-layout">
        <div className="block">
          <div className="chart">
            <PieChart height={110} width={110} option={pieOption1(formatPercent(data.userQuestion, data.questionNumber), formatPercent(data.userQuestion, data.questionNumber, false), `全站${formatPercent(data.totalCorrect, data.totalNumber, false)}`)} />
          </div>
          <div className="value">
            <div className="total">共{data.questionNumber}题</div>
            <div className="item">
              <div className="t">已做</div>
              <div className="v">
                <b>{data.userQuestion}</b>题
              </div>
            </div>
            <div className="item">
              <div className="t">剩余</div>
              <div className="v">
                <b>{data.questionNumber - data.userQuestion}</b>题
              </div>
            </div>
            <div className="item">
              <div className="t">正确率</div>
              <div className="v">
                <b>{formatPercent(data.userCorrect, data.userNumber, false)}</b>
              </div>
            </div>
            <div className="item">
              <div className="t">全站</div>
              <div className="v">
                <b>{formatPercent(data.totalCorrect, data.totalNumber, false)}</b>
              </div>
            </div>
          </div>
        </div>
        <div className="block">
          <BarChart height={300} option={barOption1(data.userNumber ? data.userTime / data.userNumber : 0, data.userCorrect ? data.correctTime / data.userCorrect : 0, data.userNumber - data.userCorrect ? data.incorrectTime / (data.userNumber - data.userCorrect) : 0)} />
        </div>
      </div>
    );
  }

  renderTabdifficult() {
    const { data = {} } = this.state;
    return (
      <div className="tab-2-layout">
        <BarChart
          height={350}
          option={barOption2(`平均正确率${formatPercent(data.userCorrect, data.userNumber, false)}`, '正确率', data.difficult.map(row => {
            return [QuestionDifficultMap[row.key], formatPercent(row.userCorrect, row.userNumber)];
          }))}
        />
      </div>
    );
  }

  renderTabplace() {
    const { data = {} } = this.state;
    return (
      <div className="tab-3-layout">
        <BarChart
          height={350}
          option={barOption3(
            ['知识点', '正确率分析', '用时分析'],
            data.place.map(row => {
              return row.key;
            }),
            data.place.map(row => {
              return formatPercent(row.userCorrect, row.userNumber);
            }),
            data.place.map(row => {
              return row.userTime / row.userNumber;
            }),
            ['#92AFD2', '#BFD4EE'],
            ['#989FC1', '#CCCCDC'],
          )}
        />
      </div>
    );
  }
}