155 lines
5.2 KiB
JavaScript
155 lines
5.2 KiB
JavaScript
|
import {
|
||
|
|
WeaEchart,
|
||
|
|
} from 'ecCom'
|
||
|
|
|
||
|
|
import {
|
||
|
|
Row,
|
||
|
|
Col,
|
||
|
|
message,
|
||
|
|
} from 'antd';
|
||
|
|
import {
|
||
|
|
i18n
|
||
|
|
} from '../../public/i18n';
|
||
|
|
|
||
|
|
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
class PieChart extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidUpdate() {
|
||
|
|
if (this.refs.echart) this.refs.echart.paint();
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(nextProps) {
|
||
|
|
if (this.props.winWidth !== nextProps.winWidth) {
|
||
|
|
if (this.refs.echart) this.refs.echart.chart.resize();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getDOM() {
|
||
|
|
const {
|
||
|
|
isChartsShow,
|
||
|
|
chartTitle,
|
||
|
|
linkStyle
|
||
|
|
} = this.props;
|
||
|
|
return (
|
||
|
|
<div style={{position: 'absolute', right: 0}}>
|
||
|
|
<div style={{float: 'left', padding: '8px 20px 10px 10px', fontSize: 16}}>
|
||
|
|
{ isChartsShow ? <a onClick={() => this.download()} className={linkStyle}>
|
||
|
|
<i className='icon-coms-download2' />
|
||
|
|
</a>
|
||
|
|
: <a onClick={() => {message.info(i18n.message.dataNone())}} className={linkStyle}>
|
||
|
|
<i className='icon-coms-download2' />
|
||
|
|
</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
download() {
|
||
|
|
const {
|
||
|
|
canvasPosition
|
||
|
|
} = this.props;
|
||
|
|
let cvs = document.getElementsByTagName('canvas');
|
||
|
|
this.downloadCvs2Img(cvs[canvasPosition]);
|
||
|
|
}
|
||
|
|
|
||
|
|
downloadCvs2Img(cvs) {
|
||
|
|
const {
|
||
|
|
chartTitle
|
||
|
|
} = this.props;
|
||
|
|
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 lang = model.get('lang');
|
||
|
|
var html = '' +
|
||
|
|
'<body style="margin:0;">' +
|
||
|
|
'<img src="' + url + '" style="max-width:100%;" title="' + ((lang && lang[0]) || '') + '" />' +
|
||
|
|
'</body>';
|
||
|
|
var tab = window.open();
|
||
|
|
tab.document.write(html);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
chartAction(chart) {
|
||
|
|
chart.off('click');
|
||
|
|
chart.on('click', (params) => this.handleClick(params));
|
||
|
|
}
|
||
|
|
|
||
|
|
handleClick(params) {
|
||
|
|
const {
|
||
|
|
ids,
|
||
|
|
setVisible
|
||
|
|
} = this.props;
|
||
|
|
setVisible('4', true, ids[params.dataIndex]);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
option,
|
||
|
|
chartTitle,
|
||
|
|
isChartsShow
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{height: 400, margin: '8px 16px', border: '1px solid #DDD', borderRadius: 3}}>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tjualo`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@n5sqnt`}>
|
||
|
|
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
|
||
|
|
<div style={{height: '100%', padding: '11px 0 12px 16px', color: '#333', float: 'left' }}>{chartTitle}</div>
|
||
|
|
<div style={{height: 50 }}>
|
||
|
|
{this.getDOM()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@b89szb`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8t1x0g`}>
|
||
|
|
{isChartsShow ? <div style={{height: 340}}>
|
||
|
|
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@mixfir`} ref="echart" option={option} useDefault={false} chartAction={ (chart) => this.chartAction(chart)}/>
|
||
|
|
</div>
|
||
|
|
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -24, 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>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default PieChart
|