forgeplus-react/src/modules/paths/SchoolStatistics/Statistics.js

import React, { Component } from "react";

import FirstTab from "./FirstTab.js";
import SecondTab from "./SecondTab.js";
import ThirdTab from "./ThirdTab.js";
import '../../paths/ShixunPaths.css'
const $ = window.$;

class Statistics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: 1
    }
  }

  changeTab = (index) => {
    let i = parseInt(index);
    this.setState({
      tabs: i
    })
  }
  initBannerData = (data) => {
    this.setState({ ...data })
  }

  render() {
    let { tabs, course_count, learn_count, school_total_count, subject_name, subject_id } = this.state;
    return (
      <div className="newContainer">
        <div className="newMain clearfix">
          <div className="subject_statistics_top">
            <a href={`/paths/${subject_id}`}><p className="color-blue font-32 edu-txt-center pt50">{subject_name}</p></a>
            <div className="statistics_position edu-txt-center">
              <ul className="clearfix inline count_ul">
                <li>
                  <span>学员人数</span>
                  <span>{learn_count}</span>
                </li>
                <li>
                  <span>受用课堂</span>
                  <span>{course_count}</span>
                </li>
                <li>
                  <span>受用院校</span>
                  <span>{school_total_count}</span>
                </li>
              </ul>
            </div>
          </div>

          <div className="mb30 clearfix pl0 edu-back-white edu-txt-center statisticsNav">
            <ul className="inline">
              <li className={tabs === 1 ? "active" : ""} onClick={() => this.changeTab(1)}><a  >课堂使用</a></li>
              <li className={tabs === 2 ? "active" : ""} onClick={() => this.changeTab(2)}><a  >实训使用</a></li>
              <li className={tabs === 3 ? "active" : ""} onClick={() => this.changeTab(3)}><a  >院校学习</a></li>
            </ul>
          </div>

          <div className="educontent">
            <div id="statistics_info" className="clearfix mb30">
              {/* 课堂使用 */}
              {tabs === 1 &&
                <FirstTab {...this.props} initBannerData={this.initBannerData}></FirstTab>
              }
              {/* 实训使用 */}
              {tabs === 2 &&
                <SecondTab {...this.props}></SecondTab>
              }
              {/* 院校使用 */}
              {tabs === 3 &&
                <ThirdTab {...this.props}></ThirdTab>
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Statistics;