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

import React from 'react';
import './index.less';
import LineChart from '@src/components/LineChart';
import BarChart from '@src/components/BarChart';
import PieChart from '@src/components/PieChart';
import Page from '@src/containers/Page';
import { Icon } from 'antd';
import { Question } from '../../../stores/question';
import { Button } from '../../../components/Button';
import Tabs from '../../../components/Tabs';

function BarOption3(titles, data1, data2, color1, color2) {
  return {
    title: [
      {
        text: titles[0],
        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
        left: 100,
        top: 15,
      },
      {
        text: titles[1],
        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
        left: 195,
        top: 15,
      },
      {
        text: titles[2],
        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
        left: 695,
        top: 15,
      },
    ],
    grid: [{ width: 250, x: 200, bottom: 30 }, { width: 250, x: 700, 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: ['Idiom', 'Comparison', 'Verb', 'Pronoun', 'Modifier', 'Parallelism'],
        axisLabel: { color: '#686872', fontSize: 16 },
      },
      {
        gridIndex: 1,
        type: 'category',
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
      },
    ],
    series: [
      {
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        barWidth: 30,
        data: data1.map((item, index) => ({
          value: item,
          itemStyle: { color: index % 2 ? color1[0] : color1[1] },
          label: {
            show: true,
            color: '#303036',
            align: 'right',
            position: [360, 5],
            fontSize: 16,
            formatter: item,
          },
        })),
      },
      {
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barWidth: 30,
        data: data2.map((item, index) => ({
          value: item,
          itemStyle: { color: index % 2 ? color2[0] : color2[1] },
          label: {
            show: true,
            color: '#303036',
            align: 'right',
            fontSize: 16,
            position: [360, 5],
            formatter: item,
          },
        })),
      },
    ],
  };
}

function BarOption2(title, data, legend, color) {
  return {
    title: {
      text: title,
      textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: legend.length > 1,
      data: legend,
      right: 20,
    },
    color,
    dataset: {
      source: [['type', ...legend], ...data],
    },
    grid: { left: 30, right: 30, height: 300 },
    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: legend.map(() => ({
      type: 'bar',
      barWidth: 40,
    })),
  };
}

function lineOption1(title, data, legend, color) {
  return {
    title: {
      text: title,
      textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
      left: '0',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: legend.length > 1,
      data: legend,
      right: 20,
    },
    color,
    grid: { left: 30, right: 30, height: 300 },
    xAxis: {
      type: 'category',
      axisLabel: { color: '#686872' },
      axisLine: { lineStyle: { color: '#D1D6DF' } },
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: { color: '#686872' },
      axisLine: { lineStyle: { color: '#D1D6DF' } },
    },
    dataset: {
      source: [['type', ...legend], ...data],
    },
    series: legend.map(() => ({
      type: 'line',
      smooth: true,
      symbol: 'circle',
    })),
  };
}

