2023-08-03

king

2023-08-03 4b013affeb7afe534bf70204c743c5764db45484

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

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Spin, Tooltip, message, Modal, notification } from 'antd'
import { Spin, Tooltip, message, Modal, notification, Switch } from 'antd'
import { UndoOutlined, RedoOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, QuestionCircleOutlined, ClearOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
@@ -385,6 +385,7 @@
    editing: false,
    node: null,
    loading: false,
    status: 0,
    rolelist: []
  }

@@ -518,6 +519,7 @@
      this.handleData()

      this.setState({
        status: item.status || 0,
        loading: false
      })

@@ -795,7 +797,8 @@
      groups: [
        {
          title: '通用节点',
          name: 'group1'
          name: 'group1',
          graphHeight: 240
        },
        {
          title: '自定义',
@@ -895,52 +898,105 @@
    
    const r1 = graph.createNode({
      shape: 'mk-rect',
      label: '开始',
      mknode: 'start',
      attrs: {
        body: {
          rx: 20,
          ry: 26
          ry: 26,
          fill: '#52c41a',
          stroke: '#52c41a'
        },
        text: {
          fill: '#ffffff',
          text: '开始'
        }
      }
    })
    const r2 = graph.createNode({
      shape: 'mk-rect',
      label: '过程'
      attrs: {
        body: {
          rx: 20,
          ry: 26,
          fill: '#e6f4ff',
          stroke: '#1890ff'
        },
        text: {
          text: '过程'
        }
      }
    })
    const r3 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6
          ry: 6,
          fill: '#fff7e6',
          stroke: '#fa8c16'
        },
        text: {
          text: '可选过程'
        }
      },
      label: '可选过程'
      }
    })
    const r4 = graph.createNode({
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20'
          refPoints: '0,10 10,0 20,10 10,20',
          fill: '#f9f0ff',
          stroke: '#722ed1'
        },
        text: {
          text: '决策'
        }
      },
      label: '决策'
      }
    })
    const r5 = graph.createNode({
      shape: 'mk-paral',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20'
          refPoints: '10,0 40,0 30,20 0,20',
          fill: '#e6fffb',
          stroke: '#13c2c2'
        },
        text: {
          text: '数据'
        }
      },
      label: '数据'
      }
    })
    const r6 = graph.createNode({
      shape: 'mk-circle',
      label: '连接'
      attrs: {
        body: {
          fill: '#e6f4ff',
          stroke: '#1890ff'
        },
        text: {
          text: '连接'
        }
      }
    })

    const r7 = graph.createNode({
      shape: 'mk-rect',
      mknode: 'end',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
          fill: '#fa8c16',
          stroke: '#fa8c16'
        },
        text: {
          fill: '#ffffff',
          text: '结束'
        }
      }
    })
    
    stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
    stencil.load([r1, r2, r3, r4, r5, r6, r7], 'group1')
    
    const p1 = graph.createNode({
      shape: 'mk-ellipse',
@@ -1351,7 +1407,7 @@
  }

  save = () => {
    const { BID } = this.state
    const { BID, plot, status } = this.state

    if (!BID) {
      Modal.error({
@@ -1360,16 +1416,28 @@
      return
    }

    let nodes = this.mkGraph.toJSON()
    let _status = status

    if (plot.subtype === 'xflow' && status === 10) {
      let start_num = nodes.cells.filter(cell => cell.mknode === 'start').length
      let end_num = nodes.cells.filter(cell => cell.mknode === 'end').length
      
      if (start_num !== 1 || end_num !== 1) {
        _status = 0
      }
    }

    this.setState({
      loading: true
    })

    let nodes = this.mkGraph.toJSON()
    this.mkGraph.toPNG((dataUri) => {
      let param = {
        func: 's_works_flow_param_upt_v6',
        long_param: window.btoa(window.encodeURIComponent(JSON.stringify(nodes))),
        flow_image: dataUri,
        status: status,
        ID: BID,
        BID: ''
      }
@@ -1381,17 +1449,20 @@
            message: '保存成功！',
            duration: 2
          })
          this.setState({
            loading: false,
            status: _status
          })
        } else {
          notification.error({
            top: 92,
            message: res.message,
            duration: 10
          })
          this.setState({
            loading: false
          })
        }
      
        this.setState({
          loading: false
        })
      })
    }, {padding: 20})
  }
@@ -1638,8 +1709,8 @@
        this.selectNode.attr('text/fontSize', value)
      } else if (key === 'fontFill') {
        this.selectNode.attr('text/fill', value)
      } else if (key === 'mksign') {
        this.selectNode.prop('mksign', value)
      } else if (key === 'mkdata') {
        this.selectNode.prop('mkdata', value)
      }
    }
  }
@@ -1721,6 +1792,48 @@
    }
  }

  changeStatus = () => {
    const { plot, status } = this.state

    let _status = status === 10 ? 0 : 10
    let nodes = this.mkGraph.toJSON()
    
    if (plot.subtype === 'xflow' && _status === 10) {
      let start_num = nodes.cells.filter(cell => cell.mknode === 'start').length
      let end_num = nodes.cells.filter(cell => cell.mknode === 'end').length
      
      if (start_num === 0) {
        notification.warning({
          top: 92,
          message: '请添加开始节点！',
          duration: 2
        })
      } else if (start_num > 1) {
        notification.warning({
          top: 92,
          message: '开始节点不可添加多个！',
          duration: 2
        })
      } else if (end_num === 0) {
        notification.warning({
          top: 92,
          message: '请添加结束节点！',
          duration: 2
        })
      } else if (end_num > 1) {
        notification.warning({
          top: 92,
          message: '结束节点不可添加多个！',
          duration: 2
        })
      } else {
        this.setState({status: _status})
      }
    } else {
      this.setState({status: _status})
    }
  }

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

@@ -1736,7 +1849,7 @@
  }

  render() {
    const { loading, config, node, rolelist } = this.state
    const { loading, config, node, rolelist, status } = this.state

    let style = {...config.style}

@@ -1803,8 +1916,11 @@
            </Tooltip>
          </div>
          <div className="right-tool">
            <Tooltip title="启用/停用">
              <Switch size="small" style={{marginRight: '10px'}} checked={status === 10} onChange={this.changeStatus} />
            </Tooltip>
            <Tooltip title="保存">
              <SaveOutlined onClick={this.save}/>
              <SaveOutlined style={{marginRight: '10px'}} onClick={this.save}/>
            </Tooltip>
          </div>
        </div>