2021-06-10

king

2021-06-10 7b952b64a2b7273c6d2af68200a6ae790d9b59b1

 src/tabviews/custom/components/chart/antv-bar-line/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Chart } from '@antv/g2'
import { connect } from 'react-redux'
// import { connect } from 'react-redux'
import DataSet from '@antv/data-set'
import { Spin, Empty, notification } from 'antd'
import moment from 'moment'
@@ -12,7 +12,7 @@
import Api from '@/api'
import Utils from '@/utils/utils.js'
import UtilsDM from '@/utils/utils-datamanage.js'
import { modifyTabview } from '@/store/action'
// import { modifyTabview } from '@/store/action'
import MKEmitter from '@/utils/events.js'
import './index.scss'

@@ -518,7 +518,7 @@
   * 3、柱状图数据补齐
   */
  getdata = () => {
    const { data, plot, vFields } = this.state
    const { data, plot, vFields, config } = this.state

    if (!data || data.length === 0) {
      this.setState({empty: true})
@@ -563,6 +563,7 @@
          item[col.field] = item[col.field].toFixed(col.decimal)
          item[col.field] = +item[col.field]
        })
        item.$$uuid = item[config.setting.primaryKey] || ''
        return item
      })
    } else if (plot.repeat === 'cumsum') {
@@ -597,6 +598,7 @@
          item[col.field] = item[col.field].toFixed(col.decimal)
          item[col.field] = +item[col.field]
        })
        item.$$uuid = item[config.setting.primaryKey] || ''
        return item
      })
    } else { // plot.repeat === 'unrepeat'
@@ -616,6 +618,8 @@
            item[col.field] = item[col.field].toFixed(col.decimal)
            item[col.field] = +item[col.field]
          })
          
          item.$$uuid = item[config.setting.primaryKey] || ''
          _mdata.set(item[plot.Xaxis], item)
        }
      })
@@ -825,7 +829,7 @@
    }
    chart.scale(_valfield, {
      nice: true,
      range: [0, 0.93]
      range: [0, 0.9]
    })
    
    // 坐标轴格式化
@@ -908,12 +912,16 @@
      })
    }

    if (plot.point === 'true' && plot.$colors) {
      let limit = chartColors.length
      chart
    if (plot.point === 'true') {
      let _chart = chart
        .point()
        .position(`${plot.Xaxis}*${_valfield}`)
        .color(_typefield, (key) => {
        .size(3)
        .shape('circle')

      if (plot.$colors) {
        let limit = chartColors.length
        _chart.color(_typefield, (key) => {
          if (plot.$colors.has(key)) {
            return plot.$colors.get(key)
          } else {
@@ -921,15 +929,31 @@
            return chartColors[(colorIndex - 1) % limit]
          }
        })
        .size(3)
        .shape('circle')
    } else if (plot.point === 'true') {
      chart
        .point()
      } else {
        _chart.color(_typefield)
      }
    }

    if (plot.area === 'true') {
      let area = chart
        .area()
        .shape(plot.shape || 'smooth')
        .position(`${plot.Xaxis}*${_valfield}`)
        .color(_typefield)
        .size(3)
        .shape('circle')
        .tooltip(false)

      if (plot.$colors) {
        let limit = chartColors.length
        area.color(_typefield, (key) => {
          if (plot.$colors.has(key)) {
            return plot.$colors.get(key)
          } else {
            colorIndex++
            return chartColors[(colorIndex - 1) % limit]
          }
        })
      } else {
        area.color(_typefield)
      }
    }

    if (plot.interaction && plot.interaction.length) {
@@ -1030,6 +1054,27 @@
      nice: true
    })

    let lablecfg = {
      position: 'top',
      offset: 2,
      style: {
        fill: '#fff'
      }
    }

    if (plot.label === 'top') {
      lablecfg.offset = -5
      lablecfg.style.textBaseline = 'top'
    } else if (plot.label === 'middle') {
      lablecfg.position = 'middle'
      lablecfg.offset = 0
    } else if (plot.label === 'bottom') {
      lablecfg.position = 'bottom'
      lablecfg.offset = 0
    } else if (plot.label === 'true') {
      lablecfg.style.fill = plot.color
    }

    if (plot.Bar_axis) {
      const view1 = chart.createView({
        region: {
@@ -1102,15 +1147,17 @@
          _chart.color('key')
        }
        if (plot.label === 'true') {
          _chart.label('value', (value) => {
          _chart.label('value*key', (value, key) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }

            if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
              lablecfg.style.fill = plot.$colors.get(key)
            }
            return {
              content: value,
              style: {
                fill: plot.color
              }
              ...lablecfg
            }
          })
        }
@@ -1151,15 +1198,16 @@
          _chart.color('key')
        }
        if (plot.label === 'true') {
          _chart.label('value', (value) => {
          _chart.label('value*key', (value, key) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
              lablecfg.style.fill = plot.$colors.get(key)
            }
            return {
              content: value,
              style: {
                fill: plot.color
              }
              ...lablecfg
            }
          })
        }
@@ -1190,7 +1238,7 @@
      
        view2.scale(item.name, {
          nice: true,
          range: [0, 0.93]
          range: [0, 0.9]
        })
        let _chart = view2
          .interval()
@@ -1212,11 +1260,12 @@
            if (plot.show === 'percent') {
              value = value + '%'
            }
            if (plot.label === 'true' && plot.labelColor === 'custom' && item.color) {
              lablecfg.style.fill = item.color
            }
            return {
              content: value,
              style: {
                fill: plot.color
              }
              ...lablecfg
            }
          })
        }
