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,
      pr_count:undefined,
      new_pr_count:undefined,
      close_issues_count:undefined,
      open_issues_count:undefined,
      pr_all_count:undefined,issues_count:undefined,

      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);
  }


  componentDidUpdate(){
    this.updateDocumentTitle();
  }
  // 更新网页标题
  updateDocumentTitle(){
    const {projectDetail} = this.props;
    if(projectDetail){
      const { author, name} = projectDetail;
      document.title = `动态-${author.name}/${name}`;
    }
  }

  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,
          pr_count:result.data.pr_count,
          new_pr_count:result.data.new_pr_count,
          close_issues_count:result.data.close_issues_count,
          open_issues_count:result.data.open_issues_count,
          pr_all_count:result.data.pr_all_count,
          issues_count:result.data.issues_count,
        })
        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 ,
       pr_count , new_pr_count , close_issues_count , open_issues_count , pr_all_count ,issues_count,
      type,status } = this.state;
    let name = time ? ARRAY.filter(item=>item.id === parseInt(time)) :[{name:"全部"}];

    const first_per = pr_all_count > 0 ? `${parseFloat(pr_count/pr_all_count).toFixed(2)*100}%` :"50%";
    const second_per =pr_all_count > 0 ? `${parseFloat(new_pr_count/pr_all_count).toFixed(2)*100}%` :"50%";
    const third_per =issues_count > 0 ?`${parseFloat(close_issues_count/issues_count).toFixed(2)*100}%` :"50%";
    const fourth_per =issues_count > 0 ?`${parseFloat(open_issues_count/issues_count).toFixed(2)*100}%` :"50%";
    
    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={type==="PullRequest" && status==="delay" ?`change active`:"change"} onClick={()=>this.changeTrends("PullRequest","delay")}>已处理的合并请求</span>
            </li>
            <li>
              <span className="green">{data && data.new_pr_count}</span>
              <span className={type==="PullRequest"&& status==="not_delay" ?`change active`:"change"} onClick={()=>this.changeTrends("PullRequest","not_delay")}>未处理的合并请求</span>
            </li>
            <li>
              <span className="red">{data && data.close_issues_count}</span>
              <span className={type==="Issue"&& status==="delay" ?`change active`:"change"} onClick={()=>this.changeTrends("Issue","delay")}>已关闭的疑修</span>
            </li>
            <li>
              <span className="green">{data && data.open_issues_count}</span>
              <span className={type==="Issue"&& status==="not_delay" ?`change active`:"change"} onClick={()=>this.changeTrends("Issue","not_delay")}>未处理的疑修</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;