动态-分页

app/controllers/application_controller.rb

@@ -329,7 +329,7 @@ class ApplicationController < ActionController::Base
 	def current_user
 		# User.current
 		if Rails.env.development?
-			user_id = 36390
+			user_id = 50207
 		else
 			user_id = 130328
 		end

public/react/src/forge/Activity/Activity.js

@@ -1,5 +1,5 @@
 import React , { Component } from 'react';
-import { Dropdown , Menu , Icon} from 'antd';
+import { Dropdown , Menu , Icon , Pagination} from 'antd';
 import { Link } from 'react-router-dom';
 
 import '../css/index.css';
@@ -7,6 +7,7 @@ import '../Branch/branch.css';
 import './activity.css';
 
 import axios from 'axios';
+const LIMIT = 15;
 const ARRAY = [
   {
     id:1,
@@ -29,10 +30,12 @@ class Activity extends Component{
   constructor(props){
     super(props);
     this.state={
-      time:'1天',
+      time:'1',
       type:undefined,
       state:undefined,
-      page:1
+      page:1,
+
+      data:undefined
     }
   }
   componentDidMount=()=>{
@@ -49,14 +52,34 @@ class Activity extends Component{
       }
     }).then(result=>{
       if(result){
-
+        this.setState({
+          data:result.data
+        })
       }
     }).catch(error=>{
       console.log(error);
     })
   }
+
+  // 切换周期
+  // changeTime=(e)=>{
+  //   this.setState({
+  //     time:e.key
+  //   })
+  //   const { type,status,page } = this.state;
+  //   this.getInfo(e.key,type,status,page);
+  // }
+
+  // 分页
+  ChangePage=(page)=>{
+    this.setState({
+      page
+    })
+    const { time,type,status } = this.state;
+    this.getInfo(time,type,status,page);
+  }
   render(){
-    const { time } = this.state;
+    const { time , data , page } = this.state;
 
     const menu = (
       <Menu>
@@ -70,18 +93,13 @@ class Activity extends Component{
       </Menu>
     );
 
+    
+
+    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)+'%';
     return(
       <div className="main">
-        <div className="df trendsTop">
+        
-          <div className="branchDropdown f-wrap-alignCenter">
-            <span className="color-grey-9 mr3">周期:</span>
-            <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft">
-              <a className="ant-dropdown-link">
-                {time} <Icon type="down" />
-              </a>
-            </Dropdown>
-          </div>
-        </div>
         <div className="normalBox">
           <div class="normalBox-title">概览</div>
           <div className="orderInfo">
@@ -90,35 +108,51 @@ class Activity extends Component{
                 <p className="percent_purple" style={{width:'20%'}}></p>
                 <p className="percent_green" style={{width:'80%'}}></p>
               </div>
-              <span>0合并请求</span>
+              <span>{data && data.pr_count}合并请求</span>
             </div>
             <div>
               <div className="percentLine">
-                <p className="percent_red"></p>
+                <p className="percent_red" style={{width:`${third_per}`}}></p>
-                <p className="percent_green"></p>
+                <p className="percent_green" style={{width:`${fourth_per}`}}></p>
               </div>
-              <span>0工单</span>
+              <span>{data && data.issues_count}工单</span>
             </div>
           </div>
           <ul className="percentBox">
             <li>
-              <span className="purple">4</span>
+              <span className="purple">{data && data.pr_count}</span>
               <Link to={``}>合并请求</Link>
             </li>
             <li>
-              <span className="green">3</span>
+              <span className="green">{data && data.new_pr_count}</span>
               <Link to={``}>新合并请求</Link>
             </li>
             <li>
-              <span className="red">2</span>
+              <span className="red">{data && data.close_issues_count}</span>
               <Link to={``}>已关闭的工单</Link>
             </li>
             <li>
-              <span className="green">1</span>
+              <span className="green">{data && data.open_issues_count}</span>
               <Link to={``}>创建工单</Link>
             </li>
           </ul>
         </div>
+        <div className="df trendsTop mt20">
+          <div className="branchDropdown f-wrap-alignCenter">
+            <span className="color-grey-9 mr3">周期:</span>
+            <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft">
+              <a className="ant-dropdown-link">
+                {time} <Icon type="down" />
+              </a>
+            </Dropdown>
+          </div>
+        </div>
+        {
+          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>
     )
   }

public/react/src/forge/Activity/activity.css

@@ -12,7 +12,11 @@
   background-color: #f4f4f4;
   line-height: 18px;
 }
-
+.pageDIV{
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
 .orderInfo{
   padding:15px;
   display: flex;