| | |
| | | |
| | | card = _config.subcards[0] |
| | | |
| | | if (_config.wrap.dotSign === 'adaptive') { |
| | | try { |
| | | let cl = Math.floor(document.body.clientWidth * _config.width / 24 / 320) |
| | | _config.wrap.dotSign = ['', 'size16', 'size18', 'size20', 'size22', 'size24', 'size24', 'size24', 'size24'][cl] |
| | | } catch(e) { |
| | | _config.wrap.dotSign = 'size20' |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | card, |
| | | sync: _sync, |
| | |
| | | Api.writeCacheConfig(config.uuid, result.data || '') |
| | | } |
| | | |
| | | this.setState({ |
| | | data: result.data.map((item, index) => { |
| | | let data = result.data.map((item, index) => { |
| | | item.key = index |
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
| | | item.$$BID = BID || '' |
| | | item.$$BData = BData || '' |
| | | item.$Index = index + 1 + '' |
| | | return item |
| | | }), |
| | | }) |
| | | |
| | | this.setState({ |
| | | data: data, |
| | | loading: false |
| | | }) |
| | | |
| | | if (config.timer && config.clearField && result.data && result.data[0]) { |
| | | let vals = (config.clearValue || '').split(',') |
| | | if (vals.includes(result.data[0][config.clearField])) { |
| | | this.timer && this.timer.stop() |
| | | } |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | |
| | | </div> |
| | | <div className="mk-timeline-item-head"> |
| | | <div className="mk-timeline-item-tail" style={linebg}></div> |
| | | <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color}}> |
| | | <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color, color: color}}> |
| | | {dot} |
| | | </div> |
| | | </div> |
| | |
| | | return (<div className="mk-time-line-item" key={data.$Index}> |
| | | <div className="mk-timeline-item-head"> |
| | | <div className="mk-timeline-item-tail" style={linebg}></div> |
| | | <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color}}> |
| | | <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color, color: color}}> |
| | | {dot} |
| | | </div> |
| | | </div> |
| | |
| | | render() { |
| | | const { config, loading, data, description } = this.state |
| | | |
| | | if (config.wrap.empty === 'hidden' && (!data || data.length === 0)) return null |
| | | |
| | | return ( |
| | | <div className="normal-timeline-box" id={'anchor' + config.uuid} style={{...config.style}}> |
| | | {loading ? |
| | |
| | | {config.wrap.direction !== 'horizontal' && data && data.length > 0 ? <Timeline mode={config.wrap.mode} className={'card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}> |
| | | {data.map(item => this.getnodes(item))} |
| | | </Timeline> : null} |
| | | {config.wrap.direction === 'horizontal' && data && data.length > 0 ? <div className={'mk-time-line-wrap card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}> |
| | | {config.wrap.direction === 'horizontal' && data && data.length > 0 ? <div className={`mk-time-line-wrap card-row-list ${config.wrap.line || ''} ${config.wrap.iconSize || ''} ${config.wrap.dotSign || ''}`} style={{height: config.wrap.contentHeight}}> |
| | | {data.map(item => this.getMknodes(item))} |
| | | </div> : null} |
| | | {data && data.length === 0 ? <div className="card-row-list" style={{height: config.wrap.contentHeight}}> |