2021-11-18

king

2021-11-18 d4ceae86a84c085d240ecf1e1a2c8b697b8a40bc

2021-11-18

 src/assets/css/main.scss

@@ -435,6 +435,15 @@
div.ant-input-number {
  width: 100%;
}

.ant-progress {
  .ant-progress-circle-trail {
    stroke: inherit!important;
  }
  .ant-progress-text {
    color: inherit!important;
  }
}
// .ant-table.ant-table-mini .ant-table-thead > tr > th {
//   padding: 8px 4px;
// }

 src/components/mkProgress/index.jsx

@@ -15,9 +15,14 @@
    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" className={config.strokeLinecap || ''} strokeWidth={config.strokeWidth || 8} strokeColor={color} showInfo={config.showInfo === 'true'}/>
      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
@@ -25,10 +30,11 @@
    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} strokeLinecap={config.strokeLinecap || 'round'} type={type} strokeWidth={config.strokeWidth || 8} strokeColor={color} showInfo={config.showInfo === 'true'}/>
        <Progress percent={value} width={width} style={style} strokeLinecap={config.strokeLinecap || 'round'} type={type} strokeWidth={config.strokeWidth || 8} strokeColor={color} showInfo={config.showInfo === 'true'}/>
      </div>
    )
  }

 src/menu/components/card/cardcellcomponent/dragaction/mkProgress/index.jsx

@@ -14,9 +14,14 @@
    const { value, config } = 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" className={config.strokeLinecap || ''} strokeWidth={config.strokeWidth || 8} strokeColor={config.color} showInfo={config.showInfo === 'true'}/>
      return <Progress percent={value} style={style} type="line" className={config.strokeLinecap || ''} strokeWidth={config.strokeWidth || 8} strokeColor={config.color} showInfo={config.showInfo === 'true'}/>
    }

    let width = config.outlineWidth || 0
@@ -25,9 +30,11 @@
      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} type={type} strokeLinecap={config.strokeLinecap || 'round'} strokeWidth={config.strokeWidth || 8} strokeColor={config.color} showInfo={config.showInfo === 'true'}/>
        <Progress percent={value} width={width} style={style} type={type} strokeLinecap={config.strokeLinecap || 'round'} strokeWidth={config.strokeWidth || 8} strokeColor={config.color} showInfo={config.showInfo === 'true'}/>
      </div>
    )
  }

 src/menu/components/card/cardcellcomponent/elementform/index.jsx

@@ -42,18 +42,20 @@
    eleType: '',
    datatype: '',
    showType: '',
    showInfo: 'false',
    link: ''
  }

  UNSAFE_componentWillMount () {
    const { card, config } = this.props
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'))
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo)
    
    this.setState({
      link: card.link,
      eleType: card.eleType,
      datatype: card.datatype,
      showType: card.showType || 'line',
      showInfo: card.showInfo || 'false',
      formlist: this.props.formlist.map(item => {
        item.hidden = !_options.includes(item.key)

@@ -93,7 +95,7 @@
    })
  }

  getOptions = (eleType, datatype, link, showType) => {
  getOptions = (eleType, datatype, link, showType, showInfo) => {
    let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture', 'link', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) {
@@ -115,8 +117,13 @@
        }
      } else if (eleType === 'picture' && !link) {
        _options.push('scale')
      } else if (eleType === 'slider' && showType !== 'line') {
        _options.push('outlineWidth', 'textAlign')
      } else if (eleType === 'slider') {
        if (showInfo === 'true') {
          _options.push('infoColor')
        }
        if (showType !== 'line') {
          _options.push('outlineWidth', 'textAlign', 'trailColor')
        }
      }
    } else if (eleType === 'icon') {
      if (datatype === 'dynamic') {
@@ -137,10 +144,10 @@
   */
  selectChange = (key, value, option) => {
    const { card, config } = this.props
    const { datatype, eleType, showType } = this.state
    const { datatype, eleType, showType, showInfo } = this.state

    if (key === 'eleType') {
      let _options = this.getOptions(value, datatype, '', showType)
      let _options = this.getOptions(value, datatype, '', showType, showInfo)
      
      let _formlist = this.state.formlist.map(item => {
        item.hidden = !_options.includes(item.key)
@@ -176,6 +183,8 @@
          }
        } else if (item.key === 'url') {
          item.required = value !== 'qrcode'
        } else if (item.key === 'showInfo') {
          item.initVal = showInfo
        }

        return item
@@ -203,7 +212,7 @@
        this.props.form.setFieldsValue({value: option.props.title})
      }
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, this.state.datatype, value, showType)
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -218,11 +227,11 @@
  }

  onChange = (e, key) => {
    const { eleType, datatype, link, showType } = this.state
    const { eleType, datatype, link, showType, showInfo } = this.state
    let value = e.target.value

    if (key === 'datatype') {
      let _options = this.getOptions(eleType, value, link, showType)
      let _options = this.getOptions(eleType, value, link, showType, showInfo)

      this.setState({
        datatype: value,
@@ -233,7 +242,7 @@
        })
      })
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, datatype, value, showType)
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -244,11 +253,20 @@
          return item
        })
      })
    } else if (key === 'showInfo') {
      let _options = this.getOptions(eleType, datatype, link, showType, value)
      this.setState({
        showInfo: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          return item
        })
      })
    } else if (key === 'showType') {
      this.setState({
        showType: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, value)
        let _options = this.getOptions(eleType, datatype, link, value, showInfo)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)

 src/menu/components/card/cardcellcomponent/formconfig.jsx

@@ -176,11 +176,30 @@
      required: false
    },
    {
      type: 'radio',
      key: 'showType',
      label: '展现形式',
      initVal: card.showType || 'line',
      required: false,
      options: [
        { value: 'line', text: '进度条' },
        { value: 'circle', text: '进度圈' },
        { value: 'dashboard', text: '仪表盘' },
      ]
    },
    {
      type: 'color',
      key: 'color',
      label: '颜色',
      initVal: card.color || 'rgba(0, 0, 0, 0.85)',
      label: '进度条颜色',
      initVal: card.color || '#1890ff',
      required: true
    },
    {
      type: 'color',
      key: 'trailColor',
      label: '未完成颜色',
      initVal: card.trailColor || '#f5f5f5',
      required: false
    },
    {
      type: 'radio',
@@ -194,16 +213,11 @@
      ]
    },
    {
      type: 'radio',
      key: 'showType',
      label: '展现形式',
      initVal: card.showType || 'line',
      required: false,
      options: [
        { value: 'line', text: '进度条' },
        { value: 'circle', text: '进度圈' },
        { value: 'dashboard', text: '仪表盘' },
      ]
      type: 'color',
      key: 'infoColor',
      label: '进度值颜色',
      initVal: card.infoColor || 'rgba(0, 0, 0, 0.65)',
      required: false
    },
    {
      type: 'radio',