2020-12-29

king

2020-12-29 9f3a0655391c42dc7fb9a3cfa6d8fc4ca935bd9d

 src/menu/components/chart/antv-bar/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, notification } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'

@@ -17,9 +17,12 @@
import './index.scss'

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))

class antvBarLineChart extends Component {
  static propTpyes = {
@@ -79,12 +82,13 @@
          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: [],
      }
      this.setState({
        card: _card
@@ -802,12 +806,6 @@
    MKEmitter.emit('addButton', card.uuid, newcard)
  }

  changeTitleStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid, 'header'], ['font', 'border'], card.headerStyle)
  }

  changeStyle = () => {
    const { card } = this.state

@@ -817,16 +815,9 @@
  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}
    } else {
      return
    }
    let _card = {...card, style}

    this.setState({
      card: _card
@@ -835,39 +826,58 @@
    this.props.updateConfig(_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 {
      card.btnlog = logs
      this.setState({ card })
      this.props.updateConfig(card)
      notification.success({
        top: 92,
        message: '清除成功！',
        duration: 2
      })
    }
  }

  render() {
    const { menu } = this.props
    const { card } = this.state

    return (
      <div className="menu-line-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>
        <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}
            {menu && menu.MenuType !== 'billPrint' ? <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" /> : null}
            {menu ? <ChartCompileForm config={card} MenuType={menu.MenuType} dict={this.state.dict} plotchange={this.updateComponent}/> : null}
            <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" />
            <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
            <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
            <CopyComponent type="line" card={card}/>
            <PasteComponent config={card} options={['action', 'search', 'form']} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <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>
        {menu && menu.MenuType !== 'billPrint' ? <ActionComponent
        <ActionComponent
          type="chart"
          config={card}
          updateaction={this.updateComponent}
        /> : null}
        />
        <div className="canvas" id={card.uuid}></div>
      </div>
    )