forked from Gitlink/forgeplus-react
96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
import React, { memo, useEffect, useState } from 'react';
|
|
import CountUp from 'react-countup';
|
|
import axios from 'axios';
|
|
import Line from '../Line';
|
|
import './index.scss';
|
|
|
|
const countUpProps = {
|
|
redraw: true,
|
|
start: 0,
|
|
duration: 1
|
|
};
|
|
|
|
|
|
function ThirdSection({ third }) {
|
|
const [statisticsNum, setStatisticsNum] = useState({});
|
|
|
|
useEffect(() => {
|
|
const url = `/home/platform_statistics.json`;
|
|
axios.get(url).then(result => {
|
|
if (result && result.data) {
|
|
setStatisticsNum(result.data);
|
|
}
|
|
}).catch(error => { });
|
|
}, [])
|
|
|
|
return (
|
|
<div className="ball-background">
|
|
<h2 className="third-tit">数据统计总览</h2>
|
|
<Line />
|
|
<div className="homepage-main third-main ">
|
|
<div className="circle-item">
|
|
<div className="circle-item-box">
|
|
<div className="circle-item-num" style={{fontSize:statisticsNum.visits>9999999?'24px':statisticsNum.visits>99999?'36px':'48px'}}>
|
|
<CountUp
|
|
{...countUpProps}
|
|
end={statisticsNum.visits}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h4>平台点击量</h4>
|
|
</div>
|
|
|
|
<div className="circle-item">
|
|
<div className="circle-item-box">
|
|
<div className="circle-item-num">
|
|
<CountUp {...countUpProps} end={statisticsNum.users_count} />
|
|
</div>
|
|
</div>
|
|
<h4 >平台用户数</h4>
|
|
</div>
|
|
|
|
<div className="circle-item">
|
|
<div className="circle-item-box">
|
|
<div className="circle-item-num">
|
|
<CountUp {...countUpProps} end={statisticsNum.projects_count} />
|
|
</div>
|
|
</div>
|
|
<h4 >开源项目托管数</h4>
|
|
</div>
|
|
|
|
<div className="circle-item">
|
|
<div className="circle-item-box">
|
|
<div className="circle-item-num">
|
|
<CountUp {...countUpProps} end={statisticsNum.tasks_count} />
|
|
</div>
|
|
</div>
|
|
<h4 >创客任务发布数</h4>
|
|
</div>
|
|
|
|
<div className="circle-item">
|
|
<div className="circle-item-box">
|
|
<div className="circle-item-num">
|
|
<CountUp {...countUpProps} end={statisticsNum.memos_count} />
|
|
</div>
|
|
</div>
|
|
<h4 >论坛发帖数量</h4>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<svg className="waves waves-low "
|
|
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
|
<defs>
|
|
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
|
</defs>
|
|
<g className="parallax">
|
|
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" />
|
|
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
|
|
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(ThirdSection); |