function barOption1(title, value, allValue, avgCorrect, avgIncorrent) {
  const xAxis1 = [
    {
      gridIndex: 0,
      type: 'category',
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#D1D6DF' } },
      splitLine: { show: false },
    },
    {
      gridIndex: 1,
      type: 'category',
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#D1D6DF' } },
      splitLine: { show: false },
      data: [
        {
          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 },
        },
      ],
    },
  ];
  const xAxis2 = {
    type: 'category',
    axisTick: { show: false },
    axisLine: { lineStyle: { color: '#D1D6DF' } },
    splitLine: { show: false },
  };
  const yAxis1 = [
    {
      gridIndex: 0,
      show: false,
      min: 0,
      max: 100,
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
    },
    {
      gridIndex: 1,
      show: false,
      min: 0,
      max: 100,
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
    },
  ];
  const yAxis2 = {
    show: false,
    min: 0,
    max: 100,
    axisTick: { show: false },
    axisLine: { show: false },
    splitLine: { show: false },
  };
  const data1 = {
    type: 'bar',
    barWidth: 50,
    xAxisIndex: 0,
    yAxisIndex: 0,
    data: [
      {
        value,
        itemStyle: { color: '#7AA7DC' },
        label: {
          show: true,
          position: 'top',
          formatter: `{a|${value}}`,
          rich: { a: { fontSize: 16, fontWeight: 'bold', color: '#686872' } },
        },
      },
      {
        value: allValue,
        itemStyle: { color: '#598FCF' },
        label: {
          show: true,
          position: 'top',
          formatter: `{a|${allValue}}`,
          rich: { a: { fontSize: 12, color: '#686872' } },
        },
      },
    ],
  };
  const data2 = {
    type: 'bar',
    barWidth: 50,
    xAxisIndex: 1,
    yAxisIndex: 1,
    data: [
      {
        value: avgCorrect,
        name: 'Avg Time\nCorrect',
        itemStyle: { color: '#7775CA' },
        label: {
          show: true,
          position: 'top',
          formatter: `{a|${avgCorrect}}`,
          rich: { a: { fontSize: 16, fontWeight: 'bold', color: '#686872' } },
        },
      },
      {
        value: avgIncorrent,
        name: 'Avg Time\nIncorrect',
        itemStyle: { color: '#9396C9' },
        label: {
          show: true,
          position: 'top',
          formatter: `{a|${avgIncorrent}}`,
          rich: { a: { fontSize: 16, fontWeight: 'bold', color: '#686872' } },
        },
      },
    ],
  };
  return {
    title: [
      {
        text: title,
        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
        left: '0',
      },
      {
        text: 'Avg Time\nTotal',
        textAlign: 'center',
        textVerticalAlign: 'middle',
        textStyle: { color: '#686872', fontWeight: '500', fontSize: 14, lineHeight: 20 },
        bottom: '2%',
        left: '26%',
      },
    ],
    xAxis: avgCorrect ? xAxis1 : xAxis2,
    yAxis: avgCorrect ? yAxis1 : yAxis2,
    grid: avgCorrect ? [{ width: 200, x: 72 }, { width: 350, x: 272 }] : { width: 200, left: '30%' },
    series: avgCorrect ? [data1, data2] : [data1],
  };
}

function pieOption1(title, value, allValue) {
  return {
    title: [
      {
        text: title,
        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
        left: '0',
      },
      {
        text: `${value}%`,
        textAlign: 'center',
        textVerticalAlign: 'middle',
        textStyle: { color: value < 50 ? '#f19057' : '#7AA7DC', fontSize: 45 },
        subtext: `全站 ${allValue}%`,
        subtextStyle: { color: '#686872', fontSize: 16 },
        top: '35%',
        left: '49%',
      },
    ],
    series: [
      {
        type: 'pie',
        radius: ['64%', '70%'],
        label: {
          show: false,
        },
        hoverAnimation: false,
        animation: false,
        data: [
          {
            value: allValue,
            itemStyle: { color: '#7775CA' },
            label: {
              show: true,
              position: 'outside',
              formatter: `{a|全站用户}:{b|${allValue}%}`,
              rich: {
                a: {
                  color: '#686872',
                  fontSize: 16,
                },
                b: {
                  color: '#6865FD',
                  fontSize: 16,
                },
              },
            },
          },
          {
            value: 100 - allValue,
            itemStyle: { color: '#e1e1e1' },
            emphasis: { itemStyle: { color: '#e1e1e1' } },
          },
        ],
      },
      {
        type: 'pie',
        radius: ['45%', '61%'],
        label: {
          show: false,
        },
        hoverAnimation: false,
        animation: false,
        data: [
          { value, itemStyle: { color: value < 50 ? '#f19057' : '#7AA7DC' } },
          { value: 100 - value, itemStyle: { color: '#e1e1e1' }, emphasis: { itemStyle: { color: '#e1e1e1' } } },
        ],
      },
    ],
  };
}

function pieOption2(title, value1, value2, value3) {
  return {
    title: [
      {
        text: title,
        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#686872' },
        left: '0',
      },
      {
        text: `${value1 + value2 + value3}`,
        textAlign: 'center',
        textVerticalAlign: 'middle',
        textStyle: { color: '#686872', fontSize: 60 },
        subtext: '综合力',
        subtextStyle: { color: '#686872', fontSize: 14 },
        top: '35%',
        left: '49.5%',
      },
    ],
    series: [
      {
        type: 'pie',
        radius: ['50%', '80%'],
        startAngle: 30,
        hoverAnimation: false,
        animation: false,
        data: [
          {
            value: value1,
            itemStyle: { color: '#6865FD' },
            label: {
              position: 'outside',
              formatter: `{a|逻辑关系} {b|${value1}}`,
              rich: {
                a: {
                  color: '#686872',
                  fontSize: 18,
                },
                b: {
                  color: '#6865FD',
                  fontSize: 18,
                },
              },
            },
          },
          {
            value: value2,
            itemStyle: { color: '#6EC28D' },
            label: {
              position: 'outside',
              formatter: `{a|句子结构} {b|${value2}}`,
              rich: {
                a: {
                  color: '#686872',
                  fontSize: 18,
                },
                b: {
                  color: '#6EC28D',
                  fontSize: 18,
                },
              },
            },
          },
          {
            value: value1,
            itemStyle: { color: '#598FCF' },
            label: {
              position: 'outside',
              formatter: `{a|阅读速度} {b|${value3}}`,
              rich: {
                a: {
                  color: '#686872',
                  fontSize: 18,
                },
                b: {
                  color: '#598FCF',
                  fontSize: 18,
                },
              },
            },
          },
        ],
      },
    ],
  };
}

