109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
import React from 'react'
|
|
import { Popover, Spin } from 'antd'
|
|
import { debounce } from '@utils'
|
|
import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant'
|
|
import './index.less'
|
|
|
|
const rankingBackImg = {
|
|
0: imgObject.ranking1Img,
|
|
1: imgObject.ranking2Img,
|
|
2: imgObject.ranking3Img,
|
|
}
|
|
|
|
export default function RankingBox(props) {
|
|
const { isLoading = false, currentActive, rankingType, contributionList } = props
|
|
const onChangeRanking = (index) =>
|
|
debounce(() => {
|
|
props.onHandleRanking && props.onHandleRanking(index)
|
|
})
|
|
const onJump = debounce(() => {
|
|
props.onHandleJump && props.onHandleJump()
|
|
})
|
|
const tabList = [
|
|
{
|
|
tab: '本月排行',
|
|
key: 'month'
|
|
},
|
|
{
|
|
tab: '总榜',
|
|
key: 'total'
|
|
}
|
|
]
|
|
// 获得当前下标的数据
|
|
let rankingList = contributionList || []
|
|
|
|
return (
|
|
<div className="ranking-list-box">
|
|
<div className="ranking-list-header">
|
|
<div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
|
|
<div className="ranking-list-btns">
|
|
{tabList.length > 0 &&
|
|
tabList.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={`${rankingType}_${item.key}`}
|
|
onClick={onChangeRanking(index)}
|
|
className={`ranking-list-btn ${currentActive === index ? 'ranking-list-btn-active' : ''}`}
|
|
>
|
|
{item.tab}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
<Spin spinning={isLoading}>
|
|
<div className="ranking-list">
|
|
{rankingList?.length > 0 &&
|
|
rankingList.map((item, index) => {
|
|
return (
|
|
<div className="ranking-item" key={item.id}>
|
|
<div className="ranking-left">
|
|
<div
|
|
className="ranking-icon"
|
|
style={{
|
|
backgroundImage: `url(${index <= 2 ? rankingBackImg[index] : imgObject.rankingImg})`,
|
|
}}
|
|
>
|
|
{index > 2 && index + 1}
|
|
</div>
|
|
<div className="ranking-head-img">
|
|
<img src={item.headImg} className="ranking-head-icon" />
|
|
</div>
|
|
<Popover
|
|
title={
|
|
<div>
|
|
{item.name}
|
|
</div>
|
|
}
|
|
content={
|
|
<div className="tooltip-info">
|
|
<div>{item.name}</div>
|
|
{/* <div>{item.organizationFullName}</div> */}
|
|
</div>
|
|
}
|
|
>
|
|
<div className="ranking-info">
|
|
<div className="ranking-name">{item.name}</div>
|
|
{/* <div className="ranking-department">{item.organizationName}</div> */}
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
<div className="ranking-right">🔥 {item.count}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Spin>
|
|
<div className="ranking-btn-go" onClick={onJump}>
|
|
<div
|
|
className="ranking-btn-go-icon"
|
|
style={{
|
|
backgroundImage: `url(${imgObject.clickImg})`,
|
|
}}
|
|
></div>
|
|
<div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|