2023-02-09

king

2023-02-09 4453a9e63e8e176c70c432b03fd4ba3ebf00a04c

 src/menu/components/chart/antv-bar/chartcompile/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, InputNumber, Tabs, Button } from 'antd'
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons'
import { QuestionCircleOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import { chartColors } from '@/utils/option.js'
@@ -44,6 +44,18 @@
        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>)
        }
@@ -745,10 +757,28 @@
    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) => {
@@ -759,7 +789,7 @@

  render() {
    const { config } = this.props
    const { view, visible, datatype, plot, ramp, colorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist } = this.state
    const { view, visible, datatype, plot, ramp, colorColumns, barColorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -818,9 +848,14 @@
                {datatype === 'statistics' ? <Button className="color-add mk-green" onClick={this.addColor}>添加</Button> : null}
                {datatype === 'statistics' ? <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={ramp ==='true' ? rampStatColorColumns : statColorColumns} onChange={this.changeColor}/> : null}
                {datatype !== 'statistics' ? <EditTable actions={['edit']} data={plot.colors || []} columns={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">
            {plot ? <TabPane tab="自定义图形设置" disabled={datatype === 'statistics'} key="custom">
              <Col span={12}>
                <Form {...formItemLayout}>
                  <Form.Item label="是否启用" style={{marginBottom: 10}}>