From 46f79b491173d284a4900d19e7aecf7509481438 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 21 一月 2022 17:21:25 +0800 Subject: [PATCH] 2022-01-21 --- src/tabviews/custom/components/chart/antv-dashboard/index.jsx | 51 ++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 46 insertions(+), 5 deletions(-) diff --git a/src/tabviews/custom/components/chart/antv-dashboard/index.jsx b/src/tabviews/custom/components/chart/antv-dashboard/index.jsx index df4fba4..63d21b7 100644 --- a/src/tabviews/custom/components/chart/antv-dashboard/index.jsx +++ b/src/tabviews/custom/components/chart/antv-dashboard/index.jsx @@ -3,17 +3,15 @@ import { is, fromJS } from 'immutable' import { Chart, registerShape } from '@antv/g2' import { Spin, notification } from 'antd' +import { DownloadOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' import Utils from '@/utils/utils.js' -// import asyncComponent from '@/utils/asyncComponent' import UtilsDM from '@/utils/utils-datamanage.js' import MKEmitter from '@/utils/events.js' import NormalHeader from '@/tabviews/custom/components/share/normalheader' import './index.scss' - -// const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) registerShape('point', 'pointer', { draw(cfg, container) { @@ -70,6 +68,7 @@ sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 plot: null, // 鍥捐〃璁剧疆 data: {}, // 鏁版嵁 + chart: null } UNSAFE_componentWillMount () { @@ -436,6 +435,8 @@ } }) chart.render() + + this.setState({chart}) } /** @@ -594,10 +595,49 @@ } chart.render() + + this.setState({chart}) + } + + 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() { - const { config, loading, empty } = this.state + const { config, loading } = this.state return ( <div className="custom-dashboard-plot-box" style={config.style}> @@ -609,7 +649,8 @@ } <NormalHeader config={config} /> <div className="canvas-wrap" ref={ref => this.wrap = ref}> - <div className={'canvas' + (empty ? ' empty' : '')} id={this.state.chartId}></div> + {config.plot.download === 'enable' && this.state.chart ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} + <div className="canvas" id={this.state.chartId}></div> </div> </div> ) -- Gitblit v1.8.0