forgeplus-react/src/forge/Team/RightBox.jsx

import React , { useEffect , useState } from 'react';
import styled from 'styled-components';
import Box from './Box';
import axios from 'axios';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import Nodata from '../Nodata';
import { Progress } from 'antd';
import Right from './images/right.png';

import CheckProfile from '../Component/ProfileModal/Profile';

const Span = styled.span`{
  color:#888;
  font-size:14px;
  margin-right:10px;
  height:20px;
  line-height:20px;
}`
const Align = styled.div`{
  display:flex;
  aligin:center;
}`
const ListName = styled.div`{
  font-size:15px;
  color:#333;
  margin-bottom:8px;
  height:18px;
  line-height:18px;
  width:210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}`;
const ColorListName = styled.div`{
  color:rgba(31, 35, 41, 1);
  font-size:15px;
  margin-bottom:8px;
  height:18px;
  line-height:18px;
  width:230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}`
const Img = styled.img`{
  border-radius:50%;
  width:45px;
  height:45px;
  margin-right:12px;
}`
function RightBox({ OIdentifier , history , admin , showCompeleteDialog ,completeProfile, enterpriseOpened  }) {
  const [ languageData, setLanguageData ] = useState(undefined);
  const [ memberData, setMemberData ] = useState(undefined);
  const [ groupData, setGroupData ] = useState(undefined);

  useEffect(()=>{
    if(OIdentifier){
      getMember(OIdentifier);
      getGroup(OIdentifier);
      getLanguage(OIdentifier);
    }
  },[OIdentifier])
  function getLanguage(iden){
    const url = `/organizations/${iden}/languages.json`;
    axios.get(url,{params:{limit:10}}).then(result=>{
      if(result && result.data){
        let languages = result.data;
        let arr = [];
        Object.keys(languages).map((item,key)=>{
          arr.push({name:item,percent:languages[item].replace("%",""),color:getColor()});
        })
        setLanguageData(arr);
        console.log(arr);
      }
    }).catch(error=>{})
  }
  function getColor(){
    let str = "#";
    let arr = ["1","2","3","4","4","5","6","7","8","9","a","b","c","d","e","f"];
    for(var i=0;i<6;i++){
      let num = parseInt(Math.random() * 16);
      str+=arr[num];
    }
    return str;
  }

  function getMember(iden){
    const url = `/organizations/${iden}/organization_users.json`;
    axios.get(url,{params:{limit:5}}).then(result=>{
      if(result && result.data){
        setMemberData(result.data);
      }
    }).catch(error=>{})
  }
  function getGroup(iden){
    const url = `/organizations/${iden}/teams.json`;
    axios.get(url,{params:{limit:5}}).then(result=>{
      if(result && result.data){
        setGroupData(result.data);
      }
    }).catch(error=>{})
  }
  return(
    <div className="list-r">
      {
        languageData && languageData.length>0 ?
        <Box 
          name="仓库语言" 
          // count={languageData && languageData.length} 
          icon={<i className="iconfont icon-cangkuyuyanicon font-17 mr8"></i>}
          // url={`/${OIdentifier}/members`}
        >
          {
            languageData.map((item,key)=>{
              return(
                <div className="progress">
                  <span className="mr10">{item.name}</span>
                  <Progress percent={item.percent} strokeColor={item.color}/>
                </div>
              )
            })
          }
        </Box>
        :""
      }
      {
        memberData && memberData.organization_users && memberData.organization_users.length>0 ?
        <Box 
          name="组织成员" 
          count={memberData && memberData.total_count} 
          icon={<i className="iconfont icon-zuzhichengyuan1 font-16 mr8"></i>}
          url={`/${OIdentifier}/members`}>
          {
            memberData.organization_users.map((item,key)=>{
              return(
                key<5 && <div className="teammembers" key={key}>
                  <Link to={`/${item.user && item.user.login}`}><Img src={getImageUrl(`/${item.user && item.user.image_url}`)} alt="" className="m-img"/></Link>
                  <div>
                    <Link to={`/${item.user && item.user.login}`}><ListName>{item.user && item.user.name}</ListName></Link>
                    <Align><Span>加入时间：{item.created_at}</Span></Align>
                    {/* <i className="iconfont icon-shijian color-green mr3 font-13"></i> */}
                  </div>
                </div>
              )
            })
          }
        </Box>
        :""
      }
      {!enterpriseOpened && <Box 
        name="组织团队" 
        count={groupData && groupData.total_count} 
        icon={<i className="iconfont icon-zuzhituandui font-17 mr8"></i>}
        bottom={
          admin && 
          <CheckProfile 
            showCompeleteDialog={showCompeleteDialog} 
            completeProfile={completeProfile}
            sureFunc={()=>history.push(`/${OIdentifier}/teams/new`)}
            className={"ant-btn newBtn"}
          >新建团队<img src={Right} alt="" width="9" className="ml5" /></CheckProfile>
        }
        url={`/${OIdentifier}/teams`}
      >
        {
          groupData && groupData.teams && groupData.teams.length>0? 
          <React.Fragment>
            {groupData.teams.map((item,key)=>{
            return(
              key < 5 &&<div className="teammembers" key={key}>
                <span className="memberIndex">{key+1}</span>
                <div>
                  {
                    (item.is_admin || item.is_member) ?
                    <Link to={`/${OIdentifier}/teams/${item.id}`}><ColorListName>{item.nickname}</ColorListName></Link>
                    :
                    <ColorListName>{item.nickname}</ColorListName>
                  }
                  <Align>
                    <Span><span style={{color:"rgba(31, 35, 41, 1)"}}>{item.num_users}</span>名成员</Span>
                    <Span><span style={{color:"rgba(31, 35, 41, 1)"}}>{item.num_projects}</span>个仓库</Span>
                  </Align>
                </div>
              </div>
            )
          })}
          </React.Fragment>:<Nodata _html="暂无团队" small/>
        }
      </Box>}
    </div>
  )
}
export default RightBox;