import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Drawer, Form, Button, Col, Row, Select, Radio, Tooltip, Input, InputNumber, Cascader } from 'antd'
|
import { QuestionCircleOutlined, RightOutlined, EditOutlined, LeftOutlined } from '@ant-design/icons'
|
|
import { getChartOptionForm } from '@/templates/zshare/formconfig'
|
import { minkeColorSystem, colorTransform } from '@/utils/option.js'
|
import './index.scss'
|
|
class LineChartDrawerForm extends Component {
|
static propTpyes = {
|
plot: PropTypes.object,
|
config: PropTypes.object,
|
plotchange: PropTypes.func
|
}
|
|
state = {
|
view: 'normal',
|
visible: false,
|
plot: null,
|
formlist: null,
|
datatype: null,
|
fieldName: null,
|
colorOptions: fromJS(minkeColorSystem).toJS().map(option => {
|
option.children = option.children.map(cell => {
|
let _cell = {}
|
_cell.label = <div className={'background ' + cell.value}>{cell.value}</div>
|
_cell.value = colorTransform[cell.value]
|
|
return _cell
|
})
|
return option
|
}),
|
shapeOptions: [
|
{
|
value: 'line',
|
label: '折线',
|
children: [
|
{ value: 'smooth', label: 'smooth' },
|
{ value: 'line', label: 'line' },
|
{ value: 'dot', label: 'dot' },
|
{ value: 'dash', label: 'dash' },
|
{ value: 'hv', label: 'hv' },
|
{ value: 'vh', label: 'vh' },
|
{ value: 'hvh', label: 'hvh' },
|
{ value: 'vhv', label: 'vhv' }
|
]
|
},
|
{
|
value: 'bar',
|
label: '柱形',
|
children: [
|
{ value: 'rect', label: 'rect' },
|
{ value: 'hollow-rect', label: 'hollow-rect' },
|
{ value: 'line', label: 'line' },
|
{ value: 'tick', label: 'tick' },
|
{ value: 'funnel', label: 'funnel' },
|
{ value: 'pyramid', label: 'pyramid' }
|
],
|
}
|
]
|
}
|
|
showDrawer = () => {
|
const { config, plot } = this.props
|
|
let datatype = null
|
if (['line', 'bar'].includes(plot.chartType)) {
|
datatype = plot.datatype || 'query'
|
}
|
|
let fieldName = {}
|
config.columns.forEach(col => {
|
if (col.field) {
|
fieldName[col.field] = col.label
|
}
|
})
|
|
if (plot.correction) {
|
delete plot.correction // 数据修正（已弃用）
|
plot.barSize = 35
|
}
|
|
this.setState({
|
visible: true,
|
view: 'normal',
|
datatype: datatype,
|
fieldName: fieldName,
|
enabled: plot.enabled || 'false',
|
plot: fromJS(plot).toJS(),
|
formlist: getChartOptionForm(plot, config.columns, config.setting)
|
})
|
}
|
|
radioChange = (e, key) => {
|
const { formlist } = this.state
|
let val = e.target.value
|
|
if (key === 'datatype') {
|
this.setState({
|
datatype: val,
|
formlist: formlist.map(item => {
|
if (['Yaxis'].includes(item.key)) {
|
item.hidden = val === 'statistics'
|
} else if (['InfoType', 'InfoValue', 'InfoDefNumber'].includes(item.key)) {
|
item.hidden = val !== 'statistics'
|
}
|
return item
|
})
|
})
|
}
|
}
|
|
getFields() {
|
const { formlist } = this.state
|
const { getFieldDecorator } = this.props.form
|
const fields = []
|
|
if (!formlist) {
|
return fields
|
}
|
|
formlist.forEach((item, index) => {
|
if (item.hidden || item.forbid) return
|
|
if (item.type === 'text') {
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: '请输入' + item.label + '!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" disabled={item.readonly}/>)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'number') {
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: '请输入' + item.label + '!'
|
}
|
]
|
})(<InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'select') { // 下拉
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: '请选择' + item.label + '!'
|
}
|
]
|
})(
|
<Select mode={item.multi ? 'multiple' : ''}>
|
{item.options.map((option, index) =>
|
<Select.Option key={index} value={option.field}>
|
{option.label}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'radio') {
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: '请选择' + item.label + '!'
|
}
|
]
|
})(
|
<Radio.Group disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}>
|
{item.options.map(option => {
|
return (
|
<Radio key={option.value} value={option.value}>{option.text}</Radio>
|
)
|
})}
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
}
|
})
|
return fields
|
}
|
|
getCustomFields = () => {
|
const { getFieldDecorator } = this.props.form
|
const { plot, fieldName, enabled, colorOptions, shapeOptions } = this.state
|
const fields = []
|
|
if (!plot.customs) return null
|
|
fields.push(<Col span={12} key="enabled">
|
<Form.Item label="是否启用" style={{marginBottom: 10}}>
|
{getFieldDecorator('enabled', {
|
initialValue: plot.enabled || 'false'
|
})(
|
<Radio.Group onChange={this.enabledChange}>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>)
|
|
plot.customs.forEach((item, i) => {
|
fields.push(<Col span={24} key={'field' + i}>
|
<p className="field-title">{fieldName[item.field]}</p>
|
</Col>)
|
fields.push(<Col span={12} key={'shape' + i}>
|
<Form.Item label="形状">
|
{getFieldDecorator(item.field + '$shape', {
|
initialValue: item.$shape,
|
rules: [
|
{
|
required: enabled === 'true',
|
message: '请选择形状!'
|
}
|
]
|
})(
|
<Cascader
|
disabled={enabled === 'false'}
|
options={shapeOptions}
|
placeholder=""
|
displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + ' / ' + selectedOptions[1].value : ''}
|
/>
|
)}
|
</Form.Item>
|
</Col>)
|
fields.push(<Col span={12} key={'color' + i}>
|
<Form.Item label="颜色">
|
{getFieldDecorator(item.field + '$color', {
|
initialValue: item.$color,
|
rules: [
|
{
|
required: enabled === 'true',
|
message: '请选择颜色!'
|
}
|
]
|
})(
|
<Cascader
|
disabled={enabled === 'false'}
|
options={colorOptions}
|
placeholder=""
|
getPopupContainer={() => document.getElementById('chart-custom-drawer-form')}
|
displayRender={(label, selectedOptions) => selectedOptions[0] ? <div style={{background: selectedOptions[1].value, width: '20px', height: '20px'}}></div> : ''}
|
/>
|
)}
|
</Form.Item>
|
</Col>)
|
fields.push(<Col span={12} key={'axis' + i}>
|
<Form.Item label="坐标轴">
|
{getFieldDecorator(item.field + '$axis', {
|
initialValue: item.axis
|
})(
|
<Radio.Group disabled={enabled === 'false'} onChange={this.axisChange}>
|
<Radio value="left">左侧</Radio>
|
<Radio value="right">右侧</Radio>
|
<Radio value="unset">不显示</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>)
|
fields.push(<Col span={12} key={'label' + i}>
|
<Form.Item label="标注-值">
|
{getFieldDecorator(item.field + '$label', {
|
initialValue: item.label
|
})(
|
<Radio.Group disabled={enabled === 'false'}>
|
<Radio value="true">显示</Radio>
|
<Radio value="false">隐藏</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>)
|
})
|
|
return fields
|
}
|
|
axisChange = (e) => {
|
const { plot } = this.state
|
let val = e.target.value
|
let fieldvalue = {}
|
|
plot.customs.forEach(item => {
|
if (this.props.form.getFieldValue(item.field + '$axis') === val) {
|
fieldvalue[item.field + '$axis'] = 'unset'
|
}
|
})
|
|
this.props.form.setFieldsValue(fieldvalue)
|
}
|
|
enabledChange = (e) => {
|
let val = e.target.value
|
|
this.setState({enabled: val})
|
}
|
|
onSubmit = () => {
|
const { plot, view, datatype } = this.state
|
|
if (view !== 'custom') {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let _plot = {...plot, ...values}
|
|
if (datatype === 'query') {
|
if (_plot.enabled === 'true') {
|
if (_plot.customs.map(_cell => _cell.field).sort().toString() !== _plot.Yaxis.sort().toString()) {
|
_plot.customs = null
|
_plot.enabled = 'false'
|
}
|
}
|
} else {
|
_plot.customs = null
|
_plot.enabled = 'false'
|
}
|
|
this.setState({
|
plot: _plot,
|
visible: false
|
})
|
|
this.props.plotchange(_plot)
|
}
|
})
|
} else {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let _plot = {...plot, enabled: values.enabled}
|
|
if (_plot.enabled === 'true') {
|
_plot.customs = _plot.Yaxis.map(field => {
|
let _item = {field: field}
|
|
_item.$shape = values[field + '$shape']
|
_item.chartType = _item.$shape[0]
|
_item.shape = _item.$shape[1]
|
|
_item.$color = values[field + '$color']
|
_item.color = _item.$color[1]
|
|
_item.axis = values[field + '$axis']
|
|
_item.label = values[field + '$label']
|
|
return _item
|
})
|
} else {
|
_plot.customs = null
|
}
|
|
this.setState({
|
plot: _plot,
|
visible: false
|
})
|
|
this.props.plotchange(_plot)
|
}
|
})
|
}
|
}
|
|
changeView = () => {
|
const { config } = this.props
|
const { plot, view } = this.state
|
let _view = view === 'normal' ? 'custom' : 'normal'
|
|
if (_view === 'custom') {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let _plot = {...plot, ...values}
|
|
if (_plot.enabled !== 'true' || _plot.customs.map(_cell => _cell.field).sort().toString() !== _plot.Yaxis.sort().toString()) {
|
_plot.enabled = 'false'
|
_plot.customs = _plot.Yaxis.map((field, i) => {
|
let _item = {field: field}
|
_item.$shape = [_plot.chartType, _plot.shape]
|
_item.$color = []
|
_item.axis = i === 0 ? 'left' : 'unset'
|
_item.label = _plot.label
|
|
return _item
|
})
|
}
|
|
this.setState({
|
enabled: _plot.enabled || 'false',
|
plot: _plot,
|
view: _view
|
})
|
}
|
})
|
} else {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let _values = {enabled: values.enabled}
|
|
if (values.enabled === 'true') {
|
let _customs = []
|
plot.Yaxis.forEach(field => {
|
let _item = {field: field}
|
|
_item.$shape = values[field + '$shape']
|
_item.chartType = _item.$shape[0]
|
_item.shape = _item.$shape[1]
|
|
_item.$color = values[field + '$color']
|
_item.color = _item.$color[1]
|
|
_item.axis = values[field + '$axis']
|
_item.label = values[field + '$label']
|
|
_customs.push(_item)
|
})
|
|
_values.customs = _customs
|
} else {
|
_values.customs = null
|
}
|
|
let _plot = {...plot, ..._values}
|
|
this.setState({
|
plot: _plot,
|
view: _view,
|
formlist: getChartOptionForm(_plot, config.columns, config.setting)
|
})
|
}
|
})
|
}
|
}
|
|
render() {
|
const { view, datatype } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 18 }
|
}
|
}
|
|
return (
|
<div className="line-chart-drawer-form">
|
<EditOutlined onClick={this.showDrawer} />
|
<Drawer
|
title="图表编辑"
|
className="chart-drawer-form"
|
width={720}
|
onClose={() => this.setState({ visible: false })}
|
visible={this.state.visible}
|
bodyStyle={{ paddingBottom: 80 }}
|
>
|
{view !== 'custom' ? <Form {...formItemLayout} className="base-setting">
|
<Row gutter={16}>{this.getFields()}</Row>
|
{datatype === 'query' ? <Row gutter={16}>
|
<Button onClick={this.changeView} style={{border: 0, boxShadow: 'unset',float: 'right', color: '#1890ff', marginRight: 12, cursor: 'pointer'}}>自定义设置<RightOutlined style={{marginLeft: 5}} /></Button>
|
</Row> : null}
|
</Form> : null}
|
{view === 'custom' ? <Form {...formItemLayout} id="chart-custom-drawer-form" className="mingke-table">
|
<Row gutter={16} style={{minHeight: 'calc(100vh - 180px)'}}>{this.getCustomFields()}</Row>
|
<Row gutter={16}>
|
<Button onClick={this.changeView} style={{border: 0, boxShadow: 'unset', color: '#1890ff', marginRight: 12, cursor: 'pointer'}}><LeftOutlined style={{marginRight: 5}} />基本设置</Button>
|
</Row>
|
</Form> : null}
|
<div
|
style={{
|
position: 'absolute',
|
right: 0,
|
bottom: 0,
|
width: '100%',
|
borderTop: '1px solid #e9e9e9',
|
padding: '10px 16px',
|
background: '#fff',
|
textAlign: 'right',
|
}}
|
>
|
<Button onClick={() => this.setState({ visible: false })} style={{ marginRight: 8 }}>
|
取消
|
</Button>
|
<Button onClick={() => this.onSubmit()} type="primary">
|
提交
|
</Button>
|
</div>
|
</Drawer>
|
</div>
|
);
|
}
|
}
|
|
export default Form.create()(LineChartDrawerForm)
|
