From 8d66ff34fae5b048a6b7923cc75d34f13a08be9d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 02 八月 2022 11:42:43 +0800 Subject: [PATCH] Merge branch 'develop' --- src/tabviews/custom/components/chart/antv-scatter/index.jsx | 99 +++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 78 insertions(+), 21 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..bad1040 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')) @@ -24,7 +23,6 @@ data: PropTypes.array, // 缁熶竴鏌ヨ鏁版嵁 config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 - menuType: PropTypes.any, // 鑿滃崟绫诲瀷 } state = { @@ -37,6 +35,7 @@ plot: null, // 鍥捐〃璁剧疆 data: null, // 鏁版嵁 search: null, // 鎼滅储鏉′欢 + chart: null } UNSAFE_componentWillMount () { @@ -66,7 +65,9 @@ search: Utils.initMainSearch(config.search), }, () => { if (config.setting.sync !== 'true' && config.setting.onload === 'true') { - this.loadData() + setTimeout(() => { + this.loadData() + }, _config.setting.delay || 0) } else if (config.setting.sync === 'true' && _data) { this.handleData() } @@ -152,22 +153,30 @@ }) return } else if (result.run_type) { - this.setState({timer}) + let repeats = config.timerRepeats || 0 + this.setState({timer, repeats}) this.timer = setTimeout(() => { - this.timerTask() + this.timerTask(repeats) }, timer) } }) } - timerTask = () => { - const { timer } = this.state + timerTask = (times) => { + const { timer, repeats } = this.state if (!timer) return this.loadData(true) - + + if (repeats) { + times = times - 1 + if (times <= 0) { + clearTimeout(this.timer) + return + } + } this.timer = setTimeout(() => { - this.timerTask() + this.timerTask(times) }, timer) } @@ -182,14 +191,14 @@ if (config.uuid !== menuId) return - this.loadData() // 鏁版嵁鍒锋柊 - - if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) { - MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊 + if ((position === 'mainline' || position === 'popclose') && config.setting.supModule && BID) { // 鍒锋柊婧愮粍浠舵椂锛岄檮甯﹀埛鏂颁笂绾ц涓庡綋鍓嶇粍浠� + MKEmitter.emit('reloadData', config.setting.supModule, BID) + } else { + this.loadData() } - if (position === 'mainline' && config.setting.supModule) { // 涓昏〃琛屽埛鏂� - MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + if (position === 'popclose') { // 鎵ц鍚姩寮圭獥鐨勬寜閽墍閫夋嫨鐨勫埛鏂伴」 + btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) } } @@ -243,7 +252,7 @@ * @description 鏁版嵁鍔犺浇 */ async loadData (hastimer) { - const { mainSearch, menuType } = this.props + const { mainSearch } = this.props const { config, arr_field, BID, search } = this.state if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� @@ -278,7 +287,7 @@ } let _orderBy = config.setting.order || '' - let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID, menuType) + let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID) let result = await Api.genericInterface(param) if (result.status) { @@ -376,6 +385,8 @@ }) } chart.render() + + this.setState({chart}) } refreshSearch = (list) => { @@ -384,20 +395,66 @@ }) } + 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, BID } = this.state + let style = {...config.style} + if (empty && config.plot.empty === 'hidden') { + style.opacity = 0 + style.position = 'absolute' + style.zIndex = -1 + style.width = '100%' + } + return ( - <div className="custom-scatter-plot-box" style={config.style}> + <div className="custom-scatter-plot-box" id={'anchor' + config.uuid} style={style}> {loading ? <div className="loading-mask"> <div className="ant-spin-blur"></div> <Spin /> </div> : null } - <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> + <NormalHeader config={config} BID={BID} 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