2025-05-14

king

2025-05-14 7c4e955aa35cf5aa2a0c86fe19d930b7fcbffd74

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Progress } from 'antd'
 
// import './index.scss'
 
class MkProgress extends Component {
  static propTpyes = {
    config: PropTypes.object,
    color: PropTypes.any,
    value: PropTypes.any,
  }
 
  render() {
    const { value, config, color } = this.props
 
    let type = config.showType || 'line'
    let style = {}
 
    if (config.showInfo === 'true') {
      style.color = config.infoColor || 'rgba(0, 0, 0, 0.65)'
    }
 
    if (type === 'line') {
      return <Progress percent={value} type="line" style={style} className={config.strokeLinecap || ''} strokeWidth={config.strokeWidth || 8} strokeColor={color} showInfo={config.showInfo === 'true'}/>
    }
 
    let width = config.outlineWidth || 0
 
    if (this.progress && (!width || width > this.progress.clientWidth)) {
      width = this.progress.clientWidth
    }
    style.stroke = config.trailColor || '#f5f5f5'
 
    return (
      <div ref={(ref) => this.progress = ref } style={{textAlign: config.textAlign || 'left'}}>
        <Progress percent={value} width={width} style={style} strokeLinecap={config.strokeLinecap || 'round'} type={type} strokeWidth={config.strokeWidth || 8} strokeColor={color} showInfo={config.showInfo === 'true'}/>
      </div>
    )
  }
}
 
export default MkProgress