| | |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "start", |
| | | "text": "", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "dashedBox", |
| | | "text": "", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "end", |
| | | "text": "", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | |
| | | "shape": "edge", |
| | | "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7", |
| | | "router": { |
| | | "name": "manhattan" |
| | | "name": "manhattan", |
| | | "args": { |
| | | "startDirections": ["right"], |
| | | "endDirections": ["left"] |
| | | } |
| | | }, |
| | | "connector": { |
| | | "name": "rounded" |
| | |
| | | "shape": "edge", |
| | | "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f", |
| | | "router": { |
| | | "name": "manhattan" |
| | | "name": "manhattan", |
| | | "args": { |
| | | "startDirections": ["right"], |
| | | "endDirections": ["left"] |
| | | } |
| | | }, |
| | | "connector": { |
| | | "name": "rounded" |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | canAdd: true, |
| | | nodeX: '', |
| | | nodeY: '', |
| | | isFirstLoad: true, |
| | |
| | | timer: null, |
| | | imagesList: [ |
| | | { |
| | | imgPath: 'parallel', |
| | | imgName: 'parallel', |
| | | nodeType: 'parallel', |
| | | imgPath: 'switch', |
| | | imgName: '', |
| | | nodeType: 'switch', |
| | | imgWidth: 50, |
| | | imgHeight: 50, |
| | | imgId: '9', |
| | | data: {} |
| | | }, |
| | | {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, |
| | | {imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, |
| | | { |
| | | imgPath: 'switch', |
| | | imgName: 'switch', |
| | | nodeType: 'switch', |
| | | imgPath: 'parallel', |
| | | imgName: '', |
| | | nodeType: 'parallel', |
| | | imgWidth: 50, |
| | | imgHeight: 50, |
| | | imgId: '5', |
| | |
| | | }, |
| | | { |
| | | imgPath: 'bridgeConnection', |
| | | imgName: 'bridgeConnection', |
| | | imgName: '', |
| | | nodeType: 'bridgeConnection', |
| | | imgWidth: 50, |
| | | imgHeight: 50, |
| | | imgId: '10', |
| | | data: {} |
| | | }, |
| | | // { |
| | | // imgPath: 'dashedBox', |
| | | // imgName: 'dashedBox', |
| | | // nodeType: 'dashedBox', |
| | | // imgWidth: 60, |
| | | // imgHeight: 60, |
| | | // imgId: '10000', |
| | | // data: {} |
| | | // }, |
| | | ], |
| | | imagesList2: [], |
| | | nodeType: '', |
| | |
| | | }) |
| | | this.graph.centerContent() |
| | | const stencil = new Addon.Stencil({ |
| | | getDragNode: (node) => node.clone({keepId: true}), |
| | | //getDragNode: (node) => node.clone({keepId: true}), |
| | | getDropNode: (node) => { |
| | | this.canAdd = true |
| | | const {width, height} = node.size() |
| | | if (node.getData().type && node.getData().nodeType === 'dashedBox') { |
| | | return node.clone().size(60, 40) |
| | | } |
| | | if (node.getData().type && node.getData().type === 'imageNodes2') { |
| | | return node.clone({keepId: true}) |
| | | } else { |
| | | return node.clone() |
| | | } |
| | | }, |
| | | validateNode: (node) => { |
| | | const existingNodes = this.graph.getNodes(); // 获取画布上所有节点 |
| | | for (const existingNode of existingNodes) { |
| | | if (existingNode.id === node.id) { |
| | | this.$message({message: '该设备节点已在画布上,无法再次绘制', type: 'warning'}) |
| | | return false; // 取消添加节点操作 |
| | | const nodes = this.graph.getNodes() |
| | | let deviceNoArr = [] |
| | | // 检查除当前节点之外的所有节点的包围框是否相交 |
| | | for (const node2 of nodes) { |
| | | console.log(node2, 'saveDiagram node') |
| | | if (node2.getData().nodeType == 'node' && node2.getData().dataId) { |
| | | if (node2.getData().dataId == node.getData().dataId) { |
| | | deviceNoArr.push(node2.getData().deviceNo) |
| | | } |
| | | } |
| | | } |
| | | let no = 0 |
| | | console.log(node, 'node') |
| | | console.log(deviceNoArr, 'deviceNoArr') |
| | | for (let i = 1; i <= node.getData().basicUnitNum; i++) { |
| | | if (deviceNoArr.findIndex(item => item === i) === -1) { |
| | | no = i |
| | | node.getData().deviceNo = i |
| | | if (node.getData().basicUnitNum>1){ |
| | | node.attr('text/text', node.attr('text/text') + '-' + i) |
| | | } |
| | | break |
| | | } |
| | | } |
| | | if (no === 0) { |
| | | this.canAdd = false |
| | | } |
| | | } |
| | | return node.clone() |
| | | |
| | | }, |
| | | validateNode: (node) => { |
| | | if (!this.canAdd) { |
| | | this.$message({message: '该设备节点已在画布上,无法再次绘制', type: 'warning'}) |
| | | return false |
| | | } |
| | | |
| | | }, |
| | | title: '', |
| | | target: this.graph, |
| | |
| | | //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, |
| | | width: 60, |
| | | height: 60, |
| | | id: item.dataId, // 手动设置节点的 ID |
| | | //id: item.dataId, // 手动设置节点的 ID |
| | | data: { |
| | | type: 'imageNodes2', |
| | | dataId: item.dataId, |
| | | basicUnitNum: item.basicUnitNum, |
| | | deviceNo: 0, |
| | | nodeType: item.nodeType, |
| | | nodeTypeExt: item.nodeTypeExt, |
| | | productType: item.productType, |
| | |
| | | } |
| | | const nodeType = node.getData().nodeType; // 获取节点的类型 |
| | | const nodeObj = node |
| | | console.log(123) |
| | | console.log(node.id, 'node.id') |
| | | let intersectNode = this.findIntersectsNode(node) |
| | | if (intersectNode) { // 当有节点相交 ==>并行 |
| | | this.addBranch(intersectNode, nodeObj) |
| | |
| | | const nodes = this.graph.getNodes() |
| | | for (const node of nodes) { |
| | | if (node.getData().nodeType === 'dashedBox') { |
| | | this.$message({message: '该模型中存在虚框,无法保存', type: 'warning'}) |
| | | return false; // 取消添加节点操作 |
| | | this.$message({message: '该模型中存在虚框,无法提交', type: 'warning'}) |
| | | return false; |
| | | } |
| | | if (node.getData().nodeType === 'vote') { |
| | | const edges = this.graph.getConnectedEdges(node); |
| | | if (node.getData().voteNum === null || node.getData().voteNum === '') { |
| | | this.$message({message: '表决节点的表决数量未设置', type: 'warning'}) |
| | | return false; |
| | | } |
| | | const edges = this.graph.getIncomingEdges(node); |
| | | if (node.getData().voteNum >= edges.length) { |
| | | this.$message({message: '表决数量不能高于该节点的进线数量', type: 'warning'}) |
| | | return false; // 取消添加节点操作 |
| | | this.$message({message: '表决节点的表决数量必须小于该节点的进线数量', type: 'warning'}) |
| | | return false; |
| | | } |
| | | } |
| | | if (node.getData().nodeType === 'switch') { |
| | | if (node.getData().voteNum === null || node.getData().voteNum === '') { |
| | | this.$message({message: '旁联节点的备份数量未设置', type: 'warning'}) |
| | | return false; |
| | | } |
| | | const edges = this.graph.getIncomingEdges(node); |
| | | if (node.getData().voteNum >= edges.length) { |
| | | this.$message({message: '旁联节点的备份数量必须小于该节点的进线数量', type: 'warning'}) |
| | | return false; |
| | | } |
| | | } |
| | | } |
| | |
| | | await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => { |
| | | if (res.msg === 'success') { |
| | | this.$emit('refreshDataList') |
| | | this.$alert('解析成功', '提示', { |
| | | this.$alert('提交成功', '提示', { |
| | | confirmButtonText: '确定' |
| | | }) |
| | | } |
| | |
| | | createParallelBrach(x, y, dragNode) { |
| | | dragNode.position(x + 320, y - dragNode.size().height / 2) |
| | | const connectNode = this.createConnectNode(x + 50, y) |
| | | this.createBrach(dragNode, connectNode, x, y - 50) |
| | | this.createBrach(dragNode, connectNode, x, y + 50) |
| | | |
| | | return {newStartNode: connectNode, newEndNode: dragNode} |
| | | }, |
| | | createBrach(dragNode, connectNode, x, y) { |
| | | const dashedBox = this.createDashedBox(x + 150, y) |
| | | dragNode.setData({startNodeId: connectNode.id}) |
| | | |
| | |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | startDirections: ['top', 'bottom'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | endDirections: ['top', 'bottom'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | return {newStartNode: connectNode, newEndNode: dragNode} |
| | | /* this.graph.addEdge({ |
| | | source: {cell: startNode, port: 'right1'}, |
| | | target: {cell: connectNode, port: 'left1'}, |
| | | router: {name: 'manhattan'}, |
| | | connector: {name: 'rounded'} |
| | | }) |
| | | this.graph.addEdge({ |
| | | source: {cell: dragNode, port: 'right1'}, |
| | | target: {cell: endNode, port: 'left1'}, |
| | | router: {name: 'manhattan'}, |
| | | connector: {name: 'rounded'} |
| | | })*/ |
| | | }, |
| | | createBridgeConnection(x, y, dragNode) { |
| | | console.log(x, y, 'leftX centerY') |
| | |
| | | |
| | | const leftConnectNode = this.createConnectNode(x, y + 87) |
| | | const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87) |
| | | const rightConnectNode = this.createBridgeNode(x + 530, y + 87) |
| | | |
| | | const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160) |
| | | const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160) |
| | | let edgeTop = this.graph.addEdge({ |
| | | source: {cell: leftTopDashedBox}, |
| | | target: {cell: rightTopDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | let edgeBottom = this.graph.addEdge({ |
| | | source: {cell: leftBottomDashedBox}, |
| | | target: {cell: rightBottomDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | |
| | | const rightConnectNode = this.createBridgeNode(x + 530, y + 87, leftConnectNode.id, edgeTop.id, edgeBottom.id) |
| | | |
| | | rightConnectNode.setData({startNodeId: leftConnectNode.id}) |
| | | leftConnectNode.setData({endNodeId: rightConnectNode.id}) |
| | |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['top', 'bottom'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | |
| | | let edgeTop = this.graph.addEdge({ |
| | | source: {cell: leftTopDashedBox}, |
| | | target: {cell: rightTopDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | let edgeBottom = this.graph.addEdge({ |
| | | source: {cell: leftBottomDashedBox}, |
| | | target: {cell: rightBottomDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | |
| | | 'xlink:href': '/modelImg/dashedBox.svg', |
| | | }, |
| | | text: { |
| | | text: 'dashedBox', |
| | | text: '', |
| | | fontSize: 14, |
| | | refX: 0.5, |
| | | refY: '100%', |
| | |
| | | 'xlink:href': '/modelImg/connect.svg', |
| | | }, |
| | | text: { |
| | | text: 'connect', |
| | | text: '', |
| | | fontSize: 14, |
| | | refX: 0.5, |
| | | refY: '100%', |
| | |
| | | connectNode.position(x, y - connectNode.size().height / 2) |
| | | return connectNode |
| | | }, |
| | | createBridgeNode(x, y) { |
| | | const connectId = getUUID().toString() |
| | | createBridgeNode(x, y, connectId, edgeTopId, edgeBottomId) { |
| | | const dragNodeId = getUUID().toString() |
| | | let bridgeNode = this.graph.addNode({ |
| | | shape: 'image', |
| | | width: 30, |
| | | height: 30, |
| | | id: connectId, |
| | | id: dragNodeId, |
| | | data: { |
| | | isSelfCreated: true, |
| | | type: 'imageNodes', |
| | | endNodeId: dragNodeId, |
| | | startNodeId: connectId, |
| | | edgeTopId: edgeTopId, |
| | | edgeBottomId: edgeBottomId, |
| | | dataId: '', |
| | | nodeType: 'bridge', |
| | | nodeTypeExt: '', |