forgeplus-react/src/forge/users/Statistics/Index.jsx

import React , {useEffect, useState} from 'react';
import './Index.scss';
import  'echarts/lib/component/tooltip';
import  'echarts/lib/component/title';
import  'echarts/lib/component/legend'
import  'echarts/lib/component/markPoint';

import Pie from '../Echart/Pie';
import Cloud from '../Echart/Cloud';
import Radar from '../Echart/Radar';
import Round from '../Echart/Round';
import { DatePicker } from 'antd';
import moment from 'moment';

import { FlexAJ } from '../../Component/layout';
import Axios from 'axios';

const { RangePicker } = DatePicker;
  const dateFormat = 'YYYY-MM-DD';
function Index(props) {
  const username = props.match.params.username;
  const [ dates, setDates] = useState(undefined);
  const [ pieData, setPieData ] = useState([]);
  const [ rDates, setRDates ] = useState(undefined);
  const [ radarData, setRadarData ] = useState([]);

  const [ topThree , setTopThree] = useState(undefined);
  const [ percentData , setPercentData ] = useState(undefined);

  const [ cData, setCData ] = useState(undefined);
  const [ cloudData, setCloudData ] = useState(undefined);

  const disabledDate = current => {
    return current && current > moment().endOf('day');
  };

  // 获取角色定位接口数据
  useEffect(()=>{
    getRoleSta();
  },[dates])

  function getRoleSta() {
    const url = `/users/${username}/statistics/role.json`;
    let b = (dates && dates.length > 0 && dates[0]) ? Date.parse(dates[0])/1000 : undefined;
    let e = (dates && dates.length > 0 && dates[1]) ? Date.parse(dates[1])/1000 : undefined;
    Axios.get(url,{
      params:{
        start_time:b,
        end_time:e
      }
    }).then(result=>{
      if(result && result.data){
        setPieData(result.data.role);
      }
    }).catch(error=>{})
  }


  // 获取开发能力接口数据
  useEffect(()=>{
    getRadarSta();
  },[rDates])

  function getRadarSta() {
    const url = `/users/${username}/statistics/develop.json`;
    let b = (rDates && rDates.length > 0 && rDates[0]) ? Date.parse(rDates[0])/1000 : undefined;
    let e = (rDates && rDates.length > 0 && rDates[1]) ? Date.parse(rDates[1])/1000 : undefined;
    Axios.get(url,{
      params:{
        start_time:b,
        end_time:e
      }
    }).then(result=>{
      if(result && result.data){
        setRadarData(result.data);
        let score = result.data.user && result.data.user.each_language_score;
        var sortData = []
        for (var item in score) {
          sortData.push([item, score[item]])
        }
        sortData.sort(function(a, b) {
          return b[1] - a[1];
        });
        setTopThree(sortData.slice(0,3));

        let percent = result.data.user && result.data.user.languages_percent;
        let arr = [];
        Object.keys(percent).map((item,key)=>{
          arr.push({name:item,p:percent[item]*100,color:getColor()});
        })
        setPercentData(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,0);
      str+=arr[num];
    }
    return str;
  }

  //用户专业定位
  useEffect(()=>{
    getCloudSta();
  },[cData])

  function getCloudSta() {
    const url = `/users/${username}/statistics/major.json`;
    let b = (cData && cData.length > 0 && cData[0]) ? Date.parse(cData[0])/1000 : undefined;
    let e = (cData && cData.length > 0 && cData[1]) ? Date.parse(cData[1])/1000 : undefined;
    Axios.get(url,{
      params:{
        start_time:b,
        end_time:e
      }
    }).then(result=>{
      if(result && result.data){
        setCloudData(result.data);
      }
    }).catch(error=>{})
  }

  return(
    <div>
      <div className="boxes">
        <FlexAJ>
          <span className="font-18">开发能力</span>
          <RangePicker 
            disabledDate={disabledDate} 
            onChange={(val,dateString) => {setRDates(dateString)}}
            format={dateFormat}
          />
        </FlexAJ>
        <Radar data={radarData}/>
        {
          topThree &&
          <div className="roundBox">
            <Round num={topThree[0][1]} color="#FF7F69" name={topThree[0][0]}/>
            <Round num={topThree[1][1]} color="#99dfff" name={topThree[1][0]}/>
            <Round num={topThree[2][1]} color="#ff9e48" name={topThree[2][0]}/>
          </div>
        }
        {
          percentData &&
          <div className="pBox">
            <div class="progress">
              {
                percentData.map((i,k)=>{
                  return(
                    <span style={{width: `${i.p}%`, backgroundColor:`${i.color}`}}></span>
                  )
                })
              }
            </div>
            <div className="progresstip">
              {
                percentData.map((i,k)=>{
                  return(
                    <span>
                      <i class="zero" style={{backgroundColor: `${i.color}`}}></i><span>{i.name}</span>
                      <span>{`${i.p}%`}</span>
                    </span>
                  )
                })
              }
            </div>
          </div>
        }
      </div>
      <div className="boxes">
        <FlexAJ>
          <span className="font-18">角色定位</span>
          <RangePicker 
            disabledDate={disabledDate} 
            onChange={(val,dateString) => {setDates(dateString)}}
            format={dateFormat}
          />
        </FlexAJ>
        <Pie data={pieData}/>
      </div>
      <div className="boxes">
        <FlexAJ>
          <span className="font-18">专业定位</span>
          <RangePicker 
            disabledDate={disabledDate} 
            onChange={(val,dateString) => {setCData(dateString)}}
            format={dateFormat}
          />
        </FlexAJ>
        <Cloud data={cloudData}/>
      </div>
    </div>
  )
}
export default Index;