171 lines
3.7 KiB
JavaScript
171 lines
3.7 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('hrmUsedemand')
|
|
@observer
|
|
export default class BarCharts extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.count = -1;
|
|
}
|
|
|
|
componentDidMount() {
|
|
// this.props.hrmUsedemand.getBarChartsDatas();
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
[0, 1, 2].map(val => {
|
|
this[`echart${val}`] && this[`echart${val}`].paint();
|
|
})
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.hrmUsedemand.resetBarCharts();
|
|
}
|
|
|
|
setRef = (ref, alias) => {
|
|
const {
|
|
hrmUsedemand
|
|
} = this.props, {
|
|
setRef
|
|
} = hrmUsedemand;
|
|
|
|
this[alias] = ref;
|
|
|
|
setRef({
|
|
ref,
|
|
alias,
|
|
type: 'barCharts',
|
|
});
|
|
}
|
|
|
|
chartAction = (obj) => {
|
|
const {
|
|
index,
|
|
chart
|
|
} = obj;
|
|
|
|
chart.off('click');
|
|
chart.on('click', params => this.handleChartAction({ ...params,
|
|
index
|
|
}));
|
|
}
|
|
|
|
handleChartAction = (params) => {
|
|
const {
|
|
hrmUsedemand
|
|
} = this.props, {
|
|
barCharts,
|
|
openDialog
|
|
} = hrmUsedemand, {
|
|
lIds,
|
|
rIds,
|
|
} = barCharts;
|
|
|
|
const {
|
|
name,
|
|
dataIndex,
|
|
index
|
|
} = params;
|
|
|
|
const tIds = (index == '0') ? lIds : rIds;
|
|
|
|
openDialog({
|
|
type: 'bar',
|
|
field: {
|
|
value: tIds[dataIndex],
|
|
valueSpan: name,
|
|
valueObj: [{
|
|
id: tIds[dataIndex],
|
|
name: name
|
|
}]
|
|
},
|
|
index
|
|
})
|
|
}
|
|
|
|
downloadImg = (index, title) => {
|
|
const cvs = document.getElementsByTagName('canvas');
|
|
|
|
downloadCvs2Img({
|
|
cvs: cvs[index],
|
|
title: title
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
hrmUsedemand
|
|
} = this.props, {
|
|
barCharts,
|
|
openDialog,
|
|
} = hrmUsedemand, {
|
|
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;
|
|
|
|
const float = (index == 1) ? 'right' : 'left',
|
|
padding = (index == 2) ? 16 : (index == 0) ? '0 0 0 16px' : '0 16px 0 0',
|
|
width = (index == 2) ? '100%' : '49%';
|
|
|
|
return (
|
|
<div style={{float, width, padding}}>
|
|
<WeaReportCard ecId={`${this && this.props && this.props.ecId || ''}_WeaReportCard@c233xx@${index}`}
|
|
title={title}
|
|
onMoreClick={() => openDialog({type:`more${index}` })}
|
|
onDownloadClick={() => bl1 && this.downloadImg(ct, title)}
|
|
operations={(index==2) && <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@cofg1c@${index}`}
|
|
ref={ref =>this.setRef(ref,`echart${index}`)}
|
|
option={option}
|
|
useDefault={false}
|
|
chartAction={ chart => (index == 0 || index == 1) && 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>
|
|
)
|
|
})
|
|
|
|
}
|
|
} |