| | |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import { chartColors } from '@/utils/option.js' |
| | | import { getBarOrLineChartOptionForm } from './formconfig' |
| | | import { getBaseForm, getOptionForm } from './formconfig' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import ColorSketch from '@/mob/colorsketch' |
| | | import './index.scss' |
| | | |
| | | const { TabPane } = Tabs |
| | | const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) |
| | | const NormalForm = asyncComponent(() => import('@/menu/components/share/normalform')) |
| | | |
| | | class LineChartDrawerForm extends Component { |
| | | static propTpyes = { |
| | |
| | | datatype: '', |
| | | plot: null, |
| | | formlist: null, |
| | | baseFormlist: null, |
| | | fieldName: null, |
| | | colorColumns: [ |
| | | { |
| | |
| | | datatype: config.plot.datatype || 'query', |
| | | fieldName: fieldName, |
| | | plot: fromJS(config.plot).toJS(), |
| | | formlist: getBarOrLineChartOptionForm(config.plot, config.columns, sysRoles, MenuType) |
| | | baseFormlist: getBaseForm(config.plot, sysRoles, MenuType), |
| | | formlist: getOptionForm(config.plot, config.columns, MenuType) |
| | | }) |
| | | } |
| | | |
| | |
| | | message: this.props.dict['form.required.input'] + item.label + '!' |
| | | } |
| | | ] |
| | | })(<Input placeholder="" autoComplete="off" disabled={item.readonly}/>)} |
| | | })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.onSubmit}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | |
| | | message: this.props.dict['form.required.input'] + item.label + '!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={item.min} max={item.max} precision={item.decimal} />)} |
| | | })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.onSubmit}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | |
| | | |
| | | if (values.datatype === 'statistics' || values.datatype !== plot.datatype) { |
| | | _plot.enabled = 'false' |
| | | _plot.customs = [] |
| | | } else if (!values.Yaxis || !plot.Yaxis || !is(fromJS(values.Yaxis), fromJS(plot.Yaxis))) { |
| | | _plot.enabled = 'false' |
| | | _plot.customs = [] |
| | | _plot.colors = null |
| | | } |
| | | |
| | |
| | | |
| | | this.props.plotchange({...config, plot: _plot}) |
| | | } |
| | | }) |
| | | } else if (view === 'base') { |
| | | this.baseRef.handleConfirm().then(res => { |
| | | let _plot = {...plot, ...res} |
| | | |
| | | this.setState({ |
| | | plot: _plot, |
| | | visible: false |
| | | }) |
| | | |
| | | this.props.plotchange({...config, plot: _plot}) |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | |
| | | name: labels[item] || item, |
| | | axis: i === 0 ? 'true' : 'false', |
| | | label: 'false', |
| | | shape: _plot.chartType === 'bar' ? ['bar', 'rect'] : ['line', 'smooth'] |
| | | shape: _plot.chartType === 'bar' && i === 0 ? ['bar', 'rect'] : ['line', 'smooth'] |
| | | } |
| | | }) |
| | | } |
| | |
| | | view: tab |
| | | }) |
| | | } |
| | | }) |
| | | } else if (view === 'base') { |
| | | this.baseRef.handleConfirm().then(res => { |
| | | this.setState({ |
| | | plot: {...plot, ...res}, |
| | | view: tab |
| | | }) |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { view, visible, datatype, plot, colorColumns, statColorColumns, cusColumns } = this.state |
| | | const { view, visible, datatype, plot, colorColumns, statColorColumns, cusColumns, baseFormlist } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | destroyOnClose |
| | | > |
| | | <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}> |
| | | <TabPane tab="基础设置" key="normal"> |
| | | <TabPane tab="组件设置" key="base"> |
| | | <NormalForm dict={this.props.dict} formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/> |
| | | </TabPane> |
| | | <TabPane tab="图表设置" key="normal"> |
| | | <Form {...formItemLayout}> |
| | | <Row gutter={16}>{this.getFields()}</Row> |
| | | </Form> |