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