修改部分

dev_forge
sylor_huang@126.com 5 years ago
commit 476bbc60d2

@ -6,6 +6,7 @@ import '../css/index.css';
import '../Branch/branch.css'; import '../Branch/branch.css';
import './activity.css'; import './activity.css';
import ActivityItem from './ActivityItem';
import axios from 'axios'; import axios from 'axios';
const LIMIT = 15; const LIMIT = 15;
const ARRAY = [ const ARRAY = [
@ -26,6 +27,8 @@ const ARRAY = [
name:'1个月' name:'1个月'
} }
] ]
const dataformat="YYYY-MM-DD HH:mm";
class Activity extends Component{ class Activity extends Component{
constructor(props){ constructor(props){
super(props); super(props);
@ -35,7 +38,8 @@ class Activity extends Component{
state:undefined, state:undefined,
page:1, page:1,
data:undefined data:undefined,
project_trends:undefined
} }
} }
componentDidMount=()=>{ componentDidMount=()=>{
@ -53,7 +57,8 @@ class Activity extends Component{
}).then(result=>{ }).then(result=>{
if(result){ if(result){
this.setState({ this.setState({
data:result.data data:result.data,
project_trends:result.data.project_trends
}) })
} }
}).catch(error=>{ }).catch(error=>{
@ -62,13 +67,13 @@ class Activity extends Component{
} }
// 切换周期 // 切换周期
// changeTime=(e)=>{ changeTime=(e)=>{
// this.setState({ this.setState({
// time:e.key time:e.key
// }) })
// const { type,status,page } = this.state; const { type,status,page } = this.state;
// this.getInfo(e.key,type,status,page); this.getInfo(e.key,type,status,page);
// } }
// 分页 // 分页
ChangePage=(page)=>{ ChangePage=(page)=>{
@ -79,7 +84,7 @@ class Activity extends Component{
this.getInfo(time,type,status,page); this.getInfo(time,type,status,page);
} }
render(){ render(){
const { time , data , page } = this.state; const { time , data , page , project_trends } = this.state;
const menu = ( const menu = (
<Menu> <Menu>
@ -94,6 +99,7 @@ class Activity extends Component{
); );
const second_per = (parseInt(data && data.close_issues_count)/parseInt(data && data.issues_count)*100)+'%';
const third_per = (parseInt(data && data.close_issues_count)/parseInt(data && data.issues_count)*100)+'%'; const third_per = (parseInt(data && data.close_issues_count)/parseInt(data && data.issues_count)*100)+'%';
const fourth_per = (parseInt(data && data.open_issues_count)/parseInt(data && data.issues_count)*100)+'%'; const fourth_per = (parseInt(data && data.open_issues_count)/parseInt(data && data.issues_count)*100)+'%';
@ -104,9 +110,9 @@ class Activity extends Component{
<div class="normalBox-title">概览</div> <div class="normalBox-title">概览</div>
<div className="orderInfo"> <div className="orderInfo">
<div> <div>
<div className="percentLine"> <div className="percentLine prPercent">
<p className="percent_purple" style={{width:'20%'}}></p> <p className="percent_purple" style={{width:'100%'}}></p>
<p className="percent_green" style={{width:'80%'}}></p> <p className="percent_green resetStyle" style={{width:`${second_per}`}}></p>
</div> </div>
<span>{data && data.pr_count}合并请求</span> <span>{data && data.pr_count}合并请求</span>
</div> </div>
@ -148,17 +154,13 @@ class Activity extends Component{
</div> </div>
</div> </div>
<div className="activity_list"> <div className="activity_list">
<div className="activity_item"> {
<p> project_trends && project_trends.map((item,key)=>{
<span className="activity_type">ISSUE</span> return(
<span className="color-blue">title</span> <ActivityItem item={item}></ActivityItem>
</p> )
<p> })
<img alt="" src=""/> }
<span>caicai</span>
<span className="color-grey-9">创建于<span className="ml2 color-grey-6">{moment('2019-01-18 18:00','')}</span></span>
</p>
</div>
</div> </div>
{ {
data && data.project_trends_size > 0 && data.project_trends_size > LIMIT && data && data.project_trends_size > 0 && data.project_trends_size > LIMIT &&

@ -0,0 +1,27 @@
import React , { Component } from 'react';
import {Link} from 'react-router-dom';
import './activity.css';
import { getImageUrl } from 'educoder';
class ActivityItem extends Component{
render(){
const { item } = this.props;
return(
<div className="activity_item">
<div className="flex1">
<p className="itemLine">
<Link to={``} className="color-blue font-16">{item.name}</Link>
<span className="activity_type">{item.trend_type}</span>
</p>
<p className="itemLine mt15">
<img alt="" src={getImageUrl(`images/${item.user_avatar}`)} className="createImage"/>
<span className="mr20">{item.user_name}</span>
<span className="color-grey-9">创建于<span className="ml2 color-grey-6">{item.created_at}</span></span>
</p>
</div>
</div>
)
}
}
export default ActivityItem;

@ -1,7 +1,6 @@
.trendsTop{ .trendsTop{
padding-bottom: 15px; padding-bottom: 15px;
border-bottom:1px solid #ddd; border-bottom:1px solid #ddd;
margin-bottom: 15px;
} }
.normalBox{ .normalBox{
border-radius: 4px; border-radius: 4px;
@ -31,6 +30,7 @@
height: 8px; height: 8px;
border-radius: 2px; border-radius: 2px;
background: #888; background: #888;
position: relative;
} }
.percent_green{ .percent_green{
background-color: #6cc644; background-color: #6cc644;
@ -68,3 +68,42 @@
.percentBox > li:last-child{ .percentBox > li:last-child{
border-right: none; border-right: none;
} }
.activity_list .activity_item{
border-bottom: 1px solid #f4f4f4;
padding:15px 0px;
display: flex;
align-items: flex-start;
}
.prPercent > p{
position: absolute;
height: 100%;
top:0px;
left: 0px;
z-index: 0;
}
.prPercent > p.resetStyle{
left: unset;
right: 0px;
z-index: 1;
}
.itemLine{
display: flex;
align-items: center;
}
.activity_type{
display: block;
padding:0px 5px;
height: 20px;
line-height: 20px;
background: #6cc644;
margin-left: 10px;
color: #fff;
border-radius: 3px;
font-size: 12px;
}
.createImage{
margin-right: 5px;
height: 22px;
line-height: 22px;
border-radius: 50%;
}
Loading…
Cancel
Save