export default class extends Page {
  initState() {
    return { report: { paperModule: 'examination' } };
  }

  initData() {
    const { id } = this.params;
    const { page = '' } = this.state.search;
    Question.detailReport(id).then(result => {
      switch (result.paperModule) {
        case 'sentence':
          this.refreshSentence(result);
          break;
        case 'textbook':
          this.refreshTextbook(result);
          break;
        case 'exercise':
          this.refreshExercise(result);
          break;
        case 'examination':
          this.refreshExamination(result);
          break;
        default:
      }
      this.setState({ report: result });
    });
    switch (page) {
      case 'question':
        // 题目回顾列表
        Question.questionReport(id).then(result => {
          this.setState({ list: result });
        });
        break;
      default:
        break;
    }
  }

  refreshSentence() {
    const { page = '' } = this.state.search;
    switch (page) {
      case 'question':
        break;
      default:
    }
  }

  refreshTextbook() {
    this.refreshExercise();
  }

  refreshExamination() {
    const { page = '' } = this.state.search;
    switch (page) {
      case 'total':
        break;
      case 'question':
        break;
      default:
    }
  }

  refreshExercise() {
    const { page = '' } = this.state.search;
    switch (page) {
      case 'question':
        break;
      default:
    }
  }

  renderView() {
    const { report = {} } = this.state;
    switch (report.paperModule) {
      case 'sentence':
        return this.renderSentence();
      case 'textbook':
        return this.renderTextbook();
      case 'exercise':
        return this.renderExercise();
      case 'examination':
        return this.renderExamination();
      default:
        return <div />;
    }
  }

  renderSentence() {
    return (
      <div className="sentence">
        <div className="header">
          <div className="content">
            <div className="title">Report for 「模考」千行CAT01</div>
            <div className="btns">
              <Button size="small" radius>
                返回首页
              </Button>
              <Button size="small" radius>
                题目回顾
              </Button>
            </div>
            <div className="right">
              <div className="text">周月言</div>
              <div className="desc">练习次数5</div>
              <div className="desc">2019-04-23 14:40:39</div>
            </div>
          </div>
        </div>
        <div className="body">
          <div className="content">
            <div className="title">完成情况</div>
            <div className="detail">
              <div className="block">
                <div className="t1">总耗时</div>
                <div className="t2">32</div>
                <div className="t3">min</div>
              </div>
              <div className="block">
                <div className="t1">超出建议用时</div>
                <div className="t2">32</div>
                <div className="t3">min</div>
              </div>
              <div className="line" />
              <div className="block">
                <div className="t1">完成题目</div>
                <div className="t2">32</div>
                <div className="t3">题</div>
              </div>
              <div className="block">
                <div className="t1">剩余未做</div>
                <div className="t2">32</div>
                <div className="t3">题</div>
              </div>
            </div>
          </div>
        </div>
        <div className="body gray">
          <div className="content">
            <div className="title">基本情况</div>
            <div className="block-wrapper">
              <div className="block">
                <PieChart option={pieOption1('平均用时', 10, 60)} />
              </div>
              <div className="block">
                <BarChart option={barOption1('用时', 10, 50)} />
              </div>
            </div>
          </div>
        </div>
        <div className="body">
          <div className="content">
            <div className="title">能力评估</div>
            <PieChart option={pieOption2('综合得分', 30, 60, 30)} />
          </div>
        </div>
        <div className="body gray">
          <div className="content t-c">
            <Button size="lager" width={200} radius>
              继续做题
            </Button>
          </div>
        </div>
      </div>
    );
  }

  renderTextbook() {
    return this.renderExercise();
  }

