import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, Form, Col, Radio, notification, Tabs, Button } from 'antd'
|
import { EditOutlined, PlusOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import { chartColors } from '@/utils/option.js'
|
import { getBaseForm, getOptionForm } from './formconfig'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
const ModalForm = asyncComponent(() => import('@/components/normalform/modalform'))
|
|
class LineChartDrawerForm extends Component {
|
static propTpyes = {
|
plot: PropTypes.object,
|
config: PropTypes.object,
|
plotchange: PropTypes.func
|
}
|
|
state = {
|
view: 'base',
|
visible: false,
|
datatype: '',
|
plot: null,
|
formlist: null,
|
baseFormlist: null,
|
fieldName: null,
|
colorColumns: [
|
{
|
title: '指标',
|
dataIndex: 'label',
|
editable: false,
|
width: '40%'
|
},
|
{
|
title: '颜色',
|
dataIndex: 'color',
|
inputType: 'color',
|
editable: true,
|
width: '40%',
|
render: (text, record) => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
],
|
barColorColumns: [
|
{
|
title: '颜色',
|
dataIndex: 'color',
|
inputType: 'color',
|
editable: true,
|
width: '70%',
|
render: (text, record) => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
],
|
rampColorColumns: [
|
{
|
title: '指标',
|
dataIndex: 'label',
|
editable: false,
|
width: '20%'
|
},
|
{
|
title: '颜色1',
|
dataIndex: 'color',
|
inputType: 'color',
|
editable: true,
|
width: '30%',
|
render: (text, record) => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
{
|
title: '颜色2',
|
dataIndex: 'color1',
|
inputType: 'color',
|
editable: true,
|
width: '30%',
|
render: (text, record) => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
],
|
statColorColumns: [
|
{
|
title: '指标',
|
dataIndex: 'type',
|
inputType: 'input',
|
editable: true,
|
width: '40%'
|
},
|
{
|
title: '颜色',
|
dataIndex: 'color',
|
inputType: 'color',
|
editable: true,
|
width: '40%',
|
render: (text, record) => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
],
|
rampStatColorColumns: [
|
{
|
title: '指标',
|
dataIndex: 'type',
|
inputType: 'input',
|
editable: true,
|
width: '20%'
|
},
|
{
|
title: '颜色1',
|
dataIndex: 'color',
|
inputType: 'color',
|
editable: true,
|
width: '30%',
|
render: (text, record) => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
{
|
title: '颜色2',
|
dataIndex: 'color1',
|
inputType: 'color',
|
editable: true,
|
width: '30%',
|
render: (text, record) => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
],
|
cusColumns: []
|
}
|
|
showDrawer = () => {
|
const { config } = this.props
|
|
let fieldName = {}
|
config.columns.forEach(col => {
|
if (col.field) {
|
fieldName[col.field] = col.label
|
}
|
})
|
|
let plot = fromJS(config.plot).toJS()
|
|
if (plot.datatype !== 'statistics') {
|
if (plot.colors) {
|
plot.colors = plot.colors.map(item => {
|
if (fieldName[item.type]) {
|
item.label = fieldName[item.type]
|
}
|
return item
|
})
|
}
|
if (plot.customs) {
|
plot.customs = plot.customs.map(item => {
|
if (fieldName[item.type]) {
|
item.name = fieldName[item.type]
|
}
|
return item
|
})
|
}
|
}
|
|
if (!plot.zoomYaxis && plot.customs) {
|
plot.customs.forEach(item => {
|
if (item.min || item.min === 0) {
|
plot.zoomYaxis = 'custom'
|
} else if (item.max || item.max === 0) {
|
plot.zoomYaxis = 'custom'
|
}
|
})
|
}
|
|
plot.zoomYaxis = plot.zoomYaxis || 'default'
|
|
this.setState({
|
visible: true,
|
view: 'base',
|
datatype: plot.datatype || 'query',
|
fieldName: fieldName,
|
plot: plot,
|
baseFormlist: getBaseForm(plot, config.columns),
|
formlist: getOptionForm(plot, config.columns),
|
cusColumns: this.getCusColumns(plot.zoomYaxis)
|
})
|
}
|
|
optionChange = (val, key) => {
|
let _plot = {...this.state.plot, [key]: val}
|
|
if (key === 'ramp' && val === 'true') {
|
_plot.colors = _plot.colors || []
|
_plot.colors = _plot.colors.map(item => {
|
item.color1 = item.color1 || item.color
|
return item
|
})
|
}
|
|
this.setState({plot: _plot}, () => {
|
if (key === 'zoomYaxis') {
|
this.setState({cusColumns: this.getCusColumns(val)})
|
}
|
})
|
}
|
|
getCusColumns = (zoomYaxis) => {
|
let cusColumns = [
|
{
|
title: '指标',
|
dataIndex: 'name',
|
editable: false,
|
width: '12%'
|
},
|
{
|
title: '形状',
|
dataIndex: 'shape',
|
inputType: 'cascader',
|
editable: true,
|
width: '12%',
|
render: (text, record) => {
|
return text.join(' / ').replace('line', '折线').replace('bar', '柱形')
|
},
|
options: [
|
{
|
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（金字塔）' }
|
],
|
}
|
]
|
},
|
{
|
title: '坐标轴',
|
dataIndex: 'axis',
|
inputType: 'select',
|
editable: true,
|
width: '12%',
|
options: [
|
{ value: 'true', text: '显示'},
|
{ value: 'false', text: '隐藏'}
|
],
|
render: (text, record) => {
|
let trans = {'true': '显示', 'false': '隐藏'}
|
return trans[text] || '隐藏'
|
}
|
},
|
{
|
title: '标注',
|
dataIndex: 'label',
|
inputType: 'select',
|
editable: true,
|
width: '12%',
|
options: [
|
{ value: 'true', text: '显示'},
|
{ value: 'false', text: '隐藏'}
|
],
|
render: (text, record) => {
|
let trans = {'true': '显示', 'false': '隐藏'}
|
return trans[text] || ''
|
}
|
},
|
{
|
title: '标题',
|
dataIndex: 'title',
|
inputType: 'select',
|
editable: true,
|
required: false,
|
width: '12%',
|
options: [
|
{ value: 'true', text: '显示'},
|
{ value: 'false', text: '隐藏'}
|
],
|
render: (text, record) => {
|
let trans = {'true': '显示', 'false': '隐藏'}
|
return trans[text] || ''
|
}
|
},
|
{
|
title: '显示（值/%）',
|
dataIndex: 'show',
|
inputType: 'select',
|
editable: true,
|
required: false,
|
width: '12%',
|
options: [
|
{ value: 'value', text: '数值'},
|
{ value: 'percent', text: '百分比'},
|
{ value: 'thdSeparator', text: '千分位'}
|
],
|
render: (text, record) => {
|
let trans = {value: '数值', percent: '百分比', thdSeparator: '千分位'}
|
return trans[text] || ''
|
}
|
},
|
{
|
title: '最小值',
|
dataIndex: 'min',
|
inputType: 'number',
|
editable: true,
|
max: 9999999999,
|
required: false,
|
width: '12%'
|
},
|
{
|
title: '最大值',
|
dataIndex: 'max',
|
inputType: 'number',
|
editable: true,
|
max: 9999999999,
|
required: false,
|
width: '12%'
|
},
|
]
|
|
if (zoomYaxis !== 'custom') {
|
cusColumns.pop()
|
cusColumns.pop()
|
cusColumns.forEach(item => {
|
item.width = '16%'
|
})
|
}
|
|
return cusColumns
|
}
|
|
onSubmit = () => {
|
const { config } = this.props
|
const { plot, view } = this.state
|
|
if (view === 'normal') {
|
this.normalRef.handleConfirm().then(values => {
|
let _plot = {...plot, ...values}
|
|
if (_plot.datatype !== plot.datatype) {
|
_plot.colors = null
|
}
|
this.resetPlot(_plot)
|
|
this.setState({
|
plot: _plot,
|
visible: false
|
})
|
|
this.props.plotchange({...config, plot: _plot})
|
})
|
} else if (view === 'base') {
|
this.baseRef.handleConfirm().then(res => {
|
let _plot = {...plot, ...res}
|
|
this.resetBase(_plot)
|
|
this.setState({
|
plot: _plot,
|
visible: false
|
})
|
|
this.props.plotchange({...config, plot: _plot})
|
})
|
} else {
|
this.setState({
|
visible: false
|
})
|
this.props.plotchange({...config, plot})
|
}
|
}
|
|
changeTab = (tab) => {
|
const { plot, view } = this.state
|
|
if (view === 'normal') {
|
this.normalRef.handleConfirm().then(values => {
|
let _plot = {...plot, ...values}
|
|
if (_plot.datatype !== plot.datatype) {
|
_plot.colors = null
|
}
|
|
this.resetPlot(_plot)
|
|
this.setState({
|
plot: _plot,
|
view: tab
|
})
|
})
|
} else if (view === 'base') {
|
this.baseRef.handleConfirm().then(res => {
|
let _plot = {...plot, ...res}
|
|
this.resetBase(_plot)
|
|
if (!plot.Xaxis && (tab === 'color' || tab === 'custom')) {
|
this.setState({
|
plot: _plot,
|
view: 'normal'
|
})
|
notification.warning({
|
top: 92,
|
message: '请添加图表设置。',
|
duration: 3
|
})
|
return
|
}
|
|
this.setState({
|
plot: _plot,
|
view: tab
|
})
|
})
|
} else {
|
this.setState({
|
view: tab
|
})
|
}
|
}
|
|
resetBase = (_plot) => {
|
if (_plot.click === 'menu') {
|
delete _plot.menus
|
delete _plot.menuType
|
} else if (_plot.click === 'menus') {
|
delete _plot.menu
|
} else {
|
delete _plot.menus
|
delete _plot.menu
|
delete _plot.menuType
|
}
|
|
delete _plot.MenuID
|
delete _plot.MenuName
|
delete _plot.MenuNo
|
delete _plot.tabType
|
|
if (_plot.click === 'menu' && sessionStorage.getItem('appType') === '' && _plot.menu) {
|
let list = null
|
try {
|
list = JSON.parse(sessionStorage.getItem('thdMenuList')) || []
|
} catch (e) {
|
list = []
|
}
|
|
let id = _plot.menu[_plot.menu.length - 1]
|
|
list.forEach(item => {
|
if (item.MenuID === id) {
|
_plot.MenuID = id
|
_plot.MenuName = item.MenuName
|
_plot.MenuNo = item.MenuNo
|
_plot.tabType = item.type
|
}
|
})
|
}
|
}
|
|
resetPlot = (_plot) => {
|
const { config } = this.props
|
|
if (_plot.datatype === 'statistics') {
|
_plot.enabled = 'false'
|
_plot.customs = []
|
_plot.colors = _plot.colors || []
|
delete _plot.Yaxis
|
} else if (_plot.Yaxis) {
|
delete _plot.InfoType
|
delete _plot.InfoValue
|
|
let yaxis = JSON.parse(JSON.stringify(_plot.Yaxis))
|
let caxis = _plot.customs ? _plot.customs.map(m => m.type) : []
|
yaxis.sort()
|
caxis.sort()
|
|
if (JSON.stringify(yaxis) !== JSON.stringify(caxis)) {
|
let labels = {}
|
config.columns.forEach(col => {
|
labels[col.field] = col.label
|
})
|
|
let cus = {}
|
_plot.customs && _plot.customs.forEach(m => {
|
cus[m.type] = m
|
})
|
_plot.customs = _plot.Yaxis.map((item, i) => {
|
if (cus[item]) return cus[item]
|
|
return {
|
uuid: Utils.getuuid(),
|
type: item,
|
name: labels[item] || item,
|
axis: i === 0 ? 'true' : 'false',
|
label: _plot.label === 'false' ? 'false' : true,
|
title: 'true',
|
shape: _plot.chartType === 'bar' && i === 0 ? ['bar', 'rect'] : ['line', 'smooth']
|
}
|
})
|
|
let cusColor = {}
|
let limit = chartColors.length
|
|
_plot.colors && _plot.colors.forEach(m => {
|
cusColor[m.type] = m
|
})
|
_plot.colors = _plot.Yaxis.map((item, i) => {
|
if (cusColor[item]) return cusColor[item]
|
|
return {
|
uuid: Utils.getuuid(),
|
type: item,
|
label: labels[item] || item,
|
color: chartColors[i % limit],
|
color1: chartColors[i % limit]
|
}
|
})
|
}
|
}
|
}
|
|
transVals = (values, key) => {
|
if (key !== 'datatype') return
|
|
this.setState({
|
datatype: values.datatype
|
})
|
}
|
|
addColor = () => {
|
let plot = fromJS(this.state.plot).toJS()
|
plot.colors = plot.colors || []
|
|
plot.colors.push({
|
uuid: Utils.getuuid(),
|
type: `指标${plot.colors.length}`,
|
color: 'rgb(91, 143, 249)',
|
color1: 'rgb(91, 143, 249)'
|
})
|
|
this.setState({plot})
|
}
|
|
addbarColor = () => {
|
let plot = fromJS(this.state.plot).toJS()
|
plot.barcolors = plot.barcolors || []
|
|
plot.barcolors.push({
|
uuid: Utils.getuuid(),
|
color: 'rgb(91, 143, 249)'
|
})
|
|
this.setState({plot})
|
}
|
|
changeColor = (colors) => {
|
const { plot } = this.state
|
|
this.setState({plot: {...plot, colors}})
|
}
|
|
changebarColor = (colors) => {
|
const { plot } = this.state
|
|
this.setState({plot: {...plot, barcolors: colors}})
|
}
|
|
changeCustom = (customs) => {
|
const { plot } = this.state
|
|
this.setState({plot: {...plot, customs}})
|
}
|
|
render() {
|
const { config } = this.props
|
const { view, visible, datatype, plot, colorColumns, barColorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist, formlist } = 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 title="编辑" onClick={this.showDrawer}/>
|
<Modal
|
wrapClassName="mk-pop-modal"
|
visible={visible}
|
width={1100}
|
maskClosable={false}
|
onOk={this.onSubmit}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
{config.name ? <div className="mk-com-name">{config.name} - 编辑</div> : null}
|
<Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}>
|
<TabPane tab="组件设置" key="base">
|
<ModalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
|
</TabPane>
|
<TabPane tab="图表设置" key="normal">
|
<ModalForm formlist={formlist} inputSubmit={this.onSubmit} transVals={this.transVals} wrappedComponentRef={(inst) => this.normalRef = inst}/>
|
</TabPane>
|
{plot ? <TabPane tab="颜色设置" key="color">
|
<div>
|
<Col span={8} style={{height: '40px', top: '-5px', zIndex: 1}}>
|
<Form {...formItemLayout}>
|
<Form.Item label="渐变色" style={{marginBottom: 10}}>
|
<Radio.Group value={plot.ramp || 'false'} onChange={(e) => this.optionChange(e.target.value, 'ramp')}>
|
<Radio value="false">不使用</Radio>
|
<Radio value="true">使用</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Form>
|
</Col>
|
{plot.chartType === 'line' ? <Col span={8} style={{height: '40px', top: '-5px', zIndex: 1}}>
|
<Form {...formItemLayout}>
|
<Form.Item label="渐变方向" style={{marginBottom: 10}}>
|
<Radio.Group value={plot.rampDirection || 'horizontal'} onChange={(e) => this.optionChange(e.target.value, 'rampDirection')}>
|
<Radio value="horizontal">水平</Radio>
|
<Radio value="vertical">垂直</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Form>
|
</Col> : null}
|
{datatype === 'statistics' ? <Button className="color-add mk-green" onClick={this.addColor}>添加</Button> : null}
|
{datatype === 'statistics' ? <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={plot.ramp ==='true' ? rampStatColorColumns : statColorColumns} onChange={this.changeColor}/> : null}
|
{datatype !== 'statistics' ? <EditTable actions={['edit']} data={plot.colors || []} columns={plot.ramp ==='true' ? rampColorColumns : colorColumns} onChange={this.changeColor}/> : null}
|
{plot.chartType === 'bar' && plot.datatype === 'query' ? <div className="mk-bar-colors">
|
<p>柱形颜色：可根据柱图序号设置颜色。注：使用自定义图形设置或多根柱图时无效。</p>
|
<div className="bar-color-add"><PlusOutlined onClick={this.addbarColor}/></div>
|
<EditTable actions={['edit', 'move', 'del']} data={plot.barcolors || []} columns={barColorColumns} onChange={this.changebarColor}/>
|
</div> : null}
|
</div>
|
</TabPane> : null}
|
{plot ? <TabPane tab="自定义图形设置" disabled={datatype === 'statistics'} key="custom">
|
<Col span={8}>
|
<Form {...formItemLayout}>
|
<Form.Item label="是否启用" style={{marginBottom: 10}}>
|
<Radio.Group value={plot.enabled || 'false'} onChange={(e) => this.optionChange(e.target.value, 'enabled')}>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Form>
|
</Col>
|
<Col span={8}>
|
<Form {...formItemLayout}>
|
<Form.Item label="多柱排列" style={{marginBottom: 10}}>
|
<Radio.Group value={plot.mutilBar || 'dodge'} onChange={(e) => this.optionChange(e.target.value, 'mutilBar')}>
|
<Radio value="dodge">分组</Radio>
|
<Radio value="stack">堆叠</Radio>
|
<Radio value="overlap">重叠</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Form>
|
</Col>
|
<Col span={8}>
|
<Form {...formItemLayout}>
|
<Form.Item label="Y轴区间" style={{marginBottom: 10}}>
|
<Radio.Group value={plot.zoomYaxis} onChange={(e) => this.optionChange(e.target.value, 'zoomYaxis')}>
|
<Radio value="default">默认</Radio>
|
<Radio value="custom">自定义</Radio>
|
<Radio value="adjust">自适应</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Form>
|
</Col>
|
<Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>注：使用自定义设置时，显示的坐标轴第一个在左侧，第二个在右侧，多余的不生效。</Col>
|
<EditTable indexShow={false} actions={['edit', 'move']} data={plot.customs || []} columns={cusColumns} onChange={this.changeCustom}/>
|
</TabPane> : null}
|
</Tabs>
|
</Modal>
|
</div>
|
);
|
}
|
}
|
|
export default Form.create()(LineChartDrawerForm)
|
