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

import React , { Component } from 'react';
import { Dropdown , Menu , Icon , Pagination , Spin , Tooltip } from 'antd';
import { getImageUrl } from 'educoder';
import '../css/index.scss';
import '../Branch/branch.scss';
import './activity.css';
import NoneData from '../Nodata';
import IssueLine from './issueLine';
import BranchLine from './branchLine';
import SmoothLine from './smoothLine';
import SmoothLineTwo from './smoothLineTwo';
import Demo from './demo';
import ProjectScale from './ProjectScale';
import Pie from './pie';


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,

      codeStatus:undefined,

      isSpin:false,

      ai_shang_v1_url:undefined,
      ai_shang_v2_url:undefined,
      ai_shang_v3_url:undefined,
      ai_shang_v4_url:undefined
    }
  }
  componentDidMount=()=>{
    this.updateDocumentTitle();
    const { time,type,status,page } = this.state;
    this.setState({
      isSpin:true
    })
    this.getInfo(time,type,status,page);
    this.getCodeInfo();
  }

  getCodeInfo(){
    const { projectsId , owner } = this.props.match.params;
    const url = `/v1/${owner}/${projectsId}/code_stats.json`;
    axios.get(url).then(result=>{
      if(result){
        this.setState({
          codeStatus:result.data
        })
      }
    }).catch(error=>{})
  }

  componentDidUpdate(){
    this.updateDocumentTitle();
  }

  // 更新网页标题
  updateDocumentTitle(){
    const {projectDetail} = this.props;
    if(projectDetail && document.title.indexOf('动态-') === -1){
      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,
          ai_shang_v1_url:result.data.ai_shang_v1_url,
          ai_shang_v2_url:result.data.ai_shang_v2_url,
          ai_shang_v3_url:result.data.ai_shang_v3_url,
          ai_shang_v4_url:result.data.ai_shang_v4_url
        })
        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 , codeStatus , ai_shang_v4_url,
      ai_shang_v1_url ,ai_shang_v2_url, ai_shang_v3_url } = this.state;
    let name = time ? ARRAY.filter(item=>item.id === parseInt(time,0)) :[{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%";
    
    const {projectDetail} = this.props;
    return(
      <div className="contentBox mt20">
        <div className="normalBox">
          <div class="normalBox-title">概览</div>
          <div className="boxpart">
            <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>
            {
              codeStatus && 
              <div className="prMsg">
                <div><span className="fontbold">{codeStatus.author_count}位作者</span> 已经推送 <span className="fontbold">{codeStatus.commit_count}次提交</span> 到 
                {codeStatus.commit_count_in_all_branches && codeStatus.commit_count_in_all_branches>0?<span> {projectDetail && projectDetail.default_branch}分支 和 <span>{codeStatus.commit_count_in_all_branches}次提交</span> 到所有分支</span>:""}。 在 {projectDetail && projectDetail.default_branch}分支上， 
                {codeStatus.change_files && codeStatus.change_files >0 ? <span><span className="fontbold">{codeStatus.change_files} 个文件</span> 已经改变 而且</span>:""} 
                {codeStatus.additions && codeStatus.additions >0 ?<span><span className="fontbold greencount">新增 {codeStatus.additions} 行代码</span></span>:""} 
                {(codeStatus.additions && codeStatus.additions >0) &&(codeStatus.deletions && codeStatus.deletions >0) ?<span> 和</span>:""}
                {codeStatus.deletions && codeStatus.deletions >0 ?<span><span className="fontbold redcount"> 删除 {codeStatus.deletions} 行代码</span></span>:""}.</div>
                {/* {
                  codeStatus.authors && codeStatus.authors.length > 0 &&
                  <ul className="prAuthor">
                    {
                      codeStatus.authors.map((i,v)=>{
                        return(
                          i.author ?
                            !i.author.id ?
                            <span>
                              <img src={getImageUrl(i.author && i.author.image_url)} width="38px" height="38px" alt=""/>
                              <Tooltip title={i.author && i.author.name} placement="bottom"><span>{i.author && i.author.name}</span></Tooltip>
                            </span>
                            :
                            <a href={i.author.login ? `/${i.author.login}` : `mailto:${i.author.email}`}>
                              <img src={getImageUrl(i.author && i.author.image_url)} width="38px" height="38px" alt=""/>
                              <Tooltip title={i.author && i.author.name} placement="bottom"><span>{i.author && i.author.name}</span></Tooltip>
                            </a>
                          :""
                        )
                      })
                    }
                  </ul>
                } */}
              </div>
            }
          </div>
        </div>
        {
          ai_shang_v1_url &&
          <div className="normalBox mt20">
            <div class="normalBox-title">项目演化分析</div>
            <div className="echartBox">

              <span className="echartTitle" style={{marginTop:0}}>开源项目社群激发演化拓扑熵</span>
              <BranchLine url={ai_shang_v1_url}/>
              <p>基于信息熵围绕疑修任务的社群群智激发演化度量</p>

              <span className="echartTitle">开源项目代码变更演化拓扑熵</span>
              <IssueLine url={ai_shang_v3_url}/>
              <p>基于信息熵围绕代码提交的软件代码变更演化度量</p>

              <span className="echartTitle">开源项目社区演化拓扑熵</span>
              <SmoothLineTwo url={ai_shang_v4_url}/>
              <p>基于信息熵围绕项目社群的社区分裂、缩减、合并和扩大演化行为度量</p>


            </div>
          </div>
        }
        <div className="commentsBox">
          <div className="trendsTop">
            <span className="font-16">疑修/合并请求记录</span>
            <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>
      </div>
    )
  }
}
export default Activity;