2023-06-06

king

2023-06-06 0667b630fbaf29ee12d5d332fb6da5c32231cd0f

2023-06-06

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

@@ -1404,7 +1404,7 @@
    let _style = resetStyle(card.style)

    return (
      <div className="menu-scatter-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
      <div className="menu-g6-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">
            <ChartCompileForm config={card} plotchange={this.updateComponent}/>

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

@@ -1,4 +1,4 @@
.menu-scatter-chart-edit-box {
.menu-g6-chart-edit-box {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
@@ -43,7 +43,7 @@
    background: rgba(255, 255, 255, 0.55);
  }
}
.menu-scatter-chart-edit-box:hover {
.menu-g6-chart-edit-box:hover {
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}

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

@@ -1,8 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, Tooltip } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined } from '@ant-design/icons'
import { Popover, Tooltip, message } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DoubleLeftOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
@@ -248,8 +248,14 @@

  state = {
    card: null,
    eventListener: null
    eventListener: null,
    toolunfold: true,
    nodeunfold: true,
    node: null
  }

  selectNode = null
  mkGraph = null

  UNSAFE_componentWillMount () {
    const { card } = this.props
@@ -348,14 +354,14 @@
      autoResize: true,
      panning: true,
      background: {
        color: '#ffffff',
        color: '#ffffff'
      },
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl',
        minScale: 0.5,
        maxScale: 5,
        maxScale: 2
      },
      connecting: {
        router: 'manhattan',
@@ -380,16 +386,16 @@
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8,
                },
              },
                  height: 8
                }
              }
            },
            zIndex: 0,
            zIndex: 0
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        },
        }
      },
      highlighting: {
        magnetAdsorbed: {
@@ -397,21 +403,19 @@
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF',
            },
          },
        },
      },
              stroke: '#5F95FF'
            }
          }
        }
      }
    })

    // #region 使用插件
    graph
      .use(
        new Transform({
          resizing: true,
          rotating: true
        })
      )
      .use(new Transform({
        resizing: true,
        rotating: true
      }))
      .use(new Selection())
      .use(new Snapline())
      .use(new Keyboard())