  renderExercise() {
    return (
      <div className="exercise">
        <div className="header">
          <div className="content">
            <div className="title">Report for「练习」OG18-Easy（21-40）</div>
            <div className="btns">
              <Button size="small" radius>
                返回首页
              </Button>
              <Button size="small" radius>
                题目回顾
              </Button>
            </div>
            <div className="right">
              <div className="text">周月言</div>
              <div className="desc">练习次数5</div>
              <div className="desc">2019-04-23 14:40:39</div>
            </div>
          </div>
        </div>
        <div className="body">
          <div className="content">
            <div className="title">完成情况</div>
            <div className="detail">
              <div className="block">
                <div className="t1">总耗时</div>
                <div className="t2">32</div>
                <div className="t3">min</div>
              </div>
              <div className="block">
                <div className="t1">超出建议用时</div>
                <div className="t2">32</div>
                <div className="t3">min</div>
              </div>
              <div className="line" />
              <div className="block">
                <div className="t1">完成题目</div>
                <div className="t2">32</div>
                <div className="t3">题</div>
              </div>
              <div className="block">
                <div className="t1">剩余未做</div>
                <div className="t2">32</div>
                <div className="t3">题</div>
              </div>
            </div>
          </div>
        </div>
        <div className="body gray">
          <div className="content">
            <div className="title">基本情况</div>
            <div className="block-wrapper">
              <div className="block">
                <PieChart option={pieOption1('平均用时', 10, 60)} />
              </div>
              <div className="block-1-5">
                <BarChart option={barOption1('用时', 10, 50, 10, 50)} />
              </div>
            </div>
          </div>
        </div>
        <div className="body">
          <div className="content">
            <div className="title">PACE</div>
            <div className="detail-1">
              <div className="block">
                <div className="t1">平均用时</div>
                <div className="t2">1</div>
                <div className="t3">min</div>
                <div className="t2">03</div>
                <div className="t3">s</div>
              </div>
              <div className="block all">
                <div className="t1">全站用户</div>
                <div className="t2">1</div>
                <div className="t3">min</div>
                <div className="t2">03</div>
                <div className="t3">s</div>
              </div>
            </div>
            <LineChart
              height={400}
              option={lineOption1(
                '每题用时情况',
                [
                  ['1', 43.3, 85.8],
                  ['2', 43.1, 73.4],
                  ['3', 56.4, 65.2],
                  ['4', 16.4, 65.2],
                  ['5', 36.4, 35.2],
                  ['6', 76.4, 25.2],
                  ['7', 16.4, 55.2],
                  ['8', 26.4, 45.2],
                  ['9', 36.4, 95.2],
                  ['10', 26.4, 15.2],
                ],
                ['我的', '全站'],
                ['#7AA7DC', '#8684df'],
              )}
            />
          </div>
        </div>
        <div className="body gray">
          <div className="content">
            <div className="title">难度分析</div>
            <div className="detail-1">
              <div className="block">
                <div className="t1">正确率</div>
                <div className="t2">80%</div>
              </div>
              <div className="block all">
                <div className="t1">全站用户</div>
                <div className="t2">90</div>
                <div className="t3">%</div>
              </div>
            </div>
            <BarChart
              height={400}
              option={BarOption2(
                '正确率',
                [['Easy', 43.3, 85.8], ['Medium', 43.1, 73.4], ['Hard', 56.4, 65.2]],
                ['我的', '全站'],
                ['#8684df', '#5195e5'],
              )}
            />
          </div>
        </div>
        <div className="body">
          <div className="content">
            <div className="title">知识体系分析</div>
            <div className="detail-1">
              <div className="block">
                <div className="t1">平均用时</div>
                <div className="t2">1</div>
                <div className="t3">min</div>
                <div className="t2">03</div>
                <div className="t3">s</div>
              </div>
              <div className="block all">
                <div className="t1">正确率</div>
                <div className="t2">90%</div>
              </div>
            </div>
            <BarChart
              height={400}
              option={BarOption3(
                ['知识点', '正确率分析', '用时分析'],
                [50, 60, 70, 80, 10, 20],
                [50, 60, 70, 80, 10, 20],
                ['#7AA7DC', '#BFD4EE'],
                ['#8684df', '#C3C3E5'],
              )}
            />
          </div>
        </div>
        <div className="body gray">
          <div className="content">
            <div className="title">实战提醒</div>
            <div className="tip">
              <div className="t1">在实战限时情况下，本套题正确率为 </div>
              <div className="t2">56% </div>
              <Icon type="question-circle" theme="filled" />
            </div>
          </div>
        </div>
        <div className="body">
          <div className="content t-c">
            <Button size="lager" width={200} radius>
              继续做题
            </Button>
          </div>
        </div>
      </div>
    );
  }

