2020-05-22

king

2020-05-22 523cec6c87d88b43954a4409a8dfde6aade095a1

 src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx

@@ -13,9 +13,11 @@
import bar4 from '@/assets/img/bar4.png'
import pie1 from '@/assets/img/pie1.png'
import pie2 from '@/assets/img/pie2.png'
import card1 from '@/assets/img/card1.jpg'
import card2 from '@/assets/img/card2.jpg'
import card3 from '@/assets/img/card3.jpg'
import card1 from '@/assets/img/card1.png'
import card2 from '@/assets/img/card2.png'
import card3 from '@/assets/img/card3.png'
import card4 from '@/assets/img/card4.png'
import card5 from '@/assets/img/card5.png'
import './index.scss'

const syslegends = {
@@ -121,6 +123,16 @@
    {
      uuid: 'card3',
      url: card3,
      subelement: ['content', 'avatar', 'header']
    },
    {
      uuid: 'card4',
      url: card4,
      subelement: ['content', 'avatar', 'bottom']
    },
    {
      uuid: 'card5',
      url: card5,
      subelement: ['content', 'avatar', 'header', 'bottom']
    }
  ]
@@ -138,6 +150,7 @@
  state = {
    formlist: null,
    legends: null,
    columns: null,
    selectlegend: null
  }

@@ -148,6 +161,14 @@
    let _type = card.chartType || 'line'
    let _legends = null
    let _selectlegend = null
    let _columns = []

    // 获取标记卡片列，用于颜色赋值
    formlist.forEach(item => {
      if (item.key === 'bgfield') {
        _columns = item.options
      }
    })

    if (_type === 'line' || _type === 'bar' || _type === 'line') {
      _legends = syslegends[_type]
@@ -161,15 +182,14 @@

      if (card.subelement) {
        _selectlegend = _legends.filter(item => JSON.stringify(item.subelement) === JSON.stringify(card.subelement))[0]
      }

      if (!_selectlegend) {
      } else {
        _selectlegend = _legends[0]
      }
    }

    this.setState({
      legends: _legends,
      columns: _columns,
      selectlegend: _selectlegend,
      formlist: formlist.map(item => {
        if (item.key === 'height' && ['table', 'card'].includes(_type)) {
@@ -179,6 +199,10 @@
        } else if (item.key === 'cardWidth' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'over' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'border' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'switch' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'bgfield') {
          item.hidden = _type !== 'card'
@@ -228,6 +252,10 @@
            item.hidden = false
          } else if (item.key === 'over' && value === 'card') {
            item.hidden = false
          } else if (item.key === 'border' && value === 'card') {
            item.hidden = false
          } else if (item.key === 'switch' && value === 'card') {
            item.hidden = false
          } else if (item.key === 'bgfield') {
            item.hidden = value !== 'card'
          }
@@ -246,6 +274,32 @@
          if (item.key === 'cardWidth') {
            item.min = val === 'absolute' ? 50 : 1
            item.max = val === 'absolute' ? 1000 : 24
          }

          return item
        })
      })
    } else if (key === 'over' && val === 'roll') {
      this.setState({
        formlist: formlist.map(item => {
          if (item.key === 'cardWidth') {
            item.min = 50
            item.max = 1000
          } else if (item.key === 'widthType') {
            item.readonly = true
          }

          return item
        })
      })
      if (this.props.form.getFieldValue('widthType') !== undefined) {
        this.props.form.setFieldsValue({widthType: 'absolute'})
      }
    } else if (key === 'over' && val === 'whole') {
      this.setState({
        formlist: formlist.map(item => {
          if (item.key === 'widthType') {
            item.readonly = false
          }

          return item
@@ -355,7 +409,7 @@
                  }
                ]
              })(
                <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)}>
                <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)} disabled={item.readonly}>
                  {
                    item.options.map(option => {
                      return (
@@ -394,7 +448,7 @@
  }

  handleConfirm = () => {
    const { selectlegend } = this.state
    const { selectlegend, columns } = this.state
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
@@ -424,7 +478,9 @@
              result.Yaxis = result.Yaxis[0] || ''
            }
          } else if (result.chartType === 'card') {
            result.subelement = selectlegend.subelement
            if (selectlegend) {
              result.subelement = selectlegend.subelement
            }

            if (!result.details) {
              result.details = [
@@ -440,6 +496,7 @@
                elemType: 'header',
                content: 'Card title',
                datatype: 'static',
                show: 'icon',
                actions: []
              }
              result.avatar = {
@@ -452,6 +509,12 @@
                width: 32
              }
            }

            if (result.bgfield) {
              result.background = columns.filter(col => col.value === result.bgfield)[0].background
            } else {
              result.background = ''
            }
          }

          result.icon = icons[result.chartType]