From eb31b84962c192de57abbb473cb4733a09bf4363 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 14 五月 2020 18:09:40 +0800 Subject: [PATCH] 2020-05-14 --- src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx | 110 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 94 insertions(+), 16 deletions(-) diff --git a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx index 0d0c26d..5c9e405 100644 --- a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx +++ b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx @@ -103,6 +103,18 @@ shape: 'ring' } } + ], + card: [ + { + uuid: 'card1', + url: pie1, + type: 'card1' + }, + { + uuid: 'card2', + url: pie2, + type: 'card2' + } ] } @@ -123,6 +135,7 @@ UNSAFE_componentWillMount () { const { card } = this.props + let formlist = JSON.parse(JSON.stringify(this.props.formlist)) let _type = card.chartType || 'line' let _legends = null @@ -135,11 +148,30 @@ if (!_selectlegend) { _selectlegend = _legends[0] } + } else if (_type === 'card') { + _legends = syslegends[_type] + _selectlegend = _legends.filter(item => item.uuid === card.cardType)[0] + + if (!_selectlegend) { + _selectlegend = _legends[0] + } } this.setState({ legends: _legends, - selectlegend: _selectlegend + selectlegend: _selectlegend, + formlist: formlist.map(item => { + if (item.key === 'height' && ['table', 'card'].includes(_type)) { + item.hidden = true + } else if (item.key === 'widthType' && _type === 'card') { + item.hidden = false + } else if (item.key === 'cardWidth' && _type === 'card') { + item.hidden = false + } else if (item.key === 'over' && _type === 'card') { + item.hidden = false + } + return item + }) }) } @@ -165,10 +197,44 @@ } typeChange = (key, value) => { + const { card } = this.props + let formlist = JSON.parse(JSON.stringify(this.props.formlist)) + if (key === 'chartType') { this.setState({ legends: syslegends[value] || null, - selectlegend: syslegends[value][0] + selectlegend: syslegends[value] ? syslegends[value][0] : null, + formlist: formlist.map(item => { + if (item.key === 'height' && ['table', 'card'].includes(value)) { + item.hidden = true + } else if (item.key === 'widthType' && value === 'card') { + item.hidden = false + } else if (item.key === 'cardWidth' && value === 'card') { + item.min = card.widthType === 'absolute' ? 50 : 1 + item.max = card.widthType === 'absolute' ? 1000 : 24 + item.hidden = false + } else if (item.key === 'over' && value === 'card') { + item.hidden = false + } + return item + }) + }) + } + } + + radioChange = (val, key) => { + const { formlist } = this.state + + if (key === 'widthType') { + this.setState({ + formlist: formlist.map(item => { + if (item.key === 'cardWidth') { + item.min = val === 'absolute' ? 50 : 1 + item.max = val === 'absolute' ? 1000 : 24 + } + + return item + }) }) } } @@ -182,7 +248,7 @@ getFields() { const { getFieldDecorator } = this.props.form const fields = [] - this.props.formlist.forEach((item, index) => { + this.state.formlist.forEach((item, index) => { if (item.hidden) return if (item.type === 'text') { // 鏂囨湰鎼滅储 @@ -274,7 +340,7 @@ } ] })( - <Radio.Group> + <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)}> { item.options.map(option => { return ( @@ -324,21 +390,33 @@ table: 'table', line: 'line-chart', bar: 'bar-chart', - pie: 'pie-chart' + pie: 'pie-chart', + card: 'credit-card' } - if (selectlegend && this.props.card.modelId !== selectlegend.uuid) { - result = {...result, ...selectlegend.options} - } + if (result.chartType === 'line' || result.chartType === 'bar' || result.chartType === 'line') { + if (selectlegend && this.props.card.modelId !== selectlegend.uuid) { + result = {...result, ...selectlegend.options} + } + + if (selectlegend) { + result.modelId = selectlegend.uuid + } + + if (result.chartType !== 'pie' && result.Yaxis && typeof(result.Yaxis) === 'string') { + result.Yaxis = [result.Yaxis] + } else if (result.chartType === 'pie' && result.Yaxis && typeof(result.Yaxis) === 'object') { + result.Yaxis = result.Yaxis[0] || '' + } + } else if (result.chartType === 'card') { + result.cardType = selectlegend.type - if (selectlegend) { - result.modelId = selectlegend.uuid - } - - if (result.chartType !== 'pie' && result.Yaxis && typeof(result.Yaxis) === 'string') { - result.Yaxis = [result.Yaxis] - } else if (result.chartType === 'pie' && result.Yaxis && typeof(result.Yaxis) === 'object') { - result.Yaxis = result.Yaxis[0] || '' + if (!result.details) { + result.details = [ + {type: 'title', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'}, + {type: 'description', uuid: 'carddescription', content: 'This is the description', datatype: 'static', align: 'left'} + ] + } } result.icon = icons[result.chartType] -- Gitblit v1.8.0