| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Popover, notification } from 'antd' |
| | | import { Popover } from 'antd' |
| | | import { PlusCircleOutlined, PlusSquareOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | import { Chart } from '@antv/g2' |
| | | import DataSet from '@antv/data-set' |
| | |
| | | |
| | | const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) |
| | | const ChartCompileForm = asyncIconComponent(() => import('./chartcompile')) |
| | | const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) |
| | | // const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) |
| | | const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) |
| | |
| | | return col |
| | | }) |
| | | } |
| | | this.setState({ |
| | | card: _card |
| | | }) |
| | | this.props.updateConfig(_card) |
| | | |
| | | this.updateComponent(_card, true) |
| | | } else { |
| | | this.setState({ |
| | | card: fromJS(card).toJS() |
| | |
| | | } |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | | const card = fromJS(this.state.card).toJS() |
| | | if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style)) || !is(fromJS(component.search), fromJS(card.search))) { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | updateComponent = (card, init) => { |
| | | if (!init) { |
| | | if (!is(fromJS({plot: card.plot, style: card.style, search: card.search}), fromJS({plot: this.state.card.plot, style: this.state.card.style, search: this.state.card.search}))) { |
| | | let _element = document.getElementById(this.state.card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | } |
| | | this.$timer && clearTimeout(this.$timer) |
| | | this.$timer = setTimeout(() => { |
| | | this.viewrender() |
| | | }, 150) |
| | | } |
| | | this.$timer && clearTimeout(this.$timer) |
| | | this.$timer = setTimeout(() => { |
| | | this.viewrender() |
| | | }, 150) |
| | | } |
| | | |
| | | component.width = component.plot.width |
| | | component.name = component.plot.name |
| | | card.width = card.plot.width |
| | | card.name = card.plot.name |
| | | card.btnlog = [] |
| | | card.errors = [] |
| | | |
| | | if (card.setting.interType === 'system' && card.setting.execute !== 'false' && !card.setting.dataresource) { |
| | | card.errors.push({ level: 0, detail: '未设置数据源!'}) |
| | | } else if (card.setting.interType === 'system' && card.setting.execute === 'false' && card.scripts.filter(script => script.status !== 'false').length === 0) { |
| | | card.errors.push({ level: 0, detail: '数据源中无可用脚本!'}) |
| | | } else if (!card.setting.primaryKey) { |
| | | card.errors.push({ level: 0, detail: '未设置主键!'}) |
| | | } else if (!card.setting.supModule) { |
| | | card.errors.push({ level: 0, detail: '未设置上级组件!'}) |
| | | } |
| | | |
| | | let columns = card.columns.map(c => c.field) |
| | | if (!card.plot.Xaxis) { |
| | | card.errors.push({ level: 0, detail: '坐标轴尚未设置!'}) |
| | | } else if (card.plot.datatype === 'query') { |
| | | if (!columns.includes(card.plot.Xaxis)) { |
| | | card.errors.push({ level: 1, detail: 'X轴在字段集中不存在'}) |
| | | } |
| | | if (card.plot.Yaxis) { |
| | | card.plot.Yaxis.forEach(m => { |
| | | if (!columns.includes(m)) { |
| | | card.errors.push({ level: 1, detail: `Y轴中字段“${m}”已失效`}) |
| | | } |
| | | }) |
| | | } |
| | | } else if (card.plot.datatype === 'statistics') { |
| | | if (!columns.includes(card.plot.Xaxis)) { |
| | | card.errors.push({ level: 1, detail: 'X轴在字段集中不存在'}) |
| | | } |
| | | if (!columns.includes(card.plot.InfoType)) { |
| | | card.errors.push({ level: 1, detail: '图表中统计类型字段已失效'}) |
| | | } |
| | | if (!columns.includes(card.plot.InfoValue)) { |
| | | card.errors.push({ level: 1, detail: '图表中统计值字段已失效'}) |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | card: component |
| | | card: card |
| | | }) |
| | | this.props.updateConfig(component) |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | addSearch = () => { |
| | |
| | | this.updateComponent(_card) |
| | | } |
| | | |
| | | handleLog = (type, logs, item) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | // handleLog = (type, logs, item) => { |
| | | // let card = fromJS(this.state.card).toJS() |
| | | |
| | | if (type === 'revert') { |
| | | card.action = card.action ? [...card.action, item] : [item] |
| | | card.btnlog = logs |
| | | // if (type === 'revert') { |
| | | // card.action = card.action ? [...card.action, item] : [item] |
| | | // card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '恢复成功!', |
| | | duration: 2 |
| | | }) |
| | | } else { |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | | duration: 2 |
| | | }) |
| | | } |
| | | } |
| | | // this.updateComponent(card) |
| | | // notification.success({ |
| | | // top: 92, |
| | | // message: '恢复成功!', |
| | | // duration: 2 |
| | | // }) |
| | | // } else { |
| | | // card.btnlog = logs |
| | | // this.updateComponent(card) |
| | | // notification.success({ |
| | | // top: 92, |
| | | // message: '清除成功!', |
| | | // duration: 2 |
| | | // }) |
| | | // } |
| | | // } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | |
| | | <CopyComponent type="line" card={card}/> |
| | | <PasteComponent config={card} options={['action', 'search']} updateConfig={this.updateComponent} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> |
| | | {/* <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> */} |
| | | <ClockComponent config={card} updateConfig={this.updateComponent}/> |
| | | <UserComponent config={card}/> |
| | | <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> |
| | |
| | | config={card} |
| | | updateaction={this.updateComponent} |
| | | /> : null} |
| | | <div className="component-name"><div className="center">{card.name}</div></div> |
| | | <div className="component-name"> |
| | | <div className="center"> |
| | | <div className="title">{card.name}</div> |
| | | <div className="content"> |
| | | {card.errors && card.errors.map((err, index) => { |
| | | if (err.level === 0) { |
| | | return <span key={index} className="error">{err.detail}</span> |
| | | } else { |
| | | return <span key={index} className="waring">{err.detail};</span> |
| | | } |
| | | })} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | ) |
| | | } |