2021-06-04

king

2021-06-04 9e60fb89a8b1c8a1d16b557b20b6d0a509f37983

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

@@ -24,6 +24,7 @@

  state = {
    view: 'normal',
    ramp: 'false',
    visible: false,
    datatype: '',
    plot: null,
@@ -48,6 +49,34 @@
        }
      },
    ],
    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: '指标',
@@ -62,6 +91,35 @@
        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>)
        }
@@ -163,6 +221,7 @@
    this.setState({
      visible: true,
      view: 'normal',
      ramp: config.plot.ramp || 'false',
      datatype: config.plot.datatype || 'query',
      fieldName: fieldName,
      plot: fromJS(config.plot).toJS(),
@@ -338,6 +397,21 @@
    this.setState({plot: {...plot, mutilBar: val}})
  }

  rampChange = (e) => {
    const { plot } = this.state
    let val = e.target.value
    let colors = plot.colors || []

    if (val === 'true') {
      colors = colors.map(item => {
        item.color1 = item.color1 || item.color
        return item
      })
    }

    this.setState({plot: {...plot, colors, ramp: val}, ramp: val})
  }

  onSubmit = () => {
    const { config } = this.props
    const { plot, view } = this.state
@@ -432,7 +506,8 @@
                  uuid: Utils.getuuid(),
                  type: item,
                  label: labels[item] || item,
                  color: chartColors[i % limit]
                  color: chartColors[i % limit],
                  color1: chartColors[i % limit]
                }
              })
            }
@@ -466,7 +541,8 @@
    plot.colors.push({
      uuid: Utils.getuuid(),
      type: `指标${plot.colors.length}`,
      color: 'rgb(91, 143, 249)'
      color: 'rgb(91, 143, 249)',
      color1: 'rgb(91, 143, 249)'
    })

    this.setState({plot})
@@ -485,7 +561,7 @@
  }

  render() {
    const { view, visible, datatype, plot, colorColumns, statColorColumns, cusColumns, baseFormlist } = this.state
    const { view, visible, datatype, plot, ramp, colorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -521,9 +597,19 @@
            </TabPane>
            {plot ? <TabPane tab="颜色设置" key="color">
              <div>
                <Col span={12} style={{height: '40px', top: '-5px', zIndex: 1}}>
                  <Form {...formItemLayout}>
                    <Form.Item label="渐变色" style={{marginBottom: 10}}>
                      <Radio.Group value={plot.ramp || 'false'} onChange={this.rampChange}>
                        <Radio value="false">不使用</Radio>
                        <Radio value="true">使用</Radio>
                      </Radio.Group>
                    </Form.Item>
                  </Form>
                </Col>
                {datatype === 'statistics' ? <Button className="color-add mk-green" onClick={this.addColor}>{this.props.dict['model.add']}</Button> : null}
                {datatype === 'statistics' ? <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={statColorColumns} onChange={this.changeColor}/> : null}
                {datatype !== 'statistics' ? <EditTable actions={['edit']} data={plot.colors || []} columns={colorColumns} onChange={this.changeColor}/> : 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}
              </div>
            </TabPane> : null}
            {plot ? <TabPane tab="自定义设置" disabled={datatype === 'statistics'} key="custom">