| | |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Popover } from 'antd' |
| | | import { Icon, Popover, notification } from 'antd' |
| | | import { Chart } from '@antv/g2' |
| | | import DataSet from '@antv/data-set' |
| | | |
| | |
| | | import './index.scss' |
| | | |
| | | const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) |
| | | const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent')) |
| | | const ChartCompileForm = asyncIconComponent(() => import('./chartcompile')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) |
| | | const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) |
| | | const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) |
| | | const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) |
| | | const ClockComponent = asyncIconComponent(() => import('@/menu/components/share/clockcomponent')) |
| | | |
| | | class antvBarLineChart extends Component { |
| | | static propTpyes = { |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | card: null, |
| | | eventListener: null |
| | | } |
| | |
| | | if (card.isNew) { |
| | | let _plot = { |
| | | shape: card.subtype, // 图表类型 |
| | | width: 12, |
| | | width: card.width || 12, |
| | | height: 400, |
| | | label: 'outer', |
| | | name: card.name |
| | |
| | | borderWidth: '1px', borderColor: 'rgb(217, 217, 217)', |
| | | marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' |
| | | }, |
| | | headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: 'rgb(217, 217, 217)' }, |
| | | headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, |
| | | columns: [], |
| | | scripts: [], |
| | | search: [], |
| | | action: [], |
| | | plot: _plot |
| | | plot: _plot, |
| | | btnlog: [], |
| | | } |
| | | |
| | | if (card.config) { |
| | | let config = fromJS(card.config).toJS() |
| | | |
| | | _card.plot = config.plot |
| | | _card.plot.name = card.name |
| | | _card.style = config.style |
| | | _card.headerStyle = config.headerStyle |
| | | |
| | | _card.search = config.search.map(col => { |
| | | col.uuid = Utils.getuuid() |
| | | return col |
| | | }) |
| | | } |
| | | |
| | | this.props.updateConfig(_card) |
| | | this.setState({ |
| | | card: _card |
| | |
| | | const { card } = this.state |
| | | |
| | | if (parentId === card.parentId) { |
| | | let _element = document.getElementById(card.uuid) |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | } |
| | |
| | | const dv = ds.createView().source(data) |
| | | |
| | | const chart = new Chart({ |
| | | container: card.uuid, |
| | | container: card.uuid + 'canvas', |
| | | autoFit: true, |
| | | height: plot.height || 400 |
| | | }) |
| | |
| | | updateComponent = (component) => { |
| | | const card = fromJS(this.state.card).toJS() |
| | | let refresh = false |
| | | if (!is(fromJS(component.plot), fromJS(card.plot))) { |
| | | let _element = document.getElementById(card.uuid) |
| | | if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style))) { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | } |
| | |
| | | MKEmitter.emit('addSearch', card.uuid, newcard) |
| | | } |
| | | |
| | | changeTitleStyle = () => { |
| | | const { card } = this.state |
| | | |
| | | MKEmitter.emit('changeStyle', [card.uuid, 'header'], ['font', 'border'], card.headerStyle) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | | const { card } = this.state |
| | | |
| | |
| | | getStyle = (comIds, style) => { |
| | | const { card } = this.state |
| | | |
| | | if (comIds[0] !== card.uuid) return |
| | | if (comIds[0] !== card.uuid || comIds.length > 1) return |
| | | |
| | | let _card = {} |
| | | if (comIds.length === 1) { |
| | | _card = {...card, style} |
| | | } else if (comIds.length === 2 && comIds[1] === 'header') { |
| | | _card = {...card, headerStyle: style} |
| | | let _card = {...card, style} |
| | | |
| | | this.updateComponent(_card) |
| | | } |
| | | |
| | | handleLog = (type, logs, item) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | |
| | | if (type === 'revert') { |
| | | card.action = card.action ? [...card.action, item] : [item] |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '恢复成功!', |
| | | duration: 2 |
| | | }) |
| | | } else { |
| | | return |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | | duration: 2 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | card: _card |
| | | }) |
| | | |
| | | this.props.updateConfig(_card) |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { menu } = this.props |
| | | const { card } = this.state |
| | | |
| | | return ( |
| | | <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}> |
| | | <div className="chart-header" style={card.headerStyle}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="style" title="调整样式" onClick={this.changeTitleStyle} type="font-colors" /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <span className="chart-title">{card.plot.title || ''}</span> |
| | | </Popover> |
| | | <SearchComponent config={card} updatesearch={this.updateComponent}/> |
| | | </div> |
| | | <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> |
| | | <NormalHeader config={card} updateComponent={this.updateComponent}/> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | {menu && menu.MenuType !== 'billPrint' ? <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" /> : null} |
| | | <ChartCompileForm config={card} menu={menu} dict={this.state.dict} plotchange={this.updateComponent}/> |
| | | <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" /> |
| | | <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/> |
| | | <CopyComponent type="pie" card={card}/> |
| | | <PasteComponent config={card} options={['search', 'form']} updateConfig={this.updateComponent} /> |
| | | <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" /> |
| | | <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> |
| | | <ClockComponent config={card} updateConfig={this.updateComponent}/> |
| | | <UserComponent config={card}/> |
| | | <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> |
| | | <SettingComponent config={card} updateConfig={this.updateComponent}/> |
| | | </div> |
| | | } trigger="hover"> |
| | | <Icon type="tool" /> |
| | | </Popover> |
| | | <div className="canvas" id={card.uuid}></div> |
| | | <div className="canvas" id={card.uuid + 'canvas'}></div> |
| | | </div> |
| | | ) |
| | | } |