From da5ff4b9866a2d458d950f0c743ab9244e16c66d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 12 十一月 2023 12:23:08 +0800
Subject: [PATCH] 2023-11-12

---
 src/menu/components/chart/antv-bar/index.jsx |  847 +++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 655 insertions(+), 192 deletions(-)

diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 2c27c5f..ad556b3 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -1,28 +1,25 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
-import { Icon, Popover, notification } from 'antd'
+import { Popover, message } from 'antd'
+import { PlusCircleOutlined, PlusSquareOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
 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 { resetStyle } from '@/utils/utils-custom.js'
+import { resetStyle, getTables, getHeight, checkComponent } from '@/utils/utils-custom.js'
 import Utils from '@/utils/utils.js'
 import { chartColors } from '@/utils/option.js'
-import zhCN from '@/locales/zh-CN/model.js'
-import enUS from '@/locales/en-US/model.js'
 import './index.scss'
 
 const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
 const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
-const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
 const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
 const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
 const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
 const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))
-const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
 const ClockComponent = asyncIconComponent(() => import('@/menu/components/share/clockcomponent'))
 
 class antvBarLineChart extends Component {
@@ -33,9 +30,8 @@
   }
 
   state = {
-    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
     card: null,
-    ismob: sessionStorage.getItem('appType') === 'mob',
+    appType: sessionStorage.getItem('appType'),
     eventListener: null
   }
 
@@ -70,13 +66,9 @@
       let _card = {
         uuid: card.uuid,
         type: card.type,
-        floor: card.floor,
-        tabId: card.tabId || '',
-        parentId: card.parentId || '',
         format: 'array',   // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡
         pageable: false,   // 缁勪欢灞炴�� - 鏄惁鍙垎椤�
-        switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
-        dataName: card.dataName || '',
+        switchable: card.type === 'bar' ? true : false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
         width: _plot.width,
         name: _plot.name,
         subtype: card.subtype,
@@ -91,30 +83,9 @@
         search: [],
         action: [],
         plot: _plot,
-        btnlog: [],
       }
 
