From bcef9a2845e6800704fecb3eb60c204f80854a07 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 24 九月 2020 09:17:24 +0800
Subject: [PATCH] 2020-09-24

---
 src/menu/components/chart/antv-bar/index.jsx |   52 ++++++++++++++++++++++++++++++++--------------------
 1 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 0e9c387..55e5454 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -2,26 +2,29 @@
 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 = {
     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,10 @@
         pageable: false,   // 缁勪欢灞炴�� - 鏄惁鍙垎椤�
         switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
         dataName: dataName,
+        width: _plot.width,
+        name: _plot.name,
         subtype: card.subtype,
-        setting: {span: 24, height: 400, interType: 'system', name: card.name},
+        setting: { interType: 'system' },
         columns: [],
         scripts: [],
         search: [],
@@ -161,7 +169,7 @@
 
   linerender = () => {
     const { card } = this.state
-    let plot = {...card.plot, height: card.setting.height - 70}
+    let plot = {...card.plot, height: card.plot.height - 70} // 鍘婚櫎title鎵�鍗犵┖闂�
 
     let transfield = {}
     card.columns.forEach(col => {
@@ -265,7 +273,8 @@
   }
 
   customrender = (data, transfield) => {
-    const { plot } = this.props
+    const { card } = this.state
+    let plot = {...card.plot, height: card.plot.height - 70} // 鍘婚櫎title鎵�鍗犵┖闂�
 
     let barfields = []
     let fields = []
@@ -414,8 +423,7 @@
 
   barrender = () => {
     const { card } = this.state
-
-    let plot = {...card.plot, height: card.setting.height - 70}
+    let plot = {...card.plot, height: card.plot.height - 70}
 
     let transfield = {}
     card.columns.forEach(col => {
@@ -556,13 +564,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
@@ -580,17 +591,22 @@
     const { card } = this.state
 
     return (
-      <div className="menu-line-chart-edit-box" style={{height: card.setting.height || 400}}>
-        <SettingComponent
-          config={card}
-          updateConfig={this.updateComponent}
-        />
+      <div className="menu-line-chart-edit-box" 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
             config={card}
             updatesearch={this.updateComponent}
           />
+          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+            <div className="mk-popover-control">
+              <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
+              <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"
@@ -600,11 +616,7 @@
           updateaction={this.updateComponent}
         />
         <div className="canvas" id={card.uuid}></div>
-        <ChartCompileForm
-          config={card}
-          dict={this.state.dict}
-          plotchange={this.updateComponent}
-        />
+        
       </div>
     )
   }

--
Gitblit v1.8.0