From 3626595bb2bd245708590ada4b8929bd027d4222 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 03 九月 2020 22:49:18 +0800
Subject: [PATCH] 2020-09-03
---
src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 186 ++++++++++++++++++++++++++++++++-------------
1 files changed, 131 insertions(+), 55 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
index 21d73e3..0257e24 100644
--- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
@@ -3,11 +3,13 @@
import { is, fromJS } from 'immutable'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
-import { Spin, Empty, Select } from 'antd'
+import { Spin, Empty, Select, notification } from 'antd'
import asyncComponent from './asyncButtonComponent'
// import searchLine from '../../share/searchLine'
+import Api from '@/api'
import Utils from '@/utils/utils.js'
+import UtilsDM from '@/utils/utils-datamanage.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import './index.scss'
@@ -27,10 +29,14 @@
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 瀛楀吀
+ config: true, // 鍥捐〃閰嶇疆淇℃伅
empty: true, // 鍥捐〃鏁版嵁涓虹┖
chartId: Utils.getuuid(), // 鍥捐〃Id
- title: '',
- searchList: null,
+ title: '', // 缁勪欢鏍囬
+ sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁
+ plot: null, // 鍥捐〃璁剧疆
+ data: null, // 鏁版嵁
+ search: null, // 鎼滅储鏉′欢
chartData: [], // 鍥捐〃鏁版嵁
chartFields: [], // 缁熻鍥捐〃鐢熸垚瀛楁闆�
selectFields: [], // 缁熻鍥捐〃閫夋嫨瀛楁
@@ -38,73 +44,110 @@
}
UNSAFE_componentWillMount () {
- // const { config, data, BID, mainSearch, menuType, dataManager } = this.props
+ const { config, data } = this.props
+ let _config = fromJS(config).toJS()
- // this.setState({
- // title: config.setting.title,
- // searchList: Utils.initMainSearch(config.search)
- // })
+ let _data = null
+ let _sync = config.setting.sync === 'true'
+
+ if (config.setting.sync === 'true' && data) {
+ _data = data[config.dataName] || []
+ _sync = false
+ }
+
+ this.setState({
+ config: _config,
+ data: _data,
+ arr_field: _config.columns.map(col => col.field).join(','),
+ plot: _config.plot,
+ sync: _sync,
+ title: config.setting.title,
+ search: Utils.initMainSearch(config.search)
+ }, () => {
+ if (config.setting.sync !== 'true') {
+ this.loadData()
+ } else if (config.setting.sync === 'true' && _data) {
+ this.handleData()
+ }
+ })
}
/**
* @description 鏍￠獙鍥捐〃鐨勬寜閽粍锛屽鏋滀负缁熻鍥捐〃锛岃绠楀浘琛ㄥ瓧娈�
*/
componentDidMount () {
- const { plot, data, config } = this.props
- let _state = {}
- let percentFields = []
+ // const { plot, data, config } = this.props
+ // let _state = {}
+ // let percentFields = []
- if (plot.datatype === 'statistics' && (plot.chartType === 'line' || plot.chartType === 'bar')) {
- let result = this.getStaticMsg(data)
- _state.chartData = result.data
- _state.chartFields = result.chartFields
- _state.selectFields = result.selectFields
+ // if (plot.datatype === 'statistics' && (plot.chartType === 'line' || plot.chartType === 'bar')) {
+ // let result = this.getStaticMsg(data)
+ // _state.chartData = result.data
+ // _state.chartFields = result.chartFields
+ // _state.selectFields = result.selectFields
- let _column = config.columns.filter(col => plot.InfoValue === col.field)[0]
+ // let _column = config.columns.filter(col => plot.InfoValue === col.field)[0]
- if (_column && _column.format === 'percent') {
- percentFields.push(plot.InfoValue)
- _state.percentFields = percentFields
- }
+ // if (_column && _column.format === 'percent') {
+ // percentFields.push(plot.InfoValue)
+ // _state.percentFields = percentFields
+ // }
- this.setState(_state, () => {
- this.viewrender()
- })
- } else {
- if (plot.chartType === 'line' || plot.chartType === 'bar') {
- try {
- plot.Yaxis.forEach(yaxis => {
- let _column = config.columns.filter(col => yaxis === col.field)[0]
- if (_column && _column.format === 'percent') {
- percentFields.push(_column.label)
- }
- })
- } catch {
- console.warn('Incorrect percentage setting')
- }
- }
- this.setState({ percentFields }, () => {
- this.viewrender()
- })
- }
+ // this.setState(_state, () => {
+ // this.viewrender()
+ // })
+ // } else {
+ // if (plot.chartType === 'line' || plot.chartType === 'bar') {
+ // try {
+ // plot.Yaxis.forEach(yaxis => {
+ // let _column = config.columns.filter(col => yaxis === col.field)[0]
+ // if (_column && _column.format === 'percent') {
+ // percentFields.push(_column.label)
+ // }
+ // })
+ // } catch {
+ // console.warn('Incorrect percentage setting')
+ // }
+ // }
+ // this.setState({ percentFields }, () => {
+ // this.viewrender()
+ // })
+ // }
}
/**
* @description 鍥捐〃鏁版嵁鏇存柊锛屽埛鏂板唴瀹�
*/
UNSAFE_componentWillReceiveProps (nextProps) {
- const { plot } = this.props
- if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
- let _state = {}
+ const { sync, config } = this.state
- if (plot.datatype === 'statistics' && (plot.chartType === 'line' || plot.chartType === 'bar')) {
- let result = this.getStaticMsg(nextProps.data)
- _state.chartData = result.data
- _state.chartFields = result.chartFields
- _state.selectFields = result.selectFields
+ if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) {
+ let _data = []
+ if (nextProps.data && nextProps.data[config.dataName]) {
+ _data = nextProps.data[config.dataName] || []
}
- this.setState(_state, () => {
+ this.setState({sync: false, data: _data}, () => {
+ this.handleData()
+ })
+ }
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ handleData = () => {
+ const { data, plot } = this.state
+
+ if (plot.datatype === 'statistics') {
+ let result = this.getStaticMsg(data)
+
+ this.setState({
+ chartData: result.data,
+ chartFields: result.chartFields,
+ selectFields: result.selectFields
+ }, () => {
let _element = document.getElementById(this.state.chartId)
if (_element) {
_element.innerHTML = ''
@@ -114,8 +157,41 @@
}
}
- shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ async loadData () {
+ const { mainSearch, BID, menuType, dataManager } = this.props
+ const { config, arr_field, search } = this.state
+
+ let searches = fromJS(search).toJS()
+ if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢
+ searches = [...mainSearch, ...searches]
+ }
+
+ this.setState({
+ loading: true
+ })
+
+ let _orderBy = config.setting.order || ''
+ let param = UtilsDM.getQueryDataParams(config.setting, config.customScript, arr_field, searches, _orderBy, '', '', BID, menuType, dataManager)
+
+ let result = await Api.genericInterface(param)
+ if (result.status) {
+ this.setState({
+ data: result.data.map((item, index) => {
+ item.key = index
+ return item
+ }),
+ loading: false
+ })
+ } else {
+ this.setState({
+ loading: false
+ })
+ notification.error({
+ top: 92,
+ message: result.message,
+ duration: 10
+ })
+ }
}
/**
@@ -915,13 +991,13 @@
}
render() {
- const { plot, loading, config, BID, Tab } = this.props
- const { empty, chartFields, selectFields } = this.state
+ const { loading, config, BID, Tab } = this.props
+ const { title, plot, empty, chartFields, selectFields } = this.state
return (
<div className="custom-line-chart-plot-box">
<searchLine />
- {plot.title ? <p className="chart-title">{plot.title}</p> : null}
+ {title ? <p className="chart-title">{title}</p> : null}
{loading ?
<div className="loading-mask">
<div className="ant-spin-blur"></div>
--
Gitblit v1.8.0