2023-06-30

king

2023-06-30 3b121a4e25bc57693d231a805133fe14defd18f5

2023-06-30

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

@@ -102,11 +102,11 @@
      type: 'radio',
      field: 'click',
      label: '点击事件',
      initval: card.click || '',
      initval: card.click || 'switch',
      tooltip: '点击节点时触发的事件。',
      required: false,
      options: [
        {value: '', label: '数据切换'},
        {value: 'switch', label: '数据切换'},
        {value: 'menu', label: '菜单'},
        {value: 'menus', label: '菜单组'}
      ],

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

@@ -961,6 +961,7 @@
        width: card.width || 24,
        height: 400,
        subtype: card.subtype,
        click: 'switch',
        name: card.name
      }


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

@@ -110,6 +110,7 @@
      required: false,
      options: [
        {value: '', label: '无'},
        {value: 'switch', label: '数据切换'},
        {value: 'menu', label: '菜单'},
        {value: 'menus', label: '菜单组'}
      ],
@@ -118,7 +119,6 @@
        {field: 'menus', values: ['menus']},
        {field: 'menuType', values: ['menus']},
        {field: 'open', values: ['menu', 'menus']},
        {field: 'joint', values: ['menu', 'menus']},
      ]
    },
    {
@@ -149,17 +149,6 @@
        {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',

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

@@ -144,7 +144,7 @@
        <Modal
          wrapClassName="mk-pop-modal"
          visible={visible}
          width={850}
          width={900}
          maskClosable={false}
          onOk={this.onSubmit}
          onCancel={() => { this.setState({ visible: false }) }}

 src/menu/components/chart/antv-X6/index.jsx

@@ -3,7 +3,7 @@
import { is, fromJS } from 'immutable'
import { Popover } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Graph } from '@antv/x6'

import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
@@ -314,6 +314,7 @@
        max: 2
      },
      autoResize: true,
      interacting: false,
      background: {
        color: card.plot.backgroundColor || 'transparent'
      },
@@ -335,36 +336,6 @@
        allowBlank: false,
        snap: {
          radius: 20
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8
                }
              }
            },
            zIndex: 0
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        }
      },
      highlighting: {
        magnetAdsorbed: {
          name: 'stroke',
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF'
            }
          }
        }
      }
    })
@@ -391,6 +362,7 @@
        max: 2
      },
      autoResize: true,
      interacting: false,
      background: { color: '#ffffff' },
      mousewheel: {
        enabled: true,
@@ -410,55 +382,6 @@
        allowBlank: false,
        snap: {
          radius: 20
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8
                }
              }
            },
            zIndex: 2
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        }
      },
      highlighting: {
        magnetAdsorbed: {
          name: 'stroke',
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF'
            }
          }
        }
      },
      translating: {
        restrict(cellView) {
          const cell = cellView.cell
          const parentId = cell.prop('parent')

          if (parentId) {
            const parentNode = graph.getCellById(parentId)
            if (parentNode) {
              return parentNode.getBBox().moveAndExpand({
                x: 0,
                y: 36,
                width: 0,
                height: -36,
              })
            }
          }
          return cell.getBBox()
        }
      }
    })

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

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

    if (plot.click === 'menus') {
      if (!data) return

      let menu = null
      
      if (plot.menus && plot.menus.length > 0) {
@@ -1604,6 +1604,8 @@

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


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

@@ -333,6 +333,47 @@
  true
)

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',
  deep_blue: '#1d3661',
  blue1: '#e6f7ff',
  red1: '#fff1f0',
  orange_red1: '#fff2e8',
  orange1: '#fff7e6',
  orange_yellow1: '#fffbe6',
  yellow1: '#feffe6',
  yellow_green1: '#fcffe6',
  green1: '#f6ffed',
  cyan1: '#e6fffb',
  blue_purple1: '#f0f5ff',
  purple1: '#f9f0ff',
  magenta1: '#fff0f6',
  grass_green1: '#f2efda',
  deep_red1: '#fff0f0',
  deep_blue1: '#eff1f4'
}

let sysColor = '#1890ff'
let lightColor = '#e6f7ff'
if (window.GLOB.style) {
  let type = window.GLOB.style.replace(/bg_black_style_|bg_white_style_/, '')
  sysColor = styles[type] || '#1890ff'
  lightColor = styles[type + '1'] || '#e6f7ff'
}

