2020-06-05

king

2020-06-05 24f0ce147c8daef39ec437d5def9d089ea5b1839

 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 = {
@@ -111,17 +113,27 @@
    {
      uuid: 'card1',
      url: card1,
      type: 'card1'
      subelement: ['content']
    },
    {
      uuid: 'card2',
      url: card2,
      type: 'card2'
      subelement: ['content', 'avatar']
    },
    {
      uuid: 'card3',
      url: card3,
      type: '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]
@@ -157,16 +178,18 @@
        _selectlegend = _legends[0]
      }
    } else if (_type === 'card') {
      _legends = syslegends[_type]
      _selectlegend = _legends.filter(item => item.uuid === card.cardType)[0]
      _legends = syslegends.card

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

    this.setState({
      legends: _legends,
      columns: _columns,
      selectlegend: _selectlegend,
      formlist: formlist.map(item => {
        if (item.key === 'height' && ['table', 'card'].includes(_type)) {
@@ -177,6 +200,12 @@
          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'
        }
        return item
      })
@@ -223,6 +252,12 @@
            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'
          }
          return item
        })
@@ -239,6 +274,37 @@
          if (item.key === 'cardWidth') {
            item.min = val === 'absolute' ? 50 : 1
            item.max = val === 'absolute' ? 1000 : 24
          }

          return item
        })
      })
      if (val === 'absolute') {
        this.props.form.setFieldsValue({cardWidth: 250})
      } else {
        this.props.form.setFieldsValue({cardWidth: 6})
      }
    } 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', cardWidth: 250})
      }
    } else if (key === 'over' && val === 'whole') {
      this.setState({
        formlist: formlist.map(item => {
          if (item.key === 'widthType') {
            item.readonly = false
          }

          return item
@@ -348,7 +414,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 (
@@ -387,7 +453,7 @@
  }

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

            if (!result.details) {
              result.details = [
                {bold: 'true', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'},
                {bold: 'false', uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
                {elemType: 'detail', bold: 'true', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'},
                {elemType: 'detail',bold: 'false', uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
              ]
              result.actions = []
              result.title = ''
              result.bottom = {
                elemType: 'bottom',
                show: 'icon',
                actions: []
              }
              result.header = {
                elemType: 'header',
                content: 'Card title',
                datatype: 'static',
                show: 'icon',
                actions: []
              }
              result.avatar = {
                elemType: 'avatar',
                content: '',
                type: 'picture',
                field: '',
                size: 14,
                widthType: 'absolute',
                width: 32
              }
            }

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

@@ -452,11 +545,11 @@
      }
    }
    return (
      <Form {...formItemLayout} className="chart-edit-form" id="chartwinter">
      <Form {...formItemLayout} className="chart-edit-form mingke-table" id="chartwinter">
        <Row gutter={24}>{this.getFields()}</Row>
        {legends ? <Row gutter={24} className="chart-model-image">
          {legends.map(item => <Col span={6} key={item.uuid}>
            <img onClick={() => this.changeSelectLegend(item)} src={item.url} className={selectlegend.uuid === item.uuid ? 'active' : ''} alt=""/>
            <img onClick={() => this.changeSelectLegend(item)} src={item.url} className={selectlegend && selectlegend.uuid === item.uuid ? 'active' : ''} alt=""/>
          </Col>)}
        </Row> : null}
      </Form>