| | |
| | | |
| | | 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' |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { card } = this.props |
| | | |
| | | const { card, config } = this.props |
| | | // card.dataName = Utils.getdataName() |
| | | // this.props.updateConfig(card) |
| | | if (card.isNew) { |
| | | let _plot = { |
| | | chartType: card.type, // 图表类型 |
| | | enabled: 'false', // 是否使用自定义设置 |
| | | datatype: 'query', // 数据类型查询或统计 |
| | | customs: [] |
| | | } |
| | | |
| | | if (card.subtype === 'bar') { |
| | |
| | | } else if (card.subtype === 'bar1') { |
| | | _plot.coordinate = 'angle' |
| | | _plot.transpose = 'true' |
| | | } else if (card.subtype === 'line') { |
| | | _plot.shape = 'smooth' |
| | | } else if (card.subtype === 'line1') { |
| | | _plot.shape = 'hv' |
| | | } |
| | | |
| | | let name = '' |
| | | let names = { |
| | | bar: '柱状图', |
| | | line: '折线图', |
| | | } |
| | | let i = 1 |
| | | |
| | | while (!name) { |
| | | let _name = names[card.type] + i |
| | | if (config.components.filter(com => com.setting && com.setting.name === _name).length === 0) { |
| | | name = _name |
| | | } |
| | | i++ |
| | | } |
| | | |
| | | let dataName = '' |
| | | |
| | | while (!dataName) { |
| | | let _dataName = Utils.getdataName() |
| | | if (config.components.filter(com => com.dataName === _dataName).length === 0) { |
| | | dataName = _dataName |
| | | } |
| | | } |
| | | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | format: 'array', |
| | | dataName: dataName, |
| | | subtype: card.subtype, |
| | | setting: {span: 12, height: 400}, |
| | | setting: {span: 12, height: 400, interType: 'system', name}, |
| | | columns: [], |
| | | scripts: [], |
| | | search: [], |
| | |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | if (!is(fromJS(this.props.plot), fromJS(nextProps.plot))) { |
| | | this.setState({}, () => { |
| | | this.viewrender() |
| | | }) |
| | | |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | linerender = () => { |
| | | const { plot, config } = this.props |
| | | const { card } = this.state |
| | | let plot = {...card.plot, height: card.setting.height - 70} |
| | | |
| | | let transfield = {} |
| | | config.columns.forEach(col => { |
| | | card.columns.forEach(col => { |
| | | if (col.field) { |
| | | transfield[col.field] = col.label |
| | | } |
| | |
| | | } |
| | | |
| | | const chart = new Chart({ |
| | | container: plot.uuid, |
| | | container: card.uuid, |
| | | autoFit: true, |
| | | height: plot.height || 400 |
| | | }) |
| | |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | | const card = fromJS(this.state.card).toJS() |
| | | let refresh = false |
| | | if (card.setting.span !== component.setting.span || card.setting.height !== component.setting.height || !is(fromJS(component.plot), fromJS(card.plot))) { |
| | | let _element = document.getElementById(card.uuid) |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | } |
| | | refresh = true |
| | | } |
| | | |
| | | this.setState({ |
| | | card: component |
| | | }, () => { |
| | | if (refresh) { |
| | | setTimeout(() => { |
| | | this.viewrender() |
| | | }, 100) |
| | | } |
| | | }) |
| | | this.props.updateConfig(component) |
| | | } |
| | |
| | | const { config } = this.props |
| | | |
| | | return ( |
| | | <div className="line-chart-edit-box" style={{height: card.setting.height || 400}}> |
| | | <div className="menu-line-chart-edit-box" style={{height: card.setting.height || 400}}> |
| | | <SettingComponent |
| | | config={{...card, tables: config.tables}} |
| | | MenuID={config.uuid} |