From 407c0f1765c7d085218a91ad8842784977383d05 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 23 十月 2020 00:18:13 +0800
Subject: [PATCH] 2020-10-23
---
src/menu/components/chart/antv-bar/index.jsx | 254 ++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 221 insertions(+), 33 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index c16378f..bdf0665 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -1,27 +1,30 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
+import { Icon, Popover } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
+import asyncIconComponent from '@/utils/asyncIconComponent'
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 SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
-const ChartCompileForm = asyncComponent(() => import('./chartcompile'))
+const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
class antvBarLineChart extends Component {
static propTpyes = {
- menu: PropTypes.object,
card: PropTypes.object,
updateConfig: PropTypes.func,
+ deletecomponent: PropTypes.func,
}
state = {
@@ -38,7 +41,10 @@
chartType: card.type, // 鍥捐〃绫诲瀷
enabled: 'false', // 鏄惁浣跨敤鑷畾涔夎缃�
datatype: 'query', // 鏁版嵁绫诲瀷鏌ヨ鎴栫粺璁�
- customs: []
+ customs: [],
+ width: 24,
+ height: 400,
+ name: card.name
}
if (card.subtype === 'bar') {
@@ -74,8 +80,15 @@
pageable: false, // 缁勪欢灞炴�� - 鏄惁鍙垎椤�
switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
dataName: dataName,
+ width: _plot.width,
+ name: _plot.name,
subtype: card.subtype,
- setting: {span: card.floor === 1 ? 12 : 24, height: 400, interType: 'system', name: card.name},
+ setting: { interType: 'system' },
+ style: {
+ fontSize: '16px',
+ borderWidth: '1px', borderColor: 'rgb(217, 217, 217)',
+ marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
+ },
columns: [],
scripts: [],
search: [],
@@ -96,6 +109,7 @@
componentDidMount () {
this.viewrender()
MKEmitter.addListener('tabsChange', this.handleTabsChange)
+ MKEmitter.addListener('submitStyle', this.getStyle)
}
shouldComponentUpdate (nextProps, nextState) {
@@ -110,6 +124,7 @@
return
}
MKEmitter.removeListener('tabsChange', this.handleTabsChange)
+ MKEmitter.removeListener('submitStyle', this.getStyle)
}
handleTabsChange = (parentId) => {
@@ -161,7 +176,8 @@
linerender = () => {
const { card } = this.state
- let plot = {...card.plot, height: card.setting.height - 70}
+ let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let transfield = {}
card.columns.forEach(col => {
@@ -203,6 +219,31 @@
})
chart.data(dv.rows)
+
+ chart.axis(X_axis, {
+ label: {
+ style: {
+ fill: color,
+ }
+ },
+ line: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+ chart.axis('value', {
+ grid: {
+ style: {
+ fill: color,
+ }
+ },
+ label: {
+ style: {
+ fill: color,
+ }
+ }
+ })
if (plot.coordinate !== 'polar') {
chart.scale(X_axis, {
@@ -217,7 +258,12 @@
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ position: plot.legend,
+ itemName: {
+ style: {
+ fill: color,
+ }
+ }
})
}
@@ -265,7 +311,9 @@
}
customrender = (data, transfield) => {
- const { plot } = this.props
+ const { card } = this.state
+ let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let barfields = []
let fields = []
@@ -317,6 +365,31 @@
chart.data(dv.rows)
+ chart.axis(plot.Xaxis, {
+ label: {
+ style: {
+ fill: color,
+ }
+ },
+ line: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+ chart.axis('value', {
+ grid: {
+ style: {
+ fill: color,
+ }
+ },
+ label: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+
if (plot.coordinate !== 'polar' && barfields.length === 0) {
chart.scale(plot.Xaxis, {
range: [0, 1]
@@ -330,6 +403,11 @@
custom: true,
position: plot.legend,
items: legends,
+ itemName: {
+ style: {
+ fill: color,
+ }
+ }
})
}
@@ -337,7 +415,7 @@
chart.tooltip(false)
} else {
chart.tooltip({
- shared: true
+ shared: true,
})
}
@@ -414,8 +492,8 @@
barrender = () => {
const { card } = this.state
-
- let plot = {...card.plot, height: card.setting.height - 70}
+ let plot = {...card.plot, height: card.plot.height - 80}
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let transfield = {}
card.columns.forEach(col => {
@@ -456,6 +534,31 @@
})
chart.data(dv.rows)
+
+ chart.axis(X_axis, {
+ label: {
+ style: {
+ fill: color,
+ }
+ },
+ line: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+ chart.axis('value', {
+ grid: {
+ style: {
+ fill: color,
+ }
+ },
+ label: {
+ style: {
+ fill: color,
+ }
+ }
+ })
chart.scale('value', {
nice: true
@@ -465,7 +568,12 @@
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ position: plot.legend,
+ itemName: {
+ style: {
+ fill: color,
+ }
+ }
})
}
@@ -526,13 +634,16 @@
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))) {
+ if (!is(fromJS(component.plot), fromJS(card.plot))) {
let _element = document.getElementById(card.uuid)
if (_element) {
_element.innerHTML = ''
}
refresh = true
}
+
+ component.width = component.plot.width
+ component.name = component.plot.name
this.setState({
card: component
@@ -546,44 +657,121 @@
this.props.updateConfig(component)
}
+ addSearch = () => {
+ const { card } = this.state
+
+ let newcard = {}
+ newcard.uuid = Utils.getuuid()
+ newcard.focus = true
+
+ newcard.label = 'label'
+ newcard.initval = ''
+ newcard.type = 'select'
+ newcard.resourceType = '0'
+ newcard.options = []
+ newcard.setAll = 'false'
+ newcard.orderType = 'asc'
+ newcard.display = 'dropdown'
+ newcard.match = '='
+
+ // 娉ㄥ唽浜嬩欢-娣诲姞鎼滅储
+ MKEmitter.emit('addSearch', card.uuid, newcard)
+ }
+
+ addButton = () => {
+ const { card } = this.state
+
+ let newcard = {}
+ newcard.uuid = Utils.getuuid()
+ newcard.focus = true
+
+ newcard.label = '瀵煎嚭Excel'
+ newcard.sqlType = ''
+ newcard.Ot = 'requiredSgl'
+ newcard.OpenType = 'excelOut'
+ newcard.icon = 'download'
+ newcard.class = 'dgreen'
+ newcard.intertype = card.setting.interType
+ newcard.innerFunc = card.setting.innerFunc || ''
+ newcard.sysInterface = card.setting.sysInterface || ''
+ newcard.outerFunc = card.setting.outerFunc || ''
+ newcard.interface = card.setting.interface || ''
+ newcard.method = 'POST'
+ newcard.execSuccess = 'grid'
+ newcard.execError = 'never'
+ newcard.popClose = 'never'
+ newcard.errorTime = 10
+ newcard.verify = null
+ newcard.show = 'icon'
+
+ // 娉ㄥ唽浜嬩欢-娣诲姞鎸夐挳
+ MKEmitter.emit('addButton', card.uuid, newcard)
+ }
+
+ changeStyle = () => {
+ const { card } = this.state
+
+ MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border', 'padding', 'margin'], card.style)
+ }
+
+ getStyle = (comIds, style) => {
+ const { card } = this.state
+
+ if (comIds.length !== 1 || comIds[0] !== card.uuid) return
+
+ let _card = {...card, style}
+
+ this.setState({
+ card: _card
+ })
+
+ this.props.updateConfig(_card)
+ }
+
render() {
const { card } = this.state
- const { menu } = this.props
return (
- <div className="menu-line-chart-edit-box" style={{height: card.setting.height || 400}}>
- <SettingComponent
- config={card}
- menu={menu}
- updateConfig={this.updateComponent}
- />
+ <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
<div className="chart-header">
- <span className="chart-title">{card.setting.title || ''}</span>
+ <span className="chart-title">{card.plot.title || ''}</span>
<SearchComponent
- menu={menu}
config={card}
- sysRoles={menu.sysRoles}
- optionLibs={null}
updatesearch={this.updateComponent}
/>
+ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+ <div className="mk-popover-control">
+ <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" />
+ <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" />
+ <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
+ <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
+ <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
+ <SettingComponent config={card} updateConfig={this.updateComponent}/>
+ </div>
+ } trigger="hover">
+ <Icon type="tool" />
+ </Popover>
</div>
<ActionComponent
type="chart"
- menu={menu}
+ plus="false"
config={card}
- tabs={[]}
- // setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')}
updateaction={this.updateComponent}
/>
<div className="canvas" id={card.uuid}></div>
- <ChartCompileForm
- config={card}
- dict={this.state.dict}
- plotchange={this.updateComponent}
- />
</div>
)
}
}
-export default antvBarLineChart
\ No newline at end of file
+const mapStateToProps = (state) => {
+ return {
+ menu: state.customMenu
+ }
+}
+
+const mapDispatchToProps = () => {
+ return {}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(antvBarLineChart)
\ No newline at end of file
--
Gitblit v1.8.0