| | |
| | | import { connect } from 'react-redux' |
| | | import DataSet, { DataView } from '@antv/data-set' |
| | | import { Spin, Empty, notification } from 'antd' |
| | | import { DownloadOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | |
| | | plot: null, // 图表设置 |
| | | data: null, // 数据 |
| | | search: null, // 搜索条件 |
| | | chart: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | }) |
| | | } |
| | | chart.render() |
| | | |
| | | this.setState({chart}) |
| | | } |
| | | |
| | | /** |
| | |
| | | }) |
| | | } |
| | | chart.render() |
| | | |
| | | this.setState({chart}) |
| | | } |
| | | |
| | | refreshSearch = (list) => { |
| | | this.setState({search: list}, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | | |
| | | downloadImage = () => { |
| | | const { chart, config } = this.state |
| | | const link = document.createElement('a'); |
| | | const filename = `${config.name}${moment().format('YYYY-MM-DD HH_mm_ss')}.png`; |
| | | const canvas = chart.getCanvas(); |
| | | canvas.get('timeline').stopAllAnimations(); |
| | | |
| | | setTimeout(() => { |
| | | const canvas = chart.getCanvas(); |
| | | const canvasDom = canvas.get('el'); |
| | | const dataURL = canvasDom.toDataURL('image/png'); |
| | | |
| | | if (window.Blob && window.URL) { |
| | | const arr = dataURL.split(','); |
| | | const mime = arr[0].match(/:(.*?);/)[1]; |
| | | const bstr = atob(arr[1]); |
| | | let n = bstr.length; |
| | | const u8arr = new Uint8Array(n); |
| | | while (n--) { |
| | | u8arr[n] = bstr.charCodeAt(n); |
| | | } |
| | | const blobObj = new Blob([u8arr], { type: mime }); |
| | | if (window.navigator.msSaveBlob) { |
| | | window.navigator.msSaveBlob(blobObj, filename); |
| | | } else { |
| | | link.addEventListener('click', () => { |
| | | link.download = filename; |
| | | link.href = window.URL.createObjectURL(blobObj); |
| | | }); |
| | | } |
| | | } |
| | | const e = document.createEvent('MouseEvents'); |
| | | e.initEvent('click', false, false); |
| | | link.dispatchEvent(e); |
| | | }, 16); |
| | | } |
| | | |
| | | render() { |
| | |
| | | } |
| | | <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> |
| | | <div className="canvas-wrap" ref={ref => this.wrap = ref}> |
| | | {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} |
| | | <div className={'canvas' + (empty ? ' empty' : '')} id={this.state.chartId}></div> |
| | | </div> |
| | | {empty ? <Empty description={false}/> : null} |