| | |
| | | if (res.data !== null && (res.data.content != null)) { |
| | | this.dataForm = res.data |
| | | this.diagramJson = JSON.parse(this.dataForm.content) |
| | | if (this.diagramJson.cells.length !== 0) { |
| | | this.graph.fromJSON(this.diagramJson) |
| | | } else { |
| | | this.graph.fromJSON(RBDDefault) |
| | | } |
| | | this.isFirstLoad = false; |
| | | console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length') |
| | | |
| | |
| | | // this.graph.centerContent() |
| | | // this.graph.zoomToFit() |
| | | } else { |
| | | await this.clearDiagram() |
| | | this.graph.fromJSON(RBDDefault) |
| | | this.isFirstLoad = false |
| | | } |
| | | }, |
| | | async clearDiagram() { |
| | | this.dataForm.id = null |
| | | // this.graph.fromJSON(this.emptyJson) |
| | | this.graph.fromJSON('') |
| | | this.graph.fromJSON(RBDDefault) |
| | | this.graph.positionContent('left') |
| | | this.isFirstLoad = false; |
| | | // this.graph.centerContent() |
| | | // this.graph.zoomToFit() |
| | | // this.graph.freeze() |
| | |
| | | if (cells.length === 1) { |
| | | let node = cells[0] |
| | | if (!node.isNode()) { |
| | | this.$message({message: '请选中节点', type: 'warning'}) |
| | | this.$confirm('是否删除该连接线点?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }) |
| | | }) |
| | | // this.$message({message: '请选中节点', type: 'warning'}) |
| | | return false; // 取消操作 |
| | | } |
| | | let nodeType = node.getData().nodeType |
| | |
| | | let outNode = isSeriesNode.outNode |
| | | console.log(inLine, outLine, 'inLine,outLine') |
| | | console.log(inNode, outNode, 'inNode,outNode') |
| | | if (inLineIsToLine) { |
| | | inLine[0].target = {cell: outNode.id, port: 'left1'} |
| | | } else { |
| | | outLine[0].source = {cell: inNode.id, port: 'right1'} |
| | | } |
| | | //提示是否要删除 |
| | | this.$confirm('是否删除该节点?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | if (inLineIsToLine) { |
| | | inLine[0].target = {cell: outNode.id, port: 'left1'} |
| | | } else { |
| | | outLine[0].source = {cell: inNode.id, port: 'right1'} |
| | | } |
| | | if (deleteType === 1){ |
| | | node.remove() |
| | | } |
| | |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }) |
| | | return false |
| | | }) |
| | | } |
| | | if (this.isMultipleBrach(node)) { |
| | | //提示是否要删除 |
| | | if (deleteType === 1) |
| | | node.remove() |
| | | else |
| | | this.deleteCombination(node) |
| | | return |
| | | this.$confirm('是否删除该节点?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | if (inLineIsToLine) { |
| | | inLine[0].target = {cell: outNode.id, port: 'left1'} |
| | | } else { |
| | | outLine[0].source = {cell: inNode.id, port: 'right1'} |
| | | } |
| | | if (deleteType === 1) |
| | | node.remove() |
| | | else |
| | | this.deleteCombination(node) |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | }) |
| | | |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }) |
| | | return false |
| | | }) |
| | | } |
| | | } |
| | | //提示不能删除 |
| | |
| | | } |
| | | if (startNode && endNode) { |
| | | let centerY = graphNode.position().y |
| | | let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x, centerY) |
| | | let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY) |
| | | if (!result){ |
| | | dragNode.remove() |
| | | this.$message({message: '没有足够的空间放置该节点,请扩大剩余空间', type: 'warning'}) |
| | | return |
| | | } |
| | | inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'} |
| | |
| | | let result = this.addNodeAndConnect(null, dragNode, minX, centerY) |
| | | if (!result){ |
| | | dragNode.remove() |
| | | this.$message({message: '没有足够的空间放置该节点,请扩大剩余空间', type: 'warning'}) |
| | | return |
| | | } |
| | | this.graph.addEdge({ |
| | |
| | | width =100 |
| | | height = 60 |
| | | } else if (dragNodeType === 'bridgeConnection') { |
| | | width =450 |
| | | height = 160 |
| | | width =550 |
| | | height = 115 |
| | | leftTopX = leftX - width/2 |
| | | leftTopY = centerY - height/2 |
| | | // leftTopY = 240/2 |
| | | } else { |
| | | width =270 |
| | |
| | | dragNode.position(leftX, centerY) |
| | | return {newStartNode: dragNode, newEndNode: dragNode} |
| | | } else if (dragNodeType === 'bridgeConnection') { |
| | | return this.createBridgeConnection(leftX, centerY, dragNode) |
| | | return this.createBridgeConnection(leftTopX, leftTopY, dragNode) |
| | | } else { |
| | | return this.createParallelBrach(leftX, centerY, dragNode) |
| | | return this.createParallelBrach(leftTopX, leftTopY, dragNode) |
| | | } |
| | | }, |
| | | // 相交的边 |
| | |
| | | let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY) |
| | | if (!result){ |
| | | dragNode.remove() |
| | | this.$message({message: '没有足够的空间放置该节点,请扩大剩余空间', type: 'warning'}) |
| | | return |
| | | } |
| | | if (isRight) { |
| | |
| | | })*/ |
| | | }, |
| | | createBridgeConnection(x, y, dragNode) { |
| | | const leftTopDashedBox = this.createDashedBox(x + 120, y) |
| | | const rightTopDashedBox = this.createDashedBox(x + 400, y) |
| | | console.log(x,y,'leftX centerY') |
| | | const leftTopDashedBox = this.createDashedBox(x + 40, y) |
| | | const rightTopDashedBox = this.createDashedBox(x + 380, y) |
| | | |
| | | const leftConnectNode = this.createConnectNode(x + 50, y + 80) |
| | | const alignCenterDashedBox = this.createDashedBox(x + 260, y + 80) |
| | | const rightConnectNode = this.createBridgeNode(x + 550, y + 80) |
| | | const leftConnectNode = this.createConnectNode(x, y + 87) |
| | | const alignCenterDashedBox = this.createDashedBox(x+ 210, y + 87) |
| | | const rightConnectNode = this.createBridgeNode(x + 530, y + 87) |
| | | |
| | | const leftBottomDashedBox = this.createDashedBox(x + 120, y + 160) |
| | | const rightBottomDashedBox = this.createDashedBox(x + 400, y + 160) |
| | | const leftBottomDashedBox = this.createDashedBox(x+ 50, y + 160) |
| | | const rightBottomDashedBox = this.createDashedBox(x + 370 , y + 160) |
| | | |
| | | rightConnectNode.setData({startNodeId: leftConnectNode.id}) |
| | | leftConnectNode.setData({endNodeId: rightConnectNode.id}) |
| | |
| | | const dragNodeId = getUUID().toString() |
| | | let connectNode = this.graph.addNode({ |
| | | shape: 'image', |
| | | // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), |
| | | width: 10, |
| | | height: 10, |
| | | id: connectId, |