2020-09-16

king

2020-09-16 c34bcb0a3054bdab29fbaff17e587c19d7b5de28

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

@@ -4,34 +4,34 @@
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'

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

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/datasourcecomponent'))
const SettingComponent = asyncComponent(() => import('@/menu/datasource'))
const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const ChartCompileForm = asyncComponent(() => import('./chartcompile'))

class antvBarLineChart extends Component {
  static propTpyes = {
    config: PropTypes.object,
    menu: PropTypes.object,
    card: PropTypes.object,
    editId: PropTypes.any,
    triggerEdit: PropTypes.func,
    updateConfig: PropTypes.func,
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    visible: true
    eventListener: null
  }

  UNSAFE_componentWillMount () {
    const { card, config } = this.props
    const { card, menu } = this.props

    if (card.isNew) {
      let _plot = {
@@ -53,26 +53,28 @@
        _plot.shape = 'hv'
      }

      let name = ''
      let names = {
        bar: '柱状图',
        line: '折线图',
      }
      let i = 1
      
      while (!name) {
        let _name = names[card.type] + i
        if (config.components.filter(com => com.setting && com.setting.name === _name).length === 0) {
          name = _name
      let dataName = ''

      if (card.floor === 1) {
        while (!dataName) {
          let _dataName = Utils.getdataName()
          if (menu.components.filter(com => com.dataName === _dataName).length === 0) {
            dataName = _dataName
          }
        }
        i++
      }

      let _card = {
        uuid: card.uuid,
        type: card.type,
        floor: card.floor,
        parentId: card.parentId || '',
        format: 'array',   // 组件属性 - 数据格式
        pageable: false,   // 组件属性 - 是否可分页
        switchable: false, // 组件属性 - 数据是否可切换
        dataName: dataName,
        subtype: card.subtype,
        setting: {span: 12, height: 400, name},
        setting: {span: card.floor === 1 ? 12 : 24, height: 400, interType: 'system', name: card.name},
        columns: [],
        scripts: [],
        search: [],
@@ -92,11 +94,33 @@

  componentDidMount () {
    this.viewrender()
    MKEmitter.addListener('tabsChange', this.handleTabsChange)
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.plot), fromJS(nextProps.plot))) {
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('tabsChange', this.handleTabsChange)
  }

  handleTabsChange = (parentId) => {
    const { card } = this.state

    if (parentId === card.parentId) {
      let _element = document.getElementById(card.uuid)
      if (_element) {
        _element.innerHTML = ''
      }

      setTimeout(this.viewrender, 100)
    }
  }

@@ -498,35 +522,6 @@
    }
  }

  plotChange = (_plot) => {
    const { config } = this.props

    if (_plot.datatype === 'statistics') {
      _plot.Yaxis = [_plot.InfoValue]
    }
    
    let _charts = fromJS(config.charts).toJS()

    _charts = _charts.map(item => {
      if (item.uuid === _plot.uuid) {
        if (!is(fromJS(item), fromJS(_plot))) {
          let _element = document.getElementById(_plot.uuid)
          if (_element) {
            _element.innerHTML = ''
          }
        }
        return _plot
      }
      return item
    })

    this.props.plotchange({...config, charts: _charts})
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  updateComponent = (component) => {
    const card = fromJS(this.state.card).toJS()
    let refresh = false
@@ -552,33 +547,30 @@

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

    return (
      <div className="menu-line-chart-edit-box" style={{height: card.setting.height || 400}}>
        <SettingComponent
          config={{...card, tables: config.tables}}
          MenuID={config.uuid}
          tableFields={config.tableFields || []}
          permFuncField={config.permFuncField || []}
          config={card}
          menu={menu}
          updateConfig={this.updateComponent}
        />
        <div className="chart-header">
          <span className="chart-title">{card.setting.title || ''}</span>
          <SearchComponent
            menu={config}
            menu={menu}
            config={card}
            sysRoles={config.sysRoles}
            sysRoles={menu.sysRoles}
            optionLibs={null}
            updatesearch={this.updateComponent}
          />
        </div>
        <ActionComponent
          type="chart"
          menu={config}
          menu={menu}
          config={card}
          tabs={[]}
          usefulFields={config.permFuncField || []}
          // setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')}
          updateaction={this.updateComponent}
        />