| | |
| | | ) |
| | | } else if (card.eleType === 'text' || card.eleType === 'number') { |
| | | let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}` |
| | | if (card.fixStyle === 'alone') { |
| | | let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight} |
| | | val = <><span style={_s}>{card.prefix || ''}</span>{`${card.datatype === 'static' ? (card.value || '') : (card.field || '')}`}<span style={_s}>{card.postfix || ''}</span></> |
| | | } |
| | | return ( |
| | | <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> |
| | | ) |
| | | } else if (card.eleType === 'icon') { |
| | | return (<MkIcon type={card.icon}/>) |
| | | let fontSize = 14 |
| | | let lineHeight = 1.5 |
| | | |
| | | if (card.style.fontSize) { |
| | | fontSize = parseInt(card.style.fontSize) |
| | | } |
| | | if (card.style.lineHeight) { |
| | | lineHeight = parseFloat(card.style.lineHeight) |
| | | } |
| | | |
| | | let innerHeight = fontSize * lineHeight |
| | | return (<MkIcon style={{height: innerHeight}} className="ant-mk-icon" type={card.icon}/>) |
| | | } else if (card.eleType === 'slider') { |
| | | let val = card.value ? (card.value / card.maxValue) * 100 : 30 |
| | | return <MkProgress value={val} config={card}/> |
| | |
| | | // ) |
| | | } else if (card.eleType === 'picture') { |
| | | let _imagestyle = {} |
| | | let url = card.url !== '@icon@' ? card.url : sessionStorage.getItem('CloudAvatar') |
| | | |
| | | if (card.url) { |
| | | _imagestyle = {backgroundImage: `url('${card.url}')`} |
| | | if (url) { |
| | | _imagestyle = {backgroundImage: `url('${url}')`} |
| | | } else { |
| | | let index = card.uuid.match(/\d{1}/g) |
| | | index = index.slice(-1)[0] % 5 |
| | |
| | | </div> |
| | | ) |
| | | } else if (card.eleType === 'video') { |
| | | _style.overflow = 'hidden' |
| | | return ( |
| | | <div> |
| | | <Video card={card} value={card.url || 'http://qingqiumarket.cn/mkwms/Content/images/upload/20210104/trailer.mp4'}/> |
| | | <div className="video-wrap"> |
| | | <Video card={card} poster={card.posterUrl || ''} value={card.url || 'http://qingqiumarket.cn/mkwms/Content/images/upload/20210104/trailer.mp4'}/> |
| | | </div> |
| | | ) |
| | | } else if (card.eleType === 'currentDate') { |
| | | let val = `${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}` |
| | | if (card.fixStyle === 'alone') { |
| | | let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight} |
| | | val = <><span style={_s}>{card.prefix || ''}</span>{moment().format(card.dateFormat)}<span style={_s}>{card.postfix || ''}</span></> |
| | | } |
| | | return ( |
| | | <div className="ant-mk-date"> |
| | | {`${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}`} |
| | | {val} |
| | | </div> |
| | | ) |
| | | } else if (card.eleType === 'formula') { |
| | | let val = `${card.prefix || ''}${card.formula}${card.postfix || ''}` |
| | | if (card.fixStyle === 'alone') { |
| | | let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight} |
| | | val = <><span style={_s}>{card.prefix || ''}</span>{card.formula}<span style={_s}>{card.postfix || ''}</span></> |
| | | } |
| | | return ( |
| | | <div className="ant-mk-date"> |
| | | {`${card.prefix || ''}${card.formula}${card.postfix || ''}`} |
| | | {val} |
| | | </div> |
| | | ) |
| | | } |