From 523cec6c87d88b43954a4409a8dfde6aade095a1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 22 五月 2020 11:02:10 +0800
Subject: [PATCH] 2020-05-22
---
src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx | 81 ++++++++++++++++++++++++++++++++++++----
1 files changed, 72 insertions(+), 9 deletions(-)
diff --git a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
index 47f4fce..216fc23 100644
--- a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
+++ b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
@@ -13,9 +13,11 @@
import bar4 from '@/assets/img/bar4.png'
import pie1 from '@/assets/img/pie1.png'
import pie2 from '@/assets/img/pie2.png'
-import card1 from '@/assets/img/card1.jpg'
-import card2 from '@/assets/img/card2.jpg'
-import card3 from '@/assets/img/card3.jpg'
+import card1 from '@/assets/img/card1.png'
+import card2 from '@/assets/img/card2.png'
+import card3 from '@/assets/img/card3.png'
+import card4 from '@/assets/img/card4.png'
+import card5 from '@/assets/img/card5.png'
import './index.scss'
const syslegends = {
@@ -121,6 +123,16 @@
{
uuid: 'card3',
url: card3,
+ subelement: ['content', 'avatar', 'header']
+ },
+ {
+ uuid: 'card4',
+ url: card4,
+ subelement: ['content', 'avatar', 'bottom']
+ },
+ {
+ uuid: 'card5',
+ url: card5,
subelement: ['content', 'avatar', 'header', 'bottom']
}
]
@@ -138,6 +150,7 @@
state = {
formlist: null,
legends: null,
+ columns: null,
selectlegend: null
}
@@ -148,6 +161,14 @@
let _type = card.chartType || 'line'
let _legends = null
let _selectlegend = null
+ let _columns = []
+
+ // 鑾峰彇鏍囪鍗＄墖鍒楋紝鐢ㄤ簬棰滆壊璧嬪��
+ formlist.forEach(item => {
+ if (item.key === 'bgfield') {
+ _columns = item.options
+ }
+ })
if (_type === 'line' || _type === 'bar' || _type === 'line') {
_legends = syslegends[_type]
@@ -161,15 +182,14 @@
if (card.subelement) {
_selectlegend = _legends.filter(item => JSON.stringify(item.subelement) === JSON.stringify(card.subelement))[0]
- }
-
- if (!_selectlegend) {
+ } else {
_selectlegend = _legends[0]
}
}
this.setState({
legends: _legends,
+ columns: _columns,
selectlegend: _selectlegend,
formlist: formlist.map(item => {
if (item.key === 'height' && ['table', 'card'].includes(_type)) {
@@ -179,6 +199,10 @@
} else if (item.key === 'cardWidth' && _type === 'card') {
item.hidden = false
} else if (item.key === 'over' && _type === 'card') {
+ item.hidden = false
+ } else if (item.key === 'border' && _type === 'card') {
+ item.hidden = false
+ } else if (item.key === 'switch' && _type === 'card') {
item.hidden = false
} else if (item.key === 'bgfield') {
item.hidden = _type !== 'card'
@@ -228,6 +252,10 @@
item.hidden = false
} else if (item.key === 'over' && value === 'card') {
item.hidden = false
+ } else if (item.key === 'border' && value === 'card') {
+ item.hidden = false
+ } else if (item.key === 'switch' && value === 'card') {
+ item.hidden = false
} else if (item.key === 'bgfield') {
item.hidden = value !== 'card'
}
@@ -246,6 +274,32 @@
if (item.key === 'cardWidth') {
item.min = val === 'absolute' ? 50 : 1
item.max = val === 'absolute' ? 1000 : 24
+ }
+
+ return item
+ })
+ })
+ } else if (key === 'over' && val === 'roll') {
+ this.setState({
+ formlist: formlist.map(item => {
+ if (item.key === 'cardWidth') {
+ item.min = 50
+ item.max = 1000
+ } else if (item.key === 'widthType') {
+ item.readonly = true
+ }
+
+ return item
+ })
+ })
+ if (this.props.form.getFieldValue('widthType') !== undefined) {
+ this.props.form.setFieldsValue({widthType: 'absolute'})
+ }
+ } else if (key === 'over' && val === 'whole') {
+ this.setState({
+ formlist: formlist.map(item => {
+ if (item.key === 'widthType') {
+ item.readonly = false
}
return item
@@ -355,7 +409,7 @@
}
]
})(
- <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)}>
+ <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)} disabled={item.readonly}>
{
item.options.map(option => {
return (
@@ -394,7 +448,7 @@
}
handleConfirm = () => {
- const { selectlegend } = this.state
+ const { selectlegend, columns } = this.state
// 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
@@ -424,7 +478,9 @@
result.Yaxis = result.Yaxis[0] || ''
}
} else if (result.chartType === 'card') {
- result.subelement = selectlegend.subelement
+ if (selectlegend) {
+ result.subelement = selectlegend.subelement
+ }
if (!result.details) {
result.details = [
@@ -440,6 +496,7 @@
elemType: 'header',
content: 'Card title',
datatype: 'static',
+ show: 'icon',
actions: []
}
result.avatar = {
@@ -452,6 +509,12 @@
width: 32
}
}
+
+ if (result.bgfield) {
+ result.background = columns.filter(col => col.value === result.bgfield)[0].background
+ } else {
+ result.background = ''
+ }
}
result.icon = icons[result.chartType]
--
Gitblit v1.8.0