78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { FlexAJ } from '../Component/layout';
|
||
import { Divider } from 'antd';
|
||
import axios from 'axios';
|
||
|
||
function LanguagePower({owner,projectsId}){
|
||
const [ array , setArray ] = useState(undefined);
|
||
|
||
|
||
useEffect(()=>{
|
||
getData();
|
||
},[])
|
||
|
||
function getData(){
|
||
const url = `/${owner}/${projectsId}/languages.json`;
|
||
axios.get(url).then(result=>{
|
||
if(result){
|
||
let languages = result.data;
|
||
if(languages){
|
||
let arr = [];
|
||
Object.keys(languages).map((item,key)=>{
|
||
arr.push({name:item,percent:languages[item],color:getColor()});
|
||
})
|
||
setArray(arr);
|
||
}
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
|
||
// useEffect(()=>{
|
||
// if(languages){
|
||
// let arr = [];
|
||
// Object.keys(languages).map((item,key)=>{
|
||
// arr.push({name:item,percent:languages[item],color:getColor()});
|
||
// })
|
||
// setArray(arr);
|
||
// }
|
||
// },[languages])
|
||
|
||
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;
|
||
}
|
||
return(
|
||
(array && array.length > 0) ?
|
||
<div>
|
||
<Divider />
|
||
<p className="font-16 color-ooo aboutSubTitle">开发语言</p>
|
||
<div className="progress">
|
||
{
|
||
array && array.map((item,key)=>{
|
||
return(
|
||
<span style={{width:item.percent,backgroundColor:item.color}}></span>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
{
|
||
array && array.length > 0 &&
|
||
<FlexAJ className="progresstip">
|
||
{
|
||
array.map((item,key)=>{
|
||
return(
|
||
<span><i className="zero" style={{backgroundColor:`${item.color}`}}></i><span>{item.name}</span><span>{item.percent}</span></span>
|
||
)
|
||
})
|
||
}
|
||
</FlexAJ>
|
||
}
|
||
</div>:""
|
||
)
|
||
}
|
||
export default LanguagePower; |