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