From d59f518f466274b2caeb2e01c10c92deafe7c93b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 09 二月 2022 11:48:29 +0800
Subject: [PATCH] 2022-02-09
---
src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx | 216 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 191 insertions(+), 25 deletions(-)
diff --git a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
index 0d0c26d..eb1f155 100644
--- a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
+++ b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
@@ -1,6 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip, Icon } from 'antd'
+import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
import { formRule } from '@/utils/option.js'
import line1 from '@/assets/img/line1.png'
@@ -13,6 +14,14 @@
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.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 card6 from '@/assets/img/card6.png'
+import card7 from '@/assets/img/card7.png'
+import card8 from '@/assets/img/card8.png'
import './index.scss'
const syslegends = {
@@ -103,6 +112,48 @@
shape: 'ring'
}
}
+ ],
+ card: [
+ {
+ uuid: 'card1',
+ url: card1,
+ subelement: ['content']
+ },
+ {
+ uuid: 'card2',
+ url: card2,
+ subelement: ['content', 'avatar']
+ },
+ {
+ uuid: 'card6',
+ url: card6,
+ subelement: ['content', 'header']
+ },
+ {
+ uuid: 'card3',
+ url: card3,
+ subelement: ['content', 'avatar', 'header']
+ },
+ {
+ uuid: 'card8',
+ url: card8,
+ subelement: ['content', 'bottom']
+ },
+ {
+ uuid: 'card4',
+ url: card4,
+ subelement: ['content', 'avatar', 'bottom']
+ },
+ {
+ uuid: 'card7',
+ url: card7,
+ subelement: ['content', 'header', 'bottom']
+ },
+ {
+ uuid: 'card5',
+ url: card5,
+ subelement: ['content', 'avatar', 'header', 'bottom']
+ }
]
}
@@ -118,15 +169,25 @@
state = {
formlist: null,
legends: null,
+ columns: null,
selectlegend: null
}
UNSAFE_componentWillMount () {
const { card } = this.props
+ let formlist = JSON.parse(JSON.stringify(this.props.formlist))
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]
@@ -135,11 +196,38 @@
if (!_selectlegend) {
_selectlegend = _legends[0]
}
+ } else if (_type === 'card') {
+ _legends = syslegends.card
+
+ if (card.subelement) {
+ _selectlegend = _legends.filter(item => JSON.stringify(item.subelement) === JSON.stringify(card.subelement))[0]
+ } else {
+ _selectlegend = _legends[0]
+ }
}
this.setState({
legends: _legends,
- selectlegend: _selectlegend
+ columns: _columns,
+ selectlegend: _selectlegend,
+ formlist: formlist.map(item => {
+ if (item.key === 'actions' && ['table'].includes(_type)) { // 鎸夐挳缁�
+ item.hidden = true
+ } else if (item.key === 'height' && ['table', 'card'].includes(_type)) {
+ item.hidden = true
+ } else if (item.key === 'cardWidth' && _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 === 'extraAction') {
+ item.hidden = _type !== 'card'
+ } else if (item.key === 'bgfield') {
+ item.hidden = _type !== 'card'
+ }
+ return item
+ })
})
}
@@ -150,7 +238,7 @@
try {
let _form = document.getElementById('title')
_form.select()
- } catch {
+ } catch (e) {
console.warn('琛ㄥ崟focus澶辫触锛�')
}
}
@@ -165,10 +253,30 @@
}
typeChange = (key, value) => {
+ 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 === 'actions' && ['table'].includes(value)) { // 鎸夐挳缁�
+ item.hidden = true
+ } else if (item.key === 'height' && ['table', 'card'].includes(value)) {
+ item.hidden = true
+ } else if (item.key === 'cardWidth' && 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 === 'extraAction') {
+ item.hidden = value !== 'card'
+ } else if (item.key === 'bgfield') {
+ item.hidden = value !== 'card'
+ }
+ return item
+ })
})
}
}
@@ -182,7 +290,8 @@
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') { // 鏂囨湰鎼滅储
@@ -190,7 +299,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -215,7 +324,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -234,7 +343,12 @@
} else if (item.type === 'select') { // 涓嬫媺鎼滅储
fields.push(
<Col span={12} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
+ <QuestionCircleOutlined className="mk-form-tip" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.key, {
initialValue: item.initVal || '',
rules: [
@@ -264,7 +378,12 @@
} else if (item.type === 'radio') {
fields.push(
<Col span={12} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
+ <QuestionCircleOutlined className="mk-form-tip" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.key, {
initialValue: item.initVal,
rules: [
@@ -274,7 +393,7 @@
}
]
})(
- <Radio.Group>
+ <Radio.Group disabled={item.readonly}>
{
item.options.map(option => {
return (
@@ -290,7 +409,12 @@
} else if (item.type === 'multiselect') { // 澶氶��
fields.push(
<Col span={12} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
+ <QuestionCircleOutlined className="mk-form-tip" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.key, {
initialValue: item.initVal || []
})(
@@ -313,7 +437,7 @@
}
handleConfirm = () => {
- const { selectlegend } = this.state
+ const { selectlegend, columns } = this.state
// 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
@@ -324,21 +448,63 @@
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 === 'pie') {
+ 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') {
+ if (selectlegend) {
+ result.subelement = selectlegend.subelement
+ }
- if (selectlegend) {
- result.modelId = selectlegend.uuid
- }
+ if (!result.details) {
+ result.details = [
+ {elemType: 'detail', fontWeight: 'normal', fontSize: 14, width: 100, height: 1, uuid: 'cardtitle', content: 'Card content', datatype: 'static', align: 'left'},
+ {elemType: 'detail', fontWeight: 'normal', fontSize: 14, width: 100, height: 1, uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
+ ]
+ result.bottom = {
+ elemType: 'bottom',
+ show: 'icon',
+ actions: []
+ }
+ result.header = {
+ elemType: 'header',
+ content: 'Card title',
+ datatype: 'static',
+ show: 'icon',
+ actions: []
+ }
+ result.avatar = {
+ elemType: 'avatar',
+ content: '',
+ type: 'picture',
+ field: '',
+ size: 14,
+ width: 32,
+ radius: 'true',
+ display: 'inline'
+ }
+ }
- 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.bgfield) {
+ result.background = columns.filter(col => col.value === result.bgfield)[0].background
+ } else {
+ result.background = ''
+ }
}
result.icon = icons[result.chartType]
@@ -364,11 +530,11 @@
}
}
return (
- <Form {...formItemLayout} className="chart-edit-form" id="chartwinter">
+ <Form {...formItemLayout} className="chart-edit-form mingke-table" id="chartwinter">
<Row gutter={24}>{this.getFields()}</Row>
{legends ? <Row gutter={24} className="chart-model-image">
{legends.map(item => <Col span={6} key={item.uuid}>
- <img onClick={() => this.changeSelectLegend(item)} src={item.url} className={selectlegend.uuid === item.uuid ? 'active' : ''} alt=""/>
+ <img onClick={() => this.changeSelectLegend(item)} src={item.url} className={selectlegend && selectlegend.uuid === item.uuid ? 'active' : ''} alt=""/>
</Col>)}
</Row> : null}
</Form>
--
Gitblit v1.8.0