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 { QuestionDifficult } from '../../../../Constant';

const columns = [
  {
    key: 'title',
    title: '',
    render(text) {
      return <b>{text}</b>;
    },
  },
  {
    key: 'progress',
    title: '进度',
    render() {
      return (
        <div className="v">
          <div className="t">50%</div>
          <div className="d">已做20道</div>
        </div>
      );
    },
  },
  {
    key: 'ratio',
    title: '正确率',
    render() {
      return (
        <div className="v">
          <div className="t">100%</div>
          <div className="d">899/899</div>
        </div>
      );
    },
  },
  {
    key: 'time',
    title: '平均用时',
    help: '',
  },
];

// 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|${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|${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|${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: {},
      data: [
        { title: '语法SC', time: '1min20s' },
        { title: '逻辑CR', time: '1min20s' },
        { title: '阅读RC', time: '1min20s' },
      ],
      selectList: [],
      tab1: '1',
      tab2: '1',
      tab3: '1',
    };
  }

  onTabChange(tab) {
    this.setState({ tab1: tab });
  }

  onTabChange1(tab) {
    this.setState({ tab2: tab });
  }

  onTabChange2(tab) {
    this.setState({ tab3: tab });
  }

  onFilter(value) {
    this.setState({ filterMap: value });
  }

  onDataChange(page) {
    this.setState({ page, allChecked: false, selectList: [] });
  }

  onAction() {}

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

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

  renderTable() {
    const { tab1, tab2, tab3, filterMap = {}, data } = this.state;
    return (
      <div className="table-layout">
        <Tabs
          border
          type="division"
          theme="theme"
          size="small"
          space={2.5}
          width={100}
          active={tab1}
          tabs={[{ key: '1', title: '练习' }, { key: '2', title: '模考' }]}
          onChange={key => this.onTabChange(key)}
        />
        <UserAction
          search
          selectList={[
            {
              label: '123',
              children: [
                {
                  key: 'one',
                  default: '1',
                  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' }],
                },
              ],
            },
            {
              label: '123',
              right: true,
              select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
        />
        <div className="title">整体情况</div>
        <UserTable size="small" columns={columns} data={data} />
        <div className="title">
          单项分析
          <Select
            size="small"
            theme="default"
            value={tab2}
            list={[{ key: '1', title: '全部' }, { key: '2', title: '语法' }]}
            onChange={({ key }) => this.onTabChange1(key)}
          />
        </div>
        <Tabs
          border
          type="line"
          theme="theme"
          size="small"
          width={80}
          active={tab3}
          tabs={[{ key: '1', title: '基本情况' }, { key: '2', title: '难度分析' }, { key: '3', title: '考点分析' }]}
          onChange={key => this.onTabChange2(key)}
        />
        {this[`renderTab${tab3}`]()}
      </div>
    );
  }

  renderTab1() {
    return (
      <div className="tab-1-layout">
        <div className="block">
          <div className="chart">
            <PieChart height={110} width={110} option={pieOption1(10, '123', '321')} />
          </div>
          <div className="value">
            <div className="total">共200题</div>
            <div className="item">
              <div className="t">已做</div>
              <div className="v">
                <b>265</b>题
              </div>
            </div>
            <div className="item">
              <div className="t">剩余</div>
              <div className="v">
                <b>8</b>题
              </div>
            </div>
            <div className="item">
              <div className="t">正确率</div>
              <div className="v">
                <b>50%</b>
              </div>
            </div>
            <div className="item">
              <div className="t">全站</div>
              <div className="v">
                <b>23%</b>
              </div>
            </div>
          </div>
        </div>
        <div className="block">
          <BarChart height={300} option={barOption1(10, 20, 30)} />
        </div>
      </div>
    );
  }

  renderTab2() {
    return (
      <div className="tab-2-layout">
        <BarChart
          height={350}
          option={barOption2('平均正确率80%', '正确率', [['easy', 10], ['Medium', 30], ['Hard', 40]])}
        />
      </div>
    );
  }

  renderTab3() {
    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>
    );
  }
}