king
2020-09-23 0de207ebed200dffca41b8c974d1394cf328b03e
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
 
import asyncComponent from '@/utils/asyncComponent'
 
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'
 
const SettingComponent = asyncComponent(() => import('@/menu/datasource'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
 
class antvBarLineChart extends Component {
  static propTpyes = {
    card: PropTypes.object,
    updateConfig: PropTypes.func,
  }
 
  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null
  }
 
  UNSAFE_componentWillMount () {
    const { card, menu } = this.props
 
    if (card.isNew) {
      let dataName = ''
 
      if (card.floor === 1) {
        while (!dataName) {
          let _dataName = Utils.getdataName()
          if (menu.components.filter(com => com.dataName === _dataName).length === 0) {
            dataName = _dataName
          }
        }
      }
 
      let _card = {
        uuid: card.uuid,
        type: card.type,
        floor: card.floor,
        tabId: card.tabId || '',
        parentId: card.parentId || '',
        format: 'array',   // 组件属性 - 数据格式
        pageable: false,   // 组件属性 - 是否可分页
        switchable: false, // 组件属性 - 数据是否可切换
        dataName: dataName,
        subtype: card.subtype,
        setting: {span: 24, height: 200, interType: 'system', name: card.name},
        columns: [],
        scripts: [],
        search: [],
        action: [],
      }
      this.setState({
        card: _card
      })
      this.props.updateConfig(_card)
    } else {
      this.setState({
        card: fromJS(card).toJS()
      })
    }
  }
 
  componentDidMount () {
 
  }
 
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }
 
  /**
   * @description 组件销毁,清除state更新,清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }
 
  updateComponent = (component) => {
    this.setState({
      card: component
    })
    this.props.updateConfig(component)
  }
 
  render() {
    const { card } = this.state
 
    return (
      <div className="menu-data-card-edit-box" style={{height: card.setting.height || 400}}>
        <SettingComponent
          config={card}
          updateConfig={this.updateComponent}
        />
        <div className="chart-header">
          <span className="chart-title">{card.setting.title || ''}</span>
        </div>
        <ActionComponent
          type="chart"
          config={card}
          tabs={[]}
          // setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')}
          updateaction={this.updateComponent}
        />
        <div className="canvas" id={card.uuid}></div>
      </div>
    )
  }
}
 
const mapStateToProps = (state) => {
  return {
    menu: state.customMenu
  }
}
 
const mapDispatchToProps = () => {
  return {}
}
 
export default connect(mapStateToProps, mapDispatchToProps)(antvBarLineChart)