From e812829d83b1fd296b25fbc244f89e9b38f687a9 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 28 九月 2020 09:28:15 +0800 Subject: [PATCH] 2020-09-28 --- src/menu/components/card/data-card/index.jsx | 44 ++++++++++++++++++++++++++++++++++++-------- 1 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/menu/components/card/data-card/index.jsx b/src/menu/components/card/data-card/index.jsx index 7c7d866..fa7ef3e 100644 --- a/src/menu/components/card/data-card/index.jsx +++ b/src/menu/components/card/data-card/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Icon, Popover, Switch } from 'antd' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -15,7 +15,7 @@ const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) const WrapComponent = asyncIconComponent(() => import('./wrapsetting')) -const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent')) +// const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent')) const CardCellComponent = asyncComponent(() => import('../cardcellcomponent')) class antvBarLineChart extends Component { @@ -27,7 +27,8 @@ state = { dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - card: null + card: null, + back: false } UNSAFE_componentWillMount () { @@ -60,9 +61,10 @@ subtype: card.subtype, setting: { interType: 'system' }, wrap: { name: card.name, width: 24, cardWidth: 6, addable: 'false', switch: 'false' }, + style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, columns: [], scripts: [], - action: [], + // action: [], elements: [] } this.setState({ @@ -77,7 +79,7 @@ } componentDidMount () { - + MKEmitter.addListener('submitStyle', this.getStyle) } shouldComponentUpdate (nextProps, nextState) { @@ -91,6 +93,7 @@ this.setState = () => { return } + MKEmitter.removeListener('submitStyle', this.getStyle) } updateComponent = (component) => { @@ -148,17 +151,41 @@ } changeStyle = () => { - // MKEmitter.emit('changeStyle', card.uuid, newcard) + const { card } = this.state + + MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border'], {}) + } + + changeOutStyle = () => { + const { card } = this.state + + MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style) + } + + getStyle = (comIds, style) => { + const { card } = this.state + + if (comIds[0] !== card.uuid) return + + this.setState({ + card: {...card, style} + }) + console.log(style) + } + + changeSide = () => { + this.setState(prev => ({ back: !prev.back })) } render() { const { card } = this.state return ( - <div className="menu-data-card-edit-box"> + <div className="menu-data-card-edit-box" style={card.style}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <WrapComponent config={card} updateConfig={this.updateComponent} /> + <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeOutStyle} type="font-colors" /> <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> @@ -167,13 +194,14 @@ </Popover> <div className={'ant-col card-item ant-col-' + (card.wrap.cardWidth || 6)} style={{height: card.wrap.height ? card.wrap.height + 'px' : 'auto'}}> <CardCellComponent config={card} updateElement={this.updateComponent}/> - <ActionComponent plus="false" config={card} updateaction={this.updateComponent}/> + {/* <ActionComponent plus="false" config={card} updateaction={this.updateComponent}/> */} <div className="card-control"> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <Icon className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} type="plus" /> <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <Switch size="small" onClick={this.changeSide} defaultChecked /> </div> } trigger="hover"> <Icon type="tool" /> -- Gitblit v1.8.0