286 lines
16 KiB
JavaScript
286 lines
16 KiB
JavaScript
|
import {
|
||
|
|
WeaInput,
|
||
|
|
WeaEchart,
|
||
|
|
} from 'ecCom'
|
||
|
|
|
||
|
|
import {
|
||
|
|
Row,
|
||
|
|
Col,
|
||
|
|
message,
|
||
|
|
} from 'antd';
|
||
|
|
import {
|
||
|
|
i18n
|
||
|
|
} from '../../public/i18n';
|
||
|
|
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
import {
|
||
|
|
jumpToHrmDept
|
||
|
|
} from '../../util/pulic-func'
|
||
|
|
|
||
|
|
class ReportChart extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidUpdate() {
|
||
|
|
if (this.refs.echart) this.refs.echart.paint();
|
||
|
|
if (this.refs.echart1) this.refs.echart1.paint();
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(nextProps) {
|
||
|
|
if (this.props.winWidth !== nextProps.winWidth) {
|
||
|
|
if (this.refs.echart) this.refs.echart.chart.resize();
|
||
|
|
if (this.refs.echart1) this.refs.echart1.chart.resize();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getDOM(interval, key, setGap, getData, isIntervalShow, pathname, tag, isChartsShow, chartTitle) {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{position: 'absolute', right: 0}}>
|
||
|
|
<div style={ isIntervalShow ? {display: 'block',float: 'left'} : {display: 'none'} }>
|
||
|
|
<div className='hrm-report-interval'>
|
||
|
|
{this.getName(key) + ':'}
|
||
|
|
</div>
|
||
|
|
<div style={{width: 70, paddingTop: 8, paddingLeft: 0}} className='hrm-report-interval hrm-report-input'>
|
||
|
|
<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@f9l569`}
|
||
|
|
type="text"
|
||
|
|
viewAttr='2'
|
||
|
|
value={interval}
|
||
|
|
onChange={(val) => setGap(val)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className='hrm-report-interval' style={{paddingLeft: 0}}>
|
||
|
|
{this.getSuffix(key)}
|
||
|
|
</div>
|
||
|
|
<div className='hrm-report-interval' style={{fontSize: 16}}>
|
||
|
|
<a onClick={() => getData()} className='hrm-report-linkStyle' title={i18n.button.refresh()}>
|
||
|
|
<i className='icon-coms-Refresh' />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={pathname !== 'basicConditionAnalysis' ? {display: 'block', float: 'left', padding: '10px 0'} : {display: 'none'} }>
|
||
|
|
<a onClick={() => getData(tag)} className='hrm-report-linkStyle'>{i18n.button.more()}</a>
|
||
|
|
</div>
|
||
|
|
<div className='hrm-report-interval' style={{padding: '8px 20px 10px 10px', fontSize: 16}}>
|
||
|
|
{ isChartsShow ? <a onClick={() => this.getImgSrc(tag, chartTitle)} className='hrm-report-linkStyle' title={i18n.button.saveAsImage()}>
|
||
|
|
<i className='icon-coms-download2' />
|
||
|
|
</a>
|
||
|
|
: <a onClick={() => {message.info(i18n.message.dataNone())}} className='hrm-report-linkStyle' title={i18n.button.saveAsImage()}>
|
||
|
|
<i className='icon-coms-download2' />
|
||
|
|
</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
getName(key) {
|
||
|
|
switch (key) {
|
||
|
|
case '1':
|
||
|
|
return i18n.label.ageRange();
|
||
|
|
case '3':
|
||
|
|
return i18n.label.workingAgeRange();
|
||
|
|
case '7':
|
||
|
|
return i18n.label.rankingInterval();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getSuffix(key) {
|
||
|
|
switch (key) {
|
||
|
|
case '7':
|
||
|
|
return i18n.label.level();
|
||
|
|
default:
|
||
|
|
return i18n.label.year();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
getImgSrc(tag, chartTitle) {
|
||
|
|
let cvs = document.getElementsByTagName('canvas');
|
||
|
|
if (tag !== 'right') {
|
||
|
|
this.downloadCvs2Img(cvs[0], chartTitle);
|
||
|
|
} else {
|
||
|
|
this.downloadCvs2Img(cvs[1], chartTitle);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
downloadCvs2Img(cvs, chartTitle) {
|
||
|
|
let $a = document.createElement('a');
|
||
|
|
$a.download = chartTitle + '.jpg';
|
||
|
|
$a.target = '_blank';
|
||
|
|
let url;
|
||
|
|
if (cvs) {
|
||
|
|
url = cvs.toDataURL("image/jpg");
|
||
|
|
} else {
|
||
|
|
message.info(i18n.message.dataNone());
|
||
|
|
}
|
||
|
|
if (url) $a.href = url;
|
||
|
|
if (typeof MouseEvent === 'function') {
|
||
|
|
var evt = new MouseEvent('click', {
|
||
|
|
view: window,
|
||
|
|
bubbles: true,
|
||
|
|
cancelable: false
|
||
|
|
});
|
||
|
|
$a.dispatchEvent(evt);
|
||
|
|
} else {
|
||
|
|
if (window.navigator.msSaveOrOpenBlob) {
|
||
|
|
var bstr = atob(url.split(',')[1]);
|
||
|
|
var n = bstr.length;
|
||
|
|
var u8arr = new Uint8Array(n);
|
||
|
|
while (n--) {
|
||
|
|
u8arr[n] = bstr.charCodeAt(n);
|
||
|
|
}
|
||
|
|
var blob = new Blob([u8arr]);
|
||
|
|
window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg');
|
||
|
|
} else {
|
||
|
|
var html = '' +
|
||
|
|
'<body style="margin:0;">' +
|
||
|
|
'<img src="' + url + '" style="max-width:100%;" title="" />' +
|
||
|
|
'</body>';
|
||
|
|
var tab = window.open();
|
||
|
|
tab.document.write(html);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
chartAction(chart, ids, yAxisData, linkList) {
|
||
|
|
chart.off('click');
|
||
|
|
chart.on('click', (params) => this.handleClick(params, ids, yAxisData, linkList));
|
||
|
|
}
|
||
|
|
|
||
|
|
handleClick(params, ids, yAxisData, linkList) {
|
||
|
|
const {
|
||
|
|
pathname
|
||
|
|
} = this.props;
|
||
|
|
if (pathname !== 'departmentStatistics') return false;
|
||
|
|
let anid = params.event.target.anid;
|
||
|
|
if (!anid) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
let index = anid.split('_')[1];
|
||
|
|
jumpToHrmDept(ids[index])
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
option,
|
||
|
|
isIntervalShow,
|
||
|
|
interval,
|
||
|
|
tabKey,
|
||
|
|
pathname,
|
||
|
|
setGap,
|
||
|
|
getData,
|
||
|
|
chartTitle,
|
||
|
|
isChartsShow,
|
||
|
|
ids,
|
||
|
|
yAxisData,
|
||
|
|
linkList,
|
||
|
|
tagName
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{padding: '8px 16px'}}>
|
||
|
|
{(pathname == 'basicConditionAnalysis') ? (<div style={{height: 500, position: 'relative'}}>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bk161k`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tiem4w`} span={24}>
|
||
|
|
<div style={{ height: 50 }}>
|
||
|
|
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], tagName)}
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yyxmps`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r3yrz9`} span={24}>
|
||
|
|
{isChartsShow[0] ? (<div style={{height: 400}}>
|
||
|
|
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@94v101`} ref="echart" option={option[0]} useDefault={false}/>
|
||
|
|
</div>)
|
||
|
|
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -40, textAlign: 'center'}}>
|
||
|
|
<div style={{fontSize: 80}}><i className='icon-coms-blank'></i></div>
|
||
|
|
<div style={{fontSize: 20, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
|
||
|
|
</div>}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>) : ''}
|
||
|
|
{ (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? <div style={{height: 350, border: '1px solid #DDD', borderRadius: 3}}>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xs2v2c`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@e1wc91`} span={24}>
|
||
|
|
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
|
||
|
|
<div style={{display: 'block', width: '30%', height: '100%', float: 'left', padding: '11px 0 12px 16px' }}>{chartTitle[0]}</div>
|
||
|
|
<div style={{ height: 50 }}>
|
||
|
|
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], chartTitle[0])}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zdbixg`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cpfhsg`} span={20} offset={2}>
|
||
|
|
{isChartsShow[0] ? (<div style={{height: 300}}>
|
||
|
|
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@5ri10l`} ref="echart" option={option[0]} useDefault={false} chartAction={(chart) => this.chartAction(chart, ids, yAxisData, linkList)}/>
|
||
|
|
</div>)
|
||
|
|
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -40, textAlign: 'center'}}>
|
||
|
|
<div style={{fontSize: 80}}><i className='icon-coms-blank'></i></div>
|
||
|
|
<div style={{fontSize: 20, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
|
||
|
|
</div>}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div> : ''}
|
||
|
|
{ (pathname == 'jobStatusStatistics') ? <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@d50f92`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4odteb`} span={12}>
|
||
|
|
<div style={{height: 350, marginRight: 8, border: '1px solid #DDD', borderRadius: 3}}>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9vp3z8`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j8v6ki`}>
|
||
|
|
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
|
||
|
|
<div style={{height: '100%', padding: '11px 0 12px 16px', float: 'left' }}>{chartTitle[0]}</div>
|
||
|
|
<div style={{height: 50 }}>
|
||
|
|
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'left', isChartsShow[1], chartTitle[0])}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@z1e7gk`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6gm6oz`}>
|
||
|
|
{isChartsShow[1] ? <div style={{height: 300}}>
|
||
|
|
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@mgu4rb`} ref="echart" option={option[0]} useDefault={false}/>
|
||
|
|
</div>
|
||
|
|
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -20, textAlign: 'center'}}>
|
||
|
|
<div style={{fontSize: 50}}><i className='icon-coms-blank'></i></div>
|
||
|
|
<div style={{fontSize: 15, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j3wbd0`} span={12}>
|
||
|
|
<div style={{height: 350, marginLeft: 8, border: '1px solid #DDD', borderRadius: 3}}>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kx8mey`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d3qj2t`}>
|
||
|
|
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
|
||
|
|
<div style={{height: '100%', padding: '11px 0 12px 16px', float: 'left' }}>{chartTitle[1]}</div>
|
||
|
|
<div style={{ height: 50 }}>
|
||
|
|
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'right', isChartsShow[2], chartTitle[1])}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@i0dgsy`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@svragf`}>
|
||
|
|
{isChartsShow[2] ? <div style={{height: 300}}>
|
||
|
|
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@ohcxa9`} ref="echart1" option={option[1]} useDefault={false}/>
|
||
|
|
</div>
|
||
|
|
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -20, textAlign: 'center'}}>
|
||
|
|
<div style={{fontSize: 50}}><i className='icon-coms-blank'></i></div>
|
||
|
|
<div style={{fontSize: 15, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
|
||
|
|
</div>}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row> : ''}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ReportChart
|