From 08dfaa8824d174bae7a84f7f99a3db4d76542471 Mon Sep 17 00:00:00 2001 From: xyc <jc_xiong@hotmail.com> Date: 星期六, 11 五月 2024 08:31:46 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 1197 +++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 943 insertions(+), 254 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index b4b9bf1..bca1b8f 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -1,69 +1,49 @@ <template> <div> <el-row :gutter="[8,8]"> - <el-col :span="4"> + <el-col :span="3"> <div :style="'height:' +left_p+'px'"> - <div style="height: 100%"> + <div style="height: 100%"> <div id="stencilImg"></div> </div> </div> </el-col> - <el-col :span="20"> + <el-col :span="21"> <div class="fa-card-a"> <el-form :inline="true"> <el-form-item> - 妯″瀷鍚嶇О锛歿{modelName}} + 妯″瀷鍚嶇О锛歿{ modelName }} </el-form-item> <el-form-item> <el-button type="primary" @click="saveDiagram()">鏆傚瓨</el-button> <el-button type="primary" @click="analyzeDiagram()">淇濆瓨</el-button> <el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button> + <el-button @click="leftAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i> + </el-button> + <el-button @click="centerAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i> + </el-button> + <el-button @click="rightAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i> + </el-button> + <el-button @click="topAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i> + </el-button> + <el-button @click="shuipingAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i> + </el-button> + <el-button @click="bottomAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i> + </el-button> </el-form-item> <el-form-item> - <el-tooltip class="item" effect="dark" content="宸﹀榻�" placement="left"> - <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;" - @click="leftAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-zuoduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="灞呬腑瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="centerAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-chuizhiduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="鍙冲榻�" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="rightAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-youduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="椤堕儴瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="topAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-dingduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="姘村钩瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="shuipingAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-shuipingduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="搴曢儴瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="bottomAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-diduiqi"></i></el-button> - </el-tooltip> + <el-button @click="undo()">鎾ら攢</el-button> + <el-button @click="redo()">閲嶅仛</el-button> </el-form-item> </el-form> <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px; - box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);"> + box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: 100%"> </div> <config-node v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr" :graph="graph" @@ -84,6 +64,8 @@ import {removeCurrentTabHandle} from '@/commonJS/common' import {setHartBeat} from '@/commonJS/common'; import Cookies from 'js-cookie' + import {getUUID} from '../../../../packages/utils' + import RBDDefault from './RBD-default.json' export default { name: 'RBD-edit-img', @@ -111,38 +93,75 @@ }, data() { return { + isFirstLoad: true, + hasMoveNode: false, + hasMoveSingleNode: null, + nodeAdded: false, + connectNode: {}, modelId: '', modelName: '', modelType: '', timer: null, - imgsList: [ - {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}}, - {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}}, + imagesList: [ + // {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}}, + // {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}}, + // { + // imgPath: 'connect', + // imgName: 'connect', + // nodeType: 'connect', + // imgWidth: 30, + // imgHeight: 30, + // imgId: '3', + // data: {} + // }, + // { + // imgPath: 'connect', + // imgName: 'bridge', + // nodeType: 'bridge', + // imgWidth: 50, + // imgHeight: 50, + // imgId: '12', + // data: {} + // }, { - imgPath: 'connect', - imgName: 'connect', - nodeType: 'connect', - imgWidth: 20, - imgHeight: 20, - imgId: '3', + imgPath: 'parallel', + imgName: 'parallel', + nodeType: 'parallel', + imgWidth: 50, + imgHeight: 50, + imgId: '9', data: {} }, - // {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}}, - // {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}}, + {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, { - imgPath: 'switchRight', + imgPath: 'switch', imgName: 'switch', nodeType: 'switch', - imgWidth: 60, - imgHeight: 60, + imgWidth: 50, + imgHeight: 50, imgId: '5', data: {} }, - {imgPath: 'voteRight', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}}, + { + imgPath: 'bridgeConnection', + imgName: 'bridgeConnection', + nodeType: 'bridgeConnection', + imgWidth: 50, + imgHeight: 50, + imgId: '10', + data: {} + }, + // { + // imgPath: 'dashedBox', + // imgName: 'dashedBox', + // nodeType: 'dashedBox', + // imgWidth: 60, + // imgHeight: 60, + // imgId: '10000', + // data: {} + // }, ], - imgsList2: [ - // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'}, - ], + imagesList2: [], nodeType: '', first: true, shape: '', @@ -157,35 +176,14 @@ content: null, publishContent: null, hasPublish: 0, + urlPref: '', }, - // emptyJson: { - // // 鑺傜偣 - // nodes: [ - // { - // id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑 - // width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊� - // height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊� - // label: '璇ラ」鐩繕鏈厤缃巶瀹剁綉缁滃浘', - // attrs: { - // body: { - // strokeWidth: 0 - // }, - // } - // // text: { - // // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘', - // // // fontSize: 56, - // // fill: 'rgba(0,0,0,0.7)' - // // }, - // // }, - // } - // ], - // }, type: '', id: '', graph: null, globalGridAttr: { - productType:'', - voteNum: null, + productType: '', + voteNum: '', repairMttcr: '', repairMttcrOther: '', repairDistribType: '', @@ -212,7 +210,8 @@ stroke: '#5F95FF', strokeWidth: 1, - connector: 'normal', + connector: 'rounded', + router: 'manhattan', label: '', nodeStroke: '#5F95FF', nodeStrokeWidth: 1, @@ -235,7 +234,7 @@ ports: { groups: { top: { - position: 'top', + position: {name: 'top'}, attrs: { circle: { r: 4, @@ -250,7 +249,7 @@ }, }, right: { - position: 'right', + position: {name: 'right'}, attrs: { circle: { r: 4, @@ -265,7 +264,7 @@ }, }, bottom: { - position: 'bottom', + position: {name: 'bottom'}, attrs: { circle: { r: 4, @@ -280,7 +279,7 @@ }, }, left: { - position: 'left', + position: {name: 'left'}, attrs: { circle: { r: 4, @@ -297,15 +296,19 @@ }, items: [ { + id: 'top1', group: 'top', }, { + id: 'right1', group: 'right', }, { + id: 'bottom1', group: 'bottom', }, { + id: 'left1', group: 'left', }, ], @@ -335,31 +338,34 @@ console.log(this.dataForm, 'init(row){') }, async getDiagram(modelId) { + this.isFirstLoad = true; let params = { - modelId: modelId + modelId: modelId, + urlPref: window.SITE_CONFIG['apiURL'], + token: Cookies.get('token'), } let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params}) - console.log(res, 'async getDiagram( res') if (res.data !== null && (res.data.content != null)) { this.dataForm = res.data - console.log(this.dataForm, 'this.dataForm in getDiagram') - if(this.dataForm.content!=''){ - this.diagramJson = JSON.parse(this.dataForm.content) - } - // console.log(this.dataForm.content,'this.Diagram content') - console.log(this.diagramJson, 'this.Diagram json') - this.graph.fromJSON(this.diagramJson) + this.diagramJson = JSON.parse(this.dataForm.content) + this.graph.fromJSON(this.diagramJson) + this.isFirstLoad = false; + console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length') + this.graph.positionContent('left') // 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() @@ -377,41 +383,38 @@ visible: true, }, autoResize: true, - history: { - enabled: true, - beforeAddCommand(event, args) { - if (args.key==='tools') { - console.log(args.key,'event, args') - return false - } - }, + history: { + enabled: true, + beforeAddCommand(event, args) { + if (args.key === 'tools') { + // console.log(args.key, 'event, args') + return false + } }, + }, // panning: { // enabled: true, // }, scroller: { enabled: true, pageVisible: true, + autoResize: true, pageBreak: true, pannable: true, minVisibleWidth: 200, minVisibleHeight: 200, modifiers: 'shift', }, - // panning: { - // enabled: true, - // modifiers: 'shift', - // }, mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: 'ctrl', - minScale: 0.1, - maxScale: 10, + minScale: 0.5, + maxScale: 3, }, connecting: { router: { - name: 'normal', + name: 'manhattan', // args: { // padding: 1, // }, @@ -419,10 +422,10 @@ connector: { name: 'rounded', args: { - radius: 8, + radius: 5, }, }, - // anchor: 'center', + anchor: 'center', connectionPoint: 'anchor', allowBlank: false, snap: { @@ -434,7 +437,7 @@ line: { stroke: '#A2B1C3', strokeWidth: 2, - targetMarker: 'classic' + targetMarker: {fill: 'none'} } }, labels: [{ @@ -458,10 +461,10 @@ tools: { name: 'segments', args: { - attrs: { fill: '#666' }, + attrs: {fill: '#666'}, }, }, - zIndex: 0, + zIndex: -100, }) }, validateConnection({targetMagnet}) { @@ -479,16 +482,13 @@ }, }, }, - resizing: { - enabled: true, - restricted: true - }, + resizing: true, rotating: true, selecting: { enabled: true, rubberband: true, rubberEdge: true, - // showNodeSelectionBox: true, + showNodeSelectionBox: true, }, snapline: true, keyboard: true, @@ -496,37 +496,45 @@ }) this.graph.centerContent() const stencil = new Addon.Stencil({ - getDragNode: (node) => node.clone({ keepId: true }), - getDropNode(node) { - let {width, height} = node.size() - if (node.getData().imgWidth) { - width = node.getData().imgWidth + getDragNode: (node) => node.clone({keepId: true}), + getDropNode: (node) => { + const {width, height} = node.size() + if (node.getData().type && node.getData().nodeType === 'dashedBox') { + return node.clone().size(100, 60) } - if (node.getData().imgHeight) { - height = node.getData().imgHeight + if (node.getData().type && node.getData().type === 'imageNodes2') { + return node.clone({keepId: true}) + } else { + return node.clone() } - return node.clone({ keepId: true }).size(width, height) }, - validateNode(node){ - console.log(node.id) - }, + validateNode: (node) => { + const existingNodes = this.graph.getNodes(); // 鑾峰彇鐢诲竷涓婃墍鏈夎妭鐐� + for (const existingNode of existingNodes) { + if (existingNode.id === node.id) { + this.$message({message: '璇ヨ澶囪妭鐐瑰凡鍦ㄧ敾甯冧笂锛屾棤娉曞啀娆$粯鍒�', type: 'warning'}) + return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔 + } + } + }, title: '', target: this.graph, - stencilGraphWidth: 200, - stencilGraphHeight: 280, - collapsable: true, + stencilGraphWidth: 200, + stencilGraphHeight: 280, + collapsable: true, groups: [ { title: '杩愮畻绗﹀彿', name: 'group1', + graphHeight: 200, }, { title: '璁惧鑺傜偣', name: 'group2', - graphHeight: '', - layoutOptions: { - rowHeight: 90, - }, + graphHeight: '', + layoutOptions: { + rowHeight: 90, + }, } ], layoutOptions: { @@ -535,21 +543,26 @@ }, }) document.getElementById('stencilImg').appendChild(stencil.container) - const imageNodes = this.imgsList.map((item) => + const imageNodes = this.imagesList.map((item) => this.graph.createNode({ shape: 'image', - imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), + // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), width: item.imgWidth, height: item.imgHeight, - x: item.imgWidth, - y: item.imgHeight, + id: item.imgId, data: { + type: 'imageNodes', dataId: '', + startNodeId: '', + endNodeId: '20000', nodeType: item.nodeType, nodeTypeExt: '', - voteNum:null + voteNum: '' }, attrs: { + image: { + 'xlink:href': '/modelImg/' + item.imgPath + '.svg', + }, text: { text: item.imgName, fontSize: 14, @@ -570,9 +583,9 @@ productId: productId } let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params}) - this.imgsList2 = res.data - console.log(this.imgsList2, 'getProduct(productId)234567890') - const imageNodes2 = this.imgsList2.map((item) => + this.imagesList2 = res.data + console.log(this.imagesList2, 'getProduct(productId)234567890') + const imageNodes2 = this.imagesList2.map((item) => this.graph.createNode({ shape: 'image', imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, @@ -580,6 +593,7 @@ height: 60, id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID data: { + type: 'imageNodes2', isRepair: item.isRepair, dataId: item.dataId, nodeType: item.nodeType, @@ -594,7 +608,7 @@ taskMtbcfOther: item.taskMtbcfOther, imgHeight: item.imgHeight, imgWidth: item.imgWidth, - voteNum:null, + voteNum: '', }, attrs: { text: { @@ -637,7 +651,6 @@ stencil.load(imageNodes, 'group1') stencil.load(imageNodes2, 'group2') - this.graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = this.graph.getSelectedCells() if (cells.length) { @@ -661,21 +674,6 @@ } return false }) -//undo redo - this.graph.bindKey(['meta+z', 'ctrl+z'], () => { - if (this.graph.history.canUndo()) { - this.graph.history.undo() - } - return false - }) - - this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => { - if (this.graph.history.canRedo()) { - this.graph.history.redo() - } - return false - }) - // select all this.graph.bindKey(['meta+a', 'ctrl+a'], () => { const nodes = this.graph.getNodes() @@ -686,23 +684,120 @@ //delete this.graph.bindKey('delete', () => { const cells = this.graph.getSelectedCells() - if (cells.length) { - this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning' - }).then(() => { - this.$message({ - type: 'success', - message: '鍒犻櫎鎴愬姛!' + 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.graph.removeCells(cells) - }).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; // 鍙栨秷鎿嶄綔 } }) // zoom @@ -726,17 +821,55 @@ this.type = 'grid' // this.id = cell.id }) + // 鐩戝惉鑺傜偣娣诲姞浜嬩欢 + this.graph.on('node:added', ({node}) => { + if (this.isFirstLoad) { + return + } + if (node.getData().isSelfCreated) { + return + } + const nodeType = node.getData().nodeType; // 鑾峰彇鑺傜偣鐨勭被鍨� + const nodeObj = node + console.log(123) + let intersectNode = this.findIntersectsNode(node) + if (intersectNode) { // 褰撴湁鑺傜偣鐩镐氦 ==>骞惰 + this.addBranch(intersectNode, nodeObj) + return + } else { + let isSelfCreated = null + try { + isSelfCreated = node.getData().isSelfCreated + } catch (e) { + } + if (!isSelfCreated) { + let intersectEdge = this.findIntersectsEdge(this.graph, node) + if (intersectEdge) { // 褰撴湁杈圭浉浜� ==>涓茶仈 + this.addNodeAndInsertEdge(intersectEdge, nodeObj) + return + } else { + //鎻愮ず + } + } + } + node.remove() - this.graph.on('cell:click', ({cell}) => { + /*//濡傛灉鑺傜偣涓庤妭鐐圭浉浜� + console.log(node.position().x, node.position().x, 'node.position().x') + if (nodeType === 'bridgeConnection') { + this.getBridgeConnection() + }*/ + }); + this.graph.on('cell:contextmenu', ({cell}) => { // this.type.value = cell.isNode() ? "node" : "edge" this.type = cell.isNode() ? 'node' : 'edge' this.shape = cell.shape this.id = cell.id if (this.type === 'node') { this.nodeType = cell.getData().nodeType - console.log(this.nodeType,cell.id,'this.nodeType') + // console.log(this.nodeType, cell.id, 'this.nodeType') } - console.log(this.shape, 'this.shape') + // console.log(this.shape, 'this.shape') // this.nodeOpt(this.id, this.globalGridAttr) }) //鍗曞嚮杈硅妭鐐� @@ -754,15 +887,6 @@ }) // 鍗曞嚮node鑺傜偣 this.graph.on('node:click', ({node}) => { - this.reset() - node.attr('line/stroke', 'orange') - node.prop('labels/0', { - attrs: { - body: { - stroke: 'orange', - }, - }, - }) }) // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌 this.graph.on('node:delete', ({view, e}) => { @@ -829,10 +953,10 @@ }, }, }, - { - name: 'segments', - args: {snapRadius: 20, attrs: {fill: '#444'}} - }, + { + name: 'segments', + args: {snapRadius: 20, attrs: {fill: '#444'}} + }, ]) }) @@ -865,42 +989,13 @@ }) }) }, - // nodeOpt(id, globalGridAttr) { - // this.curCel = null - // if (id) { - // let cell = this.graph.getCellById(id) - // console.log(cell, 'let cell 123456') - // if (!cell || !cell.isNode()) { - // return - // } - // this.curCel = cell - // globalGridAttr.nodeStroke = cell.attr('body/stroke') - // globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth') - // globalGridAttr.nodeFill = cell.attr('body/fill') - // globalGridAttr.nodeFontSize = cell.attr('text/fontSize') - // globalGridAttr.nodeFontSize = cell.attr('title/fontSize') - // globalGridAttr.nodeColor = cell.attr('text/fill') - // globalGridAttr.nodeColor = cell.attr('title/fill') - // globalGridAttr.nodeColor = cell.attr('text/style/color') - // globalGridAttr.nodeColor = cell.attr('title/style/color') - // globalGridAttr.nodeUsers = cell.attr('approve/users') - // globalGridAttr.nodeText = cell.attr('text/text') - // globalGridAttr.nodeDate = cell.attr('title/text') - // // let data={ - // // dataId:this.projectId, - // // finishDate: globalGridAttr.nodeDate, - // // } - // cell.getData() - // console.log( cell.getData(),' cell.getData() 909') - // } - // return this.curCel; - // }, async search() { await this.getDiagram(); }, async saveDiagram() { console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') this.dataForm.content = JSON.stringify(this.graph.toJSON()) + this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] console.log(this.dataForm, 'dataFrom') await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => { if (res.msg === 'success') { @@ -913,7 +1008,7 @@ async analyzeDiagram() { console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') this.dataForm.content = JSON.stringify(this.graph.toJSON()) - console.log(this.dataForm, 'dataFrom') + this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => { if (res.msg === 'success') { this.$alert('瑙f瀽鎴愬姛', '鎻愮ず', { @@ -922,17 +1017,6 @@ } }) }, - // AlignmentsChanges(val){ - // console.log(val,'align.value') - // if(val ==='閫夐」1'){ - // console.log(val,'align.value') - // this.leftAlign() - // } - // if(val ==='閫夐」2') { - // console.log('鍙冲榻�','align.value') - // this.rightAlign() - // } - // }, leftAlign() { const NODE = this.graph.getSelectedCells() let leftX = null @@ -959,7 +1043,6 @@ for (let a of NODE) { let x = a.getBBox().x a.position(x, topY) - // console.log(leftX, ':', y, ' x:y') } }, centerAlign() { @@ -982,7 +1065,6 @@ for (let a of NODE) { let y = a.getBBox().y a.position(centerX - a.getBBox().width / 2, y) - // console.log(leftX, ':', y, ' x:y') } }, shuipingAlign() { @@ -1039,8 +1121,612 @@ window.clearInterval(this.timer) } }, - }, + // 瀹氫箟鍑芥暟鏉ユ鏌ヤ袱涓寘鍥存鏄惁鐩镐氦 + findIntersectsNode(node) { + const nodes = this.graph.getNodes() + let intersectNodes = [] + const bbox1 = node.getBBox(); + // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜� + for (const otherNode of nodes) { + if (otherNode === node) continue; + let nodeType = otherNode.getData().nodeType + if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "dashedBox") { + const bbox2 = otherNode.getBBox(); + if (bbox1.x < bbox2.x + bbox2.width && + bbox1.x + bbox1.width > bbox2.x && + bbox1.y < bbox2.y + bbox2.height && + bbox1.y + bbox1.height > bbox2.y) { + intersectNodes.push(otherNode); + } + } + } + if (intersectNodes.length === 1) { + //console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 鐩镐氦鑺傜偣鐨勫璞� + return intersectNodes[0] + } else { + //鎻愮ず鐢ㄦ埛鍙兘鎷栧埌涓�涓湁鏁堢殑鑺傜偣涓� + return null + } + }, + // 鐩镐氦鐨勮妭鐐� + addBranch(graphNode, dragNode) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣 + let graphNodeType = graphNode.getData().nodeType + let dragNodeType = dragNode.getData().nodeType + let offHeight = 50 + if (dragNodeType === 'node') { + offHeight = 50 + } else if (dragNodeType === 'bridgeConnection') { + offHeight = 230 + } else { + offHeight = 70 + } + if (graphNodeType === 'dashedBox') { //铏氭 + const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾� + let inEdges = edges.filter(edge => edge.target.cell === graphNode.id) + let startNode = null + let endNode = null + if (inEdges.length === 1) { + let startNodeId = inEdges[0].source.cell + startNode = this.graph.getCellById(startNodeId) + } + let outEdges = edges.filter(edge => edge.source.cell === graphNode.id) + if (outEdges.length === 1) { + let endNodeId = outEdges[0].target.cell + endNode = this.graph.getCellById(endNodeId) + } + if (startNode && endNode) { + let centerY = graphNode.position().y + 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'} + outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'} + graphNode.remove() + } + } else { //骞惰缁撴瀯 + const graphNodeStartNodeId = graphNode.getData().startNodeId // 鑾峰彇鐢诲竷涓婂師鏈夎妭鐐圭殑寮�濮婭D + const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 閫氳繃寮�濮婭D寰楀埌鍒濆鑺傜偣瀵硅薄 + let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 鑾峰彇鐢诲竷鍘熸湁鑺傜偣鐨剏鍧愭爣 + let minY = graphNode.position().y + let maxY = graphNode.position().y + graphNode.getBBox().height + + const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾� + let inEdges = edges.filter(edge => edge.target.cell === graphNode.id) + //閬嶅巻杩欎釜缁勫悎閲岄潰鎵�鏈夎妭鐐癸紝 淇敼minY锛宮axY + + let pointXY = {minY: minY, maxY: maxY} + console.log(pointXY, 'old') + this.getYRange(inEdges, graphNodeStartNode, pointXY) + console.log(pointXY, 'new') + + let minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width + let maxX = graphNode.position().x + let centerX = minX + (maxX - minX) / 2 + let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30 + + let result = this.addNodeAndConnect(null, dragNode, minX, centerY) + if (!result){ + dragNode.remove() + this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'}) + return + } + this.graph.addEdge({ + source: {cell: graphNodeStartNode, port: 'right1'}, + target: {cell: result.newStartNode, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + this.graph.addEdge({ + source: {cell: result.newEndNode, port: 'right1'}, + target: {cell: graphNode, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + } + }, + addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣 + let width =100, height = 80, leftTopX = leftX , leftTopY = centerY + let dragNodeType = dragNode.getData().nodeType + if (dragNodeType === 'node') { + width =60 + height = 60 + }else if (dragNodeType === 'dashedBox') { + width =100 + height = 60 + } else if (dragNodeType === 'bridgeConnection') { + width =550 + height = 115 + leftTopX = leftX - width/2 + leftTopY = centerY - height/2 + // leftTopY = 240/2 + } else { + width =270 + height = 60 + } + + if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){ + return false + } + + if (dragNodeType === 'node' || dragNodeType === 'dashedBox') { + dragNode.position(leftX, centerY) + return {newStartNode: dragNode, newEndNode: dragNode} + } else if (dragNodeType === 'bridgeConnection') { + return this.createBridgeConnection(leftTopX, leftTopY, dragNode) + } else { + return this.createParallelBrach(leftTopX, leftTopY, dragNode) + } + }, + // 鐩镐氦鐨勮竟 + addNodeAndInsertEdge(graphEdge, dragNode) { + 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 centerY = dragNode.position().y + let isRight = true; + let startPort = 'right1' + let endPort = 'left1' + if (this.isTopBottom(graphEdge)) { + 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 + if (centerX - leftX < rightX - centerX) { + isRight = false + } + } + let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY) + if (!result){ + dragNode.remove() + this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'}) + return + } + if (isRight) { + graphEdge.target = {cell: result.newStartNode.id, port: endPort} + this.graph.addEdge({ + source: {cell: result.newEndNode, port: startPort}, + target: {cell: endNode, port: endPort}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + + } else { + this.graph.addEdge({ + source: {cell: startNode, port: startPort}, + target: {cell: result.newStartNode, port: endPort}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + graphEdge.source = {cell: result.newEndNode.id, port: startPort} + } + // graphEdge.remove() + } + }, + findIntersectsEdge(graph, node) { + const edges = graph.getEdges() + const bbox = node.getBBox(); + const lines = [bbox.leftLine, bbox.rightLine, bbox.topLine, bbox.bottomLine]; + let res = []; + edges.forEach((edge) => { + const view = graph.findViewByCell(edge); + lines.forEach((line) => { + if (view) { + if (view.path.intersectsWithLine(line)) { + res.push(edge); + } + } + }) + }) + const uniqueArr = res.filter((insEdge, index) => + res.findIndex(i => i.id === insEdge.id) === index); + console.log(uniqueArr, 'uniqueArr') + if (uniqueArr.length === 1) { + return uniqueArr[0] + } else { + return false + } + }, + createParallelBrach(x, y, dragNode) { + dragNode.position(x + 320, y - dragNode.size().height / 2) + const connectNode = this.createConnectNode(x + 50, y) + const dashedBox = this.createDashedBox(x + 150, y) + dragNode.setData({startNodeId: connectNode.id}) + + this.graph.addEdge({ + source: {cell: connectNode, port: 'right1'}, + target: {cell: dashedBox, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + this.graph.addEdge({ + source: {cell: dashedBox, port: 'right1'}, + target: {cell: dragNode, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + 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 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 rightConnectNode = this.createBridgeNode(x + 530, y + 87) + + 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}) + /* this.graph.addEdge({ + source: {cell: startNode, port: 'right1'}, + target: {cell: leftConnectNode, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'}, + }) + this.graph.addEdge({ + source: {cell: rightConnectNode, port: 'right1'}, + target: {cell: endNode, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + })*/ + this.graph.addEdge({ + source: {cell: leftConnectNode, port: 'right1'}, + target: {cell: leftTopDashedBox, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + this.graph.addEdge({ + source: {cell: leftConnectNode, port: 'right1'}, + target: {cell: leftBottomDashedBox, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + + let edgeTop = this.graph.addEdge({ + source: {cell: leftTopDashedBox, port: 'right1'}, + target: {cell: rightTopDashedBox, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + let edgeBottom = this.graph.addEdge({ + source: {cell: leftBottomDashedBox, port: 'right1'}, + target: {cell: rightBottomDashedBox, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + + this.graph.addEdge({ + source: {cell: rightTopDashedBox, port: 'right1'}, + target: {cell: rightConnectNode, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + this.graph.addEdge({ + source: {cell: rightBottomDashedBox, port: 'right1'}, + target: {cell: rightConnectNode, port: 'left1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'} + }) + + this.graph.addEdge({ + source: {cell: edgeTop}, + target: {cell: alignCenterDashedBox, port: 'top1'}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'}, + }) + this.graph.addEdge({ + source: {cell: alignCenterDashedBox, port: 'bottom1'}, + target: {cell: edgeBottom}, + router: {name: 'manhattan'}, + connector: {name: 'rounded'}, + }) + dragNode.remove() + return {newStartNode: leftConnectNode, newEndNode: rightConnectNode} + }, + createDashedBox(x, y) { + const dashId = getUUID().toString() + let dashedBox = this.graph.addNode({ + shape: 'image', + // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), + width: 100, + height: 60, + id: dashId, + data: { + isSelfCreated: true, + type: 'imageNodes', + dataId: '', + nodeType: 'dashedBox', + nodeTypeExt: '', + voteNum: '' + }, + attrs: { + image: { + 'xlink:href': '/modelImg/dashedBox.svg', + }, + text: { + text: 'dashedBox', + fontSize: 14, + refX: 0.5, + refY: '100%', + refY2: 4, + textAnchor: 'middle', + textVerticalAnchor: 'top', + }, + }, + ports: {...this.ports}, + }) + dashedBox.position(x, y - dashedBox.size().height / 2) + return dashedBox + }, + createConnectNode(x, y) { + const connectId = getUUID().toString() + const dragNodeId = getUUID().toString() + let connectNode = this.graph.addNode({ + shape: 'image', + width: 10, + height: 10, + id: connectId, + data: { + isSelfCreated: true, + type: 'imageNodes', + endNodeId: dragNodeId, + dataId: '', + nodeType: 'connect', + nodeTypeExt: '', + voteNum: '' + }, + attrs: { + image: { + 'xlink:href': '/modelImg/connect.svg', + }, + text: { + text: 'connect', + fontSize: 14, + refX: 0.5, + refY: '100%', + refY2: 4, + textAnchor: 'middle', + textVerticalAnchor: 'top', + }, + }, + ports: {...this.ports}, + }) + connectNode.position(x, y - connectNode.size().height / 2) + return connectNode + }, + createBridgeNode(x, y) { + const connectId = getUUID().toString() + const dragNodeId = getUUID().toString() + let bridgeNode = this.graph.addNode({ + shape: 'image', + width: 30, + height: 30, + id: connectId, + data: { + isSelfCreated: true, + type: 'imageNodes', + endNodeId: dragNodeId, + dataId: '', + nodeType: 'bridge', + nodeTypeExt: '', + voteNum: '' + }, + attrs: { + image: { + 'xlink:href': '/modelImg/connect.svg', + }, + text: { + text: 'bridge', + fontSize: 14, + refX: 0.5, + refY: '100%', + refY2: 4, + textAnchor: 'middle', + textVerticalAnchor: 'top', + }, + }, + ports: {...this.ports}, + }) + bridgeNode.position(x, y - bridgeNode.size().height / 2) + return bridgeNode + }, + getYRange(inEdges, startNode, pointXY) { + for (let inEdge of inEdges) { + let nodeId = inEdge.source.cell + let node = this.graph.getCellById(nodeId) + if (node.position().y < pointXY.minY) { + pointXY.minY = node.position().y + } + if (node.position().y + node.getBBox().height > pointXY.maxY) { + pointXY.maxY = node.position().y + node.getBBox().height + } + if (node.id === startNode.id) { + continue + } + const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾� + let inEdgesPrev = edges.filter(edge => edge.target.cell === node.id) + this.getYRange(inEdgesPrev, startNode, pointXY) + } + }, + isSeriesNode(startNode, endNode) { + let result = false + let inNode = null + let outNode = null + let inEdges = this.getInLinesOfNode(startNode) + console.log(inEdges, 'inEdges') + if (inEdges.length === 1) { + let isMyLineToOtherLine = this.isMyLineToOtherLine(inEdges[0]) + let hasOtherLineToMyLine = this.hasOtherLineToMyLine(inEdges[0].id) + let inNodeId = inEdges[0].source.cell + inNode = this.graph.getCellById(inNodeId) + if (!isMyLineToOtherLine && !hasOtherLineToMyLine) { + let inNodeType = inNode.getData().nodeType + console.log(inNodeType, 'inNodeType') + if ('node,dashedBox,parallel,switch,vote,bridge'.indexOf(inNodeType) > -1) { + result = true + } + } + } + let outEdges = this.getOutLinesOfNode(endNode) + console.log(outEdges, 'outEdges') + if (outEdges.length === 1) { + let isMyLineToOtherLine = this.isMyLineToOtherLine(outEdges[0]) + let hasOtherLineToMyLine = this.hasOtherLineToMyLine(outEdges[0].id) + let outNodeId = outEdges[0].target.cell + outNode = this.graph.getCellById(outNodeId) + if (!isMyLineToOtherLine && !hasOtherLineToMyLine) { + let outNodeType = outNode.getData().nodeType + if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) { + result = true + } + } + } + console.log(result, 'result') + if (result && inNode && outNode) { + console.log(inNode, outNode, 'inNode, outNode') + return {inNode, outNode} + } else { + return false + } + }, + hasOtherLineToMyLine(edgeId) { + for (let edge of this.graph.getEdges()) { + if (edge.source.cell === edgeId || edge.target.cell === edgeId) + return true + } + return false + }, + isMyLineToOtherLine(myEdge) { + for (let edge of this.graph.getEdges()) { + if (myEdge.source.cell === edge.id || myEdge.target.cell === edge.id) + return true + } + return false + }, + isTopBottom(edge) { + if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') { + return true + } + }, + isMultipleBrach(node) { + let outEdges = this.getOutLinesOfNode(node) + let outNodeId = outEdges[0].target.cell + if (this.isTopBottom(outEdges[0])) + return false + let outNode = this.graph.getCellById(outNodeId) + if ('bridge,end'.indexOf(outNode.getData().nodeType) > -1) { + return false + } + let inEdges = this.getInLinesOfNode(outNode) + return inEdges.length > 1; + }, + deleteCombination(node) { + let startNode = this.graph.getCellById(node.getData().startNodeId) + let allCombinationNodes = [] + console.log(startNode, 'startNode') + this.getAllCombinationNodes(startNode.id, node, allCombinationNodes) + console.log(allCombinationNodes, 'allCombinationNodes') + this.graph.removeCells(allCombinationNodes) + }, + getAllCombinationNodes(startNodeId, node, allCombinationNodes) { + allCombinationNodes.push(node) + if (node.id == startNodeId || node.isEdge()) { + return + } + let inEdges = this.getInLinesOfNode(node) // 濡傛灉锛燂紵锛� + for (let inEdge of inEdges) { + let lineNode = this.getNodeOfConectLine(inEdge) + if (lineNode) { + this.getAllCombinationNodes(startNodeId, lineNode, allCombinationNodes) + } + let inNodeId = inEdge.source.cell + let inNode = this.graph.getCellById(inNodeId) + if (inNode.isEdge()) + continue + this.getAllCombinationNodes(startNodeId, inNode, allCombinationNodes) + } + }, + getNodeOfConectLine(paramEdge) { + for (let edge of this.graph.getEdges()) { + let nodeId = null + /* if (edge.source.cell === paramEdge.id){ + nodeId = edge.target.cell + }*/ + if (edge.target.cell === paramEdge.id) { + nodeId = edge.source.cell + } + if (nodeId) { + let node = this.graph.getCellById(nodeId) + if (node.isNode()) + return node + } + } + return null + }, + getInLinesOfNode(node) { + const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾� + console.log(edges, '鑾峰彇鐢诲竷涓婂紑濮嬭妭鐐规墍鏈夌殑绾� edges') + return edges.filter(edge => edge.target.cell === node.id) + }, + getOutLinesOfNode(node) { + console.log(node, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣 node') + const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾� + console.log(edges, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣鎵�鏈夌殑绾� edges') + return edges.filter(edge => edge.source.cell === node.id) + }, + 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); + } + } + console.log(box2,'box2') + console.log(intersectNodes,'intersectNodes') + return intersectNodes.length <= 0; + }, + undo(){ + if (this.graph.history.canUndo()) { + this.graph.history.undo() + } + }, + redo(){ + if (this.graph.history.canRedo()) { + this.graph.history.redo() + } + } + }, } </script> @@ -1067,15 +1753,18 @@ position: relative; height: 100%; } -#stencilImg .x6-graph-svg-viewport{ + + #stencilImg .x6-graph-svg-viewport { height: 100%; -} + } + .x6-widget-stencil-content { position: relative; - height: calc(100% - 32px); -} -#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content{ - top:0 + height: calc(100% - 32px); + } + + #stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content { + top: 0 } </style> -- Gitblit v1.9.1