@@ -502,18 +506,18 @@
    })

    // zoom
    graph.bindKey(['ctrl+1', 'meta+1'], () => {
      const zoom = graph.zoom()
      if (zoom < 1.5) {
        graph.zoom(0.1)
      }
    })
    graph.bindKey(['ctrl+2', 'meta+2'], () => {
      const zoom = graph.zoom()
      if (zoom > 0.5) {
        graph.zoom(-0.1)
      }
    })
    // graph.bindKey(['ctrl+1', 'meta+1'], () => {
    //   const zoom = graph.zoom()
    //   if (zoom < 1.5) {
    //     graph.zoom(0.1)
    //   }
    // })
    // graph.bindKey(['ctrl+2', 'meta+2'], () => {
    //   const zoom = graph.zoom()
    //   if (zoom > 0.5) {
    //     graph.zoom(-0.1)
    //   }
    // })

    // 控制连接桩显示/隐藏
    const showPorts = (ports, show) => {
@@ -533,18 +537,29 @@
    })

    // graph.on('cell:click', ({ e, x, y, cell, view }) => {

    //   cell.attr('body/stroke', "red")
    // })
    graph.on('node:click', ({ e, x, y, node, view }) => {

      this.selectNode = node
      
      this.setState({node: this.selectNode.store.data})
    })
    graph.on('edge:click', ({ e, x, y, edge, view }) => {

      this.selectNode = edge
      
      this.setState({node: this.selectNode.store.data})
      
      let trans = document.querySelectorAll('.x6-widget-transform')
      if (trans && trans[0]) {
        trans[0].style.display = 'none'
      }
    })
    graph.on('blank:click', ({ e, x, y }) => {

      this.selectNode = null
      
      this.setState({node: null})
    })

    
    const r1 = graph.createNode({
      shape: 'mk-rect',
      label: '开始',
@@ -591,9 +606,9 @@
      shape: 'mk-circle',
      label: '连接'
    })

    
    stencil.load([r1, r2, r3, r4, r5, r6], 'group1')

    
    const p1 = graph.createNode({
      shape: 'mk-ellipse',
      label: 'ellipse'
@@ -602,8 +617,51 @@
      shape: 'mk-star',
      label: ''
    })

    
    stencil.load([p1, p2], 'group2')
    
    this.mkGraph = graph
  }
  
  setTop = () => {
    if (!this.selectNode) {
      message.warning('请选择节点！')
      return
    }
    this.selectNode.toFront()
  }

  setBottom = () => {
    if (!this.selectNode) {
      message.warning('请选择节点！')
      return
    }
    // let cells = this.mkGraph.getCells()
    this.selectNode.toBack()
  }

  setZoomIn = () => {
    const zoom = this.mkGraph.zoom()

    if (zoom < 2) {
      this.mkGraph.zoom(0.1)
    }
  }

  setZoomOut = () => {
    const zoom = this.mkGraph.zoom()

    if (zoom > 0.5) {
      this.mkGraph.zoom(-0.1)
    }
  }

  setZoomInt = () => {
    this.mkGraph.zoomTo(1)
  }

  save = () => {
    // let nodes = this.mkGraph.toJSON()
  }

  updateComponent = (card) => {
@@ -649,11 +707,11 @@
  }

  render() {
    const { card } = this.state
    const { card, toolunfold, nodeunfold, node } = this.state
    let _style = resetStyle(card.style)

    return (
      <div className="menu-scatter-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
      <div className="menu-x6-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">
            <ChartCompileForm config={card} plotchange={this.updateComponent}/>
@@ -669,30 +727,41 @@
        <div className="mk-toolbar">
          <div className="left-tool">
            <Tooltip title="置前">
              <VerticalAlignTopOutlined />
              <VerticalAlignTopOutlined onClick={this.setTop}/>
            </Tooltip>
            <Tooltip title="置后">
              <VerticalAlignBottomOutlined />
              <VerticalAlignBottomOutlined onClick={this.setBottom}/>
            </Tooltip>
            <Tooltip title="保存">
              <SaveOutlined />
              <SaveOutlined onClick={this.save}/>
            </Tooltip>
          </div>
          <div className="right-tool">
            <Tooltip title="放大">
              <ZoomInOutlined />
              <ZoomInOutlined onClick={this.setZoomIn}/>
            </Tooltip>
            <Tooltip title="缩小">
              <ZoomOutOutlined />
              <ZoomOutOutlined onClick={this.setZoomOut}/>
            </Tooltip>
            <Tooltip title="1:1">
              <OneToOneOutlined />
              <OneToOneOutlined onClick={this.setZoomInt}/>
            </Tooltip>
          </div>
        </div>
        <div className="canvas" style={{width: '100%', minHeight: card.plot.height, height: card.plot.height}} id={card.uuid + 'canvas'}>
          <div id={card.uuid + 'stencil'} className="mk-stencil"></div>
          <div id={card.uuid + 'stencil'} className={'mk-stencil ' + (toolunfold ? '' : 'merge')}>
            <div className="tool-control" onClick={() => this.setState({toolunfold: !toolunfold})}>
              <DoubleLeftOutlined />
            </div>
          </div>
          <div id={card.uuid + 'container'} className="mk-container"></div>
          <div className={'mk-node-edit ' + (nodeunfold ? '' : 'merge')}>
            <div className="tool-control" onClick={() => this.setState({nodeunfold: !nodeunfold})}>
              <DoubleLeftOutlined />
            </div>
            <div className="header">设置</div>
            {!node ? <div className="empty">未选中</div> : <div></div>}
          </div>
        </div>
        <div className="component-name">
          <div className="center">

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

@@ -1,4 +1,4 @@
.menu-scatter-chart-edit-box {
.menu-x6-chart-edit-box {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
@@ -33,6 +33,9 @@
  .x6-graph-scroller::-webkit-scrollbar {
    display: none;
  }
  .x6-cell.x6-edge.x6-edge-selected path:last-child {
    stroke: #1890ff;
  }

  .canvas {
    margin: 0px;
@@ -46,6 +49,7 @@
      position: relative;
      z-index: 2;
      border-right: 1px solid #dfe3e8;
      transition: all 0.2s;

      .x6-widget-stencil-title {
        display: none;
@@ -67,7 +71,93 @@
        border: 1px solid rgba(0, 0, 0, 0.07);
        background: rgba(0, 0, 0, 0);
      }
      .tool-control {
        position: absolute;
        right: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }
    }
    .mk-stencil.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        right: -25px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }

    .mk-node-edit {
      width: 180px;
      min-width: 180px;
      height: 100%;
      position: relative;
      z-index: 2;
      border-left: 1px solid #dfe3e8;
      transition: all 0.2s;

      .header {
        width: 100%;
        height: 32px;
        text-align: center;
        line-height: 32px;
        background-color: #f5f5f5!important;
        overflow-x: hidden;
        white-space: nowrap;
      }
      .empty {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        overflow-x: hidden;
        white-space: nowrap;
      }

      .tool-control {
        position: absolute;
        left: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }
    .mk-node-edit.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        left: -25px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        .anticon-double-left {
          transform: rotate(0deg);
        }
      }
    }

    .mk-container {
      width: calc(100% - 180px);
      height: 100%;
@@ -79,7 +169,7 @@
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
      background-color: #f5f5f5!important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
@@ -137,7 +227,7 @@
    background: rgba(255, 255, 255, 0.55);
  }
}
.menu-scatter-chart-edit-box:hover {
.menu-x6-chart-edit-box:hover {
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}

 src/menu/menushell/card.jsx

@@ -133,13 +133,13 @@
    }
  }

  // if (card.type === 'antvX6') { // 测试
  //   return (
  //     <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} style={style}>
  //       <AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>
  //     </div>
  //   )
  // }
  if (card.type === 'antvX6') { // 测试
    return (
      <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} style={style}>
        <AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>
      </div>
    )
  }

  return (
    <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} ref={node => drag(drop(node))} style={style}>

 src/views/menudesign/index.jsx

