2020-10-13

king

2020-10-13 8f6b3d26bde4e22773cc53386dfbae669a7472ed

 src/tabviews/custom/components/card/cardcellList/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Button, Icon } from 'antd'
import { Button, Icon, Col, Tooltip } from 'antd'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
@@ -12,6 +12,7 @@
  static propTpyes = {
    cards: PropTypes.object,         // 菜单配置信息
    cardCell: PropTypes.object,
    data: PropTypes.object,
    elements: PropTypes.array,       // 元素集
  }

@@ -46,18 +47,76 @@
  }

  getContent = (card) => {
    const { data } = this.props

    if (card.eleType === 'text' || card.eleType === 'number') {
      let val = `${card.prefix || ''}${card.value || ''}${card.postfix || ''}`
      return <span key={card.uuid}>{val}</span>
    } else if (card.eleType === 'icon') {
      return (<Icon key={card.uuid} type={card.icon}/>)
    } else if (card.eleType === 'slider') {
      let val = ''

      if (card.datatype === 'static') {
        val = card.value
      } else if (data.hasOwnProperty(card.field)) {
        val = data[card.field]
      }

      if (val !== '') {
        val = `${card.prefix || ''}${val}${card.postfix || ''}`
      }

      return (
        <div className="ant-mk-slider" key={card.uuid}>
          <div className="ant-mk-slider-rail"></div>
          <div className="ant-mk-slider-track" style={{width: '30%', backgroundColor: card.color}}></div>
          <div className="ant-mk-slider-handle" style={{left: '30%', borderColor: card.color}}></div>
        </div>
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>{val}</div>
        </Col>
      )
    } else if (card.eleType === 'icon') {
      let val = ''

      if (card.datatype === 'static') {
        val = card.tooltip
      } else if (data.hasOwnProperty(card.field)) {
        val = data[card.field]
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            {val ? <Tooltip title={val}>
              <Icon type={card.icon}/>
            </Tooltip> : <Icon type={card.icon}/>}
          </div>
        </Col>
      )
    } else if (card.eleType === 'slider') {
      let val = 0

      if (data.hasOwnProperty(card.field)) {
        val = parseFloat(data[card.field])
        if (isNaN(val)) {
          val = 0
        }
      }

      val = val / card.maxValue * 100
      val = parseInt(val * 100) / 100

      let _val = val
      if (val > 100) {
        _val = '100%'
      } else {
        _val = `${val}%`
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className="ant-mk-slider">
              <div className="ant-mk-slider-rail"></div>
              <div className="ant-mk-slider-track" style={{width: _val, backgroundColor: card.color}}></div>
              <Tooltip title={val}>
                <div className="ant-mk-slider-handle" style={{left: _val, borderColor: card.color}}></div>
              </Tooltip>
            </div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'picture') {
      let _imagestyle = {}
@@ -83,29 +142,50 @@
      }

      return (
        <div className="ant-mk-picture" key={card.uuid} style={_imagestyle}></div>
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className="ant-mk-picture" style={_imagestyle}></div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'splitline') {
      return (
        <div className="ant-mk-splitline" key={card.uuid} style={{backgroundColor: card.color}}></div>
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className="ant-mk-splitline" style={{backgroundColor: card.color}}></div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'button') {
      if (card.show === 'icon') {
        return (card.icon ? <Button key={card.uuid} className={'mk-link mk-' + card.class} style={card.btnstyle} type="link"><Icon type={card.icon}/></Button> : null)
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link"><Icon type={card.icon}/></Button>
            </div>
          </Col>
        )
      } else if (card.show === 'link') {
        return (
          <Button key={card.uuid} className={'mk-link mk-' + card.class} style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
            </div>
          </Col>
        )
      } else {
        return (
          <Button
            key={card.uuid}
            className={'mk-btn mk-' + card.class}
            icon={card.icon}
            style={card.btnstyle}
          >
            {card.label}
          </Button>
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button
                className={'mk-btn mk-' + card.class}
                icon={card.icon}
                style={card.btnstyle}
              >
                {card.label}
              </Button>
            </div>
          </Col>
        )
      }
    }
@@ -115,7 +195,7 @@
    const { elements } = this.state

    return (
      <div className="model-menu-card-cell-list">
      <div className="card-cell-list">
        {elements.map(item => this.getContent(item))}
      </div>
    )