文件

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

@@ -0,0 +1,126 @@
+import React , { Component } from 'react';
+import { Dropdown , Menu , Icon} from 'antd';
+import { Link } from 'react-router-dom';
+
+import '../css/index.css';
+import '../Branch/branch.css';
+import './activity.css';
+
+import axios from 'axios';
+const ARRAY = [
+  {
+    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:'1天',
+      type:undefined,
+      state:undefined,
+      page:1
+    }
+  }
+  componentDidMount=()=>{
+    const { time,type,status,page } = this.state;
+    this.getInfo(time,type,status,page);
+  }
+
+  getInfo =(time,type,status,page)=>{
+    const { projectsId } = this.props.match.params;
+    const url =  `/projects/${projectsId}/project_trends.json`;
+    axios.get(url,{
+      params:{
+        time,type,status,page
+      }
+    }).then(result=>{
+      if(result){
+
+      }
+    }).catch(error=>{
+      console.log(error);
+    })
+  }
+  render(){
+    const { time } = this.state;
+
+    const menu = (
+      <Menu>
+        {
+          ARRAY && ARRAY.map((item,key)=>{
+            return(
+              <Menu.Item key={item.id} onClick={this.changeTime}>{item.name}</Menu.Item>
+            )
+          })
+        }
+      </Menu>
+    );
+
+    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">
+            <div>
+              <div className="percentLine">
+                <p className="percent_purple" style={{width:'20%'}}></p>
+                <p className="percent_green" style={{width:'80%'}}></p>
+              </div>
+              <span>0合并请求</span>
+            </div>
+            <div>
+              <div className="percentLine">
+                <p className="percent_red"></p>
+                <p className="percent_green"></p>
+              </div>
+              <span>0工单</span>
+            </div>
+          </div>
+          <ul className="percentBox">
+            <li>
+              <span className="purple">4</span>
+              <Link to={``}>合并请求</Link>
+            </li>
+            <li>
+              <span className="green">3</span>
+              <Link to={``}>新合并请求</Link>
+            </li>
+            <li>
+              <span className="red">2</span>
+              <Link to={``}>已关闭的工单</Link>
+            </li>
+            <li>
+              <span className="green">1</span>
+              <Link to={``}>创建工单</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+export default Activity;

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

@@ -0,0 +1,66 @@
+.trendsTop{
+  padding-bottom: 15px;
+  border-bottom:1px solid #ddd;
+  margin-bottom: 15px; 
+}
+.normalBox{
+  border-radius: 4px;
+  border:1px solid #ddd;
+}
+.normalBox-title{
+  padding:10px;
+  background-color: #f4f4f4;
+  line-height: 18px;
+}
+
+.orderInfo{
+  padding:15px;
+  display: flex;
+  justify-content: space-between;
+}
+.orderInfo > div{
+  width: 45%;
+}
+.percentLine{
+  width: 100%;
+  display:flex;
+  height: 8px;
+  border-radius: 2px;
+  background: #888;
+}
+.percent_green{
+  background-color: #6cc644;
+  color: #6cc644;
+}
+.percent_purple{
+  background-color: #6e5494;
+  color: #6e5494;
+}
+.percent_red{
+  background-color: #d95c5c;
+}
+.green{
+  color: #6cc644;
+}
+.purple{
+  color: #6e5494;
+}
+.red{
+  color: #d95c5c;
+}
+.percentBox{
+  display: flex;
+  border-top: 1px solid #f4f4f4;
+}
+.percentBox > li{
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  flex: 1;
+  border-right: 1px solid #f4f4f4;
+  padding:20px 0px;
+  color: #4183c4;
+}
+.percentBox > li:last-child{
+  border-right: none;
+}