@@ -73,6 +73,13 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }

    sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型

    window.GLOB.UserComponentMap = new Map() // 缓存用户自定义组件
@@ -106,6 +113,8 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    
    MKEmitter.addListener('changePopview', this.initPopview)
    MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave)
    MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent)

 src/views/mobdesign/index.jsx

@@ -81,6 +81,14 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('editMenuType')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }
    
    if (memberLevel < 30) return
    try {
      let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))
@@ -139,6 +147,7 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    if (memberLevel < 30) {
      document.getElementById('mk-mob-design-view').innerHTML = '<div style="text-align: center; font-size: 30px; margin-top: 40vh; height: 100vh; background: #fff;">本应用没有PC端页面的编辑权限，请联系管理员！</div>'
      return

 src/views/pcdesign/index.jsx

@@ -76,6 +76,13 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }
    
    if (memberLevel < 30) return

    sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型
@@ -123,6 +130,7 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    if (memberLevel < 30) {
      document.getElementById('mk-pc-design-view').innerHTML = '<div style="text-align: center; font-size: 30px; margin-top: 40vh; height: 100vh; background: #fff;">本应用没有PC端页面的编辑权限，请联系管理员！</div>'
      return

 src/views/tabledesign/index.jsx

@@ -63,6 +63,13 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }
    
    sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型

    window.GLOB.UserComponentMap = new Map() // 缓存用户自定义组件
@@ -95,6 +102,8 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    
    MKEmitter.addListener('changePopview', this.initPopview)
    MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave)
    setTimeout(() => {