81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
import {
|
|
Row,
|
|
Col,
|
|
} from 'antd'
|
|
|
|
import React from 'react'
|
|
|
|
class Statistics extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
getTriangleIcon(tag) {
|
|
if (tag > 0) {
|
|
return (<span><i style={{display: 'inline-block', width: 0, height: 0, borderRight: '4px solid transparent', borderBottom: '8px solid #7DC756', borderLeft: '4px solid transparent'}} /></span>);
|
|
} else if (tag < 0) {
|
|
return (<span><i style={{display: 'inline-block', width: 0, height: 0, borderTop: '8px solid #E9612B', borderRight: '4px solid transparent', borderLeft: '4px solid transparent'}} /></span>);
|
|
}
|
|
}
|
|
|
|
getPercent(tag, percent) {
|
|
if (tag > 0) {
|
|
return (<span style={{color: '#7DC756', marginLeft: 5}}>{percent}</span>);
|
|
} else if (tag < 0) {
|
|
return (<span style={{color: '#E9612B', marginLeft: 5}}>{percent}</span>);
|
|
} else {
|
|
return (<span style={{color: '#D2D2D2'}}>{percent}</span>);
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
const {
|
|
countDatas,
|
|
getIcons,
|
|
isNeedLink,
|
|
linkIndex,
|
|
setVisible
|
|
} = this.props;
|
|
|
|
return (
|
|
<div style={{margin: '8px 16px', height: 140, border: '1px solid #DDD',borderRadius: 3}}>
|
|
{
|
|
countDatas.map( (data,index) => {
|
|
const {
|
|
showname,
|
|
num,
|
|
isChange,
|
|
percent,
|
|
changetype
|
|
} = data;
|
|
|
|
return (
|
|
<div style={{width:`${1/countDatas.length*100}%`}} className='hrm-report-count-item-cy'>
|
|
<div className='hrm-report-count-item-icon-cy'>{
|
|
getIcons(index)
|
|
}</div>
|
|
<div className='hrm-report-count-item-label-cy'>
|
|
<div className='hrm-report-count-item-showname'>{showname}</div>
|
|
<div className='hrm-report-count-item-num'>{
|
|
(isNeedLink && linkIndex === index ) ?
|
|
<a onClick={() => setVisible('5', true)}>{num}</a> :
|
|
num
|
|
}</div>
|
|
<div>
|
|
<span>{this.getTriangleIcon(isChange)}</span>
|
|
<span>{this.getPercent(isChange,percent)}</span>
|
|
<span className='hrm-report-count-item-changetype'>{changetype}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
export default Statistics |