forgeplus-react/src/forge/Activity/Activity.js

import React , { Component } from 'react';
import { Dropdown , Menu , Icon , Pagination , Spin } from 'antd';
import '../css/index.scss';
import '../Branch/branch.scss';
import './activity.css';
import NoneData from '../Nodata';


import ActivityItem from './ActivityItem';
import axios from 'axios';
const LIMIT = 15;
const ARRAY = [
  {
    id:"",
    name:'全部'
  },
  {
    id:1,
    name:'1天'
  },
  {
    id:3,
    name:'3天'
  },
  {
    id:7,
    name:'1周'
  },
  {
    id:30,
    name:'1个月'
  }
]

class Activity extends Component{
  constructor(props){
    super(props);
    this.state={
      time:undefined,
      type:undefined,
      state:undefined,
      page:1,

      data:undefined,
      project_trends:undefined,

      isSpin:false
    }
  }
  componentDidMount=()=>{
    const { time,type,status,page } = this.state;
    this.setState({
      isSpin:true
    })
    this.getInfo(time,type,status,page);
  }

  getInfo =(time,type,status,page)=>{
    const { projectsId , owner } = this.props.match.params;
    const url =  `/${owner}/${projectsId}/activity.json`;
    axios.get(url,{
      params:{
        time,type,status,page
      }
    }).then(result=>{
      if(result){
        this.setState({
          data:result.data,
          project_trends:result.data.project_trends,
          isSpin:false
        })
        window.scrollTo(0,0);
      }
    }).catch(error=>{
      console.log(error);
    })
  }

  // 切换周期
  changeTime=(e)=>{
    this.setState({
      time:e.key ==="item_0"?undefined:e.key,
      isSpin:true
    })
    const { type,status,page } = this.state;
    this.getInfo(e.key ==="item_0"?undefined:e.key,type,status,page);
  }
   //筛选
   changeTrends=(type,status)=>{
    this.setState({
      type,status,page:1
    })
    const {time}=this.state;
    this.getInfo(time,type,status,1);
   }
  // 分页
  ChangePage=(page)=>{
    this.setState({
      page
    })
    const { time,type,status } = this.state;
    this.getInfo(time,type,status,page);
  }
  menu =()=> (
    <Menu>
      {
        ARRAY && ARRAY.map((item,key)=>{
          return(
            <Menu.Item key={item.id} onClick={this.changeTime}>{item.name}</Menu.Item>
          )
        })
      }
    </Menu>
  )
  render(){
    const { time , data , page , project_trends , isSpin } = this.state;
    let name = time ? ARRAY.filter(item=>item.id === parseInt(time)) :[{name:"全部"}];
    const first_per = data && (parseInt(data.pr_count)/parseInt(data.pr_count+data.new_pr_count)*100).toFixed(2)+'%';
    const second_per =data && (parseInt(data.new_pr_count)/parseInt(data.pr_count+data.new_pr_count)*100).toFixed(2)+'%';
    const third_per =data && (parseInt(data.close_issues_count)/parseInt(data.issues_count)*100).toFixed(2)+'%';
    const fourth_per =data && (parseInt(data.open_issues_count)/parseInt(data.issues_count)*100).toFixed(2)+'%';
    return(
      <div className="main">
        
        <div className="normalBox">
          <div class="normalBox-title">概览</div>
          <div className="orderInfo">
            <div>
              <div className="percentLine prPercent">
                <p className="percent_purple" style={{width:first_per}}></p>
                <p className="percent_green resetStyle" style={{width:`${second_per}`}}></p>
              </div>
              <span>{data && data.pr_all_count}合并请求</span>
            </div>
            <div>
              <div className="percentLine">
                <p className="percent_red" style={{width:`${third_per}`}}></p>
                <p className="percent_green" style={{width:`${fourth_per}`}}></p>
              </div>
              <span>{data && data.issues_count}易修</span>
            </div>
          </div>
          <ul className="percentBox">
            <li>
              <span className="purple">{data && data.pr_count}</span>
              <span className="change" onClick={()=>this.changeTrends("PullRequest","close")}>已处理的合并请求</span>
            </li>
            <li>
              <span className="green">{data && data.new_pr_count}</span>
              <span className="change" onClick={()=>this.changeTrends("PullRequest","create")}>未处理的合并请求</span>
            </li>
            <li>
              <span className="red">{data && data.close_issues_count}</span>
              <span className="change" onClick={()=>this.changeTrends("Issue","close")}>已关闭的易修</span>
            </li>
            <li>
              <span className="green">{data && data.open_issues_count}</span>
              <span className="change" onClick={()=>this.changeTrends("Issue","create")}>未处理的易修</span>
            </li>
          </ul>
        </div>
        <div className="df trendsTop mt20">
          <div className="branchDropdown f-wrap-alignCenter">
            <Dropdown overlay={this.menu()} trigger={['click']} placement="bottomLeft">
              <a className="ant-dropdown-link">
                <span className="color-grey-9 mr3">周期:</span>
                {name && name.length>0 && name[0].name} <Icon type="down" />
              </a>
            </Dropdown>
          </div>
        </div>
        <Spin spinning={isSpin}>
          {
            project_trends && project_trends.length > 0 ?
            <div className="activity_list">
              {
                project_trends && project_trends.map((item,key)=>{
                  return(
                    <ActivityItem item={item} {...this.props} ></ActivityItem>
                  )
                })
              }
            </div>
            :
            <NoneData _html="暂时还没有相关数据!" />
          }
        </Spin>
        {
          data && data.project_trends_size > 0 && data.project_trends_size > LIMIT &&
          <div className="pageDIV">
            <Pagination showQuickJumper defaultCurrent={page} total={data && data.project_trends_size} pageSize={LIMIT} onChange={this.ChangePage}></Pagination>
          </div>
        }
      </div>
    )
  }
}
export default Activity;