2020-09-24

king

2020-09-24 bcef9a2845e6800704fecb3eb60c204f80854a07

 src/menu/components/chart/antv-bar/index.jsx

@@ -2,26 +2,29 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'

import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'

import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'

const SettingComponent = asyncComponent(() => import('@/menu/datasource'))
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const ChartCompileForm = asyncComponent(() => import('./chartcompile'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))

class antvBarLineChart extends Component {
  static propTpyes = {
    card: PropTypes.object,
    updateConfig: PropTypes.func,
    deletecomponent: PropTypes.func,
  }

  state = {
@@ -38,7 +41,10 @@
        chartType: card.type, // 图表类型
        enabled: 'false',     // 是否使用自定义设置
        datatype: 'query',    // 数据类型查询或统计
        customs: []
        customs: [],
        width: 24,
        height: 400,
        name: card.name
      }

      if (card.subtype === 'bar') {
@@ -74,8 +80,10 @@
        pageable: false,   // 组件属性 - 是否可分页
        switchable: false, // 组件属性 - 数据是否可切换
        dataName: dataName,
        width: _plot.width,
        name: _plot.name,
        subtype: card.subtype,
        setting: {span: 24, height: 400, interType: 'system', name: card.name},
        setting: { interType: 'system' },
        columns: [],
        scripts: [],
        search: [],
@@ -161,7 +169,7 @@

  linerender = () => {
    const { card } = this.state
    let plot = {...card.plot, height: card.setting.height - 70}
    let plot = {...card.plot, height: card.plot.height - 70} // 去除title所占空间

    let transfield = {}
    card.columns.forEach(col => {
@@ -265,7 +273,8 @@
  }

  customrender = (data, transfield) => {
    const { plot } = this.props
    const { card } = this.state
    let plot = {...card.plot, height: card.plot.height - 70} // 去除title所占空间

    let barfields = []
    let fields = []
@@ -414,8 +423,7 @@

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

    let plot = {...card.plot, height: card.setting.height - 70}
    let plot = {...card.plot, height: card.plot.height - 70}

    let transfield = {}
    card.columns.forEach(col => {
@@ -556,13 +564,16 @@
  updateComponent = (component) => {
    const card = fromJS(this.state.card).toJS()
    let refresh = false
    if (card.setting.span !== component.setting.span || card.setting.height !== component.setting.height || !is(fromJS(component.plot), fromJS(card.plot))) {
    if (!is(fromJS(component.plot), fromJS(card.plot))) {
      let _element = document.getElementById(card.uuid)
      if (_element) {
        _element.innerHTML = ''
      }
      refresh = true
    }

    component.width = component.plot.width
    component.name = component.plot.name
    
    this.setState({
      card: component
@@ -580,17 +591,22 @@
    const { card } = this.state

    return (
      <div className="menu-line-chart-edit-box" style={{height: card.setting.height || 400}}>
        <SettingComponent
          config={card}
          updateConfig={this.updateComponent}
        />
      <div className="menu-line-chart-edit-box" style={{height: card.plot.height || 400}}>
        <div className="chart-header">
          <span className="chart-title">{card.setting.title || ''}</span>
          <span className="chart-title">{card.plot.title || ''}</span>
          <SearchComponent
            config={card}
            updatesearch={this.updateComponent}
          />
          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
            <div className="mk-popover-control">
              <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
              <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>
        <ActionComponent
          type="chart"
@@ -600,11 +616,7 @@
          updateaction={this.updateComponent}
        />
        <div className="canvas" id={card.uuid}></div>
        <ChartCompileForm
          config={card}
          dict={this.state.dict}
          plotchange={this.updateComponent}
        />
        
      </div>
    )
  }