2020-09-03

king

2020-09-03 af02b8f3c3ec9e5684be1084904d673429421d2b

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

@@ -6,14 +6,15 @@

import asyncComponent from '@/utils/asyncComponent'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
// import ChartCompileForm from './chartcompile'
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 SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const ChartCompileForm = asyncComponent(() => import('./chartcompile'))

class antvBarLineChart extends Component {
  static propTpyes = {
@@ -32,19 +33,64 @@

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

    console.log(config)
    // card.dataName = Utils.getdataName()
    // this.props.updateConfig(card)
    if (card.isNew) {
      let _plot = {
        chartType: card.type, // 图表类型
        enabled: 'false',     // 是否使用自定义设置
        datatype: 'query',    // 数据类型查询或统计
        customs: []
      }

      if (card.subtype === 'bar') {
        _plot.coordinate = 'angle' // 二维坐标或极坐标
        _plot.transpose = 'false'  // 坐标轴变换
      } else if (card.subtype === 'bar1') {
        _plot.coordinate = 'angle'
        _plot.transpose = 'true'
      } else if (card.subtype === 'line') {
        _plot.shape = 'smooth'
      } else if (card.subtype === 'line1') {
        _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
        }
        i++
      }

      let dataName = ''

      while (!dataName) {
        let _dataName = Utils.getdataName()
        if (config.components.filter(com => com.dataName === _dataName).length === 0) {
          dataName = _dataName
        }
      }

      let _card = {
        uuid: card.uuid,
        type: card.type,
        format: 'array',
        dataName: dataName,
        subtype: card.subtype,
        setting: {span: 12, height: 400},
        setting: {span: 12, height: 400, interType: 'system', name},
        columns: [],
        scripts: [],
        search: [],
        action: [],
        plot: {type: card.type, Xaxis: '', Yaxis: null}
        plot: _plot
      }
      this.setState({
        card: _card
@@ -63,9 +109,7 @@

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.plot), fromJS(nextProps.plot))) {
      this.setState({}, () => {
        this.viewrender()
      })

    }
  }

@@ -96,18 +140,19 @@
  viewrender = () => {
    const { card } = this.state

    if (card.plot.type === 'line') {
    if (card.plot.chartType === 'line') {
      this.linerender()
    } else if (card.plot.type === 'bar') {
    } else if (card.plot.chartType === 'bar') {
      this.barrender()
    }
  }

  linerender = () => {
    const { plot, config } = this.props
    const { card } = this.state
    let plot = {...card.plot, height: card.setting.height - 70}

    let transfield = {}
    config.columns.forEach(col => {
    card.columns.forEach(col => {
      if (col.field) {
        transfield[col.field] = col.label
      }
@@ -140,7 +185,7 @@
      }

      const chart = new Chart({
        container: plot.uuid,
        container: card.uuid,
        autoFit: true,
        height: plot.height || 400
      })
@@ -370,8 +415,6 @@
    let Y_axis = plot.Yaxis || ['y']

    let data = this.getdata(X_axis, Y_axis)
    console.log(plot)
    console.log(data)
    
    if (plot.enabled !== 'true') {
      const ds = new DataSet()
@@ -400,7 +443,6 @@
        height: plot.height || 400
      })
  
      console.log(dv.rows)
      chart.data(dv.rows)
  
      chart.scale('value', {
@@ -499,8 +541,24 @@
  }

  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))) {
      let _element = document.getElementById(card.uuid)
      if (_element) {
        _element.innerHTML = ''
      }
      refresh = true
    }
    
    this.setState({
      card: component
    }, () => {
      if (refresh) {
        setTimeout(() => {
          this.viewrender()
        }, 100)
      }
    })
    this.props.updateConfig(component)
  }
@@ -510,7 +568,7 @@
    const { config } = this.props

    return (
      <div className="line-chart-edit-box" style={{height: card.setting.height || 400}}>
      <div className="menu-line-chart-edit-box" style={{height: card.setting.height || 400}}>
        <SettingComponent
          config={{...card, tables: config.tables}}
          MenuID={config.uuid}
@@ -521,7 +579,7 @@
        <div className="chart-header">
          <span className="chart-title">{card.setting.title || ''}</span>
          <SearchComponent
            menu={{MenuID: config.uuid, MenuName: config.MenuName}}
            menu={config}
            config={card}
            sysRoles={config.sysRoles}
            optionLibs={null}
@@ -529,7 +587,8 @@
          />
        </div>
        <ActionComponent
          menu={{ MenuID: config.uuid, MenuName: config.MenuName, MenuNo: config.MenuNo, fstMenuList: config.fstMenuList }}
          type="chart"
          menu={config}
          config={card}
          tabs={[]}
          usefulFields={config.permFuncField || []}
@@ -537,13 +596,11 @@
          updateaction={this.updateComponent}
        />
        <div className="canvas" id={card.uuid}></div>
        {/* <ChartCompileForm
          plot={plot}
          type={plot.chartType}
          config={this.props.config}
        <ChartCompileForm
          config={card}
          dict={this.state.dict}
          plotchange={this.plotChange}
        /> */}
          plotchange={this.updateComponent}
        />
      </div>
    )
  }