| | |
| | | @GetMapping("tree") |
| | | public Result<List<TyProductModel>> getTreeList() { |
| | | List<TyProductModel> list = tyProductModelService.getAllTree(); |
| | | |
| | | return Result.ok(list); |
| | | } |
| | | |
| | |
| | | @ApiModelProperty(value = "图片名称") |
| | | private String operatImgName; |
| | | |
| | | @TableField(exist = false) |
| | | @ApiModelProperty(value = "图片名称") |
| | | private String svgContent; |
| | | |
| | | @ApiModelProperty(value = "排序") |
| | | private Integer sort; |
| | | |
| | |
| | | } |
| | | } |
| | | } |
| | | /* if (file != null) { |
| | | BufferedImage bufferedImage = null; |
| | | try { |
| | | String fileName = file.getOriginalFilename(); |
| | | String[] arr = fileName.split("\\."); |
| | | String suffixName = arr[arr.length - 1].toLowerCase(); |
| | | |
| | | bufferedImage = ImageIO.read(file.getInputStream()); |
| | | // 宽度 |
| | | int width = bufferedImage.getWidth(); |
| | | sysPictureBase.setWidth(width); |
| | | // 高度 |
| | | int height = bufferedImage.getHeight(); |
| | | sysPictureBase.setHeight(height); |
| | | sysPictureBaseService.update(sysPictureBase); |
| | | String tempUploadDir = localPath + "/product_img/"; |
| | | File dir = new File(tempUploadDir); |
| | | if (!dir.exists()) { |
| | | dir.mkdirs(); |
| | | } |
| | | ImageIO.write(bufferedImage, suffixName, new File(tempUploadDir + sysPictureBase.getId().toString())); |
| | | } catch (IOException e) { |
| | | e.printStackTrace(); |
| | | } |
| | | }*/ |
| | | return Result.ok(); |
| | | } |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`, |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`, |
| | | name: 'SelectPicture', |
| | | type: '', |
| | | dataForm: { |
| | |
| | | name: 'TyProductModel', |
| | | data() { |
| | | return { |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`, |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`, |
| | | fileId: '', |
| | | productList: [], |
| | | dataForm: { |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`, |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`, |
| | | dataForm: { |
| | | operationalStatus:'', |
| | | standbyState:'', |
| | |
| | | data() { |
| | | return { |
| | | disabled: false, |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`, |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`, |
| | | isTree: false, |
| | | isShow: true, |
| | | fileId: '', |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`, |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`, |
| | | productType: '', |
| | | dataForm: { |
| | | name: '', |
| | |
| | | group: 'left', |
| | | }, |
| | | ], |
| | | }, |
| | | initJson: { |
| | | "cells": [ |
| | | { |
| | | "position": { |
| | | "x": -600, |
| | | "y": 0 |
| | | }, |
| | | "size": { |
| | | "width": 60, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "start", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | | "xlink:href": "/modelImg/start.svg" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "image", |
| | | "id": "10000", |
| | | "data": { |
| | | "type": "imageNodes", |
| | | "endNodeId": "20000", |
| | | "dataId": "", |
| | | "nodeType": "start", |
| | | "nodeTypeExt": "", |
| | | "voteNum": "" |
| | | }, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": { |
| | | "name": "top" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": { |
| | | "name": "right" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": { |
| | | "name": "bottom" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": { |
| | | "name": "left" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "top1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "right1", |
| | | "group": "right" |
| | | }, |
| | | { |
| | | "id": "bottom1", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "left1", |
| | | "group": "left" |
| | | } |
| | | ] |
| | | }, |
| | | "zIndex": 1 |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 0, |
| | | "y": 0 |
| | | }, |
| | | "size": { |
| | | "width": 100, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "dashedBox", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | | "xlink:href": "/modelImg/dashedBox.svg" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "image", |
| | | "id": 15000, |
| | | "data": { |
| | | "type": "imageNodes", |
| | | "dataId": "", |
| | | "nodeType": "dashedBox", |
| | | "nodeTypeExt": "", |
| | | "voteNum": "" |
| | | }, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": { |
| | | "name": "top" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": { |
| | | "name": "right" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": { |
| | | "name": "bottom" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": { |
| | | "name": "left" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "top1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "right1", |
| | | "group": "right" |
| | | }, |
| | | { |
| | | "id": "bottom1", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "left1", |
| | | "group": "left" |
| | | } |
| | | ] |
| | | }, |
| | | "zIndex": 2 |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 600, |
| | | "y": 0 |
| | | }, |
| | | "size": { |
| | | "width": 60, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "end", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | | "xlink:href": "/modelImg/end.svg" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "image", |
| | | "id": "20000", |
| | | "data": { |
| | | "type": "imageNodes", |
| | | "startNodeId": "10000", |
| | | "dataId": "", |
| | | "nodeType": "end", |
| | | "nodeTypeExt": "", |
| | | "voteNum": "" |
| | | }, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": { |
| | | "name": "top" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": { |
| | | "name": "right" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": { |
| | | "name": "bottom" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": { |
| | | "name": "left" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "top1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "right1", |
| | | "group": "right" |
| | | }, |
| | | { |
| | | "id": "bottom1", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "left1", |
| | | "group": "left" |
| | | } |
| | | ] |
| | | }, |
| | | "zIndex": 3 |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7", |
| | | "router": { |
| | | "name": "manhattan" |
| | | }, |
| | | "connector": { |
| | | "name": "rounded" |
| | | }, |
| | | "source": { |
| | | "cell": "10000", |
| | | "port": "right1" |
| | | }, |
| | | "target": { |
| | | "cell": 15000, |
| | | "port": "left1" |
| | | }, |
| | | "zIndex": 4 |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f", |
| | | "router": { |
| | | "name": "manhattan" |
| | | }, |
| | | "connector": { |
| | | "name": "rounded" |
| | | }, |
| | | "source": { |
| | | "cell": 15000, |
| | | "port": "right1" |
| | | }, |
| | | "target": { |
| | | "cell": "20000", |
| | | "port": "left1" |
| | | }, |
| | | "zIndex": 5 |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | |
| | | if (res.data !== null && (res.data.content != null)) { |
| | | this.dataForm = res.data |
| | | this.diagramJson = JSON.parse(this.dataForm.content) |
| | | this.graph.fromJSON(this.diagramJson) |
| | | this.graph.fromJSON(this.diagramJson) |
| | | this.isFirstLoad = false; |
| | | console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length') |
| | | |
| | |
| | | }) |
| | | //delete |
| | | this.graph.bindKey('delete', () => { |
| | | const cells = this.graph.getSelectedCells() |
| | | console.log(cells, 'cells') |
| | | if (cells.length === 1) { |
| | | let node = cells[0] |
| | | if (!node.isNode()) { |
| | | 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 deleteType = 0 |
| | | if (nodeType === 'node' || nodeType === 'dashedBox') { |
| | | deleteType = 1 |
| | | } else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) { |
| | | deleteType = 2 |
| | | } |
| | | let canDelete = false |
| | | if (nodeType === 'start' || nodeType === 'end') { |
| | | this.$message({message: '无法删除起始和结束节点', type: 'warning'}) |
| | | return false; // 取消操作 |
| | | } |
| | | if (deleteType > 0) { |
| | | let startNode = null |
| | | if (deleteType === 1) { |
| | | startNode = node |
| | | } else if (deleteType === 2) { |
| | | startNode = this.graph.getCellById(node.getData().startNodeId) |
| | | } |
| | | let isSeriesNode = this.isSeriesNode(startNode, node) |
| | | if (isSeriesNode) { |
| | | let inLine = this.getInLinesOfNode(startNode) |
| | | let outLine = this.getOutLinesOfNode(node) |
| | | let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id) |
| | | let inNode = isSeriesNode.inNode |
| | | let outNode = isSeriesNode.outNode |
| | | console.log(inLine, outLine, 'inLine,outLine') |
| | | console.log(inNode, outNode, 'inNode,outNode') |
| | | //提示是否要删除 |
| | | 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 (this.isMultipleBrach(node)) { |
| | | //提示是否要删除 |
| | | 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 |
| | | }) |
| | | } |
| | | } |
| | | //提示不能删除 |
| | | } else { |
| | | //提示不能删除 |
| | | this.$message({message: '只能选中一个节点', type: 'warning'}) |
| | | return false; // 取消操作 |
| | | } |
| | | this.deleteCompment() |
| | | }) |
| | | // zoom |
| | | this.graph.bindKey(['ctrl+1', 'meta+1'], () => { |
| | |
| | | }) |
| | | }) |
| | | }, |
| | | deleteCompment() { |
| | | const cells = this.graph.getSelectedCells() |
| | | console.log(cells, 'cells') |
| | | if (cells.length === 1) { |
| | | let node = cells[0] |
| | | if (!node.isNode()) { |
| | | this.$confirm('是否删除该连接线?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | node.remove() |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }) |
| | | }) |
| | | // this.$message({message: '请选中节点', type: 'warning'}) |
| | | return false; // 取消操作 |
| | | } |
| | | let nodeType = node.getData().nodeType |
| | | let deleteType = 0 |
| | | if (nodeType === 'node' || nodeType === 'dashedBox') { |
| | | deleteType = 1 |
| | | } else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) { |
| | | deleteType = 2 |
| | | } |
| | | |
| | | let canDelete = false |
| | | if (nodeType === 'start' || nodeType === 'end') { |
| | | this.$message({message: '不允许删除起始和结束节点', type: 'warning'}) |
| | | return false; // 取消操作 |
| | | } |
| | | if (deleteType > 0) { |
| | | let startNode = null |
| | | if (deleteType === 1) { |
| | | startNode = node |
| | | } else if (deleteType === 2) { |
| | | startNode = this.graph.getCellById(node.getData().startNodeId) |
| | | } |
| | | |
| | | let isSeriesNode = this.isSeriesNode(startNode, node) |
| | | if (isSeriesNode) { |
| | | //串联 |
| | | let inLine = this.getInLinesOfNode(startNode) |
| | | let outLine = this.getOutLinesOfNode(node) |
| | | let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id) |
| | | let inNode = isSeriesNode.inNode |
| | | let outNode = isSeriesNode.outNode |
| | | console.log(inLine, outLine, 'inLine,outLine') |
| | | console.log(inNode, outNode, 'inNode,outNode') |
| | | //提示是否要删除 |
| | | 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 (this.isMultipleBrach(node)) { |
| | | //提示是否要删除 |
| | | 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 |
| | | }) |
| | | } |
| | | } |
| | | //提示不能删除 |
| | | } else { |
| | | //提示不能删除 |
| | | this.$message({message: '只能选中一个节点', type: 'warning'}) |
| | | return false; // 取消操作 |
| | | } |
| | | }, |
| | | async search() { |
| | | await this.getDiagram(); |
| | | }, |
| | |
| | | } else { |
| | | offHeight = 70 |
| | | } |
| | | let centerX = 0, centerY = 0; |
| | | let centerX = 0, centerY = 0; |
| | | |
| | | if (graphNodeType === 'dashedBox') { //虚框 |
| | | const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线 |
| | |
| | | endNode = this.graph.getCellById(endNodeId) |
| | | } |
| | | if (startNode && endNode) { |
| | | centerX = graphNode.position().x+graphNode.getBBox().width/2 |
| | | centerY = graphNode.position().y+graphNode.getBBox().height/2 |
| | | centerX = graphNode.position().x + graphNode.getBBox().width / 2 |
| | | centerY = graphNode.position().y + graphNode.getBBox().height / 2 |
| | | let result = this.addNodeAndConnect(graphNode, dragNode, centerX, centerY) |
| | | if (!result){ |
| | | if (!result) { |
| | | dragNode.remove() |
| | | this.$message({message: '没有足够的空间放置该节点,请扩大剩余空间', type: 'warning'}) |
| | | return |
| | | } |
| | | inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'} |
| | | outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'} |
| | | |
| | | let startPort = 'right1' |
| | | let endPort = 'left1' |
| | | if ((inEdges[0].target.port == 'top1' || outEdges[0].source.port == 'bottom1') && ('parallel,switch,vote,bridge'.indexOf(dragNodeType)) == -1) { |
| | | startPort = 'bottom1' |
| | | endPort = 'top1' |
| | | } |
| | | |
| | | inEdges[0].target = {cell: result.newStartNode.id, port: endPort} |
| | | outEdges[0].source = {cell: result.newEndNode.id, port: startPort} |
| | | graphNode.remove() |
| | | } |
| | | } else { //并行结构 |
| | |
| | | this.getYRange(inEdges, graphNodeStartNode, pointXY) |
| | | console.log(pointXY, 'new') |
| | | |
| | | let minX = graphNodeStartNode.position().x + graphNode.getBBox().width+15 |
| | | let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + 15 |
| | | let maxX = graphNode.position().x |
| | | let centerX = minX + (maxX - minX) / 2 |
| | | let centerY = graphNodeY+ graphNode.getBBox().height/2 - pointXY.minY > pointXY.maxY - (graphNodeY+ graphNode.getBBox().height/2) ? |
| | | pointXY.maxY + offHeight/2 + 30 : pointXY.minY - offHeight/2 - 30 |
| | | let centerY = graphNodeY + graphNode.getBBox().height / 2 - pointXY.minY > pointXY.maxY - (graphNodeY + graphNode.getBBox().height / 2) ? |
| | | pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30 |
| | | |
| | | let result = this.addNodeAndConnect(null, dragNode, minX, centerY) |
| | | if (!result){ |
| | | if (!result) { |
| | | dragNode.remove() |
| | | this.$message({message: '没有足够的空间放置该节点,请扩大剩余空间', type: 'warning'}) |
| | | return |
| | |
| | | } |
| | | }, |
| | | addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点 |
| | | let width =100, |
| | | let width = 100, |
| | | height = 80, |
| | | leftTopX = centerX , |
| | | leftTopX = centerX, |
| | | leftTopY = centerY |
| | | let dragNodeType = dragNode.getData().nodeType |
| | | if (dragNodeType === 'node') { |
| | | width =60 |
| | | width = 60 |
| | | height = 60 |
| | | }else if (dragNodeType === 'dashedBox') { |
| | | width =100 |
| | | } else if (dragNodeType === 'dashedBox') { |
| | | width = 100 |
| | | height = 60 |
| | | } else if (dragNodeType === 'bridgeConnection') { |
| | | width =550 |
| | | width = 550 |
| | | height = 175 |
| | | } else { |
| | | width =270 |
| | | width = 270 |
| | | height = 60 |
| | | } |
| | | leftTopX = centerX - width/2 |
| | | leftTopY = centerY - height/2 |
| | | if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){ |
| | | leftTopX = centerX - width / 2 |
| | | leftTopY = centerY - height / 2 |
| | | if (!this.canPlace(targetNode, dragNode, {leftTopX, leftTopY, width, height})) { |
| | | return false |
| | | } |
| | | |
| | |
| | | }, |
| | | // 相交的边 |
| | | addNodeAndInsertEdge(graphEdge, dragNode) { |
| | | const Source = graphEdge.getSourceCell() |
| | | const Target = graphEdge.getTargetCell() |
| | | const source = graphEdge.getSourceCell() |
| | | const target = graphEdge.getTargetCell() |
| | | |
| | | let centerY = Source.position().y + Source.getBBox().height/2 |
| | | if (Target.getData().nodeType === 'node'){ |
| | | centerY = Target.position().y + Target.getBBox().height/2 |
| | | let centerX = 0 |
| | | let centerY = 0 |
| | | if (!source.isNode() || !target.isNode()) { |
| | | if (source.isNode()) { |
| | | centerX = source.position().x + source.getBBox().width / 2 |
| | | centerY = dragNode.position().y + dragNode.getBBox().height / 2 |
| | | } else { |
| | | centerX = target.position().x + target.getBBox().width / 2 |
| | | centerY = dragNode.position().y + dragNode.getBBox().height / 2 |
| | | } |
| | | } else { |
| | | centerX = dragNode.position().x + dragNode.getBBox().width / 2 |
| | | centerY = source.position().y + source.getBBox().height / 2 |
| | | if (target.getData().nodeType === 'node') { |
| | | centerY = target.position().y + target.getBBox().height / 2 |
| | | } |
| | | } |
| | | |
| | | console.log(Source,'Source 起始点信息') |
| | | console.log(Target,'Target 终止点信息') |
| | | console.log(Source.position().y,'起始点的Y坐标') |
| | | console.log(Target.position().y,'终止点的Y坐标') |
| | | let startNodeId = graphEdge.source.cell |
| | | let startNode = this.graph.getCellById(startNodeId) |
| | | let endNodeId = graphEdge.target.cell |
| | | let endNode = this.graph.getCellById(endNodeId) |
| | | |
| | | if (startNode && endNode) { |
| | | let isRight = true; |
| | | let startPort = 'right1' |
| | |
| | | startPort = 'bottom1' |
| | | endPort = 'top1' |
| | | } |
| | | |
| | | if (this.hasOtherLineToMyLine(graphEdge.id)) { |
| | | let leftX = startNode.position().x + startNode.getBBox().width |
| | | let rightX = endNode.position().x |
| | | let centerX = dragNode.position().x + dragNode.getBBox().width / 2 |
| | | // let centerX = dragNode.position().x + dragNode.getBBox().width / 2 |
| | | if (centerX - leftX < rightX - centerX) { |
| | | isRight = false |
| | | } |
| | | } |
| | | let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY) |
| | | if (!result){ |
| | | |
| | | let result = this.addNodeAndConnect(null, dragNode, centerX, centerY) |
| | | if (!result) { |
| | | dragNode.remove() |
| | | this.$message({message: '没有足够的空间放置该节点,请扩大剩余空间', type: 'warning'}) |
| | | return |
| | |
| | | })*/ |
| | | }, |
| | | createBridgeConnection(x, y, dragNode) { |
| | | console.log(x,y,'leftX centerY') |
| | | 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, y + 87) |
| | | const alignCenterDashedBox = this.createDashedBox(x+ 210, y + 87) |
| | | const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87) |
| | | const rightConnectNode = this.createBridgeNode(x + 530, y + 87) |
| | | |
| | | const leftBottomDashedBox = this.createDashedBox(x+ 50, y + 160) |
| | | const rightBottomDashedBox = this.createDashedBox(x + 370 , 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}) |
| | |
| | | console.log(edges, '获取画布上的结束节点所有的线 edges') |
| | | return edges.filter(edge => edge.source.cell === node.id) |
| | | }, |
| | | canPlace(targetNode,dragNode,box2){ |
| | | canPlace(targetNode, dragNode, box2) { |
| | | const nodes = this.graph.getNodes() |
| | | let intersectNodes = [] |
| | | // 检查除当前节点之外的所有节点的包围框是否相交 |
| | | for (const otherNode of nodes) { |
| | | if (otherNode === dragNode || otherNode === targetNode) continue; |
| | | const bbox1 = otherNode.getBBox(); |
| | | if (bbox1.x < box2.leftTopX + box2.width && |
| | | bbox1.x + bbox1.width > box2.leftTopX && |
| | | bbox1.y < box2.leftTopY + box2.height && |
| | | bbox1.y + bbox1.height > box2.leftTopY) { |
| | | intersectNodes.push(otherNode); |
| | | } |
| | | const bbox1 = otherNode.getBBox(); |
| | | if (bbox1.x < box2.leftTopX + box2.width && |
| | | bbox1.x + bbox1.width > box2.leftTopX && |
| | | bbox1.y < box2.leftTopY + box2.height && |
| | | bbox1.y + bbox1.height > box2.leftTopY) { |
| | | intersectNodes.push(otherNode); |
| | | } |
| | | } |
| | | console.log(box2,'box2') |
| | | console.log(intersectNodes,'intersectNodes') |
| | | console.log(box2, 'box2') |
| | | console.log(intersectNodes, 'intersectNodes') |
| | | return intersectNodes.length <= 0; |
| | | }, |
| | | undo(){ |
| | | undo() { |
| | | if (this.graph.history.canUndo()) { |
| | | this.graph.history.undo() |
| | | } |
| | | }, |
| | | redo(){ |
| | | redo() { |
| | | if (this.graph.history.canRedo()) { |
| | | this.graph.history.redo() |
| | | } |
| | |
| | | filterMap.put("/sys/userRegister", "anon"); |
| | | filterMap.put("/ztProduct/getShipList", "anon"); |
| | | |
| | | filterMap.put("/sysPictureBase/getSvgImage","anon"); |
| | | |
| | | filterMap.put("/product/getShipList","anon"); |
| | | filterMap.put("/teamGroup/class/tree","anon"); |
| | | filterMap.put("/taskReliability/SimulatAssess/calculate","anon"); |