概览页数据绑定完成，只差数据统计页

2021-05-31 09:48:30 +08:00 · 2021-05-31 09:48:30 +08:00 · a9285f37e7
parent d41dce26b1
commit a9285f37e7
5 changed files with 131 additions and 89 deletions
--- a/src/forge/users/Echart/Calendar.jsx
+++ b/src/forge/users/Echart/Calendar.jsx
@ -9,16 +9,17 @@ function Calendar({ userLogin , time , chooseTime }) {

  useEffect(()=>{
    if(time){
-      let e = `${time}-12-31`;
-      let b = `${time}-01-01`;
-      setEndT(e);
-      setBaginT(b);
-    }else if(time === ""){
-      let y = moment().get('year');
-      let m = moment().get('month');
-      let d = moment().get('date');
-      let e = `${y}-${m+1}-${d}`;
-      let b = `${y-1}-${m+1}-${d}`;
+      let e,b = "";
+      if(time === "0"){
+        let y = moment().get('year');
+        let m = moment().get('month');
+        let d = moment().get('date');
+        e = `${y}-${m+1}-${d}`;
+        b = `${y-1}-${m+1}-${d}`;
+      }else{
+        e = `${time}-12-31`;
+        b = `${time}-01-01`;
+      }
      setEndT(e);
      setBaginT(b);
    }
--- a/src/forge/users/Echart/Line.jsx
+++ b/src/forge/users/Echart/Line.jsx
@ -2,21 +2,18 @@ import React ,{ useEffect } from 'react';
 import * as echarts from 'echarts';

 function Line({data}) {
-  useEffect(()=>{
-    Init();
-  },[])

  useEffect(()=>{
    if(data){
-      Init();
+      Init(data);
    }
  },[data])

-  function Init() {
+  function Init(d) {
    var huan_val = document.getElementById("Line");
    var myEcharts = echarts.init(huan_val);
    let option = {
-      color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"],
+      color: ["#f8e367", "#58c0f0", "#ff9e48"],
      title: {
        text: '近期活动统计',
        left: '3%',
@ -26,7 +23,7 @@ function Line({data}) {
        trigger: 'axis'
      },
      legend: {
-        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+        data: ['commits', 'issues', 'pull_requests'],
        right: 'center',
        bottom: '0',
      },
@ -37,58 +34,43 @@ function Line({data}) {
        containLabel: true
      },
      toolbox: {
-          feature: {
-              // saveAsImage: {}
-          }
+        feature: {
+          // saveAsImage: {}
+        }
      },
      xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-          axisTick:{
-            show:false
-          }
+        type: 'category',
+        boundaryGap: false,
+        data: d.dates,
+        axisTick:{
+          show:false
+        }
      },
      yAxis: {
-          type: 'value',
-          axisLine:{
-            show:false
-          },
-          axisTick:{
-            show:false
-          }
+        type: 'value',
+        axisLine:{
+          show:false
+        },
+        axisTick:{
+          show:false
+        }
      },
      series: [
-          {
-              name: '邮件营销',
-              type: 'line',
-              stack: '总量',
-              data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-              name: '联盟广告',
-              type: 'line',
-              stack: '总量',
-              data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-              name: '视频广告',
-              type: 'line',
-              stack: '总量',
-              data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-              name: '直接访问',
-              type: 'line',
-              stack: '总量',
-              data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-              name: '搜索引擎',
-              type: 'line',
-              stack: '总量',
-              data: [820, 932, 901, 934, 1290, 1330, 1320]
-          }
+        {
+          name: 'commits',
+          type: 'line',
+          data: d.commits_count
+        },
+        {
+          name: 'issues',
+          type: 'line',
+          data: d.issues_count
+        },
+        {
+          name: 'pull_requests',
+          type: 'line',
+          data: d.pull_requests_count
+        }
      ]
    };
    myEcharts.setOption(option);
--- a/src/forge/users/GeneralView/Activity.jsx
+++ b/src/forge/users/GeneralView/Activity.jsx
@ -4,21 +4,27 @@ import { AlignCenter } from '../../Component/layout';
 import { TagInfo } from '../../Utils/TagColor';
 import { getImageUrl } from 'educoder';

-function Activity() {
+function Activity({list}) {
  return(
    <ul className="infosActivity">
-      <li>
-        <Link to={``}><img src={getImageUrl(`/system/lets/letter_avatars/2/D/169_162_140/120.png`)} alt="" className="aImg"/></Link>
-        <div className="aInfos">
-          <AlignCenter>
-            <Link to={``} className="name">蔡世</Link>
-            <span className="time">1小时前</span>
-            {TagInfo("立刻","")}
-            <span className="status">已关闭</span>
-          </AlignCenter>
-          <p className="aDesc">更新了问题状态：动态详情动态详情动态详情动态详情动态详情</p>
-        </div>
-      </li>
+      {
+        list.map((i,k)=>{
+          return(
+            <li>
+              <Link to={``}><img src={getImageUrl(`/system/lets/letter_avatars/2/D/169_162_140/120.png`)} alt="" className="aImg"/></Link>
+              <div className="aInfos">
+                <AlignCenter>
+                  <Link to={``} className="name">{i.user_name}</Link>
+                  <span className="time">{i.action_time}</span>
+                  {i.priority && TagInfo(`${i.priority}`,"")}
+                  {i.issue_status && <span className="status">{i.issue_status}</span> }
+                </AlignCenter>
+                <p className="aDesc">{i.action_type}：{i.name}</p>
+              </div>
+            </li>
+          )
+        })
+      }
    </ul>
  )
 }
--- a/src/forge/users/GeneralView/Index.jsx
+++ b/src/forge/users/GeneralView/Index.jsx
@ -13,12 +13,20 @@ import Calendar from '../Echart/Calendar';
 import ConcentrateProject from './ConcentrateProject';
 import Activity from './Activity';
 import moment from 'moment';
+import Axios from 'axios';

+const { Option } = Select;
 const aLimit = 5;
 function Index(props) {
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
-  const [ createYear , setCreateYear ] = useState(undefined);
+  const [ projectTrends , setProjectTrends ] = useState(undefined);
+
+  const [ year , setYear ] = useState("0");
+  const [ yearList , setYearList ] = useState(undefined);
+  const [ activityDate , setActivityDate ] = useState(undefined);
+
+  const [ statisticData , setStatisticData ] = useState(undefined);

  const username = props.match.params.username;
  const current_user = props.current_user;
@ -27,21 +35,63 @@ function Index(props) {
  useEffect(()=>{
    if(user){
      let c = user.created_time && user.created_time.split("-")[0];
-      setCreateYear(parseInt(c,0));
+      let y = moment().get('year');
+      let array = []
+      for(var i = y ; i >= parseInt(c,0);i--){
+        array.push(i);
+      }
+      setYearList(array);
    }
  },[user])

  // 在贡献度日历表中选择一个时间
  function chooseTime(data) {
    if(data){
-      console.log(data);
+      setActivityDate(data[0]);
    }
  }

-  function renderYear(){
-    let y = moment().get('year');
-    for(var i = y ; i > createYear;i--){
-    }
+  // 年份下拉框option
+  function renderYear(list){
+    return list.map((i,k)=>{
+      return(
+        <Option key={i}>{i}</Option>
+      )
+    })
+  }
+
+  useEffect(()=>{
+    getActivity();
+  },[activityDate,page])
+
+  // 获取动态列表
+  function getActivity() {
+    const url = `/users/${username}/project_trends.json`;
+    Axios.get(url,{
+      params:{
+        date:activityDate,
+        limit:aLimit,page
+      }
+    }).then(result=>{
+      if(result && result.data){
+        setProjectTrends(result.data.project_trends);
+        setTotal(result.data.total_count);
+      }
+    }).catch(error=>{})
+  }
+
+  // 获取近期活动统计
+  useEffect(()=>{
+    getStatistics();
+  },[])
+
+  function getStatistics() {
+    const url = `/users/${username}/statistics/activity.json`;
+    Axios.get(url).then(result=>{
+      if(result && result.data){
+        setStatisticData(result.data);
+      }
+    }).catch(error=>{})
  }

  return(
@ -50,21 +100,21 @@ function Index(props) {
        <ConcentrateProject userLogin={username} current={current_user && (current_user.login === username)}/>
      </div>
      <div className="recentStatic">
-        <Line />
+        <Line data={statisticData}/>
      </div>
      <div className="calendarStatic">
        <FlexAJ>
          <span className="font-18">贡献度</span>
-          <Select style={{width:"200px"}} placeholder="选择年份">
-            <Select.Option key="">选择年份</Select.Option>
-            { createYear && renderYear()}
+          <Select style={{width:"200px"}} placeholder="选择年份" value={year} onSelect={(e)=>setYear(e)}>
+            <Option key={"0"}>选择年份</Option>
+            { yearList && renderYear(yearList) }
          </Select>
        </FlexAJ>
-        <Calendar time={''} userLogin={username} chooseTime={chooseTime}/>
+        <Calendar time={year} userLogin={username} chooseTime={chooseTime}/>
      </div>
      <div className="activeStatic">
        <span className="font-18">动态</span>
-        <Activity />
+        { projectTrends && projectTrends.length > 0 && <Activity list = {projectTrends}/> }
        { total > aLimit && <div style={{textAlign:'center',paddingBottom:"30px"}}><Pagination pageSize={aLimit} current={page} total={total} onChange={(p)=>setPage(p)}/></div> }
      </div>
    </div>
--- a/src/forge/users/GeneralView/Index.scss
+++ b/src/forge/users/GeneralView/Index.scss
@ -123,6 +123,9 @@
          line-height: 20px;
        }
      }
+      &:last-child{
+        border-bottom:none;
+      }
    }
  }
 }