From 4453a9e63e8e176c70c432b03fd4ba3ebf00a04c Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 09 二月 2023 14:55:20 +0800 Subject: [PATCH] 2023-02-09 --- src/menu/components/chart/antv-bar/chartcompile/index.jsx | 41 ++++++++++++++++++++++++++++++++++++++--- 1 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/menu/components/chart/antv-bar/chartcompile/index.jsx b/src/menu/components/chart/antv-bar/chartcompile/index.jsx index 7feda4a..f0bfcc6 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/index.jsx +++ b/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}}> -- Gitblit v1.8.0