Merge branch 'master' into bms

king

2021-01-15 76a4300654a18d228838c3f27455dc8e7a8cd616

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

@@ -23,6 +23,7 @@
const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))

class antvBarLineChart extends Component {
  static propTpyes = {
@@ -46,7 +47,7 @@
        enabled: 'false',     // 是否使用自定义设置
        datatype: 'query',    // 数据类型查询或统计
        customs: [],
        width: 24,
        width: card.width || 24,
        height: 400,
        barSize: 35,
        name: card.name
@@ -90,6 +91,24 @@
        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.action = config.action.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
        _card.search = config.search.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
      }
      this.setState({
        card: _card
      })
@@ -103,8 +122,8 @@

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

  shouldComponentUpdate (nextProps, nextState) {
@@ -118,15 +137,15 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('tabsChange', this.handleTabsChange)
    MKEmitter.removeListener('submitStyle', this.getStyle)
    MKEmitter.removeListener('tabsChange', this.handleTabsChange)
  }

  handleTabsChange = (parentId) => {
    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 = ''
      }
@@ -202,14 +221,14 @@
        dv.transform({
          type: 'map',
          callback(row) {
            row.key = transfield[row.key]
            row.key = transfield[row.key] || row.key
            return row
          },
        })
      }

      const chart = new Chart({
        container: card.uuid,
        container: card.uuid + 'canvas',
        autoFit: true,
        height: plot.height || 400
      })
@@ -272,12 +291,12 @@
        .line()
        .position(`${X_axis}*value`)
        .shape(plot.shape || 'smooth')
        .tooltip(`${X_axis}*value`, (name, value) => {
        .tooltip(`${X_axis}*value*key`, (name, value, type) => {
          if (plot.show === 'percent') {
            value = value + '%'
          }
          return {
            name: name,
            name: type,
            value: value
          }
        })
@@ -408,7 +427,7 @@
    })

    const chart = new Chart({
      container: card.uuid,
      container: card.uuid + 'canvas',
      autoFit: true,
      height: plot.height || 400
    })
@@ -460,12 +479,12 @@
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)
          .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
          .tooltip(`${item.name}`, (value) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: item.name,
              value: value
            }
          })
@@ -492,12 +511,12 @@
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)
          .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
          .tooltip(`${item.name}`, (value) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: item.name,
              value: value
            }
          })
@@ -564,14 +583,14 @@
        dv.transform({
          type: 'map',
          callback(row) {
            row.key = transfield[row.key]
            row.key = transfield[row.key] || row.key
            return row
          },
        })
      }

      const chart = new Chart({
        container: card.uuid,
        container: card.uuid + 'canvas',
        autoFit: true,
        height: plot.height || 400
      })
@@ -636,12 +655,12 @@
            }
          ])
          .shape(plot.shape || 'rect')
          .tooltip(`${X_axis}*value`, (name, value) => {
          .tooltip(`${X_axis}*value*key`, (name, value, key) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: key,
              value: value
            }
          })
@@ -682,12 +701,12 @@
          .position(`${X_axis}*value`)
          .adjust('stack')
          .shape(plot.shape || 'rect')
          .tooltip(`${X_axis}*value`, (name, value) => {
          .tooltip(`${X_axis}*value*key`, (name, value, type) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: type,
              value: value
            }
          })
@@ -733,8 +752,8 @@
  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 = ''
      }
@@ -819,11 +838,12 @@

    let _card = {...card, style}

    this.setState({
      card: _card
    })
    // this.setState({
    //   card: _card
    // })
    
    this.props.updateConfig(_card)
    this.updateComponent(_card)
    // this.props.updateConfig(_card)
  }

  handleLog = (type, logs, item) => {
@@ -852,11 +872,18 @@
    }
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

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

    return (
      <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
      <div className="menu-line-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">
@@ -867,6 +894,7 @@
            <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} />
            <UserComponent config={card}/>
            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent}/>
          </div>
@@ -878,7 +906,7 @@
          config={card}
          updateaction={this.updateComponent}
        />
        <div className="canvas" id={card.uuid}></div>
        <div className="canvas" id={card.uuid + 'canvas'}></div>
      </div>
    )
  }