From f07c42a322f41e14ef5b1bf8f2fd66fc5d338cdd Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 28 六月 2023 18:17:09 +0800
Subject: [PATCH] 2023-06-28
---
src/tabviews/custom/components/chart/antv-X6/index.jsx | 397 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 334 insertions(+), 63 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-X6/index.jsx b/src/tabviews/custom/components/chart/antv-X6/index.jsx
index 467d0da..784e4a6 100644
--- a/src/tabviews/custom/components/chart/antv-X6/index.jsx
+++ b/src/tabviews/custom/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 { Spin, Tooltip, Empty, message, Modal, notification } from 'antd'
-import { VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DownloadOutlined } from '@ant-design/icons'
+import { Spin, Tooltip, message, Modal, notification } from 'antd'
+import { UndoOutlined, RedoOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
@@ -14,10 +14,11 @@
import { Export } from '@antv/x6-plugin-export'
import Api from '@/api'
-import UtilsDM from '@/utils/utils-datamanage.js'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import NormalHeader from '@/tabviews/custom/components/share/normalheader'
+import lanes from '@/menu/components/chart/antv-X6/lane.json'
+import xflows from '@/menu/components/chart/antv-X6/xflow.json'
import './index.scss'
const NodeUpdate = asyncComponent(() => import('./nodeupdate'))
@@ -334,20 +335,19 @@
class antvX6Chart extends Component {
static propTpyes = {
- config: PropTypes.object,
- mainSearch: PropTypes.any
+ config: PropTypes.object
}
state = {
config: null,
editing: false,
node: null,
- arr_field: 'id,cells',
loading: false
}
selectNode = null
mkGraph = null
+ cells = []
UNSAFE_componentWillMount () {
const { config } = this.props
@@ -356,8 +356,14 @@
let BID = ''
let BData = ''
- if (config.setting.supModule) {
- BData = window.GLOB.CacheData.get(config.setting.supModule)
+ _config.setting.supModule = ''
+
+ if (_config.plot.supModule && _config.plot.supModule.length > 0) {
+ _config.setting.supModule = _config.plot.supModule.pop()
+ }
+
+ if (_config.setting.supModule) {
+ BData = window.GLOB.CacheData.get(_config.setting.supModule)
} else {
BData = window.GLOB.CacheData.get(config.$pageId)
}
@@ -371,12 +377,13 @@
BData: BData || '',
plot: _config.plot
}, () => {
- if (config.setting.onload === 'true') {
- setTimeout(() => {
- this.loadData()
- }, _config.setting.delay || 0)
- }
+ this.loadData()
})
+ }
+
+ componentDidMount () {
+ MKEmitter.addListener('reloadData', this.reloadData)
+ MKEmitter.addListener('resetSelectLine', this.resetParentParam)
}
shouldComponentUpdate (nextProps, nextState) {
@@ -390,24 +397,38 @@
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) => {
+ const { config } = this.state
+
+ if (!config.setting.supModule || config.setting.supModule !== MenuID) return
+ if (id !== this.state.BID || id !== '') {
+ this.setState({ BID: id }, () => {
+ this.loadData()
+ })
+ }
}
async loadData () {
- const { mainSearch } = this.props
- const { config, arr_field, BID } = this.state
+ const { config, BID } = this.state
if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇�
if (!is(fromJS(this.data), fromJS([]))) {
- this.data = []
+ this.cells = []
this.handleData()
}
- return
- }
-
- let searches = config.setting.useMSearch && mainSearch ? mainSearch : []
-
- let requireFields = searches.filter(item => item.required && item.value === '')
- if (requireFields.length > 0) {
return
}
@@ -415,23 +436,35 @@
loading: true
})
- let _orderBy = config.setting.order || ''
- let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID)
+ if (config) {
+ if (config.plot.subtype === 'xflow') {
+ this.cells = xflows
+ } else {
+ this.cells = lanes
+ }
+ this.handleData()
+
+ setTimeout(() => {
+ this.setState({
+ loading: false
+ })
+ }, 2000)
+ return
+ }
+
+ let param = {
+ func: '',
+ BID: BID
+ }
let result = await Api.genericInterface(param)
if (result.status) {
- if (config.$cache && config.setting.onload !== 'false') {
- Api.writeCacheConfig(config.uuid, result.data || '')
- }
-
this.setState({
loading: false
})
- if (!is(fromJS(this.data), fromJS(result.data || []))) {
- this.data = result.data || []
- this.handleData()
- }
+ this.cells = result.data || []
+ this.handleData()
if (result.message) {
if (result.ErrCode === 'Y') {
@@ -484,10 +517,196 @@
viewrender = () => {
const { plot } = this.state
- if (plot.subtype === 'xflow') {
- this.xflowrender()
- } else if (plot.subtype === 'lane') {
- this.lanerender()
+ if (plot.function === 'show') {
+ if (plot.subtype === 'xflow') {
+ this.xflowSrender()
+ } else if (plot.subtype === 'lane') {
+ this.laneSrender()
+ }
+ } else {
+ if (plot.subtype === 'xflow') {
+ this.xflowrender()
+ } else if (plot.subtype === 'lane') {
+ this.lanerender()
+ }
+ }
+ }
+
+ xflowSrender = () => {
+ const { config } = this.state
+
+ const graph = new Graph({
+ container: document.getElementById(config.uuid + 'container'),
+ grid: config.plot.grid,
+ scaling: {
+ min: 0.5,
+ max: 2
+ },
+ autoResize: true,
+ panning: true,
+ background: {
+ color: config.plot.backgroundColor || 'transparent'
+ },
+ mousewheel: {
+ enabled: true,
+ zoomAtMousePosition: true,
+ modifiers: 'ctrl'
+ },
+ connecting: {
+ router: 'manhattan',
+ connector: {
+ name: 'rounded',
+ args: {
+ radius: 8
+ }
+ },
+ anchor: 'center',
+ connectionPoint: 'anchor',
+ 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'
+ }
+ }
+ }
+ }
+ })
+
+ if (this.cells.length > 0) {
+ let cells = []
+ this.cells.forEach((item) => {
+ if (item.shape === 'edge') {
+ cells.push(graph.createEdge(item))
+ } else {
+ cells.push(graph.createNode(item))
+ }
+ })
+ graph.resetCells(cells)
+ graph.positionContent('center')
+ }
+ }
+
+ laneSrender = () => {
+ const { config } = this.state
+
+ const graph = new Graph({
+ container: document.getElementById(config.uuid + 'container'),
+ scaling: {
+ min: 0.5,
+ max: 2
+ },
+ autoResize: true,
+ panning: true,
+ background: { color: '#ffffff' },
+ mousewheel: {
+ enabled: true,
+ zoomAtMousePosition: true,
+ modifiers: 'ctrl'
+ },
+ connecting: {
+ router: 'manhattan',
+ connector: {
+ name: 'rounded',
+ args: {
+ radius: 8
+ }
+ },
+ anchor: 'center',
+ connectionPoint: 'anchor',
+ 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()
+ }
+ }
+ })
+
+ if (this.cells.length > 0) {
+ let cells = []
+ this.cells.forEach((item) => {
+ if (item.shape === 'edge') {
+ cells.push(graph.createEdge(item))
+ } else {
+ cells.push(graph.createNode(item))
+ }
+ })
+ graph.resetCells(cells)
+ graph.positionContent('top')
}
}
@@ -745,6 +964,19 @@
})
stencil.load([p1, p2, p3], 'group2')
+
+ if (this.cells.length > 0) {
+ let cells = []
+ this.cells.forEach((item) => {
+ if (item.shape === 'edge') {
+ cells.push(graph.createEdge(item))
+ } else {
+ cells.push(graph.createNode(item))
+ }
+ })
+ graph.resetCells(cells)
+ graph.positionContent('center')
+ }
this.mkGraph = graph
}
@@ -1047,17 +1279,18 @@
stencil.load([g1], 'group3')
- // let data = [{"id":"1","shape":"lane","width":260,"height":500,"position":{"x":0,"y":0},"label":"闃舵1", preId: '', nextId: '2'},{"id":"2","shape":"lane","width":200,"height":500,"position":{"x":260,"y":0},"label":"<Function>", preId: '1', nextId: '3'},{"id":"3","shape":"lane","width":200,"height":500,"position":{"x":460,"y":0},"label":"<Function>", preId: '2', nextId: '4'},{"id":"4","shape":"lane","width":200,"height":500,"position":{"x":660,"y":0},"label":"<Function>", preId: '3', nextId: ''}]
- // let cells = []
- // data.forEach((item) => {
- // if (item.shape === 'edge') {
- // cells.push(graph.createEdge(item))
- // } else {
- // cells.push(graph.createNode(item))
- // }
- // })
- // graph.resetCells(cells)
- // graph.zoomToFit({ padding: 10, maxScale: 1 })
+ if (this.cells.length > 0) {
+ let cells = []
+ this.cells.forEach((item) => {
+ if (item.shape === 'edge') {
+ cells.push(graph.createEdge(item))
+ } else {
+ cells.push(graph.createNode(item))
+ }
+ })
+ graph.resetCells(cells)
+ graph.positionContent('top')
+ }
this.mkGraph = graph
}
@@ -1081,6 +1314,18 @@
}
// zoom() 鍙幏鍙栨垨鑰呰缃缉鏀炬瘮渚�
+ setback = () => {
+ if (this.mkGraph.canUndo()) {
+ this.mkGraph.undo()
+ }
+ }
+
+ setprev = () => {
+ if (this.mkGraph.canRedo()) {
+ this.mkGraph.redo()
+ }
+ }
+
setZoomIn = () => {
this.mkGraph.zoom(0.1)
}
@@ -1095,11 +1340,12 @@
save = () => {
// let nodes = this.mkGraph.toJSON()
- }
-
- savePicture = () => {
- const { config } = this.state
- this.mkGraph.exportPNG(config.name, {padding: 20})
+ // this.mkGraph.toPNG((dataUri) => {
+ // Api.fileuploadbase64({
+ // Base64Img: dataUri
+ // }).then(res => {
+ // })
+ // }, {padding: 20})
}
addLane = (cell, graph) => {
@@ -1297,7 +1543,30 @@
}
render() {
- const { loading, config, empty, node } = this.state
+ const { loading, config, node } = this.state
+
+ let style = {...config.style}
+
+ if (config.plot.function === 'show') {
+ if (config.plot.empty === 'hidden' && this.cells.length === 0) {
+ style.display = 'none'
+ }
+
+ return (
+ <div className="custom-x6-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} />
+ <div className="canvas" 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>
+ )
+ }
return (
<div className="custom-x6-plot-box" id={'anchor' + config.uuid} style={config.style}>
@@ -1308,7 +1577,6 @@
</div> : null
}
<NormalHeader config={config} />
- {empty ? <Empty description={false}/> : null}
<div className="mk-toolbar">
<div className="left-tool">
{config.plot.subtype === 'xflow' ? <Tooltip title="缃墠">
@@ -1317,14 +1585,6 @@
{config.plot.subtype === 'xflow' ? <Tooltip title="缃悗">
<VerticalAlignBottomOutlined onClick={this.setBottom}/>
</Tooltip> : null}
- <Tooltip title="淇濆瓨">
- <SaveOutlined onClick={this.save}/>
- </Tooltip>
- {config.plot.export === 'png' ? <Tooltip title="瀵煎嚭鍥剧墖">
- <DownloadOutlined onClick={this.savePicture}/>
- </Tooltip> : null}
- </div>
- <div className="right-tool">
<Tooltip title="鏀惧ぇ">
<ZoomInOutlined onClick={this.setZoomIn}/>
</Tooltip>
@@ -1334,6 +1594,17 @@
<Tooltip title="1:1">
<OneToOneOutlined onClick={this.setZoomInt}/>
</Tooltip>
+ <Tooltip title="鍚庨��">
+ <UndoOutlined onClick={this.setback}/>
+ </Tooltip>
+ <Tooltip title="鍓嶈繘">
+ <RedoOutlined onClick={this.setprev}/>
+ </Tooltip>
+ </div>
+ <div className="right-tool">
+ <Tooltip title="淇濆瓨">
+ <SaveOutlined onClick={this.save}/>
+ </Tooltip>
</div>
</div>
<div className="canvas" style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
--
Gitblit v1.8.0