  renderExamination() {
    return (
      <div className="examination">
        <div className="header">
          <div className="content">
            <div className="title">千行 CAT 模考-01</div>
            <div className="btns">
              <Button size="small" radius>
                返回首页
              </Button>
              <Button size="small" radius>
                题目回顾
              </Button>
            </div>
            <div className="right">
              <div className="text">周月言</div>
              <div className="desc">练习次数5</div>
              <div className="desc">2019-04-23 14:40:39</div>
            </div>
          </div>
        </div>
        <div className="body">
          <div className="content">
            <Tabs
              type="division"
              theme="gray"
              active="main"
              space={7}
              tabs={[
                { key: 'main', name: '总览 Overview' },
                { key: 'ready', name: '语文 Verbal' },
                { key: 'exercise', name: '数学 Quant' },
                { key: 'cat', name: '综合推理 IR' },
              ]}
            />
            <div className="title">PACE</div>
            <div className="detail-1">
              <div className="block">
                <div className="t1">平均用时</div>
                <div className="t2">1</div>
                <div className="t3">min</div>
                <div className="t2">03</div>
                <div className="t3">s</div>
              </div>
            </div>
            <LineChart
              height={400}
              option={lineOption1(
                '每题用时情况',
                [
                  ['1', 43.3],
                  ['2', 43.1],
                  ['3', 56.4],
                  ['4', 16.4],
                  ['5', 36.4],
                  ['6', 76.4],
                  ['7', 16.4],
                  ['8', 26.4],
                  ['9', 36.4],
                  ['10', 26.4],
                ],
                ['我的'],
                ['#A3A8BF'],
              )}
            />
            <div className="m-b-4" />
            <LineChart
              height={400}
              option={lineOption1(
                '累计用时情况',
                [
                  ['1', 43.3, 85.8],
                  ['2', 43.1, 73.4],
                  ['3', 56.4, 65.2],
                  ['4', 16.4, 65.2],
                  ['5', 36.4, 35.2],
                  ['6', 76.4, 25.2],
                  ['7', 16.4, 55.2],
                  ['8', 26.4, 45.2],
                  ['9', 36.4, 95.2],
                  ['10', 26.4, 15.2],
                ],
                ['我的', '建议'],
                ['#A3A8BF', '#7AA7DC'],
              )}
            />
          </div>
        </div>
        <div className="body gray">
          <div className="content">
            <div className="title">基本情况</div>
            <table>
              <thead>
                <tr>
                  <th>%Correct</th>
                  <th>Avg Time</th>
                  <th>
                    Avg Time
                    <br />
                    Correct
                  </th>
                  <th>
                    Avg Time
                    <br />
                    Incorrect
                  </th>
                  <th>
                    Avg Diff
                    <br />
                    Correct
                  </th>
                  <th>
                    Avg Diff
                    <br />
                    Incorrect
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    50%
                    <br />
                    <span>8题/10题</span>
                  </td>
                  <td>
                    1:40
                    <br />
                    <span>15min/10题</span>
                  </td>
                  <td>
                    1:21
                    <br />
                    <span>15min/10题</span>
                  </td>
                  <td>
                    1:55
                    <br />
                    <span>15min/2题</span>
                  </td>
                  <td>650</td>
                  <td>750</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="body">
          <div className="content">
            <div className="title">难度分析</div>
            <BarChart
              height={400}
              option={BarOption2(
                '正确率',
                [['Easy', 43.3, 85.8], ['Medium', 43.1, 73.4], ['Hard', 56.4, 65.2]],
                ['我的'],
                ['#989FC1'],
              )}
            />
          </div>
        </div>
        <div className="body gray">
          <div className="content">
            <div className="title">知识体系分析</div>
            <BarChart
              height={400}
              option={BarOption3(
                ['知识点', '正确率分析', '用时分析'],
                [50, 60, 70, 80, 10, 20],
                [50, 60, 70, 80, 10, 20],
                ['#92AFD2', '#BFD4EE'],
                ['#989FC1', '#CCCCDC'],
              )}
            />
          </div>
        </div>
      </div>
    );
  }
}