@@ -1285,7 +1334,7 @@
   * @description 柱状图渲染
   */
  barrender = () => {
    const { plot, transfield } = this.state
    const { plot, transfield, config } = this.state

    let _data = []
    let _valfield = 'value'
@@ -1386,10 +1435,44 @@
      })
    }

    let offset = {offsetY: 5}
    let lablecfg = {
      position: 'top',
      offset: 2,
      style: {
        fill: '#fff'
      }
    }

    if (plot.label === 'top') {
      lablecfg.offset = -5
      lablecfg.style.textBaseline = 'top'
    } else if (plot.label === 'middle') {
      lablecfg.position = 'middle'
      lablecfg.offset = 0
    } else if (plot.label === 'bottom') {
      lablecfg.position = 'bottom'
      lablecfg.offset = 0
    } else if (plot.label === 'true') {
      lablecfg.style.fill = plot.color
    }

    if (plot.transpose === 'true') {
      chart.coordinate().transpose()
      offset = {offsetY: 0, offsetX: -10}
      if (plot.label === 'top') {
        delete lablecfg.style.textBaseline
        lablecfg.position = 'right'
        lablecfg.offset = -3
        lablecfg.style.textAlign = 'end'
      } else if (plot.label === 'middle') {
        lablecfg.position = 'middle'
        lablecfg.offset = 0
      } else if (plot.label === 'bottom') {
        lablecfg.position = 'left'
        lablecfg.offset = 2
      } else if (plot.label === 'true') {
        lablecfg.position = 'right'
        lablecfg.offset = 2
      }
    }

    if (plot.coordinate === 'polar') {
@@ -1431,22 +1514,33 @@
        _chart.color(_typefield)
      }
      if (plot.label === 'true') {
        _chart.label(_valfield, (value) => {
        _chart.label(`${_valfield}*${_typefield}`, (value, key) => {
          if (plot.show === 'percent') {
            value = value + '%'
          }

          if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
            lablecfg.style.fill = plot.$colors.get(key)
          }

          return {
            content: value,
            style: {
              fill: plot.color
            },
            ...offset
            ...lablecfg
          }
        })
      }

      if (plot.barSize || plot.correction) {
        _chart.size(plot.barSize || 35)
      }
      if (plot.selectColor) {
        _chart.state({
          selected: {
            style: {
              fill: plot.selectColor,
            }
          }
        })
      }
      if (plot.barRadius) {
        _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
@@ -1478,15 +1572,18 @@
        _chart.color(_typefield)
      }
      if (plot.label === 'true') {
        _chart.label(_valfield, (value) => {
        _chart.label(`${_valfield}*${_typefield}`, (value, key) => {
          if (plot.show === 'percent') {
            value = value + '%'
          }

          if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
            lablecfg.style.fill = plot.$colors.get(key)
          }

          return {
            content: value,
            style: {
              fill: plot.color
            }
            ...lablecfg
          }
        })
      }
@@ -1494,58 +1591,72 @@
      if (plot.barSize || plot.correction) {
        _chart.size(plot.barSize || 35)
      }
      if (plot.selectColor) {
        _chart.state({
          selected: {
            style: {
              fill: plot.selectColor,
            }
          }
        })
      }
      if (plot.barRadius) {
        _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
      }
    }

    if (plot.linkmenu && plot.linkmenu.length > 0) {
      let menu_id = plot.linkmenu.slice(-1)[0]
      let menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || ''
    chart.on('element:click', (ev) => {
      let data = ev.data.data
      MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), null)
    })

      chart.on('element:dblclick', (ev) => {
        if (!menu) {
          notification.warning({
            top: 92,
            message: '菜单已删除或没有访问权限！',
            duration: 5
          })
          return
        }
    // if (plot.linkmenu && plot.linkmenu.length > 0) {
    //   let menu_id = plot.linkmenu.slice(-1)[0]
    //   let menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || ''

        try {
          let data = ev.data.data
          let primaryId = ''
          if (this.state.config.setting.primaryKey && data) {
            primaryId = data[this.state.config.setting.primaryKey] || ''
          }
    //   chart.on('element:dblclick', (ev) => {
    //     if (!menu) {
    //       notification.warning({
    //         top: 92,
    //         message: '菜单已删除或没有访问权限！',
    //         duration: 5
    //       })
    //       return
    //     }

          let newtab = {
            ...menu,
            selected: true,
            param: {
              $BID: primaryId
            }
          }
    //     try {
    //       let data = ev.data.data
    //       let primaryId = ''
    //       if (this.state.config.setting.primaryKey && data) {
    //         primaryId = data[this.state.config.setting.primaryKey] || ''
    //       }

    //       let newtab = {
    //         ...menu,
    //         selected: true,
    //         param: {
    //           $BID: primaryId
    //         }
    //       }
  
          let tabs = this.props.tabviews.filter(tab => {
            tab.selected = false
            return tab.MenuID !== newtab.MenuID
          })
    //       let tabs = this.props.tabviews.filter(tab => {
    //         tab.selected = false
    //         return tab.MenuID !== newtab.MenuID
    //       })
  
          if (this.props.tabviews.length > tabs.length) {
            this.props.modifyTabview(fromJS(tabs).toJS())
          }
    //       if (this.props.tabviews.length > tabs.length) {
    //         this.props.modifyTabview(fromJS(tabs).toJS())
    //       }
  
          this.setState({}, () => {
            tabs.push(newtab)
            this.props.modifyTabview(tabs)
          })
        } catch {
          console.warn('菜单打开失败！')
        }
      })
    }
    //       this.setState({}, () => {
    //         tabs.push(newtab)
    //         this.props.modifyTabview(tabs)
    //       })
    //     } catch {
    //       console.warn('菜单打开失败！')
    //     }
    //   })
    // }

    if (plot.interaction && plot.interaction.length) {
      plot.interaction.forEach(t => {
@@ -1608,17 +1719,18 @@
  }
}

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    permMenus: state.permMenus,
  }
}
// const mapStateToProps = (state) => {
//   return {
//     tabviews: state.tabviews,
//     permMenus: state.permMenus,
//   }
// }

const mapDispatchToProps = (dispatch) => {
  return {
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}
// const mapDispatchToProps = (dispatch) => {
//   return {
//     modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
//   }
// }

export default connect(mapStateToProps, mapDispatchToProps)(LineChart)
// export default connect(mapStateToProps, mapDispatchToProps)(LineChart)
export default LineChart