class antvX6Chart extends Component {
  static propTpyes = {
    config: PropTypes.object
@@ -563,6 +604,7 @@
        max: 2
      },
      autoResize: true,
      interacting: false,
      panning: true,
      background: {
        color: config.plot.backgroundColor || 'transparent'
@@ -585,36 +627,6 @@
        allowBlank: false,
        snap: {
          radius: 20
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8
                }
              }
            },
            zIndex: 0
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        }
      },
      highlighting: {
        magnetAdsorbed: {
          name: 'stroke',
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF'
            }
          }
        }
      }
    })
@@ -631,6 +643,16 @@
      graph.resetCells(cells)
      graph.positionContent('center')
    }

    if (config.plot.click) {
      graph.on('cell:click', ({ node }) => {
        this.checkNode(graph, node)
      })
  
      graph.on('blank:click', () => {
        this.checkNode(graph)
      })
    }
  }

  laneSrender = () => {
@@ -642,6 +664,7 @@
        min: 0.5,
        max: 2
      },
      interacting: false,
      autoResize: true,
      panning: true,
      background: { color: '#ffffff' },
@@ -663,55 +686,6 @@
        allowBlank: false,
        snap: {
          radius: 20
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8
                }
              }
            },
            zIndex: 2
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        }
      },
      highlighting: {
        magnetAdsorbed: {
          name: 'stroke',
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF'
            }
          }
        }
      },
      translating: {
        restrict(cellView) {
          const cell = cellView.cell
          const parentId = cell.prop('parent')

          if (parentId) {
            const parentNode = graph.getCellById(parentId)
            if (parentNode) {
              return parentNode.getBBox().moveAndExpand({
                x: 0,
                y: 36,
                width: 0,
                height: -36,
              })
            }
          }
          return cell.getBBox()
        }
      }
    })
@@ -727,6 +701,16 @@
      })
      graph.resetCells(cells)
      graph.positionContent('top')
    }

    if (config.plot.click) {
      graph.on('cell:click', ({ node }) => {
        this.checkNode(graph, node)
      })
  
      graph.on('blank:click', () => {
        this.checkNode(graph)
      })
    }
  }

@@ -1594,6 +1578,83 @@
    }
  }

  checkNode = (graph, node) => {
    const { plot, config } = this.state

    let nodes = graph.getNodes()

    nodes.forEach(item => {
      if (item.prop('shape') === 'lane') return

      if (item.prop('oristyle')) {
        let style = item.prop('oristyle')

        item.prop('attrs/body/fill', style.fill)
        item.prop('attrs/body/stroke', style.stroke)
        item.prop('attrs/text/fill', style.text)
      }
    })

    if (!node || ['lane', 'mk-text', 'edge'].includes(node.prop('shape'))) {
      MKEmitter.emit('resetSelectLine', config.uuid, '', '')
      return
    }

    if (!node.prop('oristyle')) {
      node.prop('oristyle', {
        fill: node.prop('attrs/body/fill'),
        stroke: node.prop('attrs/body/stroke'),
        text: node.prop('attrs/text/fill')
      })
    }

    node.prop('attrs/body/fill', lightColor)
    node.prop('attrs/body/stroke', sysColor)
    node.prop('attrs/text/fill', sysColor)

    let sign = node.prop('mksign') || ''

    if (plot.click === 'menus') {
      let menu = null
      
      if (plot.menus && plot.menus.length > 0) {
        plot.menus.forEach(m => {
          if (sign !== 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: {$BID: sign}
      }

      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
      }

      MKEmitter.emit('modifyTabs', {...newtab, param: {$BID: sign}}, true)
    } else {
      MKEmitter.emit('resetSelectLine', config.uuid, sign, {})
    }
  }

  resetlane = (id, x, offset) => {
    let nodes = this.mkGraph.getNodes()

@@ -1627,7 +1688,7 @@
            </div> : null
          }
          <NormalHeader config={config} />
          <div className="canvas" style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
          <div className={'canvas only-show' + (config.plot.click ? ' switchable' : '')} style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
            <div id={config.uuid + 'container'} className="mk-container"></div>
          </div>
        </div>

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

@@ -165,6 +165,22 @@
      opacity: 0;
    }
  }
  .only-show {
    .x6-port {
      display: none;
    }
    .x6-cell.x6-edge {
      cursor: default;
      path {
        cursor: default;
      }
    }
  }
  .only-show.switchable {
    .x6-cell.x6-node:not([data-shape="lane"]):not([data-shape="mk-text"]) {
      cursor: pointer;
    }
  }

  .chart-header {
    position: relative;