154 lines
3.5 KiB
JavaScript
154 lines
3.5 KiB
JavaScript
import {
|
|
inject,
|
|
observer,
|
|
} from 'mobx-react';
|
|
import {
|
|
toJS
|
|
} from 'mobx';
|
|
import {
|
|
WeaReportCard,
|
|
WeaEchart,
|
|
WeaLocaleProvider,
|
|
} from 'ecCom';
|
|
|
|
import {
|
|
downloadCvs2Img
|
|
} from './util'
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
@inject('hrmApplicant')
|
|
@observer
|
|
export default class BarCharts extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.count = -1;
|
|
}
|
|
|
|
componentDidMount() {
|
|
// this.props.hrmApplicant.getBarChartsDatas();
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
[0, 1].map(val => {
|
|
this[`echart${val}`] && this[`echart${val}`].paint();
|
|
})
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.hrmApplicant.resetBarCharts();
|
|
}
|
|
|
|
setRef = (ref, alias) => {
|
|
const {
|
|
hrmApplicant
|
|
} = this.props, {
|
|
setRef
|
|
} = hrmApplicant;
|
|
|
|
this[alias] = ref;
|
|
|
|
setRef({
|
|
ref,
|
|
alias,
|
|
type: 'barCharts',
|
|
});
|
|
}
|
|
|
|
chartAction = (chart, index) => {
|
|
chart.off('click');
|
|
chart.on('click', params => this.handleChartAction(params, index));
|
|
}
|
|
|
|
handleChartAction = (params, index) => {
|
|
const {
|
|
hrmApplicant
|
|
} = this.props, {
|
|
barCharts,
|
|
openDialog
|
|
} = hrmApplicant, {
|
|
ids
|
|
} = barCharts;
|
|
|
|
const {
|
|
name,
|
|
dataIndex
|
|
} = params;
|
|
|
|
openDialog('bar', (index == '0') ? {
|
|
value: ids[dataIndex],
|
|
valueSpan: name,
|
|
valueObj: [{
|
|
id: ids[dataIndex],
|
|
name: name
|
|
}]
|
|
} : {
|
|
createMonth: name
|
|
})
|
|
|
|
}
|
|
|
|
downloadImg = (index, title) => {
|
|
const cvs = document.getElementsByTagName('canvas');
|
|
downloadCvs2Img({
|
|
cvs: cvs[index],
|
|
title: title
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
hrmApplicant
|
|
} = this.props, {
|
|
barCharts,
|
|
openDialog,
|
|
} = hrmApplicant, {
|
|
charts
|
|
} = barCharts;
|
|
|
|
this.count = -1;
|
|
|
|
return toJS(charts).map((chart, index) => {
|
|
const {
|
|
title,
|
|
option
|
|
} = chart;
|
|
|
|
const bl1 = option.series[0].data.length > 0;
|
|
|
|
bl1 && this.count++;
|
|
|
|
const ct = this.count;
|
|
|
|
return (
|
|
<div style={{float:(index==0)?'left':'right',width:'49%', paddingLeft: (index==0)?16:0, paddingRight:(index==0)?0:16}}>
|
|
<WeaReportCard ecId={`${this && this.props && this.props.ecId || ''}_WeaReportCard@yadz79@${index}`}
|
|
title={title}
|
|
onMoreClick={() => openDialog('more')}
|
|
onDownloadClick={() => bl1 && this.downloadImg(ct, title)}
|
|
operations={(index==1) && <i className='icon-coms-download2' style={{cursor:'pointer'}} onClick={() => bl1 && this.downloadImg(this.count, title)}/>}
|
|
>
|
|
<div style={{height: 380,position:'relative'}} >
|
|
{
|
|
bl1 ?
|
|
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@t9hj4p@${index}`}
|
|
ref={ref =>this.setRef(ref,`echart${index}`)}
|
|
option={option}
|
|
useDefault={false}
|
|
chartAction={ chart => this.chartAction(chart,index)}
|
|
/>:
|
|
<i
|
|
className='icon-coms-blank'
|
|
style={{fontSize: 50, position:'absolute',top:'50%',left:'50%',marginLeft: -25,marginTop: -50}}
|
|
>
|
|
<span style={{display:'block',fontSize: 12}}>{getLabel(83553, '暂无数据')}</span>
|
|
</i>
|
|
}
|
|
|
|
</div>
|
|
</WeaReportCard>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
}
|
|
} |