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 | 174 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 105 insertions(+), 69 deletions(-) diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx index cf3b9d1..6c216a0 100644 --- a/src/menu/components/chart/antv-bar/index.jsx +++ b/src/menu/components/chart/antv-bar/index.jsx @@ -4,47 +4,82 @@ import { Chart } from '@antv/g2' import DataSet from '@antv/data-set' +import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' -import zhCN from '@/locales/zh-CN/mob.js' -import enUS from '@/locales/en-US/mob.js' -// import ChartCompileForm from './chartcompile' +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, config } = this.props + const { card, menu } = this.props - console.log(config) if (card.isNew) { + let _plot = { + chartType: card.type, // 鍥捐〃绫诲瀷 + enabled: 'false', // 鏄惁浣跨敤鑷畾涔夎缃� + datatype: 'query', // 鏁版嵁绫诲瀷鏌ヨ鎴栫粺璁� + customs: [] + } + + if (card.subtype === 'bar') { + _plot.coordinate = 'angle' // 浜岀淮鍧愭爣鎴栨瀬鍧愭爣 + _plot.transpose = 'false' // 鍧愭爣杞村彉鎹� + } 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: [], action: [], - plot: {type: card.type, Xaxis: '', Yaxis: null} + plot: _plot } this.setState({ card: _card @@ -59,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) } } @@ -96,18 +151,19 @@ viewrender = () => { const { card } = this.state - if (card.plot.type === 'line') { + if (card.plot.chartType === 'line') { this.linerender() - } else if (card.plot.type === 'bar') { + } else if (card.plot.chartType === 'bar') { this.barrender() } } 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 } @@ -140,7 +196,7 @@ } const chart = new Chart({ - container: plot.uuid, + container: card.uuid, autoFit: true, height: plot.height || 400 }) @@ -370,8 +426,6 @@ let Y_axis = plot.Yaxis || ['y'] let data = this.getdata(X_axis, Y_axis) - console.log(plot) - console.log(data) if (plot.enabled !== 'true') { const ds = new DataSet() @@ -400,7 +454,6 @@ height: plot.height || 400 }) - console.log(dv.rows) chart.data(dv.rows) chart.scale('value', { @@ -469,81 +522,64 @@ } } - 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={{MenuID: config.uuid, MenuName: config.MenuName}} + menu={menu} config={card} - sysRoles={config.sysRoles} + sysRoles={menu.sysRoles} optionLibs={null} updatesearch={this.updateComponent} /> </div> <ActionComponent - menu={{ MenuID: config.uuid, MenuName: config.MenuName, MenuNo: config.MenuNo, fstMenuList: config.fstMenuList }} + type="chart" + menu={menu} config={card} tabs={[]} - usefulFields={config.permFuncField || []} // setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')} updateaction={this.updateComponent} /> <div className="canvas" id={card.uuid}></div> - {/* <ChartCompileForm - plot={plot} - type={plot.chartType} - config={this.props.config} + <ChartCompileForm + config={card} dict={this.state.dict} - plotchange={this.plotChange} - /> */} + plotchange={this.updateComponent} + /> </div> ) } -- Gitblit v1.8.0