112 lines
3.7 KiB
JavaScript
112 lines
3.7 KiB
JavaScript
import ClickImg from '@/imgs/clickImg.png'
|
|
import Ranking1Img from '@/imgs/ranking1Img.png'
|
|
import Ranking2Img from '@/imgs/ranking2Img.png'
|
|
import Ranking3Img from '@/imgs/ranking3Img.png'
|
|
import RankingImg from '@/imgs/rankingImg.png'
|
|
import { debounce } from '@utils'
|
|
import { Popover, Spin, message } from 'antd'
|
|
import React from 'react'
|
|
import { RankingTypeBtnText, RankingTypeText } from '../../constant'
|
|
import './index.less'
|
|
|
|
const rankingBackImg = {
|
|
0: Ranking1Img,
|
|
1: Ranking2Img,
|
|
2: 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(() => {
|
|
if (props.onHandleJump) {
|
|
props.onHandleJump()
|
|
} else {
|
|
message.info('敬请期待')
|
|
}
|
|
})
|
|
const tabList = [
|
|
{
|
|
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] : RankingImg})`
|
|
}}
|
|
>
|
|
{index > 2 && index + 1}
|
|
</div>
|
|
<div className='ranking-head-img'>
|
|
<img src={item.createUserAvatar} className='ranking-head-icon' />
|
|
</div>
|
|
<Popover
|
|
title={<div>{item.createUser}</div>}
|
|
content={
|
|
<div className='tooltip-info'>
|
|
<div>{item.createUser}</div>
|
|
{/* <div>{item.organizationFullName}</div> */}
|
|
</div>
|
|
}
|
|
>
|
|
<div className='ranking-info'>
|
|
<div className='ranking-name'>{item.createUser}</div>
|
|
{/* <div className="ranking-department">{item.organizationName}</div> */}
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
<div className='ranking-right'>🔥 {item.subjectCount}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Spin>
|
|
<div className='ranking-btn-go' onClick={onJump}>
|
|
<div
|
|
className='ranking-btn-go-icon'
|
|
style={{
|
|
backgroundImage: `url(${ClickImg})`
|
|
}}
|
|
></div>
|
|
<div className='ranking-btn-text'>{RankingTypeBtnText[rankingType]}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|