From 0c84df247914f893ef5e41d57a422e10a2dc814c Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 12 十一月 2021 17:02:06 +0800 Subject: [PATCH] 2021-11-12 --- src/menu/components/chart/antv-bar/chartcompile/index.jsx | 82 +++++++++++++++++++++++++++++++++-------- 1 files changed, 66 insertions(+), 16 deletions(-) diff --git a/src/menu/components/chart/antv-bar/chartcompile/index.jsx b/src/menu/components/chart/antv-bar/chartcompile/index.jsx index 0562b38..ee2421e 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/index.jsx +++ b/src/menu/components/chart/antv-bar/chartcompile/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, Form, Row, Col, Select, Icon, Radio, Tooltip, Input, InputNumber, Tabs, Button } from 'antd' +import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, InputNumber, Tabs, Button } from 'antd' +import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import { chartColors } from '@/utils/option.js' @@ -130,14 +131,14 @@ title: '鎸囨爣', dataIndex: 'name', editable: false, - width: '20%' + width: '14%' }, { title: '褰㈢姸', dataIndex: 'shape', inputType: 'cascader', editable: true, - width: '20%', + width: '12%', render: (text, record) => { return text.join(' / ').replace('line', '鎶樼嚎').replace('bar', '鏌卞舰') }, @@ -175,7 +176,7 @@ dataIndex: 'axis', inputType: 'select', editable: true, - width: '20%', + width: '12%', options: [ { value: 'true', text: '鏄剧ず'}, { value: 'false', text: '闅愯棌'} @@ -190,7 +191,7 @@ dataIndex: 'label', inputType: 'select', editable: true, - width: '20%', + width: '12%', options: [ { value: 'true', text: '鏄剧ず'}, { value: 'false', text: '闅愯棌'} @@ -199,6 +200,37 @@ let trans = {'true': '鏄剧ず', 'false': '闅愯棌'} return trans[text] || '闅愯棌' } + }, + { + title: '鏍囬', + dataIndex: 'title', + 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: 'min', + inputType: 'number', + editable: true, + required: false, + width: '12%' + }, + { + title: '鏈�澶у��', + dataIndex: 'max', + inputType: 'number', + editable: true, + required: false, + width: '12%' }, ] } @@ -266,7 +298,7 @@ <Col span={12} key={index}> <Form.Item label={item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> {item.label} </Tooltip> : item.label }> @@ -287,7 +319,7 @@ <Col span={12} key={index}> <Form.Item label={item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> {item.label} </Tooltip> : item.label }> @@ -308,7 +340,7 @@ <Col span={12} key={index}> <Form.Item label={item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> {item.label} </Tooltip> : item.label }> @@ -337,7 +369,7 @@ <Col span={12} key={index}> <Form.Item label={item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> {item.label} </Tooltip> : item.label }> @@ -350,7 +382,7 @@ } ] })( - <Radio.Group disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}> + <Radio.Group style={{whiteSpace: 'nowrap'}} disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}> {item.options.map(option => { return ( <Radio key={option.value} value={option.value}>{option.text}</Radio> @@ -366,14 +398,14 @@ <Col span={12} key={index}> <Form.Item label={item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> {item.label} </Tooltip> : item.label }> {getFieldDecorator(item.key, { initialValue: item.initVal })( - <ColorSketch /> + <ColorSketch allowClear={item.allowClear} /> )} </Form.Item> </Col> @@ -410,6 +442,13 @@ } this.setState({plot: {...plot, colors, ramp: val}, ramp: val}) + } + + rampDirectionChange = (e) => { + const { plot } = this.state + let val = e.target.value + + this.setState({plot: {...plot, rampDirection: val}}) } onSubmit = () => { @@ -492,6 +531,7 @@ name: labels[item] || item, axis: i === 0 ? 'true' : 'false', label: 'false', + title: 'true', shape: _plot.chartType === 'bar' && i === 0 ? ['bar', 'rect'] : ['line', 'smooth'] } }) @@ -575,12 +615,12 @@ return ( <div className="line-chart-drawer-form"> - <Icon type="edit" title="缂栬緫" onClick={this.showDrawer} /> + <EditOutlined title="缂栬緫" onClick={this.showDrawer}/> <Modal wrapClassName="popview-modal menu-chart-edit-modal" title="鍥捐〃缂栬緫" visible={visible} - width={850} + width={950} maskClosable={false} onOk={this.onSubmit} onCancel={() => { this.setState({ visible: false }) }} @@ -597,7 +637,7 @@ </TabPane> {plot ? <TabPane tab="棰滆壊璁剧疆" key="color"> <div> - <Col span={12} style={{height: '40px', top: '-5px', zIndex: 1}}> + <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={this.rampChange}> @@ -607,6 +647,16 @@ </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={this.rampDirectionChange}> + <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}>{this.props.dict['model.add']}</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} @@ -634,7 +684,7 @@ </Form.Item> </Form> </Col> - <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>娉細浣跨敤鑷畾涔夎缃椂锛屾樉绀虹殑鍧愭爣杞寸涓�涓湪宸︿晶锛岀浜屼釜鍦ㄥ彸渚э紝澶氫綑鐨勪笉鐢熸晥锛涙煴褰㈠浘鍙彲浠ユ坊鍔犱竴涓紙璁剧疆澶氫釜鏃讹紝绗竴涓敓鏁堬級銆�</Col> + <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>娉細浣跨敤鑷畾涔夎缃椂锛屾樉绀虹殑鍧愭爣杞寸涓�涓湪宸︿晶锛岀浜屼釜鍦ㄥ彸渚э紝澶氫綑鐨勪笉鐢熸晥銆�</Col> <EditTable actions={['edit', 'move']} data={plot.customs || []} columns={cusColumns} onChange={this.changeCustom}/> </TabPane> : null} </Tabs> -- Gitblit v1.8.0