2022-11-23

king

2022-11-23 891e8aaad3b2ce6980fd44d1cf49192dca1c3c66

2022-11-23

 src/components/breadview/index.jsx

@@ -134,11 +134,9 @@
    this.setState({tabview: home})
  }

  modifyTabs = (tab, type) => {
    if (!tab || type !== 'replace') return

  modifyTabs = (tab) => {
    this.setState({
      tabview: tab,
      tabview: tab
    })

    let node = document.getElementById('root').parentNode.parentNode

 src/components/header/index.jsx

@@ -46,9 +46,7 @@
    systems: [],
    searchkey: '',
    thdMenuList: [],
    debug: sessionStorage.getItem('debug') === 'true',
    navBar: ['linkage_navigation', 'linkage', 'menu_board', 'menu_board_navigation'].includes(window.GLOB.navBar) ? 'topmenu' : '',
    menuType: window.GLOB.navBar
    debug: sessionStorage.getItem('debug') === 'true'
  }

  handleCollapse = () => {
@@ -133,7 +131,7 @@

  changeMenu (value) {
    // 主菜单切换
    if (value.OpenType === 'outpage' && value.linkUrl) {
    if (value.OpenType === 'outpage') {
      window.open(value.linkUrl)
    } else if (value.OpenType === 'menu') {
      this.props.modifyMainMenu(value)
@@ -188,11 +186,7 @@

      if (_menu) { // 延时打开，防止标签组未完成加载
        setTimeout(() => {
          if (this.state.navBar === 'topmenu' && this.state.menuType !== 'menu_board_navigation') {
            MKEmitter.emit('modifyTabs', _menu, 'replace')
          } else {
            MKEmitter.emit('modifyTabs', _menu, 'plus')
          }
          MKEmitter.emit('modifyTabs', _menu)
        }, 200)
      }
      MKEmitter.emit('mkMenuLoaded')
@@ -286,9 +280,9 @@
                try {
                  let PageParam = JSON.parse(trd.PageParam)

                  trdItem.type = PageParam.Template || trdItem.type
                  trdItem.OpenType = PageParam.OpenType || trdItem.OpenType
                  trdItem.hidden = PageParam.hidden || trdItem.hidden
                  trdItem.type = PageParam.Template || 'CommonTable'
                  trdItem.OpenType = PageParam.OpenType || 'newtab'
                  trdItem.hidden = PageParam.hidden || 'false'

                  if (trdItem.type === 'NewPage') {
                    trdItem.src = PageParam.url || ''
@@ -299,6 +293,8 @@
              if (trdItem.type !== 'NewPage') {
                trdItem.src = '#/tab/' + trd.MenuID
              }

              trdItem.OpenType = trdItem.OpenType.toLowerCase() // NewPage为打开外部页面地址

              thdMenuList.push(trdItem)

@@ -531,20 +527,14 @@

  changeVerMenu(menu, type) {
    if (type === 'first') {
      if (menu.OpenType === 'outpage' && menu.linkUrl) {
      if (menu.OpenType === 'outpage') {
        window.open(menu.linkUrl)
      } else if (menu.OpenType === 'menu') {

      }
    } else {
      if (menu.OpenType === 'newpage' || menu.OpenType === 'NewPage') { // NewPage为打开外部页面地址，newpage为打开系统菜单
      if (menu.OpenType === 'newpage') {
        window.open(menu.src)
      } else if (menu.OpenType === 'blank') {
        MKEmitter.emit('modifyTabs', menu, 'replace')
      } else if (this.state.navBar === 'topmenu' && this.state.menuType !== 'menu_board_navigation') {
        MKEmitter.emit('modifyTabs', menu, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', menu, 'plus')
        MKEmitter.emit('modifyTabs', menu)
      }
  
      if (window.GLOB.systemType === 'production') {
@@ -592,12 +582,13 @@
  changeToHome = () => {
    if (!['linkage', 'menu_board'].includes(window.GLOB.navBar)) return

    MKEmitter.emit('modifyTabs', {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}, 'replace')
    MKEmitter.emit('modifyTabs', {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'})
  }

  render () {
    const { mainMenu, collapse } = this.props
    const { thdMenuList, searchkey, debug, menulist, navBar, menuType, appVersion } = this.state
    const { thdMenuList, searchkey, debug, menulist, appVersion } = this.state
    const navBar = window.GLOB.navBar

    const menu = (
      <Menu className="header-dropdown">
@@ -624,12 +615,14 @@

    return (
      <header className="header-container ant-menu-dark" id="main-header-container">
        <div className={'header-logo ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')} onClick={this.changeToHome}><img src={this.state.logourl} alt=""/></div>
        {navBar !== 'topmenu' ? <div className={'header-collapse ' + (collapse ? 'collapse' : '')}>
        {navBar === 'shutter' ?
          <div className={'header-logo ' + (collapse ? 'collapse' : '')}><img src={this.state.logourl} alt=""/></div> : 
          <div className="header-logo" onClick={this.changeToHome}><img src={this.state.logourl} alt=""/></div>}
        {navBar === 'shutter' ? <div className={'header-collapse ' + (collapse ? 'collapse' : '')}>
          {collapse ? <MenuUnfoldOutlined onClick={this.handleCollapse}/> : <MenuFoldOutlined onClick={this.handleCollapse}/>}
        </div> : <div style={{width: '20px', height: '45px'}}></div>}
        {/* 正常菜单 */}
        {navBar !== 'topmenu' && menulist ?
        {navBar === 'shutter' && menulist ?
          <ul className="header-menu">{
            menulist.map(item => {
              return (
@@ -640,7 +633,7 @@
            })}
          </ul> : null
        }
        {navBar === 'topmenu' && menuType !== 'menu_board' && menuType !== 'menu_board_navigation' && menulist ?
        {(navBar === 'linkage' || navBar === 'linkage_navigation') && menulist ?
          <ul className="header-menu vertical-menu">{
            menulist.map(item => {
              if (item.children && item.children.length > 0) {
@@ -683,7 +676,7 @@
            })}
          </ul> : null
        }
        {navBar === 'topmenu' && (menuType === 'menu_board' || menuType === 'menu_board_navigation') && menulist ?
        {(navBar === 'menu_board' || navBar === 'menu_board_navigation') && menulist ?
          <ul className="header-menu vertical-menu">{
            menulist.map(item => {
              if (item.children && item.children.length > 0) {

 src/components/sidemenu/index.jsx

@@ -49,12 +49,10 @@
  changemenu(e, menu) {
    e.preventDefault()

    if (menu.OpenType === 'newpage' || menu.OpenType === 'NewPage') {
    if (menu.OpenType === 'newpage') {
      window.open(menu.src)
    } else if (menu.OpenType === 'blank') {
      MKEmitter.emit('modifyTabs', menu, 'replace')
    } else {
      MKEmitter.emit('modifyTabs', menu, 'plus')
      MKEmitter.emit('modifyTabs', menu)
    }

    if (window.GLOB.systemType === 'production') {

 src/components/tabview/index.jsx

@@ -124,10 +124,10 @@
    }
  }

  modifyTabs = (tab, type, fixed) => {
  modifyTabs = (tab, fixed) => {
    const { tabviews, activeId } = this.state

    if (type === 'plus' && fixed) {
    if (fixed) {
      let _tabs = tabviews.filter(item => item.MenuID !== tab.MenuID)
      let index = _tabs.findIndex(item => item.MenuID === activeId)

@@ -144,7 +144,7 @@
          activeId: tab.MenuID
        })
      })
    } else if (type === 'plus') {
    } else {
      if (tabviews.findIndex(item => item.MenuID === tab.MenuID) > -1) {
        let _tabs = tabviews.filter(item => item.MenuID !== tab.MenuID)
        this.setState({
@@ -161,11 +161,6 @@
          activeId: tab.MenuID
        })
      }
    } else if (type === 'replace') {
      this.setState({
        tabviews: tab ? [tab] : [],
        activeId: tab ? tab.MenuID : ''
      })
    }

    let node = document.getElementById('root').parentNode.parentNode

 src/index.js

@@ -155,6 +155,8 @@

    let _systemMsg = localStorage.getItem(_href + 'system')

    GLOB.navBar = 'shutter' // 默认为百叶窗

    if (_systemMsg) {
      try {
        _systemMsg = JSON.parse(window.decodeURIComponent(window.atob(_systemMsg)))
@@ -171,7 +173,7 @@
        GLOB.webSite = _systemMsg.webSite
        GLOB.style = _systemMsg.style
        GLOB.showline = _systemMsg.showline || ''
        GLOB.navBar = _systemMsg.navBar || ''
        GLOB.navBar = _systemMsg.navBar || 'shutter'
        GLOB.appVersion = _systemMsg.app_version || ''

        if (GLOB.favicon) {

 src/menu/components/chart/antv-G6/chartcompile/formconfig.jsx

@@ -2,7 +2,7 @@
 * @description 获取图表视图配置表单
 * @param {object} card       // 图表对象
 */
export function getBaseForm (card) {
export function getBaseForm (card, columns) {
  let appType = sessionStorage.getItem('appType')
  let roleList = sessionStorage.getItem('sysRoles')
  if (roleList) {
@@ -13,6 +13,32 @@
    }
  } else {
    roleList = []
  }

  let menulist = []

  if (appType === 'pc') {
    menulist = sessionStorage.getItem('appMenus')
    if (menulist) {
      try {
        menulist = JSON.parse(menulist)
      } catch (e) {
        menulist = []
      }
    } else {
      menulist = []
    }
  } else if (appType === '') {
    menulist = sessionStorage.getItem('fstMenuList')
    if (menulist) {
      try {
        menulist = JSON.parse(menulist)
      } catch (e) {
        menulist = []
      }
    } else {
      menulist = []
    }
  }

  return [
@@ -71,6 +97,97 @@
      required: false,
      options: roleList,
      forbid: !!appType
    },
    {
      type: 'radio',
      field: 'click',
      label: '点击事件',
      initval: card.click || '',
      tooltip: '点击节点时触发的事件。',
      required: false,
      options: [
        {value: '', label: '数据切换'},
        {value: 'menu', label: '菜单'},
        {value: 'menus', label: '菜单组'}
      ],
      controlFields: [
        {field: 'menu', values: ['menu']},
        {field: 'menus', values: ['menus']},
        {field: 'menuType', values: ['menus']},
        {field: 'open', values: ['menu', 'menus']},
        {field: 'joint', values: ['menu', 'menus']},
      ]
    },
    {
      type: appType === '' ? 'cascader' : 'select',
      field: 'menu',
      label: '关联菜单',
      initval: card.menu || (appType === '' ? [] : ''),
      required: true,
      extendName: 'MenuNo',
      options: menulist
    },
    {
      type: 'select',
      field: 'menuType',
      label: '菜单类型',
      initval: card.menuType || '',
      required: true,
      options: columns
    },
    {
      type: 'radio',
      field: 'open',
      label: '打开方式',
      initval: card.open || 'blank',
      required: false,
      options: [
        {value: 'blank', label: '新窗口'},
        {value: 'self', label: '当前窗口'},
      ],
      forbid: appType !== 'pc'
    },
    {
      type: 'radio',
      field: 'joint',
      label: '参数拼接',
      initval: card.joint || 'true',
      required: false,
      options: [
        {value: 'true', label: '是'},
        {value: 'false', label: '否'},
      ],
    },
    {
      type: 'table',
      field: 'menus',
      label: '菜单组',
      initval: card.menus || [],
      required: true,
      span: 24,
      actions: appType === 'pc' ? ['view'] : [],
      columns: [
        {
          title: '标识',
          dataIndex: 'sign',
          inputType: 'input',
          editable: true,
          unique: true,
          required: false,
          width: '35%'
        },
        {
          title: '菜单',
          dataIndex: 'menu',
          inputType: !appType ? 'cascader' : 'select',
          editable: true,
          required: true,
          extends: !appType ? 'Menu' : [{key: 'label', value: 'label'}],
          width: '35%',
          render: (text, record) => record.label,
          options: menulist
        }
      ]
    }
  ]
}

 src/menu/components/chart/antv-G6/chartcompile/index.jsx

@@ -33,7 +33,7 @@
      visible: true,
      view: 'normal',
      plot: fromJS(config.plot).toJS(),
      baseFormlist: getBaseForm(config.plot),
      baseFormlist: getBaseForm(config.plot, config.columns),
      formlist: getOptionForm(config.plot, config.columns)
    })
  }
@@ -46,6 +46,35 @@
      this.norRef.handleConfirm().then(res => {
        let _plot = {...plot, ...res}

        if (_plot.click !== 'menus') {
          delete _plot.menus
        }
        if (_plot.click !== 'menu') {
          delete _plot.menu
          delete _plot.MenuID
          delete _plot.MenuName
          delete _plot.MenuNo
          delete _plot.tabType
        } else if (sessionStorage.getItem('appType') === '' && _plot.menu) {
          let list = null
          try {
            list = JSON.parse(sessionStorage.getItem('thdMenuList')) || []
          } catch (e) {
            list = []
          }
    
          let id = _plot.menu[_plot.menu.length - 1]
    
          list.forEach(item => {
            if (item.MenuID === id) {
              _plot.MenuID = id
              _plot.MenuName = item.MenuName
              _plot.MenuNo = item.MenuNo
              _plot.tabType = item.type
            }
          })
        }

        this.setState({
          plot: _plot,
          visible: false
@@ -57,6 +86,35 @@
      this.baseRef.handleConfirm().then(res => {
        let _plot = {...plot, ...res}

        if (_plot.click !== 'menus') {
          delete _plot.menus
        }
        if (_plot.click !== 'menu') {
          delete _plot.menu
          delete _plot.MenuID
          delete _plot.MenuName
          delete _plot.MenuNo
          delete _plot.tabType
        } else if (sessionStorage.getItem('appType') === '' && _plot.menu) {
          let list = null
          try {
            list = JSON.parse(sessionStorage.getItem('thdMenuList')) || []
          } catch (e) {
            list = []
          }
    
          let id = _plot.menu[_plot.menu.length - 1]
    
          list.forEach(item => {
            if (item.MenuID === id) {
              _plot.MenuID = id
              _plot.MenuName = item.MenuName
              _plot.MenuNo = item.MenuNo
              _plot.tabType = item.type
            }
          })
        }
        
        this.setState({
          plot: _plot,
          visible: false

 src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx

@@ -104,6 +104,7 @@
      key: 'click',
      label: '点击事件',
      initVal: card.click || '',
      tooltip: '点击柱子时触发的事件，启用自定义设置时无效。',
      required: false,
      forbid: appType === 'mob' || card.chartType !== 'bar',
      options: [

 src/menu/components/group/groupcomponents/card.jsx

@@ -24,6 +24,7 @@
const CodeSandbox = asyncComponent(() => import('@/menu/components/code/sandbox'))
const CustomChart = asyncComponent(() => import('@/menu/components/chart/chart-custom'))
const Timeline = asyncComponent(() => import('@/menu/components/timeline/normal-timeline'))
const AntvG6 = asyncComponent(() => import('@/menu/components/chart/antv-G6'))

const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => {
  const originalIndex = findCard(id).index
@@ -103,6 +104,8 @@
      return (<Timeline card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'chart') {
      return (<CustomChart card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'antvG6') {
      return (<AntvG6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }
  }


 src/menu/components/group/groupcomponents/index.jsx

@@ -76,6 +76,7 @@
        tree: '树形列表',
        balcony: '浮动卡',
        timeline: '时间轴',
        antvG6: '树图',
        card: '卡片'
      }
      let i = 1

 src/menu/components/group/paste/index.jsx

@@ -37,7 +37,7 @@
    }

    if (appType !== 'mob') {
      options.push('editable')
      options.push('editable', 'antvG6')
    }

    this.pasteFormRef.handleConfirm().then(res => {

 src/menu/components/tabs/paste/index.jsx

@@ -70,7 +70,7 @@
    if (appType === 'mob') {
      options.push('menubar')
    } else {
      options.push('editable')
      options.push('editable', 'antvG6')
    }

    this.pasteFormRef.handleConfirm().then(res => {

 src/menu/components/tabs/tabcomponents/card.jsx

@@ -27,6 +27,7 @@
const CodeSandbox = asyncComponent(() => import('@/menu/components/code/sandbox'))
const CustomChart = asyncComponent(() => import('@/menu/components/chart/chart-custom'))
const Timeline = asyncComponent(() => import('@/menu/components/timeline/normal-timeline'))
const AntvG6 = asyncComponent(() => import('@/menu/components/chart/antv-G6'))

const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => {
  const originalIndex = findCard(id).index
@@ -112,6 +113,8 @@
      return (<Timeline card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'chart') {
      return (<CustomChart card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'antvG6') {
      return (<AntvG6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }
  }


 src/menu/components/tabs/tabcomponents/index.jsx

@@ -97,6 +97,7 @@
        tree: '树形列表',
        balcony: '浮动卡',
        timeline: '时间轴',
        antvG6: '树图',
        card: '卡片'
      }
      let i = 1

 src/menu/pastecontroller/index.jsx

@@ -64,7 +64,7 @@
    if (appType === 'mob') {
      options.push('menubar', 'topbar')
    } else {
      options.push('editable')
      options.push('editable', 'antvG6')
    }

    this.pasteFormRef.handleConfirm().then(res => {

 src/pc/menushell/card.jsx

@@ -29,6 +29,7 @@
const Balcony = asyncComponent(() => import('@/menu/components/card/balcony'))
const CustomChart = asyncComponent(() => import('@/menu/components/chart/chart-custom'))
const Timeline = asyncComponent(() => import('@/menu/components/timeline/normal-timeline'))
const AntvG6 = asyncComponent(() => import('@/menu/components/chart/antv-G6'))
const Iframe = asyncComponent(() => import('@/menu/components/iframe'))

const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => {
@@ -137,6 +138,8 @@
      return (<Timeline card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'chart') {
      return (<CustomChart card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'antvG6') {
      return (<AntvG6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'iframe') {
      return (<Iframe card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }

 src/pc/menushell/index.jsx

@@ -113,6 +113,7 @@
        card: '卡片',
        balcony: '浮动卡',
        timeline: '时间轴',
        antvG6: '树图',
        login: '登录'
      }
      let i = 1

 src/tabviews/custom/components/card/cardItem/index.jsx

@@ -64,22 +64,24 @@
        return
      }

      menu.type = menu.tabType

      let newtab = {
        ...menu,
        MenuID: menu.MenuID,
        MenuName: menu.MenuName,
        MenuNo: menu.MenuNo || '',
        type: menu.tabType,
        param: {}
      }

      if (card.setting.joint === 'true') {
        newtab.param.$BID = data.$$uuid || ''

        Object.keys(data).forEach(key => {
          if (/^\$/.test(key)) return
          newtab.param[key] = data[key]
        })
      }

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    } else if (card.setting.click === 'menu' && card.setting.menu) {
      let menuId = card.setting.MenuID || card.setting.menu.slice(-1)[0]
      let menu = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]
@@ -109,13 +111,14 @@

      if (card.setting.joint === 'true') {
        newtab.param.$BID = data.$$uuid || ''
        
        Object.keys(data).forEach(key => {
          if (/^\$/.test(key)) return
          newtab.param[key] = data[key]
        })
      }

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    } else if (card.setting.click === 'link') {
      let src = card.setting.linkurl


 src/tabviews/custom/components/card/table-card/index.jsx

@@ -355,12 +355,12 @@

  openView = (card, data) => {
    if (card.setting.click === 'menu' && card.setting.menu) {
      let menuId = card.setting.MenuID || card.setting.menu.slice(-1)[0]
      let menuId = card.setting.menu.slice(-1)[0]
      let menu = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]

      if (!menu && card.setting.MenuName && card.setting.tabType) {
      if (!menu && card.setting.MenuName && card.setting.MenuID) {
        menu = {
          MenuID: menuId,
          MenuID: card.setting.MenuID,
          MenuName: card.setting.MenuName,
          MenuNo: card.setting.MenuNo || '',
          type: card.setting.tabType
@@ -383,13 +383,14 @@

      if (card.setting.joint === 'true') {
        newtab.param.$BID = data.$$uuid || ''

        Object.keys(data).forEach(key => {
          if (/^\$/.test(key)) return
          newtab.param[key] = data[key]
        })
      }

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    } else if (card.setting.click === 'link') {
      let src = card.setting.linkurl


 src/tabviews/custom/components/carousel/cardItem/index.jsx

@@ -60,13 +60,14 @@

      if (card.setting.joint === 'true') {
        newtab.param.$BID = data.$$uuid || ''

        Object.keys(data).forEach(key => {
          if (/^\$/.test(key)) return
          newtab.param[key] = data[key]
        })
      }

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    } else if (card.setting.click === 'link') {
      let src = card.setting.linkurl


 src/tabviews/custom/components/chart/antv-G6/index.jsx

New file
@@ -0,0 +1,1573 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Modal, notification, Spin, Empty } from 'antd'
import G6 from '@antv/g6'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import UtilsDM from '@/utils/utils-datamanage.js'
import MKEmitter from '@/utils/events.js'
import NormalHeader from '@/tabviews/custom/components/share/normalheader'
import './index.scss'

const { Util } = G6

const styles = {
  blue: '#1890ff',
  red: '#f5222d',
  orange_red: '#fa541c',
  orange: '#fa8c16',
  orange_yellow: '#faad14',
  yellow: '#fadb14',
  yellow_green: '#a0d911',
  green: '#52c41a',
  cyan: '#13c2c2',
  blue_purple: '#2f54eb',
  purple: '#722ed1',
  magenta: '#eb2f96',
  grass_green: '#aeb303',
  deep_red: '#c32539'
}

let systemColor = '#1890ff'
if (window.GLOB.style) {
  let type = window.GLOB.style.replace(/bg_black_style_|bg_white_style_/, '')
  systemColor = styles[type] || '#1890ff'
}
const COLORS = ['#5B8FF9', '#F6BD16', '#5AD8A6', '#945FB9', '#E86452', '#6DC8EC', '#FF99C3', '#1E9493', '#FF9845', '#5D7092']

// 思维导图
G6.registerNode(
  'dice-mind-map-root', {
    jsx: (cfg) => {
      const width = Util.getTextSize(cfg.label, 16)[0] + 24

      return `
        <group>
          <rect style={{width: ${width}, height: 42, stroke: ${systemColor}, radius: 4}} keyshape>
            <text style={{ fontSize: 16, marginLeft: 6, marginTop: 12 }}>${cfg.label}</text>
          </rect>
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.5],
        [1, 0.5]
      ]
    }
  },
  'single-node',
)
G6.registerNode(
  'dice-mind-map-sub', {
    jsx: (cfg) => {
      const width = Util.getTextSize(cfg.label, 14)[0] + 24

      return `
        <group>
          <rect style={{width: ${width}, height: 22, cursor: pointer}}>
            <text style={{ fontSize: 14, fill: ${cfg.selected ? systemColor : '#000000'}, marginLeft: 12, marginTop: 6, cursor: pointer }}>${cfg.label}</text>
          </rect>
          <rect style={{ fill: ${cfg.color}, width: ${width}, height: 2, x: 0, y: 22, cursor: pointer }} />
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.965],
        [1, 0.965]
      ]
    }
  },
  'single-node',
)
G6.registerNode(
  'dice-mind-map-leaf', {
    jsx: (cfg) => {
      const width = Util.getTextSize(cfg.label, 12)[0] + 24

      return `
        <group>
          <rect style={{width: ${width}, height: 26, fill: 'transparent', cursor: pointer }}>
            <text style={{ fontSize: 12, fill: ${cfg.selected ? systemColor : '#000000'}, marginLeft: 12, marginTop: 6, cursor: pointer }}>${cfg.label}</text>
          </rect>
          <rect style={{ fill: ${cfg.color}, width: ${width}, height: 2, x: 0, y: 32, cursor: pointer }} />
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.965],
        [1, 0.965]
      ]
    }
  },
  'single-node',
)

G6.registerBehavior('scroll-canvas', {
  getEvents: function getEvents() {
    return {
      wheel: 'onWheel'
    }
  },
  onWheel: function onWheel(ev) {
    const { graph } = this
    if (!graph) {
      return
    }
    if (ev.ctrlKey) {
      const canvas = graph.get('canvas')
      const point = canvas.getPointByClient(ev.clientX, ev.clientY)
      let ratio = graph.getZoom()
      if (ev.wheelDelta > 0) {
        ratio += ratio * 0.05
      } else {
        ratio *= ratio * 0.05
      }
      graph.zoomTo(ratio, {
        x: point.x,
        y: point.y
      })
    } else {
      const x = ev.deltaX || ev.movementX
      const y = ev.deltaY || ev.movementY || (-ev.wheelDelta * 125) / 3
      graph.translate(-x, -y)
    }
    ev.preventDefault()
  }
})

const dataMapTransform = (data) => {
  const changeData = (d, level = 0, color) => {
    const data = { ...d }

    switch (level) {
      case 0:
        data.type = 'dice-mind-map-root'
        break
      case 1:
        data.type = 'dice-mind-map-sub'
        break
      default:
        data.type = 'dice-mind-map-leaf'
        break
    }

    if (color) {
      data.color = color
    }

    if (level === 1 && !d.direction) {
      data.direction = 'right'
    }

    if (d.children) {
      data.children = d.children.map((child) => changeData(child, level + 1, data.color))
    }
    return data
  }
  return changeData(data)
}

// 缩进文件树
G6.registerNode('indentedRoot', {
  draw(model, group) {
    const keyShape = group.addShape('rect', {
      attrs: {
        x: -46,
        y: -16,
        width: 92,
        height: 32,
        fill: systemColor,
        radius: 2,
        stroke: '#5B8FF9',
        lineWidth: 0
      },
      name: 'key-shape'
    })

    const text = group.addShape('text', {
      attrs: {
        text: model.label || 'root',
        fill: "#fff",
        fontSize: 12,
        x: 0,
        y: 0,
        textAlign: 'center',
        textBaseline: 'middle'
      },
      name: 'root-text-shape'
    })
    const textBBox = text.getBBox()
    const width = textBBox.width + 24
    const height = textBBox.height + 12
    keyShape.attr({
      x: -width / 2,
      y: -height / 2,
      width,
      height
    })

    return keyShape
  },
  getAnchorPoints() {
    return [
      [0.5, 1]
    ]
  },
  update: undefined
})

G6.registerNode('indentedNode', {
  addChildCount(group, tag, props) {
    const { collapsed, branchColor, count } = props
    let clickCircleY = 10
    // 子类数量 icon，绘制圆点在节点正下方
    if (tag) {
      const childCountGroup = group.addGroup({
        name: 'child-count-group'
      })
      childCountGroup.setMatrix([1, 0, 0, 0, 1, 0, 0, clickCircleY, 1])
      const countBackWidth = collapsed ? 26 : 12
      childCountGroup.addShape('rect', {
        attrs: {
          width: countBackWidth,
          height: 12,
          radius: 6,
          stroke: branchColor,
          lineWidth: 2,
          fill: collapsed ? branchColor : '#fff',
          x: -countBackWidth / 2,
          y: -6,
          cursor: 'pointer',
        },
        name: 'child-count-rect-shape'
      })
      const childCountText = childCountGroup.addShape('text', {
        attrs: {
          text: count,
          fill: '#fff',
          x: 0,
          y: 0,
          fontSize: 10,
          textAlign: 'center',
          textBaseline: 'middle',
          cursor: 'pointer',
        },
        name: 'child-count-text-shape'
      })
      const childHoverIcon = childCountGroup.addShape('path', {
        attrs: {
          stroke: '#fff',
          lineWidth: 1,
          cursor: 'pointer',
          path: [['M', -3, 2], ['L', 0, -2], ['L', 3, 2]]
        },
        name: 'child-count-expand-icon',
        capture: false
      })
      childHoverIcon.hide()

      // 连接 count 的线段
      const countLink = group.addShape('path', {
        attrs: {
          path: [['M', 0, 0], ['L', 0, 11]],
          stroke: branchColor,
          lineWidth: 2,
        },
        name: 'count-link'
      })
      countLink.toBack()

      if (collapsed) {
        childCountGroup.show()
        childCountText.show()
        countLink.show()
      }
      else {
        childCountGroup.hide()
        childCountText.hide()
        countLink.hide()
      }

      clickCircleY += 16
    }
  },
  addBottomLine(group, props) {
    const { x, width, stroke, lineWidth } = props
    return group.addShape('path', {
      attrs: {
        path: [
          ['M', x - 1, 0],
          ['L', width, 0],
        ],
        stroke,
        lineWidth,
      },
      name: 'node-path-shape'
    })
  },
  addName(group, props) {
    const { label, x = 0, y, fill } = props
    return group.addShape('text', {
      attrs: {
        text: label,
        x,
        y,
        textAlign: 'start',
        textBaseline: 'top',
        fill,
        fontSize: 14,
        fontFamily: 'PingFangSC-Regular',
        cursor: 'pointer',
      },
      name: 'not-root-text-shape'
    })
  },
  draw(model, group) {
    const { collapsed, depth, label, children, selected } = model
    // 是否为根节点
    const rootNode = depth === 0
    // 子节点数量
    const childCount = children ? children.length : 0

    let width = 0
    const height = 24
    const x = 0
    const y = -height / 2
    const borderRadius = 4
    // 名称文本
    const text = this.addName(group, { label, x, y })

    let textWidth = text.getBBox().width
    width = textWidth + 20

    const keyShapeAttrs = {
      x,
      y,
      width,
      height,
      radius: borderRadius,
      fill: undefined,
      stroke: undefined,
    }

    const keyShape = group.addShape('rect', {
      attrs: keyShapeAttrs,
      name: 'root-key-shape-rect-shape'
    })

    // 底部横线
    const bottomLine = this.addBottomLine(group, {
      stroke: model.branchColor || '#AAB7C4',
      lineWidth: 3,
      x,
      width
    })

    let nameColor = 'rgba(0, 0, 0, 0.85)'

    if (selected) {
      nameColor = systemColor
    }

    // 名称
    text.attr({
      y: y - 12,
      fill: nameColor
    })
    text.toFront()
    textWidth = text.getBBox().width

    if (bottomLine) bottomLine.toFront()

    this.addChildCount(group, childCount && !rootNode, {
      collapsed,
      branchColor: model.branchColor,
      count: childCount ? `${childCount}` : undefined
    })

    const bbox = group.getBBox()
    const backContainer = group.addShape('path', {
      attrs: {
        path: childCount ? [
          ['M', bbox.minX, bbox.minY],
          ['L', bbox.maxX, bbox.minY],
          ['L', bbox.maxX, bbox.maxY],
          ['L', bbox.minX + 20, bbox.maxY],
          ['L', bbox.minX + 20, bbox.maxY + 20],
          ['L', bbox.minX, bbox.maxY + 20],
          ['Z']
        ] : [
          ['M', bbox.minX, bbox.minY],
          ['L', bbox.maxX, bbox.minY],
          ['L', bbox.maxX, bbox.maxY],
          ['L', bbox.minX, bbox.maxY],
          ['Z']
        ],
        fill: '#fff',
        opacity: 0
      }
    })
    backContainer.toBack()
    return keyShape
  }
})

G6.registerEdge('indentedEdge', {
  afterDraw: (cfg, group) => {
    const sourceNode = cfg.sourceNode && cfg.sourceNode.getModel()
    const targetNode = cfg.targetNode && cfg.targetNode.getModel()
    const color = sourceNode.branchColor || targetNode.branchColor || cfg.color || '#000'

    const keyShape = group.get('children')[0]
    keyShape.attr({
      stroke: color,
      lineWidth: 3 // branchThick
    })
    group.toBack()
  },
  getControlPoints: (cfg) => {
    const startPoint = cfg.startPoint
    const endPoint = cfg.endPoint
    return [
      startPoint,
      {
        x: startPoint.x,
        y: endPoint.y,
      },
      endPoint
    ]
  },
  update: undefined
}, 'polyline')

G6.registerBehavior('wheel-scroll', {
  getDefaultCfg() {
    return {
      direction: 'y',
      zoomKey: 'ctrl',
      sensitivity: 3,
      scalableRange: -64
    }
  },
  getEvents() {
    return {
      wheel: 'onWheel'
    }
  },
  onWheel(ev) {
    const graph = this.graph
    let keyDown = ev[`${this.zoomKey}Key`]
    if (this.zoomKey === 'control') keyDown = ev.ctrlKey
    if (keyDown) {
      const sensitivity = this.get('sensitivity')
      const canvas = graph.get('canvas')
      const point = canvas.getPointByClient(ev.clientX, ev.clientY)
      let ratio = graph.getZoom()
      if (ev.wheelDelta > 0) {
        ratio *= (1 + 0.01 * sensitivity)
      } else {
        ratio *= (1 - 0.01 * sensitivity)
      }
      graph.zoomTo(ratio, {
        x: point.x,
        y: point.y
      })
      graph.emit('wheelzoom', ev)
    } else {
      let dx = ev.deltaX || ev.movementX
      let dy = ev.deltaY || ev.movementY
      if (!dy && navigator.userAgent.indexOf('Firefox') > -1) dy = (-ev.wheelDelta * 125) / 3

      const width = this.graph.get('width')
      const height = this.graph.get('height')
      const graphCanvasBBox = this.graph.get('group').getCanvasBBox()

      let expandWidth = this.scalableRange
      let expandHeight = this.scalableRange
      // 若 scalableRange 是 0~1 的小数，则作为比例考虑
      if (expandWidth < 1 && expandWidth > -1) {
        expandWidth = width * expandWidth
        expandHeight = height * expandHeight
      }

      const { minX, maxX, minY, maxY } = graphCanvasBBox

      if (dx > 0) {
        if (maxX < -expandWidth) {
          dx = 0
        } else if (maxX - dx < -expandWidth) {
          dx = maxX + expandWidth
        }
      } else if (dx < 0) {
        if (minX > width + expandWidth) {
          dx = 0
        } else if (minX - dx > width + expandWidth) {
          dx = minX - (width + expandWidth)
        }
      }

      if (dy > 0) {
        if (maxY < -expandHeight) {
          dy = 0
        } else if (maxY - dy < -expandHeight) {
          dy = maxY + expandHeight
        }
      } else if (dy < 0) {
        if (minY > height + expandHeight) {
          dy = 0
        } else if (minY - dy > height + expandHeight) {
          dy = minY - (height + expandHeight)
        }
      }

      if (this.get('direction') === 'x') {
        dy = 0
      } else if (this.get('direction') === 'y') {
        dx = 0
      }

      graph.translate(-dx, -dy)
    }
    ev.preventDefault()
  }
})
G6.registerBehavior('hover-node', {
  getEvents() {
    return {
      'node:mouseover': 'onNodeMouseOver',
      'node:mouseleave': 'onNodeMouseLeave',
      'node:mouseenter': 'onNodeMouseEnter'
    }
  },
  onNodeMouseEnter(ev) {
    const { item } = ev
    if (!item || item.get('destroyed')) return
    item.toFront()
    const model = item.getModel()
    const { collapsed, depth } = model
    const rootNode = depth === 0 || model.isRoot
    const group = item.getContainer()

    if (rootNode) return

    // 控制子节点个数标记
    if (!collapsed) {
      const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
      if (childCountGroup) {
        childCountGroup.show()
      }
    }
  },
  onNodeMouseOver(ev) {
    const shape = ev.target

    // tooltip显示、隐藏
    this.graph.emit('tooltip: show', ev)

    // expand 状态下，若 hover 到子节点个数标记，填充背景+显示收起 icon
    const { item } = ev
    const group = item.getContainer()
    const model = item.getModel()
    if (!model.collapsed) {
      const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
      if (childCountGroup) {
        childCountGroup.show()
        const back = childCountGroup.find(e => e.get('name') === 'child-count-rect-shape')
        const expandIcon = childCountGroup.find(e => e.get('name') === 'child-count-expand-icon')
        const rootNode = model.depth === 0 || model.isRoot
        const branchColor = rootNode ? '#576286' : model.branchColor
        if (shape.get('parent').get('name') === 'child-count-group') {
          if (back) {
            back.attr('fill', branchColor || '#fff')
          }
          if (expandIcon) {
            expandIcon.show()
          }
        } else {
          if (back) {
            back.attr('fill', '#fff')
          }
          if (expandIcon) {
            expandIcon.hide()
          }
        }
      }
    }
  },
  onNodeMouseLeave(ev) {
    const { item } = ev
    const model = item.getModel()
    const group = item.getContainer()
    const { collapsed } = model

    if (!collapsed) {
      const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
      if (childCountGroup) {
        childCountGroup.hide()
      }

      const iconsLinkPath = group.find(e => e.get('name') === 'icons-link-path')
      if (iconsLinkPath) {
        iconsLinkPath.hide()
      }
    }

    this.graph.emit('tooltip: hide', ev)
  }
})
const dataIndTransform = (data) => {
  const changeData = (d) => {
    let data = { ...d }

    data.type = data.isRoot ? 'indentedRoot' : 'indentedNode'

    if (d.children) {
      data.children = d.children.map((child) => changeData(child))
    }
    // 给定 branchColor 和 0-2 层节点 depth
    if (data.children && data.children.length) {
      data.depth = 0
      data.children.forEach((subtree, i) => {
        subtree.branchColor = COLORS[i % COLORS.length]
        // dfs
        let currentDepth = 1
        subtree.depth = currentDepth
        Util.traverseTree(subtree, child => {
          child.branchColor = COLORS[i % COLORS.length]

          if (!child.depth) {
            child.depth = currentDepth + 1
          }
          else currentDepth = subtree.depth
          if (child.children) {
            child.children.forEach(subChild => {
              subChild.depth = child.depth + 1
            })
          }

          if (!data.isRoot) {
            child.collapsed = data.collapsed || false
          }
          return true
        })
      })
    }

    return data
  }
  return changeData(data)
}

// 知识图谱树
G6.registerNode('treeNode', {
  draw: (cfg, group) => {
    const { label, selected, children, isRoot } = cfg
    const rootNode = !!isRoot
    const hasChildren = children && children.length !== 0

    let width = 0
    const height = 28
    const x = 0
    const y = -height / 2

    // 名称文本
    const text = group.addShape('text', {
      attrs: {
        text: label,
        x: x * 2,
        y,
        textAlign: 'left',
        textBaseline: 'top',
        fontFamily: 'PingFangSC-Regular',
      },
      cursor: 'pointer',
      name: 'name-text-shape',
    })
    const textWidth = text.getBBox().width
    width = textWidth + 20

    width = width < 60 ? 60 : width

    if (!rootNode && hasChildren) {
      width += 22
    }

    const keyShapeAttrs = {
      x,
      y,
      width,
      height,
      radius: 4
    }

    const keyShape = group.addShape('rect', {
      attrs: keyShapeAttrs,
      name: 'root-key-shape-rect-shape'
    })

    if (!rootNode) {
      // 底部横线
      group.addShape('path', {
        attrs: {
          path: [
            ['M', x - 1, 0],
            ['L', width, 0],
          ],
          stroke: '#AAB7C4',
          lineWidth: 1,
        },
        name: 'node-path-shape'
      })
    }

    const mainX = x - 10
    const mainY = -height + 15

    if (rootNode) {
      group.addShape('rect', {
        attrs: {
          x: mainX,
          y: mainY,
          width: width + 12,
          height,
          radius: 14,
          fill: systemColor,
          cursor: 'pointer',
        },
        name: 'main-shape'
      })
    }

    let nameColor = 'rgba(0, 0, 0, 0.85)'
    if (selected) {
      nameColor = systemColor
    }

    // 名称
    if (rootNode) {
      group.addShape('text', {
        attrs: {
          text: label,
          x: mainX + 18,
          y: 1,
          textAlign: 'left',
          textBaseline: 'middle',
          fill: '#ffffff',
          fontSize: 12,
          fontFamily: 'PingFangSC-Regular',
          cursor: 'pointer',
        },
        name: 'root-text-shape'
      })
    } else {
      group.addShape('text', {
        attrs: {
          text: label,
          x: mainX + 6,
          y: y - 5,
          textAlign: 'start',
          textBaseline: 'top',
          fill: nameColor,
          fontSize: 12,
          fontFamily: 'PingFangSC-Regular',
          cursor: 'pointer',
        },
        name: 'not-root-text-shape'
      })
    }

    // 子类数量
    if (hasChildren && !rootNode) {
      const childCountHeight = 12
      const childCountX = width - 22
      const childCountY = -childCountHeight / 2

      group.addShape('rect', {
        attrs: {
          width: 22,
          height: 12,
          stroke: systemColor,
          fill: '#fff',
          x: childCountX,
          y: childCountY,
          radius: 6,
          cursor: 'pointer',
        },
        name: 'child-count-rect-shape',
      })
      group.addShape('text', {
        attrs: {
          text: `${children.length}`,
          fill: 'rgba(0, 0, 0, .65)',
          x: childCountX + 11,
          y: childCountY + 12,
          fontSize: 10,
          width: 22,
          textAlign: 'center',
          cursor: 'pointer',
        },
        name: 'child-count-text-shape'
      })
    }

    return keyShape
  }
})

G6.registerEdge('smooth', {
  draw(cfg, group) {
    const { startPoint, endPoint } = cfg
    const hgap = Math.abs(endPoint.x - startPoint.x)

    const path = [
      ['M', startPoint.x, startPoint.y],
      [
        'C',
        startPoint.x + hgap / 4,
        startPoint.y,
        endPoint.x - hgap / 2,
        endPoint.y,
        endPoint.x,
        endPoint.y,
      ],
    ]

    const shape = group.addShape('path', {
      attrs: {
        stroke: '#AAB7C4',
        path,
      },
      name: 'smooth-path-shape',
    })
    return shape
  },
})

class antvG6Chart extends Component {
  static propTpyes = {
    data: PropTypes.array,           // 统一查询数据
    config: PropTypes.object,        // 组件配置信息
    mainSearch: PropTypes.any,       // 外层搜索条件
  }

  state = {
    config: null,
    data: null,
    BID: '',
    BData: '',
    plot: null,
    sync: false,
    arr_field : '',
    chartId: Utils.getuuid(),
    empty: true
  }

  UNSAFE_componentWillMount () {
    const { config, data, initdata } = this.props
    let _config = fromJS(config).toJS()

    let _data = null
    let _sync = _config.setting.sync === 'true'

    let BID = ''
    let BData = ''

    if (config.setting.supModule) {
      BData = window.GLOB.CacheData.get(config.setting.supModule)
    } else {
      BData = window.GLOB.CacheData.get(config.$pageId)
    }
    if (BData) {
      BID = BData.$BID || ''
    }

    if (_sync && data) {
      _data = data[config.dataName] || []
      _sync = false
    } else if (_sync && initdata) {
      _data = initdata || []
      _sync = false
    }

    _config.plot.height = Utils.getHeight(_config.plot.height)
    _config.style.minHeight = _config.plot.height + 30

    if (_config.plot.title) {
      _config.style.minHeight = _config.style.minHeight + 45
    }

    this.setState({
      config: _config,
      data: _data,
      BID: BID || '',
      BData: BData || '',
      arr_field: _config.columns.map(col => col.field).join(','),
      plot: _config.plot,
      sync: _sync
    }, () => {
      if (config.setting.sync !== 'true' && config.setting.onload === 'true') {
        setTimeout(() => {
          this.loadData()
        }, _config.setting.delay || 0)
      } else if (config.setting.sync === 'true' && _data) {
        this.handleData()
      }
    })
  }

  /**
   * @description 图表数据更新，刷新内容
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { sync, config } = this.state

    if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let _data = []

      if (nextProps.data && nextProps.data[config.dataName]) {
        _data = nextProps.data[config.dataName]
      }

      this.setState({sync: false, data: _data}, () => {
        this.handleData()
      })
    } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) {
      this.setState({}, () => {
        this.loadData()
      })
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  componentDidMount () {
    const { config } = this.state
    MKEmitter.addListener('reloadData', this.reloadData)
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)

    let that = this

    if (config.plot.subtype === 'mindmap') {
      G6.registerBehavior(config.uuid, {
        getEvents() {
          return {
            'node:click': 'editNode',
            'canvas:click': 'onCanvasClick'
          }
        },
        editNode(evt) {
          const item = evt.item
          const model = item.get('model')
      
          this.graph.getNodes().forEach(node => {
            let _model = node.get('model')
            if (_model.selected) {
              _model.selected = false
              this.graph.updateItem(node, _model, false)
            }
          })
      
          model.selected = true
          this.graph.updateItem(item, model, false)
      
          that.handleClick(model)
        },
        onCanvasClick(e) {
          this.graph.getNodes().forEach(node => {
            let _model = node.get('model')
            if (_model.selected) {
              _model.selected = false
              this.graph.updateItem(node, _model, false)
            }
          })
          that.handleClick()
        }
      })
    } else if (config.plot.subtype === 'indentTree') {
      G6.registerBehavior(config.uuid, {
        getEvents() {
          return {
            'node:click': 'onNodeClick',
            'canvas:click': 'onCanvasClick'
          }
        },
        onNodeClick(e) {
          const { item, target } = e
          const shape = target
          const shapeName = shape.cfg.name
          let model = item.getModel()
      
          // 点击收起/展开 icon
          if (shapeName === 'child-count-rect-shape' || shapeName === 'child-count-text-shape') {
            const updatedCollapsed = !model.collapsed
            this.graph.updateItem(item, { collapsed: updatedCollapsed })
            this.graph.layout()
            return
          }
      
          // 选中节点
          this.graph.getNodes().forEach(node => {
            let _model = node.get('model')
            if (_model.selected) {
              _model.selected = false
              this.graph.updateItem(node, _model, false)
            }
          })
      
          model.selected = true
          this.graph.updateItem(item, model, false)

          that.handleClick(model)
        },
        onCanvasClick(e) {
          this.graph.getNodes().forEach(node => {
            let _model = node.get('model')
            if (_model.selected) {
              _model.selected = false
              this.graph.updateItem(node, _model, false)
            }
          })

          that.handleClick()
        }
      })
    } else if (config.plot.subtype === 'kapmap') {
      G6.registerBehavior(config.uuid, {
        getEvents() {
          return {
            'node:click': 'onNodeClick',
            'canvas:click': 'onCanvasClick'
          }
        },
        onNodeClick(e) {
          const { item } = e
          let model = item.getModel()
      
          if (model.children) return
          // 选中节点
          this.graph.getNodes().forEach(node => {
            let _model = node.get('model')
            if (_model.selected) {
              _model.selected = false
              this.graph.updateItem(node, _model, false)
            }
          })
      
          model.selected = true
          this.graph.updateItem(item, model, false)
      
          that.handleClick(model)
        },
        onCanvasClick(e) {
          this.graph.getNodes().forEach(node => {
            let _model = node.get('model')
            if (_model.selected) {
              _model.selected = false
              this.graph.updateItem(node, _model, false)
            }
          })

          that.handleClick()
        }
      })
    }
  }

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('reloadData', this.reloadData)
    MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
  }

  reloadData = (menuId) => {
    const { config } = this.state

    if (config.uuid !== menuId) return

    this.loadData()
  }

  resetParentParam = (MenuID, id, data) => {
    const { config } = this.state

    if (!config.setting.supModule || config.setting.supModule !== MenuID) return
    if (id !== this.state.BID || id !== '') {
      this.setState({ BID: id, BData: data }, () => {
        this.loadData()
      })
    }
  }

  async loadData () {
    const { mainSearch } = this.props
    const { config, arr_field, BID } = this.state

    if (config.setting.supModule && !BID) { // BID 不存在时，不做查询
      this.setState({
        data: {}
      }, () => {
        this.handleData()
      })
      return
    }

    let searches = config.setting.useMSearch && mainSearch ? mainSearch : []

    let requireFields = searches.filter(item => item.required && item.value === '')
    if (requireFields.length > 0) {
      return
    }

    this.setState({
      loading: true
    })

    let _orderBy = config.setting.order || ''
    let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID)

    let result = await Api.genericInterface(param)
    if (result.status) {
      let data = result.data || []

      this.setState({
        data,
        loading: false
      }, () => {
        this.handleData()
      })
    } else {
      this.setState({
        loading: false
      })
      
      if (result.ErrCode === 'N') {
        Modal.error({
          title: result.message,
        })
      } else {
        notification.error({
          top: 92,
          message: result.message,
          duration: 10
        })
      }
    }
  }

  getdata = () => {
    const { plot, data, config, BData } = this.state
    
    let root = {
      label: 'Root',
      id: 'Root'
    }

    if (plot.rootType === 'fixed') {
      root.label = plot.rootLabel
      root.id = plot.rootValue
    } else if (plot.rootType === 'supvalue' && BData) {
      let rootLabel = plot.rootLabel.toLowerCase()
      let rootValue = plot.rootValue.toLowerCase()
      let _bd = {}
      
      Object.keys(BData).forEach(key => {
        _bd[key.toLowerCase()] = BData[key]
      })

      root.label = _bd[rootLabel]
      root.id = _bd[rootValue]
    }

    let _options = []
    let logMap = new Map()

    data.forEach(item => {
      let pval = item[plot.parentField]
      let val = item[plot.valueField]
      let label = item[plot.labelField] || ''

      if (!val || !label || logMap.has(val)) return

      if (plot.rootType === 'line' && pval === plot.mark) {
        root.label = label
        root.id = val
      }

      logMap.set(val, true)

      let _item = {
        ...item,
        label: label,
        id: val,
        $parentId: pval
      }

      _item.$$uuid = item[config.setting.primaryKey] || ''

      _options.push(_item)
    })

    root = this.getTree(root, _options)
    root.children = root.children || []

    if (plot.subtype === 'mindmap') {
      if (plot.dirField) {
        root.children = root.children.map(item => {
          item.direction = item[plot.dirField] === plot.dirSign ? 'left' : 'right'

          return item
        })
      }
  
      root.children.forEach(item => {
        if (item.direction === 'left') {
          item.color = plot.leftColor || '#26C281'
        } else {
          item.color = plot.nodeColor || '#1890ff'
        }
      })
    } else if (plot.subtype === 'indentTree') {
      root.isRoot = true
      root.collapsed = false

      root.children.forEach(item => {
        item.collapsed = plot.collapsed === 'true'
      })
    } else if (plot.subtype === 'kapmap') {
      root.isRoot = true
      root.collapsed = false

      if (plot.collapsed === 'true') {
        const collapse = (item) => {
          if (!item.children) return

          item.children.forEach(cell => {
            cell.collapsed = true
            collapse(cell)
          })
        }

        collapse(root)
      }
    }
    
    return root
  }

  getTree = (parent, options) => {
    parent.children = []
    // 添加菜单的子元素
    options = options.filter(option => {
      if (option.$parentId === parent.id) {
        delete option.$parentId
        parent.children.push(option)
        return false
      }
      return true
    })

    if (parent.children.length === 0) {
      parent.children = null
    } else {
      parent.children = parent.children.map(item => {
        item = this.getTree(item, options)

        return item
      })
    }

    return parent
  }

  handleData = () => {
    const { plot, data } = this.state

    let _element = document.getElementById(this.state.chartId)
    if (_element) {
      _element.innerHTML = ''
    }

    if (!data || data.length === 0) {
      this.setState({empty: true})
    } else {
      this.setState({empty: false})

      if (plot.subtype === 'mindmap') {
        this.ponitrender()
      } else if (plot.subtype === 'indentTree') {
        this.indentrender()
      } else if (plot.subtype === 'kapmap') {
        this.kapmaprender()
      }
    }
  }

  kapmaprender = () => {
    const { plot, chartId, config } = this.state
    const data = this.getdata()

    const graph = new G6.TreeGraph({
      container: chartId,
      width: this.wrap.scrollWidth - 30,
      height: plot.height,
      modes: {
        default: [
          {
            type: 'collapse-expand',
          },
          'drag-canvas',
          'zoom-canvas',
          config.uuid
        ],
      },
      defaultNode: {
        type: 'treeNode',
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'smooth',
      },
      layout: {
        type: 'compactBox',
        direction: 'LR',
        getId: function getId(d) {
          return d.id
        },
        getHeight: function getHeight() {
          return 16
        },
        getWidth: function getWidth(d) {
          const labelWidth = G6.Util.getTextSize(d.label, 12)[0]
          const width = 60 + labelWidth
          return width
        },
        getVGap: function getVGap() {
          return 15
        },
        getHGap: function getHGap() {
          return 30
        }
      }
    })

    graph.data(data)
    graph.render()
    graph.fitView()
  }

  indentrender = () => {
    const { plot, chartId, config } = this.state
    const data = this.getdata()

    const tree = new G6.TreeGraph({
      container: chartId,
      width: this.wrap.scrollWidth - 30,
      height: plot.height,
      layout: {
        type: 'indented',
        direction: 'LR',
        isHorizontal: true,
        indent: 40,
        getHeight: (d) => {
          if (d.isRoot) {
            return 30
          }
          if (d.collapsed && d.children && d.children.length) {
            return 36
          }
          return 22
        },
        getVGap: () => {
          return 10
        },
      },
      defaultEdge: {
        type: 'indentedEdge',
        style: {
          lineWidth: 2,
          radius: 16
        }
      },
      minZoom: 0.5,
      modes: {
        default: [
          'drag-canvas',
          'wheel-scroll',
          'hover-node',
          config.uuid
        ]
      }
    })
    
    tree.on('afterrender', e => {
      tree.getEdges().forEach(edge => {
        const targetNode = edge.getTarget().getModel()
        const color = targetNode.branchColor
        tree.updateItem(edge, { color })
      })
      setTimeout(() => {
        tree.moveTo(32, 32)
        tree.zoomTo(0.7)
      }, 16)
    })
    
    tree.data(dataIndTransform(data))
    
    tree.render()
  }

  /**
   * @description 散点图
   */
  ponitrender = () => {
    const { config, plot, chartId } = this.state
    const data = this.getdata()

    const tree = new G6.TreeGraph({
      container: chartId,
      width: this.wrap.scrollWidth - 30,
      height: plot.height,
      fitView: true,
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: () => {
          return 16
        },
        getWidth: (node) => {
          return node.level === 0 ?
            Util.getTextSize(node.label, 16)[0] + 12 :
            Util.getTextSize(node.label, 12)[0]
        },
        getVGap: () => {
          return 10
        },
        getHGap: () => {
          return 60
        },
        getSide: (node) => {
          return node.data.direction
        }
      },
      defaultEdge: {
        type: 'cubic-horizontal',
        style: {
          lineWidth: 2
        }
      },
      minZoom: 0.5,
      modes: {
        default: ['drag-canvas', 'zoom-canvas', config.uuid]
      }
    })

    tree.data(dataMapTransform(data))

    tree.render()
  }

  handleClick = (data = null) => {
    const { plot, config } = this.state
    
    if (plot.click && !data) return

    if (plot.click === 'menus') {
      let menu = null
      
      if (plot.menus && plot.menus.length > 0) {
        let s = data[plot.menuType] || ''
        plot.menus.forEach(m => {
          if (s !== m.sign) return
          menu = m
        })
      }
      if (!menu || !menu.MenuID) return

      let newtab = {
        MenuID: menu.MenuID,
        MenuName: menu.MenuName,
        MenuNo: menu.MenuNo || '',
        type: menu.tabType,
        param: {}
      }

      if (plot.joint === 'true') {
        newtab.param.$BID = data.$$uuid || ''

        Object.keys(data).forEach(key => {
          if (/^\$/.test(key)) return
          newtab.param[key] = data[key]
        })
      }

      MKEmitter.emit('modifyTabs', newtab, true)
    } else if (plot.click === 'menu') {
      let menuId = plot.menu.slice(-1)[0]
      let newtab = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]

      if (!newtab && plot.MenuID) {
        newtab = {
          MenuID: plot.MenuID,
          MenuName: plot.MenuName,
          MenuNo: plot.MenuNo,
          type: plot.tabType
        }
      } else if (!newtab) {
        return
      }

      newtab = {
        ...newtab,
        param: {}
      }

      if (plot.joint === 'true') {
        newtab.param.$BID = data.$$uuid || ''

        Object.keys(data).forEach(key => {
          if (/^\$/.test(key)) return
          newtab.param[key] = data[key]
        })
      }

      MKEmitter.emit('modifyTabs', newtab, true)
    } else {
      MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), data)
    }
  }

  render() {
    const { config, loading, empty } = this.state

    return (
      <div className="custom-g6-plot-box" id={'anchor' + config.uuid} style={config.style}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        <NormalHeader config={config} />
        {empty ? <Empty description={false}/> : null}
        <div className="canvas" id={this.state.chartId} ref={ref => this.wrap = ref}></div>
      </div>
    )
  }
}

export default antvG6Chart

 src/tabviews/custom/components/chart/antv-G6/index.scss

New file
@@ -0,0 +1,49 @@
.custom-g6-plot-box {
  position: relative;
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100px;

  .canvas {
    margin: 0;
    padding: 15px;
    letter-spacing: 0px;
    height: 100%;
  }

  .ant-empty {
    position: absolute;
    top: calc(50% - 34px);
    left: calc(50% - 92px);

    .ant-empty-image {
      height: 60px;
    }
  }
  .ant-empty + .canvas {
    opacity: 0;
  }

  .loading-mask {
    position: absolute;
    left: 0px;
    top: 0;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    z-index: 1;

    .ant-spin-blur {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background: #ffffff;
    }
  }
}

 src/tabviews/custom/components/chart/antv-bar-line/index.jsx

@@ -1737,22 +1737,24 @@
        }
        if (!menu || !menu.MenuID) return
  
        menu.type = menu.tabType
  
        let newtab = {
          ...menu,
          MenuID: menu.MenuID,
          MenuName: menu.MenuName,
          MenuNo: menu.MenuNo || '',
          type: menu.tabType,
          param: {}
        }
  
        if (plot.joint === 'true') {
          newtab.param.$BID = data.$$uuid || ''

          Object.keys(data).forEach(key => {
            if (/^\$/.test(key)) return
            newtab.param[key] = data[key]
          })
        }
  
        if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
          MKEmitter.emit('modifyTabs', newtab, 'replace')
        } else {
          MKEmitter.emit('modifyTabs', newtab, 'plus', true)
        }
        MKEmitter.emit('modifyTabs', newtab, true)
      } else if (plot.click === 'menu') {
        let menuId = plot.menu.slice(-1)[0]
        let newtab = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]
@@ -1775,13 +1777,14 @@
  
        if (plot.joint === 'true') {
          newtab.param.$BID = data.$$uuid || ''

          Object.keys(data).forEach(key => {
            if (/^\$/.test(key)) return
            newtab.param[key] = data[key]
          })
        }
  
        if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
          MKEmitter.emit('modifyTabs', newtab, 'replace')
        } else {
          MKEmitter.emit('modifyTabs', newtab, 'plus', true)
        }
        MKEmitter.emit('modifyTabs', newtab, true)
      } else {
        MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), data)
      }

 src/tabviews/custom/components/chart/antv-dashboard/index.jsx

@@ -63,7 +63,6 @@
    config: null,              // 图表配置信息
    loading: false,            // 数据加载状态
    chartId: Utils.getuuid(),  // 图表Id
    title: '',                 // 组件标题
    sync: false,               // 是否统一请求数据
    plot: null,                // 图表设置
    data: {},                  // 数据
@@ -121,8 +120,7 @@
      BID: BID || '',
      arr_field: _config.columns.map(col => col.field).join(','),
      plot: _config.plot,
      sync: _sync,
      title: config.plot.title
      sync: _sync
    }, () => {
      if (config.setting.sync !== 'true' && config.setting.onload === 'true') {
        setTimeout(() => {

 src/tabviews/custom/components/chart/antv-pie/index.jsx

@@ -966,11 +966,7 @@
            }
          }

          if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
            MKEmitter.emit('modifyTabs', newtab, 'replace')
          } else {
            MKEmitter.emit('modifyTabs', newtab, 'plus', true)
          }
          MKEmitter.emit('modifyTabs', newtab, true)
        } catch (e) {
          console.warn('菜单打开失败！')
        }

 src/tabviews/custom/components/form/simple-form/index.jsx

@@ -204,11 +204,7 @@
        param: {$BID: id || ''}
      }

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    }
  }


 src/tabviews/custom/components/form/step-form/index.jsx

@@ -253,11 +253,7 @@
        param: {$BID: id || ''}
      }

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    }
  }


 src/tabviews/custom/components/form/tab-form/index.jsx

@@ -214,11 +214,7 @@
        param: {$BID: id || ''}
      }

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    }
  }


 src/tabviews/custom/components/group/normal-group/index.jsx

@@ -33,6 +33,7 @@
const Balcony = asyncComponent(() => import('@/tabviews/custom/components/card/balcony'))
const TimeLine = asyncComponent(() => import('@/tabviews/custom/components/timeline/normal-timeline'))
const CustomChart = asyncComponent(() => import('@/tabviews/custom/components/chart/custom-chart'))
const AntvG6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-G6'))

class TabTransfer extends Component {
  static propTpyes = {
@@ -265,6 +266,12 @@
            <CustomChart config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else if (item.type === 'antvG6') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>
            <AntvG6 config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else {
        return null
      }

 src/tabviews/custom/components/share/normalTable/index.jsx

@@ -691,11 +691,7 @@

      tabmenu.param = __param

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', tabmenu, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', tabmenu, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', tabmenu, true)
    } else if (item.linkurl) {
      let src = item.linkurl


 src/tabviews/custom/components/share/tabtransfer/index.jsx

@@ -37,6 +37,7 @@
const TimeLine = asyncComponent(() => import('@/tabviews/custom/components/timeline/normal-timeline'))
const CustomChart = asyncComponent(() => import('@/tabviews/custom/components/chart/custom-chart'))
const MkBaseTable = asyncComponent(() => import('@/tabviews/custom/components/table/base-table'))
const AntvG6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-G6'))

class TabTransfer extends Component {
  static propTpyes = {
@@ -323,6 +324,12 @@
            <CustomChart config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else if (item.type === 'antvG6') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>
            <AntvG6 config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else {
        return null
      }

 src/tabviews/custom/index.jsx

@@ -38,6 +38,7 @@
const SettingComponent = asyncComponent(() => import('@/tabviews/zshare/settingcomponent'))
const CustomChart = asyncComponent(() => import('./components/chart/custom-chart'))
const TimeLine = asyncComponent(() => import('./components/timeline/normal-timeline'))
const AntvG6 = asyncComponent(() => import('./components/chart/antv-G6'))
const Voucher = asyncComponent(() => import('./components/module/voucher'))
const Iframe = asyncComponent(() => import('./components/iframe'))
const DebugTable = asyncComponent(() => import('@/tabviews/debugtable'))
@@ -1260,6 +1261,12 @@
            <CustomChart config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else if (item.type === 'antvG6') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>
            <AntvG6 config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else if (item.type === 'module' && item.subtype === 'voucher') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>

 src/tabviews/custom/popview/index.jsx

@@ -39,6 +39,7 @@
const TimeLine = asyncComponent(() => import('../components/timeline/normal-timeline'))
const Voucher = asyncComponent(() => import('../components/module/voucher'))
const Iframe = asyncComponent(() => import('../components/iframe'))
const AntvG6 = asyncComponent(() => import('../components/chart/antv-G6'))

class CustomPage extends Component {
  static propTpyes = {
@@ -994,6 +995,12 @@
            <Iframe config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else if (item.type === 'antvG6') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>
            <AntvG6 config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else {
        return null
      }

 src/tabviews/zshare/actionList/normalbutton/index.jsx

@@ -1929,11 +1929,7 @@

      newtab = {...newtab, param: { $BID: id }}

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', newtab, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', newtab, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', newtab, true)
    }
  }


 src/tabviews/zshare/actionList/tabbutton/index.jsx

@@ -158,7 +158,7 @@
      let menuId = btn.linkmenu.slice(-1)[0]
      let menu = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]

      if (!menu && btn.MenuName && btn.tabType) {
      if (!menu && btn.MenuName && btn.MenuID) {
        menu = {
          MenuID: btn.MenuID,
          MenuName: btn.MenuName,
@@ -184,11 +184,7 @@
      }
    }

    if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
      MKEmitter.emit('modifyTabs', newtab, 'replace')
    } else {
      MKEmitter.emit('modifyTabs', newtab, 'plus', true)
    }
    MKEmitter.emit('modifyTabs', newtab, true)

    MKEmitter.emit('openNewTab')
    if (window.GLOB.systemType === 'production') {

 src/tabviews/zshare/normalTable/index.jsx

@@ -360,11 +360,7 @@
      let tabmenu = item.linkThdMenu
      tabmenu.param = __param

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', tabmenu, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', tabmenu, 'plus', true)
      }
      MKEmitter.emit('modifyTabs', tabmenu, true)
    } else if (item.linkurl) {
      let src = item.linkurl


 src/views/billprint/index.jsx

@@ -26,6 +26,7 @@
const SandBox = asyncComponent(() => import('@/tabviews/custom/components/code/sand-box'))
const TimeLine = asyncComponent(() => import('@/tabviews/custom/components/timeline/normal-timeline'))
const Balcony = asyncComponent(() => import('@/tabviews/custom/components/card/balcony'))
const AntvG6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-G6'))
const DebugTable = asyncComponent(() => import('@/tabviews/debugtable'))

class BillPrint extends Component {
@@ -843,6 +844,12 @@
            <TimeLine config={item} initdata={item.data}/>
          </Col>
        )
      } else if (item.type === 'antvG6') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>
            <AntvG6 config={item} initdata={item.data}/>
          </Col>
        )
      } else {
        return null
      }

 src/views/design/index.jsx

@@ -3,14 +3,12 @@
import enUS from 'antd/es/locale/en_US'
import zhCN from 'antd/es/locale/zh_CN'

import asyncComponent from '@/utils/asyncComponent'
import Header from './header'
import { setGLOBFuncs } from '@/utils/utils.js'
import Sidemenu from './sidemenu'

import './index.scss'

const Tabview = asyncComponent(() => import('@/components/tabview'))
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

class Design extends Component {
@@ -23,7 +21,6 @@
      <div className="mk-main-view mk-design-view">
        <ConfigProvider locale={_locale}>
          <Sidemenu key="sidemenu"/>
          <Tabview key="tabview"/>
          <Header key="header"/>
        </ConfigProvider>
      </div>

 src/views/login/index.jsx

@@ -546,6 +546,10 @@
              }
            }

            if (!['shutter', 'linkage_navigation', 'linkage', 'menu_board', 'menu_board_navigation'].includes(res.menu_type)) {
              res.menu_type = 'shutter'
            }

            let _url = _href + 'system'
            let systemMsg = {
              favicon: res.titlelogo || '',

 src/views/main/index.jsx

@@ -17,9 +17,7 @@
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

class Main extends Component {
  state = {
    navBar: window.GLOB.navBar
  }
  state = {}

  componentDidMount () {
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)
@@ -51,16 +49,16 @@
  }

  render () {
    const { navBar } = this.state
    const isSideMenu = !['linkage_navigation', 'linkage', 'menu_board'].includes(navBar)
    const navBar = window.GLOB.navBar

    return (
      <div className="mk-main-view">
        <ConfigProvider locale={_locale}>
          <Header key="header"/>
          {isSideMenu && navBar !== 'menu_board_navigation' ? <Sidemenu key="sidemenu"/> : null}
          {isSideMenu ? <Tabview key="tabview"/> : null}
          {!isSideMenu ? <Breadview key="breadview"/> : null}
          {navBar === 'shutter' ? <Sidemenu key="sidemenu"/> : null}
          {navBar === 'shutter' || navBar === 'menu_board_navigation' ?
            <Tabview key="tabview"/> :
            <Breadview key="breadview"/>}
          {window.GLOB.systemType === 'production' ? <QueryLog /> : null}
        </ConfigProvider>
        <ImgScale />

 src/views/sso/index.jsx

@@ -70,6 +70,10 @@
        // res.indexlogo = res.indexlogo ? res.indexlogo.replace(/:8080/ig, '').replace(/http:/ig, 'https:') : ''
        // res.loginlogo = res.loginlogo ? res.loginlogo.replace(/:8080/ig, '').replace(/http:/ig, 'https:') : ''

        if (!['shutter', 'linkage_navigation', 'linkage', 'menu_board', 'menu_board_navigation'].includes(res.menu_type)) {
          res.menu_type = 'shutter'
        }

        const _href = window.location.href.split('#')[0]
        let _url = _href + 'system'
        let systemMsg = {

 src/views/systemfunc/sidemenu/index.jsx

@@ -19,7 +19,7 @@
  changemenu(e, menu) {
    e.preventDefault()

    MKEmitter.emit('modifyTabs', menu, 'plus')
    MKEmitter.emit('modifyTabs', menu)
  }

  componentDidMount () {