83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
import {
|
|
inject,
|
|
observer,
|
|
} from 'mobx-react';
|
|
import {
|
|
Icon,
|
|
} from 'antd';
|
|
|
|
|
|
@inject('hrmUsedemand')
|
|
@observer
|
|
export default class Summary extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
componentDidMount() {
|
|
// this.props.hrmUsedemand.getSummaryDatas();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.hrmUsedemand.resetSummaryDatas();
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
hrmUsedemand
|
|
} = this.props, {
|
|
summary,
|
|
openDialog,
|
|
} = hrmUsedemand, {
|
|
countDatas
|
|
} = summary;
|
|
|
|
return (
|
|
<div className='use-demand-count'>
|
|
{
|
|
countDatas.map( (cd,i) => {
|
|
const {
|
|
iconBgColor,
|
|
number,
|
|
icon,
|
|
isRise,
|
|
label,
|
|
title,
|
|
percent
|
|
} = cd;
|
|
|
|
return (
|
|
<div className='use-demand-count-item' style={{width:`${1/countDatas.length*100}%`}}>
|
|
<div className='use-demand-count-item-left'>
|
|
<i className={`${icon} use-demand-count-item-icon`} style={{backgroundColor:iconBgColor}}/>
|
|
</div>
|
|
<div className='use-demand-count-item-right'>
|
|
<div>{title}</div>
|
|
<div className='use-demand-count-item-number'>{
|
|
i == '0'?
|
|
<a onClick={() => openDialog({type:'bar',field:{},index:'2'})}>{number}</a> :
|
|
number
|
|
}</div>
|
|
<div className={isRise ? 'use-demand-count-item-up':'use-demand-count-item-down'}>
|
|
<span>
|
|
<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@v4ao0v@1`} type={isRise ? "caret-up" : "caret-down" } />
|
|
</span>
|
|
<span className='use-demand-count-item-percent'>
|
|
{percent}
|
|
</span>
|
|
<span className='use-demand-count-item-desc'>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
})
|
|
}
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
} |