From f267d04e0561a0a20d1f2a9f558a273558ece90d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 24 五月 2021 17:50:19 +0800 Subject: [PATCH] 2021-05-24 --- src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 156 +++++++++++++-------------------------------------- 1 files changed, 40 insertions(+), 116 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 6ee1ac9..faacd7a 100644 --- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx +++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx @@ -4,7 +4,7 @@ import { Chart } from '@antv/g2' import { connect } from 'react-redux' import DataSet from '@antv/data-set' -import { Spin, Empty, Select, notification } from 'antd' +import { Spin, Empty, notification } from 'antd' import moment from 'moment' import asyncComponent from './asyncButtonComponent' @@ -42,9 +42,6 @@ search: null, // 鎼滅储鏉′欢 vFields: [], // 鏁板�煎瓧娈� vstFields: null, // 缁熻鏁版嵁鍊煎瓧娈典俊鎭� - chartData: [], // 鍥捐〃鏁版嵁 - chartFields: [], // 缁熻鍥捐〃鐢熸垚瀛楁闆� - selectFields: [], // 缁熻鍥捐〃閫夋嫨瀛楁 } UNSAFE_componentWillMount () { @@ -104,11 +101,7 @@ _config.plot.height = _config.plot.height - 30 } - if (_config.style) { - _config.style = {..._config.style, minHeight: (config.plot.height || 400)} - } else { - _config.style = {minHeight: (config.plot.height || 400)} - } + _config.style.height = config.plot.height || 400 let transfield = {} _config.columns.forEach(col => { @@ -117,7 +110,7 @@ } }) - _config.plot.color = _config.plot.color || 'rgba(0, 0, 0, 0.85)' + _config.plot.color = _config.plot.color || 'rgba(0, 0, 0, 0.65)' if (_config.plot.enabled === 'true' && _config.plot.customs && _config.plot.customs.length > 0) { let colors = new Map() @@ -158,7 +151,7 @@ if (item.axis === 'true' && axisIndex < 2) { if (axisIndex === 0) { - item.axis = { grid: {style: { fill: _config.plot.color }}, title: { style: { fill: _config.plot.color } }, label: {style: { fill: _config.plot.color }} } + item.axis = { title: { style: { fill: _config.plot.color } }, label: {style: { fill: _config.plot.color }} } fields.unshift(item) } else { item.axis = { grid: null, title: {style: { fill: _config.plot.color }}, label: {style: { fill: _config.plot.color }} } @@ -259,16 +252,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 = { '15s': 15000, '30s': 30000, '1min': 60000, '5min': 300000, '10min': 600000, '15min': 900000, '30min': 1800000, '1hour': 3600000 } let timer = _change[config.timer] @@ -410,6 +394,14 @@ }) } + let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) + if (requireFields.length > 0) { + this.setState({ + loading: false + }) + return + } + if (!hastimer) { this.setState({ loading: true @@ -444,29 +436,11 @@ * @description 鏁版嵁棰勫鐞嗭紝缁熻鏁版嵁闇�瑕侀噸缃� */ 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 = '' - } - this.viewrender() - }) - } else { - let _element = document.getElementById(this.state.chartId) - if (_element) { - _element.innerHTML = '' - } - this.viewrender() + let _element = document.getElementById(this.state.chartId) + if (_element) { + _element.innerHTML = '' } + this.viewrender() } /** @@ -478,7 +452,7 @@ getdata = () => { const { data, plot, vFields } = this.state - if (!data) { + if (!data || data.length === 0) { this.setState({empty: true}) return [] } @@ -586,36 +560,30 @@ } /** - * @description 缁熻鏁版嵁棰勫鐞嗭紝鍔ㄦ�佺敓鎴愮粺璁″瓧娈靛苟杩涜鏁版嵁杞崲 + * @description 缁熻鏁版嵁棰勫鐞� */ - getStaticMsg = (data) => { - const { plot, vstFields } = this.state + getStaticMsg = () => { + const { plot, vstFields, data } = this.state let percent = false - let decimal = 0 + let decimal = vstFields ? vstFields.decimal : 0 if (plot.show === 'percent') { percent = true } - if (vstFields) { - decimal = vstFields.decimal - } - if (!data) { + if (!data || data.length === 0) { this.setState({empty: true}) - return {data: [], chartFields: [], selectFields: []} + return [] } let _data = [] let _cdata = fromJS(data).toJS() - let _chartFields = [] - let _selectFields = [] if (plot.repeat === 'average') { let _mdata = new Map() _cdata.forEach(item => { if (!item[plot.InfoType] || !item[plot.Xaxis]) return - _chartFields.push(item[plot.InfoType]) item.$uuid = item[plot.InfoType] + item[plot.Xaxis] if (typeof(item[plot.InfoValue]) !== 'number') { @@ -651,7 +619,6 @@ let _mdata = new Map() _cdata.forEach(item => { if (!item[plot.InfoType] || !item[plot.Xaxis]) return - _chartFields.push(item[plot.InfoType]) item.$uuid = item[plot.InfoType] + item[plot.Xaxis] @@ -685,7 +652,6 @@ let _mdata = new Map() _cdata.forEach(item => { if (!item[plot.InfoType] || !item[plot.Xaxis]) return - _chartFields.push(item[plot.InfoType]) item.$uuid = item[plot.InfoType] + item[plot.Xaxis] @@ -710,31 +676,8 @@ _data = [..._mdata.values()] } - _chartFields = Array.from(new Set(_chartFields)) - - if (plot.InfoDefNumber >= _chartFields.length) { - _selectFields = _chartFields - } else { - _selectFields = _chartFields.slice(0, plot.InfoDefNumber) - } - - return {data: _data, chartFields: _chartFields, selectFields: _selectFields} - } - - /** - * @description 鑾峰彇缁熻鍥捐〃灞曠ず鏁版嵁锛岄�氳繃閫夋嫨绫诲瀷绛涢�� - */ - getStaticData = () => { - const { plot, chartData, chartFields, selectFields } = this.state - - let _data = [] - if (selectFields.length === chartFields.length) { - _data = chartData - } else { - _data = chartData.filter(item => selectFields.includes(item[plot.InfoType])) - } - this.setState({empty: _data.length === 0}) + return _data } @@ -776,7 +719,7 @@ }) } - _data = this.getStaticData() + _data = this.getStaticMsg() } else { let data = this.getdata() @@ -846,9 +789,8 @@ }, style: { fill: plot.color } }, - line: { style: { fill: plot.color } } }) - chart.axis(_valfield, { grid: { style: { fill: plot.color } }, label: { style: { fill: plot.color } } }) + chart.axis(_valfield, { label: { style: { fill: plot.color } } }) if (!plot.legend || plot.legend === 'hidden') { chart.legend(false) @@ -998,7 +940,6 @@ }, style: { fill: plot.color } }, - line: { style: { fill: plot.color } } }) if (!plot.legend || plot.legend === 'hidden') { @@ -1056,6 +997,9 @@ } } }) + } + if (plot.barRadius) { + _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] }) } } else if (item.chartType === 'line') { let _chart = chart @@ -1123,7 +1067,7 @@ }) } - _data = this.getStaticData() + _data = this.getStaticMsg() } else { let data = this.getdata() @@ -1199,9 +1143,8 @@ }, style: { fill: plot.color } }, - line: { style: { fill: plot.color } } }) - chart.axis(_valfield, { grid: { style: { fill: plot.color } }, label: { style: { fill: plot.color } } }) + chart.axis(_valfield, { label: { style: { fill: plot.color } } }) if (!plot.legend || plot.legend === 'hidden') { chart.legend(false) @@ -1280,6 +1223,9 @@ if (plot.barSize || plot.correction) { _chart.size(plot.barSize || 35) } + if (plot.barRadius) { + _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] }) + } } else if (plot.adjust === 'stack') { let _chart = chart .interval() @@ -1323,6 +1269,9 @@ if (plot.barSize || plot.correction) { _chart.size(plot.barSize || 35) } + if (plot.barRadius) { + _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] }) + } } if (plot.linkmenu && plot.linkmenu.length > 0) { @@ -1350,8 +1299,7 @@ ...menu, selected: true, param: { - BID: primaryId, - data: data + $BID: primaryId } } @@ -1377,19 +1325,6 @@ chart.render() } - /** - * @description 缁熻鍥捐〃锛岀粺璁$被鍨嬪垏鎹� - */ - handleChange = (val) => { - this.setState({selectFields: val}, () => { - let _element = document.getElementById(this.state.chartId) - if (_element) { - _element.innerHTML = '' - } - this.viewrender() - }) - } - refreshSearch = (list) => { this.setState({search: list}, () => { this.loadData() @@ -1397,7 +1332,7 @@ } render() { - const { config, loading, plot, empty, chartFields, selectFields, BID } = this.state + const { config, loading, empty, BID } = this.state return ( <div className="custom-line-chart-plot-box" style={config.style}> @@ -1433,17 +1368,6 @@ ) } })} - {plot.datatype === 'statistics' && chartFields.length > 0 ? <Select - mode="multiple" - showSearch - showArrow={true} - value={selectFields} - onChange={this.handleChange} - maxTagCount={0} - maxTagPlaceholder={(option) => <div className="type-label">{option.join('銆�')}</div>} - > - {chartFields.map((item, i) => <Select.Option key={i} value={item}>{item}</Select.Option>)} - </Select> : null} </div> <div className={'canvas' + (empty ? ' empty' : '')} id={this.state.chartId}></div> </div> -- Gitblit v1.8.0