菜单栏&时间轴

king

2022-06-28 0472ec32cadb4f9bca6dbab82ac33a42e76f37ed

 src/tabviews/custom/components/timeline/normal-timeline/index.jsx

@@ -304,6 +304,62 @@
    </Timeline.Item>)
  }

  getMknodes = (data) => {
    const { config, card } = this.state

    let color = config.wrap.color
    let dot = ''
    let linebg = {}
    if (config.wrap.node && card.nodes && card.nodes.length > 0) {
      let sign = data[config.wrap.node]
      card.nodes.some(item => {
        if (sign === item.sign) {
          color = item.color

          if (item.icon) {
            dot = <MkIcon type={item.icon}/>
          }

          if (item.linecolor) {
            linebg = {borderColor: item.linecolor}
          }
          return true
        }
        return false
      })
    }

    if (config.wrap.mode === 'down') {
      return (<div className="mk-time-line-item" key={data.$Index}>
        <div className="mk-timeline-item-content">
          <div className="card-item-box" style={card.style}>
            <CardCellComponent data={data} cards={config} cardCell={card} elements={card.elements}/>
          </div>
        </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}}>
            {dot}
          </div>
        </div>
      </div>)
    } else {
      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}}>
            {dot}
          </div>
        </div>
        <div className="mk-timeline-item-content">
          <div className="card-item-box" style={card.style}>
            <CardCellComponent data={data} cards={config} cardCell={card} elements={card.elements}/>
          </div>
        </div>
      </div>)
    }
  }

  render() {
    const { config, loading, data } = this.state

@@ -316,9 +372,12 @@
          </div> : null
        }
        <NormalHeader config={config} />
        {data && data.length > 0 ? <Timeline mode={config.wrap.mode} reverse={config.wrap.reverse === 'true'} className={'card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}>
        {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}}>
          {data.map(item => this.getMknodes(item))}
        </div> : null}
        {data && data.length === 0 ? <div className="card-row-list" style={{height: config.wrap.contentHeight}}>
          <Empty description={false}/>
        </div> : null}