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-scatter/index.jsx | 46 +++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 43 insertions(+), 3 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-scatter/index.jsx b/src/tabviews/custom/components/chart/antv-scatter/index.jsx
index 99fb8fb..074d4ea 100644
--- a/src/tabviews/custom/components/chart/antv-scatter/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-scatter/index.jsx
@@ -3,18 +3,17 @@
import { is, fromJS } from 'immutable'
import { Chart } from '@antv/g2'
import { Spin, Empty, 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 asyncBtnComponent from './asyncButtonComponent'
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'))
const ExcelOutButton = asyncBtnComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
const ExcelInButton = asyncBtnComponent(() => import('@/tabviews/zshare/actionList/excelInbutton'))
@@ -37,6 +36,7 @@
plot: null, // 鍥捐〃璁剧疆
data: null, // 鏁版嵁
search: null, // 鎼滅储鏉′欢
+ chart: null
}
UNSAFE_componentWillMount () {
@@ -376,12 +376,51 @@
})
}
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() {
@@ -397,7 +436,8 @@
}
<NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} />
<div className="canvas-wrap" ref={ref => this.wrap = ref}>
- <div className="chart-action">
+ {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null}
+ <div className={'chart-action' + (config.plot.download === 'enable' ? ' downable' : '')}>
{config.action.map(item => {
if (item.OpenType === 'excelOut') {
return (
--
Gitblit v1.8.0