| | |
| | | import './index.scss' |
| | | |
| | | const BarCode = asyncComponent(() => import('@/components/barcode')) |
| | | const MkProgress = asyncComponent(() => import('./mkProgress')) |
| | | const QrCode = asyncComponent(() => import('@/components/qrcode')) |
| | | const Video = asyncComponent(() => import('@/components/video')) |
| | | const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) |
| | |
| | | return (<Icon type={card.icon}/>) |
| | | } else if (card.eleType === 'slider') { |
| | | let val = card.value ? (card.value / card.maxValue) * 100 : 30 |
| | | return ( |
| | | <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> |
| | | <div className="ant-mk-slider-handle" style={{left: `${val}%`, borderColor: card.color}}></div> |
| | | </div> |
| | | ) |
| | | return <MkProgress value={val} config={card}/> |
| | | // return ( |
| | | // <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> |
| | | // <div className="ant-mk-slider-handle" style={{left: `${val}%`, borderColor: card.color}}></div> |
| | | // </div> |
| | | // ) |
| | | } else if (card.eleType === 'picture') { |
| | | let _imagestyle = {} |
| | | |
| | |
| | | {`${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}`} |
| | | </div> |
| | | ) |
| | | } else if (card.eleType === 'formula') { |
| | | return ( |
| | | <div className="ant-mk-date"> |
| | | {`${card.prefix || ''}${card.formula}${card.postfix || ''}`} |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | |
| | |
| | | <Icon className="copy" title="复制" type="copy" onClick={() => copyCard(id)} /> |
| | | <Icon className="close" title="删除" type="close" onClick={() => delCard(id)} /> |
| | | <Icon className="style" title="调整样式" onClick={() => changeStyle(id)} type="font-colors" /> |
| | | {['text', 'number', 'slider', 'sequence'].includes(card.eleType) ? <MarkColumn columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } |
| | | {['text', 'number', 'slider', 'sequence', 'formula'].includes(card.eleType) ? <MarkColumn columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } |
| | | </div> |
| | | } trigger="hover"> |
| | | <div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width}> |