321 lines
12 KiB
JavaScript
321 lines
12 KiB
JavaScript
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; |