-      if (card.config) {
-        let config = fromJS(card.config).toJS()
-
-        _card.plot = config.plot
-        _card.plot.name = card.name
-        _card.style = config.style
-        _card.headerStyle = config.headerStyle
-
-        _card.action = config.action.map(col => {
-          col.uuid = Utils.getuuid()
-          return col
-        })
-        _card.search = config.search.map(col => {
-          col.uuid = Utils.getuuid()
-          return col
-        })
-      }
-      this.setState({
-        card: _card
-      })
-      this.props.updateConfig(_card)
+      this.updateComponent(_card, true)
     } else {
       this.setState({
         card: fromJS(card).toJS()
@@ -123,9 +94,11 @@
   }
 
   componentDidMount () {
-    this.viewrender()
-    MKEmitter.addListener('submitStyle', this.getStyle)
+    MKEmitter.addListener('plusSearch', this.plusSearch)
     MKEmitter.addListener('tabsChange', this.handleTabsChange)
+    setTimeout(() => {
+      this.viewrender()
+    }, 1000)
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -139,20 +112,21 @@
     this.setState = () => {
       return
     }
-    MKEmitter.removeListener('submitStyle', this.getStyle)
+    MKEmitter.removeListener('plusSearch', this.plusSearch)
     MKEmitter.removeListener('tabsChange', this.handleTabsChange)
   }
 
   handleTabsChange = (parentId) => {
     const { card } = this.state
 
-    if (parentId === card.parentId) {
+    if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') {
       let _element = document.getElementById(card.uuid + 'canvas')
       if (_element) {
         _element.innerHTML = ''
       }
 
-      setTimeout(this.viewrender, 100)
+      this.$timer && clearTimeout(this.$timer)
+      this.$timer = setTimeout(this.viewrender, 100)
     }
   }
 
@@ -195,7 +169,7 @@
    */
   linerender = () => {
     const { card } = this.state
-    let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+    const plot = card.plot
     let color = plot.color || 'rgba(0, 0, 0, 0.65)'
     let X_axis = plot.Xaxis || 'x'
     let Y_axis = plot.Yaxis || ['y']
@@ -232,15 +206,34 @@
       const chart = new Chart({
         container: card.uuid + 'canvas',
         autoFit: true,
-        height: plot.height || 400
+        height: getHeight(plot.height)
       })
   
       chart.data(dv.rows)
 
       // chart.axis(X_axis, { label: { style: { fill: color } }, tickLine: {style: { stroke: color }}, line: { style: { stroke: color } } })
       // chart.axis('value', { grid: { line: { style: { stroke: color } }}, label: { style: { fill: color } } })
-      chart.axis(X_axis, { label: { style: { fill: color } } })
-      chart.axis('value', { label: { style: { fill: color } } })
+
+      let xc = {label: { style: { fill: color } }}
+      let yc = {label: { style: { fill: color } }}
+      if (plot.grid === 'hidden') {
+        yc.grid = null
+      }
+      if (plot.y_line === 'show') {
+        yc.line = {style: { stroke: '#D1D2CE' }}
+      }
+      if (plot.lineColor) {
+        xc.tickLine = {style: { stroke: plot.lineColor }}
+        xc.line = { style: { stroke: plot.lineColor } }
+        if (yc.grid !== null) {
+          yc.grid = { line: { style: { stroke: plot.lineColor } }}
+        }
+        if (yc.line) {
+          yc.line = { style: { stroke: plot.lineColor } }
+        }
+      }
+      chart.axis(X_axis, xc)
+      chart.axis('value', yc)
   
       if (plot.coordinate !== 'polar') {
         chart.scale(X_axis, {
@@ -249,7 +242,7 @@
       }
       chart.scale('value', {
         nice: true,
-        range: [0, 0.93]
+        range: [0, 0.9]
       })
   
       if (!plot.legend || plot.legend === 'hidden') {
@@ -284,11 +277,23 @@
       let colorIndex = 0
 
       if (plot.colors && plot.colors.length > 0) {
-        plot.colors.forEach(item => {
-          if (!colors.has(transfield[item.type])) {
-            colors.set(transfield[item.type], item.color)
+        if (plot.ramp === 'true') {
+          let _s = 'l(0) '
+          if (plot.rampDirection === 'vertical') {
+            _s = 'l(90) '
           }
-        })
+          plot.colors.forEach(item => {
+            if (!colors.has(transfield[item.type])) {
+              colors.set(transfield[item.type], `${_s}0:${item.color} 1:${item.color1}` )
+            }
+          })
+        } else {
+          plot.colors.forEach(item => {
+            if (!colors.has(transfield[item.type])) {
+              colors.set(transfield[item.type], item.color)
+            }
+          })
+        }
       }
   
       let _chart = chart
@@ -308,25 +313,33 @@
       if (plot.colors && plot.colors.length > 0) {
         let limit = chartColors.length
         _chart.color('key', (key) => {
-          if (colors.get(key)) {
+          if (colors.has(key)) {
+            if (plot.area === 'true' && plot.rampDirection === 'vertical') {
+              return colors.get(key).replace(/l\(9?0\) 0:|\s1:.*/ig, '')
+            }
             return colors.get(key)
           } else {
-            colors.set(key, chartColors[colorIndex % limit])
             colorIndex++
+            return chartColors[(colorIndex - 1) % limit]
           }
         })
       } else {
         _chart.color('key')
       }
-      if (plot.label === 'true') {
-        _chart.label('value', (value) => {
+      if (plot.label !== 'false') {
+        _chart.label('value*key', (value, key) => {
           if (plot.show === 'percent') {
             value = value + '%'
+          }
+          let _color = color
+
+          if (plot.labelColor === 'custom' && colors.has(key)) {
+            _color = colors.get(key)
           }
           return {
             content: value,
             style: {
-              fill: color
+              fill: _color
             }
           }
         })
@@ -340,6 +353,32 @@
           .size(3)
           .shape('circle')
       }
+
+      if (plot.area === 'true') {
+        let area = chart.area().position(`${X_axis}*value`).tooltip(false)
+        if (plot.shape === 'smooth') {
+          area.shape('smooth')
+        }
+        if (plot.colors && plot.colors.length > 0) {
+          let limit = chartColors.length
+          area.color('key', (key) => {
+            if (colors.has(key)) {
+              return colors.get(key)
+            } else {
+              colorIndex++
+              return chartColors[(colorIndex - 1) % limit]
+            }
+          })
+        } else {
+          area.color('key')
+        }
+      }
+
+      if (plot.interaction && plot.interaction.length) {
+        plot.interaction.forEach(t => {
+          chart.interaction(t)
+        })
+      }
       chart.render()
     } else {
       this.customrender(data)
@@ -351,11 +390,12 @@
    */
   customrender = (data) => {
     let card = fromJS(this.state.card).toJS()
-    let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+    let plot = card.plot
     let color = plot.color || 'rgba(0, 0, 0, 0.65)'
     let fields = []
     let legends = []
     let transfield = {}
+    let Bar_axis = []
 
     card.columns.forEach(col => {
       if (col.field) {
@@ -368,42 +408,91 @@
     let limit = chartColors.length
 
     if (plot.colors && plot.colors.length > 0) {
-      plot.colors.forEach(item => {
-        if (!colors.has(item.type)) {
-          colors.set(item.type, item.color)
-        }
-      })
+      if (plot.ramp === 'true') {
+        let bars = {}
+        plot.customs.forEach(item => {
+          if (!item.shape || !item.shape[0] || item.shape[0] === 'bar') {
+            bars[item.type] = true
+          }
+        })
+        plot.colors.forEach(item => {
+          if (!colors.has(transfield[item.type])) {
+            if (bars[item.type]) {
+              colors.set(transfield[item.type], `l(90) 0:${item.color} 1:${item.color1}` )
+            } else {
+              colors.set(transfield[item.type], `l(0) 0:${item.color} 1:${item.color1}` )
+            }
+          }
+        })
+      } else {
+        plot.colors.forEach(item => {
+          if (!colors.has(transfield[item.type])) {
+            colors.set(transfield[item.type], item.color)
+          }
+        })
+      }
     }
 
     let axisIndex = 0
     let hasBar = false
 
+    plot.$paddingLeft = 30
+    plot.$paddingRight = 30
+
     plot.customs.forEach(item => {
       item.name = transfield[item.type] || item.type
       item.chartType = item.shape ? (item.shape[0] || 'bar') : 'bar'
       item.shape = item.shape ? (item.shape[1] || '') : ''
+      item.show = item.show || plot.show
 
-      if (colors.get(item.type)) {
-        item.color = colors.get(item.type)
+      if (colors.has(item.name)) {
+        item.color = colors.get(item.name)
       } else {
         item.color = chartColors[colorIndex % limit]
         colorIndex++
       }
 
-      if (item.chartType === 'bar' && !hasBar) {
+      if (item.chartType === 'bar') {
+        Bar_axis.push(item.type)
         hasBar = true
-      } else if (item.chartType === 'bar') {
-        item.chartType = 'line'
-        item.shape = 'smooth'
       }
 
       if (item.axis === 'true' && axisIndex < 2) {
         if (axisIndex === 0) {
           // item.axis = { grid: {line: { style: { stroke: color } }}, title: { style: { fill: color } }, label: {style: { fill: color }} }
-          item.axis = { title: { style: { fill: color } }, label: {style: { fill: color }} }
+          item.axis = { label: {style: { fill: color }} }
+          if (item.title !== 'false') {
+            item.axis.title = { style: { fill: color } }
+            plot.$paddingLeft = 50
+          }
+          if (plot.grid === 'hidden') {
+            item.axis.grid = null
+          }
+          if (plot.y_line === 'show') {
+            item.axis.line = {style: { stroke: '#D1D2CE' }}
+          }
+          if (plot.lineColor) {
+            if (item.axis.grid !== null) {
+              item.axis.grid = { line: { style: { stroke: plot.lineColor } }}
+            }
+            if (item.axis.line) {
+              item.axis.line = { style: { stroke: plot.lineColor } }
+            }
+          }
+          
           fields.unshift(item)
         } else {
-          item.axis = { grid: null, title: {style: { fill: color }}, label: {style: { fill: color }} }
+          item.axis = { grid: null, label: {style: { fill: color }} }
+          if (item.title !== 'false') {
+            item.axis.title = { style: { fill: color } }
+            plot.$paddingRight = 60
+          }
+          if (plot.y_line === 'show') {
+            item.axis.line = {style: { stroke: '#D1D2CE' }}
+          }
+          if (plot.lineColor && item.axis.line) {
+            item.axis.line = { style: { stroke: plot.lineColor } }
+          }
           fields.splice(1, 0, item)
         }
         axisIndex++
@@ -431,16 +520,29 @@
       }
     })
 
+    let padding = [10, 30, 30, 30]
+    if (plot.mutilBar === 'overlap' || Bar_axis.length === 1) {
+      Bar_axis = []
+    }
+
+    if (!Bar_axis.length) {
+      padding = [10, plot.$paddingRight, 30, plot.$paddingLeft]
+    }
+
     const chart = new Chart({
       container: card.uuid + 'canvas',
       autoFit: true,
-      height: plot.height || 400
+      height: getHeight(plot.height)
     })
 
-    chart.data(dv.rows)
-
     // chart.axis(plot.Xaxis, { label: { style: { fill: color } }, tickLine: {style: { stroke: color }}, line: { style: { stroke: color } } })
-    chart.axis(plot.Xaxis, { label: { style: { fill: color } } })
+
+    let xc = {label: { style: { fill: color } }}
+    if (plot.lineColor) {
+      xc.tickLine = {style: { stroke: plot.lineColor }}
+      xc.line = { style: { stroke: plot.lineColor } }
+    }
+    chart.axis(plot.Xaxis, xc)
 
     if (!hasBar) {
       chart.scale(plot.Xaxis, {
@@ -448,7 +550,8 @@
       })
     }
 
-    if (!plot.legend || plot.legend === 'hidden') {
+    let noLegend = !plot.legend || plot.legend === 'hidden'
+    if (noLegend) {
       chart.legend(false)
     } else {
       chart.legend({
@@ -471,22 +574,225 @@
       nice: true
     })
 
-    fields.forEach(item => {
-      chart.axis(item.name, item.axis)
-      
-      chart.scale(item.name, {
-        nice: true,
-        range: [0, 0.93]
+    let lablecfg = {
+      position: 'top',
+      offset: 2,
+      style: {
+        fill: '#fff'
+      }
+    }
+
+    if (plot.label === 'top') {
+      lablecfg.offset = -5
+      lablecfg.style.textBaseline = 'top'
+    } else if (plot.label === 'middle') {
+      lablecfg.position = 'middle'
+      lablecfg.offset = 0
+    } else if (plot.label === 'bottom') {
+      lablecfg.position = 'bottom'
+      lablecfg.offset = 0
+    } else if (plot.label === 'true') {
+      lablecfg.style.fill = color
+    }
+    
+    if (Bar_axis.length) {
+      const view1 = chart.createView({
+        region: {
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 1 }
+        },
+        padding
+      })
+      const dst = new DataSet()
+      const dvt = dst.createView().source(data)
+  
+      dvt.transform({
+        type: 'fold',
+        fields: [...Bar_axis],
+        key: 'key',
+        value: 'value'
+      })
+  
+      dvt.transform({
+        type: 'map',
+        callback(row) {
+          row.key = transfield[row.key] || row.key
+          return row
+        },
       })
 
-      if (item.chartType === 'bar') {
-        let _chart = chart
+      view1.data(dvt.rows)
+      view1.scale('value', {
+        nice: true,
+        range: [0, 0.9]
+      })
+
+      let yc = {label: { style: { fill: color } }}
+      if (plot.grid === 'hidden') {
+        yc.grid = null
+      }
+      if (plot.y_line === 'show') {
+        yc.line = {style: { stroke: '#D1D2CE' }}
+      }
+      if (plot.lineColor) {
+        if (yc.grid !== null) {
+          yc.grid = { line: { style: { stroke: plot.lineColor } }}
+        }
+        if (yc.line) {
+          yc.line = { style: { stroke: plot.lineColor } }
+        }
+      }
+      view1.axis('value', yc)
+  
+      if (!noLegend) {
+        view1.legend(false)
+      }
+  
+      if (plot.mutilBar !== 'stack') {
+        let _chart = view1
+          .interval()
+          .position(`${plot.Xaxis}*value`)
+          .adjust([
+            {
+              type: 'dodge',
+              marginRatio: 0
+            }
+          ])
+          .shape(plot.shape || 'rect')
+          .tooltip(`${plot.Xaxis}*value*key`, (name, value, key) => {
+            if (plot.show === 'percent') {
+              value = value + '%'
+            }
+            return {
+              name: key,
+              value: value
+            }
+          })
+
+        if (plot.colors && plot.colors.length > 0) {
+          let limit = chartColors.length
+          _chart.color('key', (key) => {
+            if (colors.has(key)) {
+              return colors.get(key)
+            } else {
+              colorIndex++
+              return chartColors[(colorIndex - 1) % limit]
+            }
+          })
+        } else {
+          _chart.color('key')
+        }
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
+            if (plot.show === 'percent') {
+              value = value + '%'
+            }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
+            return {
+              content: value,
+              ...lablecfg
+            }
+          })
+        }
+
+        if (plot.barSize || plot.correction) {
+          _chart.size(plot.barSize || 35)
+        }
+        if (plot.barRadius) {
+          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
+        }
+      } else if (plot.mutilBar === 'stack') {
+        let _chart = view1
+          .interval()
+          .position(`${plot.Xaxis}*value`)
+          .adjust('stack')
+          .shape(plot.shape || 'rect')
+          .tooltip(`${plot.Xaxis}*value*key`, (name, value, type) => {
+            if (plot.show === 'percent') {
+              value = value + '%'
+            }
+            return {
+              name: type,
+              value: value
+            }
+          })
+  
+        if (plot.colors && plot.colors.length > 0) {
+          let limit = chartColors.length
+          _chart.color('key', (key) => {
+            if (colors.has(key)) {
+              return colors.get(key)
+            } else {
+              colorIndex++
+              return chartColors[(colorIndex - 1) % limit]
+            }
+          })
+        } else {
+          _chart.color('key')
+        }
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
+            if (plot.show === 'percent') {
+              value = value + '%'
+            }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
+
+            return {
+              content: value,
+              ...lablecfg
+            }
+          })
+        }
+
+        if (plot.barSize || plot.correction) {
+          _chart.size(plot.barSize || 35)
+        }
+        if (plot.barRadius) {
+          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
+        }
+      }
+    }
+
+    let view2 = chart // 鏃犵嫭绔嬫煴鐘跺浘鏃朵笉鍋氬垎闈�
+
+    if (Bar_axis.length) {
+      view2 = chart.createView({
+        region: {
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 1 }
+        },
+        padding
+      })
+    }
+
+    view2.data(dv.rows)
+
+    if (!noLegend) {
+      view2.legend(false)
+    }
+
+    fields.forEach(item => {
+      if (item.chartType === 'bar' && !Bar_axis.length) {
+        view2.axis(item.name, item.axis)
+      
+        view2.scale(item.name, {
+          nice: true,
+          range: [0, 0.9]
+        })
+
+        let _chart = view2
           .interval()
           .position(`${plot.Xaxis}*${item.name}`)
           .color(item.color)
           .shape(item.shape)
           .tooltip(`${item.name}`, (value) => {
-            if (plot.show === 'percent') {
+            if (item.show === 'percent') {
               value = value + '%'
             }
             return {
@@ -498,27 +804,41 @@
         if (plot.barSize) {
           _chart.size(plot.barSize || 35)
         }
-        if (item.label === 'true') {
+        if (item.label !== 'false') {
           _chart.label(item.name, (value) => {
-            if (plot.show === 'percent') {
+            if (item.show === 'percent') {
               value = value + '%'
+            }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom') {
+              lablecfg.style.fill = item.color
             }
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
+        if (plot.barRadius) {
+          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
+        }
       } else if (item.chartType === 'line') {
-        let _chart = chart
+        if (!Bar_axis.length) {
+          view2.axis(item.name, item.axis)
+        } else {
+          view2.axis(item.name, { grid: null, title: null, label: null })
+        }
+        view2.scale(item.name, {
+          nice: true,
+          range: [0, 0.9]
+        })
+        let _chart = view2
           .line()
           .position(`${plot.Xaxis}*${item.name}`)
           .color(item.color)
           .shape(item.shape)
           .tooltip(`${item.name}`, (value) => {
-            if (plot.show === 'percent') {
+            if (item.show === 'percent') {
               value = value + '%'
             }
             return {
@@ -527,15 +847,20 @@
             }
           })
 
-        if (item.label === 'true') {
+        if (item.label !== 'false') {
           _chart.label(item.name, (value) => {
-            if (plot.show === 'percent') {
+            if (item.show === 'percent') {
               value = value + '%'
+            }
+            let _color = color
+
+            if (plot.labelColor === 'custom') {
+              _color = item.color
             }
             return {
               content: value,
               style: {
-                fill: color
+                fill: _color
               }
             }
           })
@@ -552,6 +877,14 @@
       }
     })
 
+    if (plot.interaction && plot.interaction.length) {
+      plot.interaction.forEach(t => {
+        if (t === 'element-active' || t === 'element-highlight') {
+          chart.interaction(t)
+        }
+      })
+    }
+
     chart.render()
   }
 
@@ -560,7 +893,7 @@
    */
   barrender = () => {
     const { card } = this.state
-    let plot = {...card.plot, height: card.plot.height - 80}
+    const plot = card.plot
     let color = plot.color || 'rgba(0, 0, 0, 0.65)'
     let X_axis = plot.Xaxis || 'x'
     let Y_axis = plot.Yaxis || ['y']
@@ -598,19 +931,38 @@
       const chart = new Chart({
         container: card.uuid + 'canvas',
         autoFit: true,
-        height: plot.height || 400
+        height: getHeight(plot.height)
       })
-  
+
       chart.data(dv.rows)
 
       // chart.axis(X_axis, { label: { style: { fill: color } }, tickLine: {style: { stroke: color }}, line: { style: { stroke: color } } })
       // chart.axis('value', { grid: { line: { style: { stroke: color } }}, label: { style: { fill: color } } })
-      chart.axis(X_axis, { label: { style: { fill: color } } })
-      chart.axis('value', { label: { style: { fill: color } } })
+
+      let xc = {label: { style: { fill: color } }}
+      let yc = {label: { style: { fill: color } }}
+      if (plot.grid === 'hidden') {
+        yc.grid = null
+      }
+      if (plot.y_line === 'show') {
+        yc.line = {style: { stroke: '#D1D2CE' }}
+      }
+      if (plot.lineColor) {
+        xc.tickLine = {style: { stroke: plot.lineColor }}
+        xc.line = { style: { stroke: plot.lineColor } }
+        if (yc.grid !== null) {
+          yc.grid = { line: { style: { stroke: plot.lineColor } }}
+        }
+        if (yc.line) {
+          yc.line = { style: { stroke: plot.lineColor } }
+        }
+      }
+      chart.axis(X_axis, xc)
+      chart.axis('value', yc)
   
       chart.scale('value', {
         nice: true,
-        range: [0, 0.93]
+        range: [0, 0.9]
       })
   
       if (!plot.legend || plot.legend === 'hidden') {
@@ -630,10 +982,6 @@
         })
       }
   
-      if (plot.transpose === 'true') {
-        chart.coordinate().transpose()
-      }
-  
       if (plot.coordinate === 'polar') {
         chart.coordinate('polar', {
           innerRadius: 0.1,
@@ -643,13 +991,60 @@
 
       let colors = new Map()
       let colorIndex = 0
+      let lablecfg = {
+        position: 'top',
+        offset: 2,
+        style: {
+          fill: '#fff'
+        }
+      }
+
+      if (plot.label === 'top') {
+        lablecfg.offset = -5
+        lablecfg.style.textBaseline = 'top'
+      } else if (plot.label === 'middle') {
+        lablecfg.position = 'middle'
+        lablecfg.offset = 0
+      } else if (plot.label === 'bottom') {
+        lablecfg.position = 'bottom'
+        lablecfg.offset = 0
+      } else if (plot.label === 'true') {
+        lablecfg.style.fill = color
+      }
+
+      if (plot.transpose === 'true') {
+        chart.coordinate().transpose()
+        if (plot.label === 'top') {
+          delete lablecfg.style.textBaseline
+          lablecfg.position = 'right'
+          lablecfg.offset = -3
+          lablecfg.style.textAlign = 'end'
+        } else if (plot.label === 'middle') {
+          lablecfg.position = 'middle'
+          lablecfg.offset = 0
+        } else if (plot.label === 'bottom') {
+          lablecfg.position = 'left'
+          lablecfg.offset = 2
+        } else if (plot.label === 'true') {
+          lablecfg.position = 'right'
+          lablecfg.offset = 2
+        }
+      }
 
       if (plot.colors && plot.colors.length > 0) {
-        plot.colors.forEach(item => {
-          if (!colors.has(transfield[item.type])) {
-            colors.set(transfield[item.type], item.color)
-          }
-        })
+        if (plot.ramp === 'true') {
+          plot.colors.forEach(item => {
+            if (!colors.has(transfield[item.type])) {
+              colors.set(transfield[item.type], `l(90) 0:${item.color} 1:${item.color1}` )
+            }
+          })
+        } else {
+          plot.colors.forEach(item => {
+            if (!colors.has(transfield[item.type])) {
+              colors.set(transfield[item.type], item.color)
+            }
+          })
+        }
       }
   
       if (plot.adjust !== 'stack') {
@@ -676,32 +1071,47 @@
         if (plot.colors && plot.colors.length > 0) {
           let limit = chartColors.length
           _chart.color('key', (key) => {
-            if (colors.get(key)) {
+            if (colors.has(key)) {
               return colors.get(key)
             } else {
-              colors.set(key, chartColors[colorIndex % limit])
               colorIndex++
+              return chartColors[(colorIndex - 1) % limit]
             }
           })
         } else {
           _chart.color('key')
         }
-        if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
+            
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
 
         if (plot.barSize || plot.correction) {
           _chart.size(plot.barSize || 35)
+        }
+        if (plot.selectColor) {
+          _chart.state({
+            selected: {
+              style: {
+                fill: plot.selectColor,
+              }
+            }
+          })
+        }
+        if (plot.barRadius) {
+          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
         }
       } else if (plot.adjust === 'stack') {
         let _chart = chart
@@ -722,26 +1132,28 @@
         if (plot.colors && plot.colors.length > 0) {
           let limit = chartColors.length
           _chart.color('key', (key) => {
-            if (colors.get(key)) {
+            if (colors.has(key)) {
               return colors.get(key)
             } else {
-              colors.set(key, chartColors[colorIndex % limit])
               colorIndex++
+              return chartColors[(colorIndex - 1) % limit]
             }
           })
         } else {
           _chart.color('key')
         }
-        if (plot.label === 'true') {
-          _chart.label('value', (value) => {
+        if (plot.label !== 'false') {
+          _chart.label('value*key', (value, key) => {
             if (plot.show === 'percent') {
               value = value + '%'
             }
+
+            if (plot.label === 'true' && plot.labelColor === 'custom' && colors.has(key)) {
+              lablecfg.style.fill = colors.get(key)
+            }
             return {
               content: value,
-              style: {
-                fill: color
-              }
+              ...lablecfg
             }
           })
         }
@@ -749,6 +1161,24 @@
         if (plot.barSize || plot.correction) {
           _chart.size(plot.barSize || 35)
         }
+        if (plot.selectColor) {
+          _chart.state({
+            selected: {
+              style: {
+                fill: plot.selectColor,
+              }
+            }
+          })
+        }
+        if (plot.barRadius) {
+          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
+        }
+      }
+
+      if (plot.interaction && plot.interaction.length) {
+        plot.interaction.forEach(t => {
+          chart.interaction(t)
+        })
       }
   
       chart.render()
@@ -757,30 +1187,60 @@
     }
   }
 
-  updateComponent = (component) => {
-    const card = fromJS(this.state.card).toJS()
-    let refresh = false
-    if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style))) {
-      let _element = document.getElementById(card.uuid + 'canvas')
-      if (_element) {
-        _element.innerHTML = ''
+  updateComponent = (card, init) => {
+    if (!init) {
+      if (!is(fromJS({plot: card.plot, style: card.style, search: card.search}), fromJS({plot: this.state.card.plot, style: this.state.card.style, search: this.state.card.search}))) {
+        let _element = document.getElementById(this.state.card.uuid + 'canvas')
+        if (_element) {
+          _element.innerHTML = ''
+        }
+        this.$timer && clearTimeout(this.$timer)
+        this.$timer = setTimeout(() => {
+          this.viewrender()
+        }, 150)
       }
-      refresh = true
     }
 
-    component.width = component.plot.width
-    component.name = component.plot.name
+    card.width = card.plot.width
+    card.name = card.plot.name
+
+    card.$c_ds = true
+    card.$c_ac = this.state.appType !== 'mob'
     
-    this.setState({
-      card: component
-    }, () => {
-      if (refresh) {
-        setTimeout(() => {
-          this.viewrender()
-        }, 100)
+    card.errors = checkComponent(card)
+
+    if (card.errors.length === 0) {
+      card.$tables = getTables(card)
+    }
+
+    let columns = card.columns.map(c => c.field)
+    if (!card.plot.Xaxis) {
+      card.errors.push({ level: 0, detail: '鍧愭爣杞村皻鏈缃紒'})
+    } else if (card.plot.datatype === 'query') {
+      if (!columns.includes(card.plot.Xaxis)) {
+        card.errors.push({ level: 0, detail: 'X杞村湪瀛楁闆嗕腑涓嶅瓨鍦�'})
       }
+      if (card.plot.Yaxis) {
+        card.plot.Yaxis.forEach(m => {
+          if (!columns.includes(m)) {
+            card.errors.push({ level: 0, detail: `Y杞翠腑瀛楁鈥�${m}鈥濆凡澶辨晥`})
+          }
+        })
+      }
+    } else if (card.plot.datatype === 'statistics') {
+      if (!columns.includes(card.plot.Xaxis)) {
+        card.errors.push({ level: 0, detail: 'X杞村湪瀛楁闆嗕腑涓嶅瓨鍦�'})
+      } else if (!columns.includes(card.plot.InfoType)) {
+        card.errors.push({ level: 0, detail: '鍥捐〃涓粺璁$被鍨嬪瓧娈靛凡澶辨晥'})
+      } else if (!columns.includes(card.plot.InfoValue)) {
+        card.errors.push({ level: 0, detail: '鍥捐〃涓粺璁″�煎瓧娈靛凡澶辨晥'})
+      }
+    }
+
+    this.setState({
+      card: card
     })
-    this.props.updateConfig(component)
+    this.props.updateConfig(card)
   }
 
   addSearch = () => {
@@ -795,13 +1255,21 @@
     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)
+  }
+
+  plusSearch = (uuid, search, type) => {
+    const { card } = this.state
+    if (card.uuid !== uuid || type !== 'simple') return
+
+    search.uuid = Utils.getuuid()
+    search.focus = true
+
+    MKEmitter.emit('addSearch', card.uuid, search)
   }
 
   addButton = () => {
@@ -825,7 +1293,6 @@
     newcard.execSuccess = 'grid'
     newcard.execError = 'never'
     newcard.popClose = 'never'
-    newcard.errorTime = 10
     newcard.verify = null
     newcard.show = 'icon'
 
@@ -836,82 +1303,78 @@
   changeStyle = () => {
     const { card } = this.state
 
-    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
+    MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow', 'clear'], card.style, this.getStyle)
   }
 
-  getStyle = (comIds, style) => {
-    const { card } = this.state
-
-    if (comIds[0] !== card.uuid || comIds.length > 1) return
-
-    let _card = {...card, style}
+  getStyle = (style) => {
+    let _card = {...this.state.card, style}
 
     this.updateComponent(_card)
-  }
-
-  handleLog = (type, logs, item) => {
-    let card = fromJS(this.state.card).toJS()
-
-    if (type === 'revert') {
-      card.action = card.action ? [...card.action, item] : [item]
-      card.btnlog = logs
-
-      this.setState({ card })
-      this.props.updateConfig(card)
-      notification.success({
-        top: 92,
-        message: '鎭㈠鎴愬姛锛�',
-        duration: 2
-      })
-    } else {
-      card.btnlog = logs
-      this.setState({ card })
-      this.props.updateConfig(card)
-      notification.success({
-        top: 92,
-        message: '娓呴櫎鎴愬姛锛�',
-        duration: 2
-      })
-    }
   }
 
   clickComponent = (e) => {
     if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
       e.stopPropagation()
-      MKEmitter.emit('clickComponent', this.state.card)
+      MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => {
+        let _card = {...this.state.card}
+        _card.style = {..._card.style, ...style}
+
+        this.updateComponent(_card)
+      })
     }
   }
 
   render() {
-    const { card, ismob } = this.state
+    const { card, appType } = this.state
+
     let _style = resetStyle(card.style)
+    _style.height = 'auto'
 
     return (
-      <div className="menu-line-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}>
-        <NormalHeader config={card} updateComponent={this.updateComponent}/>
+      <div className="menu-line-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
         <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
           <div className="mk-popover-control">
-            {!ismob ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null}
-            <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" />
-            <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
+            {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch}/> : null}
+            {appType !== 'mob' ? <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton}/> : null}
+            <ChartCompileForm config={card} plotchange={this.updateComponent}/>
             <CopyComponent type="line" card={card}/>
-            <PasteComponent config={card} options={['action', 'search', 'form']} updateConfig={this.updateComponent} />
-            <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
-            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
+            <PasteComponent config={card} options={['action', 'search']} updateConfig={this.updateComponent} />
+            <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/>
             <ClockComponent config={card} updateConfig={this.updateComponent}/>
-            <UserComponent config={card}/>
-            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
+            <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
             <SettingComponent config={card} updateConfig={this.updateComponent}/>
           </div>
         } trigger="hover">
-          <Icon type="tool" />
+          <ToolOutlined/>
         </Popover>
-        <ActionComponent
-          type="chart"
+        <NormalHeader config={card} updateComponent={this.updateComponent}/>
+        <div className="canvas" style={{minHeight: card.plot.height}} id={card.uuid + 'canvas'}></div>
+        {appType !== 'mob' ? <ActionComponent
           config={card}
           updateaction={this.updateComponent}
-        />
-        <div className="canvas" id={card.uuid + 'canvas'}></div>
+        /> : null}
+        <div className="component-name">
+          <div className="center">
+            <div className="title" onDoubleClick={() => {
+              let oInput = document.createElement('input')
+              oInput.value = 'anchor' + card.uuid
+              document.body.appendChild(oInput)
+              oInput.select()
+              document.execCommand('Copy')
+              document.body.removeChild(oInput)
+              message.success('澶嶅埗鎴愬姛銆�')
+            }}>{card.name}</div>
+            <div className="content">
+              {card.errors && card.errors.map((err, index) => {
+                if (err.level === 0) {
+                  return <span key={index} className="error">{err.detail}</span>
+                } else {
+                  return <span key={index} className="waring">{err.detail}锛�</span>
+                }
+              })}
+            </div>
+          </div>
+        </div>
       </div>
     )
   }

--
Gitblit v1.8.0