| | |
| | | import React from 'react' |
| | | import { useDrag, useDrop } from 'react-dnd' |
| | | import { Popover } from 'antd' |
| | | import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons' |
| | | |
| | | import MkIcon from '@/components/mk-icon' |
| | | import moment from 'moment' |
| | |
| | | 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></> |
| | | } |
| | | if (card.sortField) { |
| | | val = <><span>{val}</span><span className="sort-wrap"><CaretUpOutlined /><CaretDownOutlined /></span></> |
| | | } |
| | | return ( |
| | | <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> |
| | | ) |
| | | } else if (card.eleType === 'icon') { |
| | | if (card.tipType === 'text') { |
| | | return <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{card.value || card.field || ''}</div> |
| | | } |
| | | return (<MkIcon style={{height: card.innerHeight || 'auto'}} className="ant-mk-icon" type={card.icon || 'bell'}/>) |
| | | } else if (card.eleType === 'slider') { |
| | | let val = card.value ? (card.value / card.maxValue) * 100 : 30 |
| | |
| | | // </div> |
| | | // ) |
| | | } else if (card.eleType === 'picture') { |
| | | let _imagestyle = {} |
| | | let _imagestyle = { |
| | | backgroundSize: card.style.backgroundSize || 'cover', |
| | | backgroundPosition: card.style.backgroundPosition || 'center', |
| | | backgroundRepeat: card.style.backgroundRepeat || 'no-repeat', |
| | | borderRadius: card.style.borderRadius || 0 |
| | | } |
| | | let url = card.url !== '@icon@' ? card.url : sessionStorage.getItem('CloudAvatar') |
| | | |
| | | if (url) { |
| | | url = url.replace(/@mywebsite@\//ig, window.GLOB.baseurl) |
| | | _imagestyle = {backgroundImage: `url('${url}')`} |
| | | _imagestyle.backgroundImage = `url('${url}')` |
| | | } else { |
| | | let index = card.uuid.match(/\d{1}/g) |
| | | index = index.slice(-1)[0] % 5 |
| | | let demos = [demo1, demo2, demo3, demo4, demo5] |
| | | |
| | | _imagestyle = {backgroundImage: `url('${demos[index]}')`} |
| | | } |
| | | |
| | | if (card.style && card.style.borderRadius) { |
| | | _imagestyle.borderRadius = card.style.borderRadius |
| | | _imagestyle.backgroundImage = `url('${demos[index]}')` |
| | | } |
| | | |
| | | if (PicRadio[card.lenWidRadio]) { |
| | | _imagestyle.paddingTop = PicRadio[card.lenWidRadio] |
| | | } else { |
| | | _imagestyle.paddingTop = '100%' |
| | | } |
| | | |
| | | if (card.backgroundSize) { |
| | | _imagestyle.backgroundSize = card.backgroundSize |
| | | } |
| | | |
| | | return ( |
| | |
| | | |
| | | if (card.style && card.style.clear === 'left') { |
| | | _style_ = {clear: 'left'} |
| | | } else if (card.style && card.style.clear === 'right') { |
| | | _style_ = {float: 'right'} |
| | | } |
| | | |
| | | let tableHCell = false |
| | | if (parent.setting && parent.setting.cardRole === 'header') { |
| | | tableHCell = true |
| | | } |
| | | |
| | | return ( |
| | |
| | | <CopyOutlined className="copy" title="复制" onClick={() => copyCard(id)} /> |
| | | <CloseOutlined className="close" title="删除" onClick={() => delCard(id)} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={() => changeStyle(id)}/> |
| | | {['text', 'number', 'slider', 'sequence', 'formula'].includes(card.eleType) ? <MarkColumn field={card.field || ''} columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } |
| | | {['text', 'number', 'slider', 'sequence', 'formula'].includes(card.eleType) && !tableHCell ? <MarkColumn field={card.field || ''} columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } |
| | | </div> |
| | | } trigger="hover"> |
| | | <div ref={node => drag(drop(node))} style={_style_} className={'ant-col card-cell ant-col-' + card.width}> |