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 } from '../../../../Constant';
import { getMap, formatPercent, formatSeconds } from '../../../../../src/services/Tools';

const QuestionDifficultMap = getMap(QuestionDifficult, 'value', 'label');
console.log(QuestionDifficultMap);
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',
      questionType: '',
      info: 'base',
    };
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    data.filterMap = this.state.search;
    const startTime = null;
    const endTime = null;
    switch (data.timerange) {
      case 'all':
        break;
      case 'week':
        break;
      case 'month':
        break;
      case 'month3':
        break;
      case 'today':
      default:
    }
    My.getData(data.tab, data.subject, '', startTime, endTime).then(result => {
      console.log(result);
      this.data = result;
      this.setState({ list: Object.values(result) });
      this.onQuestionTypeChange();
    });
  }

  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, questionType, info, questionTypeSelect, 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={[{
            children: [
              {
                key: 'one',
                select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
              },
              {
                key: 'two',
                be: 'one',
                placeholder: '全部',
                selectMap: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
              },
            ],
          }, {
            right: true,
            key: 'timerange',
            select: [{ title: '今天', key: 'today' }, { title: '近一周', key: 'week' }, { title: '近一个月', key: 'month' }, { title: '近三个月', key: 'month3' }, { title: '全部', key: 'all' }],
          }]}
          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={questionTypeSelect}
            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)}`, '正确率', [['easy', 10], ['Medium', 30], ['Hard', 40]])}
        />
      </div>
    );
  }

  renderTabplace() {
    return (
      <div className="tab-3-layout">
        <BarChart
          height={350}
          option={barOption3(
            ['知识点', '正确率分析', '用时分析'],
            ['Idiom', 'Comparison', 'Verb', 'Pronoun', 'Modifier', 'Parallelism'],
            [10, 12, 12, 13, 14, 15],
            [10, 12, 12, 13, 14, 15],
            ['#92AFD2', '#BFD4EE'],
            ['#989FC1', '#CCCCDC'],
          )}
        />
      </div>
    );
  }
}