| | |
| | | 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' |
| | |
| | | static propTpyes = { |
| | | cards: PropTypes.object, // 菜单配置信息 |
| | | cardCell: PropTypes.object, |
| | | data: PropTypes.object, |
| | | elements: PropTypes.array, // 元素集 |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | 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 = {} |
| | |
| | | } |
| | | |
| | | 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> |
| | | ) |
| | | } |
| | | } |
| | |
| | | const { elements } = this.state |
| | | |
| | | return ( |
| | | <div className="model-menu-card-cell-list"> |
| | | <div className="card-cell-list"> |
| | | {elements.map(item => this.getContent(item))} |
| | | </div> |
| | | ) |