From 79943222ed0edc6bd35ab2858c5eda2bc3246f66 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 28 二月 2022 15:03:45 +0800
Subject: [PATCH] 2022-02-28
---
src/tabviews/custom/components/chart/antv-dashboard/index.jsx | 80 +++++++++++++++++++++++++++++++---------
1 files changed, 62 insertions(+), 18 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-dashboard/index.jsx b/src/tabviews/custom/components/chart/antv-dashboard/index.jsx
index 041e41d..280fa16 100644
--- a/src/tabviews/custom/components/chart/antv-dashboard/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-dashboard/index.jsx
@@ -3,16 +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) {
@@ -69,6 +68,7 @@
sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁
plot: null, // 鍥捐〃璁剧疆
data: {}, // 鏁版嵁
+ chart: null
}
UNSAFE_componentWillMount () {
@@ -96,13 +96,7 @@
}
}
- let height = config.plot.height || 400
- if (config.plot.title) {
- _config.plot.height = height - 75
- } else {
- _config.plot.height = height - 30
- }
- _config.style.height = height
+ _config.style.height = config.plot.height || 400
this.setState({
config: _config,
@@ -114,7 +108,9 @@
title: config.plot.title
}, () => {
if (config.setting.sync !== 'true' && config.setting.onload === 'true') {
- this.loadData()
+ setTimeout(() => {
+ this.loadData()
+ }, _config.setting.delay || 0)
} else if (config.setting.sync === 'true') {
this.handleData()
}
@@ -182,7 +178,7 @@
if (!config.timer) return
- const _change = { '15s': 15000, '30s': 30000, '1min': 60000, '5min': 300000, '10min': 600000, '15min': 900000, '30min': 1800000, '1hour': 3600000 }
+ const _change = { '5s': 5000, '15s': 15000, '30s': 30000, '1min': 60000, '5min': 300000, '10min': 600000, '15min': 900000, '30min': 1800000, '1hour': 3600000 }
let timer = _change[config.timer]
@@ -239,7 +235,7 @@
const { config } = this.state
if (!config.setting.supModule || config.setting.supModule !== MenuID) return
- if (id !== this.state.BID) {
+ if (id !== this.state.BID || id !== '') {
this.setState({ BID: id }, () => {
this.loadData()
})
@@ -294,11 +290,17 @@
data.value = result.data[0][config.plot.valueField]
}
}
+ let reset = true
+
+ if (hastimer && is(fromJS(data), fromJS(this.state.data))) {
+ reset = false
+ }
this.setState({
data,
loading: false
}, () => {
+ if (!reset) return
this.handleData()
})
} else {
@@ -355,7 +357,7 @@
const chart = new Chart({
container: chartId,
autoFit: true,
- height: plot.height,
+ height: this.wrap.offsetHeight - 30,
})
chart.data(data)
@@ -435,6 +437,8 @@
}
})
chart.render()
+
+ this.setState({chart})
}
/**
@@ -462,7 +466,7 @@
const chart = new Chart({
container: chartId,
autoFit: true,
- height: plot.height,
+ height: this.wrap.offsetHeight - 30,
padding: [0, 0, 0, 0],
})
chart.data([_data])
@@ -593,10 +597,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}>
@@ -607,8 +650,9 @@
</div> : null
}
<NormalHeader config={config} />
- <div className="canvas-wrap">
- <div className={'canvas' + (empty ? ' empty' : '')} style={{height: config.plot.height + 30}} id={this.state.chartId}></div>
+ <div className="canvas-wrap" ref={ref => this.wrap = ref}>
+ {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