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 { getMap, formatPercent, formatSeconds, formatMinuteSecond, timeRange } 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, { refreshQuestionType, refreshStruct } from '../index';
import Tabs from '../../../components/Tabs';
import { My } from '../../../stores/my';
import { QuestionDifficult, QuestionType, TimeRange } from '../../../../Constant';

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],
        silent: true,
      },
    ],
  };
}

function barOption1(avgTotal, avgCorrect, avgIncorrent) {
  avgTotal = parseInt(avgTotal, 10);
  avgCorrect = parseInt(avgCorrect, 10);
  avgIncorrent = parseInt(avgIncorrent, 10);
  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: formatPercent(item[0], item[1], true),
          itemStyle: { color: index % 2 ? color1[0] : color1[1] },
          label: {
            show: true,
            color: '#303036',
            align: 'right',
            position: [250, 5],
            fontSize: 12,
            formatter: `${item[0]}/${item[1]} ${formatPercent(item[0], item[1], false)}`,
          },
        })),
      },
      {
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barWidth: 24,
        data: data2.map((item, index) => ({
          value: parseInt(item, 10),
          itemStyle: { color: index % 2 ? color2[0] : color2[1] },
          label: {
            show: true,
            color: '#303036',
            align: 'right',
            fontSize: 12,
            position: [260, 5],
            formatter: formatMinuteSecond(parseInt(item, 10)),
          },
        })),
      },
    ],
  };
}

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

  initData() {
    delete this.state.search.page;
    delete this.state.search.size;
    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;
    }
    if (data.subject) {
      data.filterMap.subject = data.subject;
    }
    const [startTime, endTime] = timeRange(data.timerange);
    refreshQuestionType(this, data.subject, data.questionType, { needSentence: false, allSubject: false })
      .then(({ questionTypes }) => {
        return refreshStruct(this, questionTypes, data.tab, data.one, data.two, {
          all: true, 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]);
        });
      });
  }

  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 [row.userCorrect, row.userNumber];
            }),
            data.place.map(row => {
              return row.userTime / row.userNumber;
            }),
            ['#92AFD2', '#BFD4EE'],
            ['#989FC1', '#CCCCDC'],
          )}
        />
      </div>
    );
  }
}