From c34bcb0a3054bdab29fbaff17e587c19d7b5de28 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 16 九月 2020 23:39:28 +0800
Subject: [PATCH] 2020-09-16
---
src/menu/components/chart/antv-bar/index.jsx | 133 ++++++++++++++++++++++++++-----------------
1 files changed, 80 insertions(+), 53 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 4d2f9fa..6c216a0 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -4,40 +4,41 @@
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
+import MKEmitter from '@/utils/events.js'
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/datasourcecomponent'))
+const SettingComponent = asyncComponent(() => import('@/menu/datasource'))
const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const ChartCompileForm = asyncComponent(() => import('./chartcompile'))
class antvBarLineChart extends Component {
static propTpyes = {
- config: PropTypes.object,
+ menu: PropTypes.object,
card: PropTypes.object,
- editId: PropTypes.any,
- triggerEdit: PropTypes.func,
updateConfig: PropTypes.func,
}
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
card: null,
- visible: true
+ eventListener: null
}
UNSAFE_componentWillMount () {
- const { card } = this.props
+ const { card, menu } = this.props
if (card.isNew) {
let _plot = {
chartType: card.type, // 鍥捐〃绫诲瀷
enabled: 'false', // 鏄惁浣跨敤鑷畾涔夎缃�
datatype: 'query', // 鏁版嵁绫诲瀷鏌ヨ鎴栫粺璁�
+ customs: []
}
if (card.subtype === 'bar') {
@@ -46,13 +47,34 @@
} 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 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,
+ parentId: card.parentId || '',
+ format: 'array', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡
+ pageable: false, // 缁勪欢灞炴�� - 鏄惁鍙垎椤�
+ switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
+ dataName: dataName,
subtype: card.subtype,
- setting: {span: 12, height: 400},
+ setting: {span: card.floor === 1 ? 12 : 24, height: 400, interType: 'system', name: card.name},
columns: [],
scripts: [],
search: [],
@@ -72,13 +94,33 @@
componentDidMount () {
this.viewrender()
+ MKEmitter.addListener('tabsChange', this.handleTabsChange)
}
- UNSAFE_componentWillReceiveProps (nextProps) {
- if (!is(fromJS(this.props.plot), fromJS(nextProps.plot))) {
- this.setState({}, () => {
- this.viewrender()
- })
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ MKEmitter.removeListener('tabsChange', this.handleTabsChange)
+ }
+
+ handleTabsChange = (parentId) => {
+ const { card } = this.state
+
+ if (parentId === card.parentId) {
+ let _element = document.getElementById(card.uuid)
+ if (_element) {
+ _element.innerHTML = ''
+ }
+
+ setTimeout(this.viewrender, 100)
}
}
@@ -117,10 +159,11 @@
}
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
}
@@ -153,7 +196,7 @@
}
const chart = new Chart({
- container: plot.uuid,
+ container: card.uuid,
autoFit: true,
height: plot.height || 400
})
@@ -479,71 +522,55 @@
}
}
- plotChange = (_plot) => {
- const { config } = this.props
-
- if (_plot.datatype === 'statistics') {
- _plot.Yaxis = [_plot.InfoValue]
+ 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
}
- let _charts = fromJS(config.charts).toJS()
-
- _charts = _charts.map(item => {
- if (item.uuid === _plot.uuid) {
- if (!is(fromJS(item), fromJS(_plot))) {
- let _element = document.getElementById(_plot.uuid)
- if (_element) {
- _element.innerHTML = ''
- }
- }
- return _plot
- }
- return item
- })
-
- this.props.plotchange({...config, charts: _charts})
- }
-
- shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
- }
-
- updateComponent = (component) => {
this.setState({
card: component
+ }, () => {
+ if (refresh) {
+ setTimeout(() => {
+ this.viewrender()
+ }, 100)
+ }
})
this.props.updateConfig(component)
}
render() {
const { card } = this.state
- const { config } = this.props
+ const { menu } = 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}
- tableFields={config.tableFields || []}
- permFuncField={config.permFuncField || []}
+ config={card}
+ menu={menu}
updateConfig={this.updateComponent}
/>
<div className="chart-header">
<span className="chart-title">{card.setting.title || ''}</span>
<SearchComponent
- menu={config}
+ menu={menu}
config={card}
- sysRoles={config.sysRoles}
+ sysRoles={menu.sysRoles}
optionLibs={null}
updatesearch={this.updateComponent}
/>
</div>
<ActionComponent
type="chart"
- menu={config}
+ menu={menu}
config={card}
tabs={[]}
- usefulFields={config.permFuncField || []}
// setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')}
updateaction={this.updateComponent}
/>
--
Gitblit v1.8.0