From 8f6b3d26bde4e22773cc53386dfbae669a7472ed Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 13 十月 2020 09:16:21 +0800
Subject: [PATCH] 2020-10-13
---
src/tabviews/custom/components/card/cardcellList/index.jsx | 128 ++++++++++++++++++++++++++++++++++--------
1 files changed, 104 insertions(+), 24 deletions(-)
diff --git a/src/tabviews/custom/components/card/cardcellList/index.jsx b/src/tabviews/custom/components/card/cardcellList/index.jsx
index dbab48a..5a1d9c8 100644
--- a/src/tabviews/custom/components/card/cardcellList/index.jsx
+++ b/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>
)
--
Gitblit v1.8.0