From 8d66ff34fae5b048a6b7923cc75d34f13a08be9d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 02 八月 2022 11:42:43 +0800 Subject: [PATCH] Merge branch 'develop' --- src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 63 +++++++++++++++++++++++++------ 1 files changed, 50 insertions(+), 13 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx index a4147f1..bc181b0 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx @@ -1,6 +1,9 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined } from '@ant-design/icons' + +import MkIcon from '@/components/mk-icon' import moment from 'moment' import demo1 from '@/assets/img/demo1.jpg' @@ -24,6 +27,7 @@ '5:1': '20%', '6:1': '16.67%', '7:1': '14.29%', '8:1': '12.5%', '9:1': '11.11%', '10:1': '10%', '3:4': '133.33%', '2:3': '150%', '9:16': '177.78%' } +const appType = sessionStorage.getItem('appType') const Card = ({ id, parent, fields, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, updateMarks }) => { const originalIndex = findCard(id).index @@ -71,11 +75,26 @@ ) } 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 (<Icon 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}/> @@ -88,9 +107,10 @@ // ) } 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 @@ -132,21 +152,32 @@ </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> ) } @@ -159,18 +190,24 @@ } } + let able = true + if ((appType === 'mob' || appType === 'pc') && parent && (parent.setting.click === 'menu' || parent.setting.click === 'menus')) { + // if ((appType === 'mob' || appType === 'pc') && parent && parent.setting.click === 'menu') { + able = false + } + return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => editCard(id)} /> - <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" /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => editCard(id)} /> + <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 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}> - <div style={_style} onClick={clickComponent} id={card.uuid}> + <div style={_style} onClick={clickComponent} onDoubleClick={() => able && editCard(id)} id={card.uuid}> {getContent()} </div> </div> -- Gitblit v1.8.0