From 40b60ccb89d6d50b0ccc577937f462360c7c2d4d Mon Sep 17 00:00:00 2001 From: wente <329538422@qq.com> Date: 星期三, 13 十一月 2024 15:12:01 +0800 Subject: [PATCH] 修改 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 2 web/src/views/modules/taskReliability/ModelView.vue | 292 +++------------------------------------------------------- web/src/views/modules/taskReliability/OperatConditModel.vue | 2 3 files changed, 17 insertions(+), 279 deletions(-) diff --git a/web/src/views/modules/taskReliability/ModelView.vue b/web/src/views/modules/taskReliability/ModelView.vue index 240ace5..74cbe9c 100644 --- a/web/src/views/modules/taskReliability/ModelView.vue +++ b/web/src/views/modules/taskReliability/ModelView.vue @@ -59,6 +59,7 @@ }, data() { return { + isInitialization:false, nodeX: '', nodeY: '', isFirstLoad: true, @@ -276,7 +277,14 @@ this.modelName = row.title this.dataForm.id = row.id this.collapseTransition = row.collapseTransition - this.clearDiagram() + // this.clearDiagram() + // if(!this.isInitialization){ + // this.initDigram() + // } + // setTimeout(()=>{ + // console.log(this.graph,'this.graph this.graph') + // this.getDiagram(this.dataForm.id) + // },0) this.initDigram() console.log(this.dataForm, 'init(row){') }, @@ -299,12 +307,15 @@ this.diagramJson = JSON.parse(this.dataForm.content) this.graph.fromJSON(this.diagramJson) + console.log(this.diagramJson, 'this.diagramJson') this.isFirstLoad = false; console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length') // this.graph.positionContent('left') - this.graph.positionContent('left', {padding: {left: 0}}) // this.graph.centerContent() + this.graph.positionContent('left', {padding: {left: 0}}) + this.graph.freeze() + // this.graph.zoomToFit() } /*else { this.graph.fromJSON(this.RBDDefault) @@ -320,8 +331,6 @@ }, async initDigram() { this.timer = setHartBeat(10, 240); - console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth') - console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight') this.graph = new Graph({ container: document.getElementById('containerImg'), width: document.documentElement.clientWidth, @@ -331,285 +340,16 @@ visible: true, }, autoResize: true, - history: { + panning: { enabled: true, - beforeAddCommand(event, args) { - if (args.key === 'tools') { - // console.log(args.key, 'event, args') - return false - } - }, }, // scroller: { // enabled: true, - // pageVisible: true, - // autoResize: true, - // pageBreak: true, // pannable: true, - // minVisibleWidth: 200, - // minVisibleHeight: 200, - // modifiers: 'shift', + // autoResize: false, // }, - connecting: { - router: { - name: 'manhattan', - }, - connector: { - name: 'rounded', - args: { - radius: 5, - }, - }, - anchor: 'center', - connectionPoint: 'anchor', - allowBlank: false, - allowLoop: false, // 鏄惁鍏佽鍒涘缓寰幆杩炵嚎锛屽嵆杈圭殑璧峰鑺傜偣鍜岀粓姝㈣妭鐐逛负鍚屼竴鑺傜偣锛岄粯璁や负 true - snap: { - radius: 20, - }, - createEdge() { - return new Shape.Edge({ - attrs: { - line: { - // sourceMarker: 'block', // 瀹炲績绠ご - stroke: '#A2B1C3', - strokeWidth: 2, - targetMarker: null - } - }, - labels: [{ - attrs: { - body: { - stroke: '#5F95FF', - }, - text: { - text: '' - } - }, - position: { - distance: 0.5, - angle: 180, - options: { - keepGradient: true, - ensureLegibility: true - } - } - }], - tools: { - name: 'segments', - args: { - attrs: {fill: '#666'}, - }, - }, - zIndex: -100, - }) - }, - validateConnection({targetMagnet}) { - return !!targetMagnet - }, - }, - highlighting: { - magnetAdsorbed: { - name: 'stroke', - args: { - attrs: { - fill: '#5F95FF', - stroke: '#5F95FF', - }, - }, - }, - }, - resizing: true, - rotating: true, - // selecting: { - // enabled: true, - // rubberband: true, - // rubberEdge: true, - // showNodeSelectionBox: true, - // }, - snapline: true, - keyboard: true, - clipboard: true, }) - this.graph.centerContent() - this.graph.bindKey(['meta+c', 'ctrl+c'], () => { - const cells = this.graph.getSelectedCells() - if (cells.length) { - this.graph.copy(cells) - } - return false - }) - - this.graph.bindKey(['meta+x', 'ctrl+x'], () => { - const cells = this.graph.getSelectedCells() - if (cells.length) { - this.graph.cut(cells) - } - return false - }) - this.graph.bindKey(['meta+v', 'ctrl+v'], () => { - if (!this.graph.isClipboardEmpty()) { - const cells = this.graph.paste({offset: 32}) - this.graph.cleanSelection() - this.graph.select(cells) - } - return false - }) -// select all - this.graph.bindKey(['meta+a', 'ctrl+a'], () => { - const nodes = this.graph.getNodes() - if (nodes) { - this.graph.select(nodes) - } - }) -//delete - this.graph.bindKey('delete', () => { - this.deleteCompment() - }) -// zoom - this.graph.bindKey(['ctrl+1', 'meta+1'], () => { - const zoom = this.graph.zoom() - if (zoom < 1.5) { - this.graph.zoom(0.1) - } - }) - - this.graph.bindKey(['ctrl+2', 'meta+2'], () => { - const zoom = this.graph.zoom() - if (zoom > 0.5) { - this.graph.zoom(-0.1) - } - }) - - this.graph.on('blank:click', ({cell}) => { - this.type = 'grid' - - }) - // 鐩戝惉鑺傜偣娣诲姞浜嬩欢 - 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: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 - this.$refs.configNode.loadData(cell) - } else { - this.$refs.configNode.loadData(cell) - } - }) - //鍗曞嚮杈硅妭鐐� - this.graph.on('edge:click', ({edge}) => { - }) - - // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌 - this.graph.on('node:delete', ({view, e}) => { - e.stopPropagation() - view.cell.remove() - }) - - this.graph.on('node:customevent', ({name, view, e}) => { - if (name === 'node:delete') { - e.stopPropagation() - view.cell.remove() - } - }) - // 鍙屽嚮缂栬緫 - this.graph.on('cell:dblclick', ({cell, e}) => { - const isNode = cell.isNode() - const name = cell.isNode() ? 'node-editor' : 'edge-editor' - cell.removeTool(name) - cell.addTools({ - name, - args: { - event: e, - attrs: { - backgroundColor: isNode ? '#EFF4FF' : '#FFF', - text: { - fontSize: 16, - fill: '#262626', - }, - }, - }, - }) - }) - - this.graph.on('node:mouseenter', ({node}) => { - const container = document.getElementById('containerImg') - const ports = container.querySelectorAll( - '.x6-port-body', - ) - this.showPorts(ports, true) - }) - - this.graph.on('node:mouseleave', ({node}) => { - // if (node.hasTool('button-remove')) { - // node.removeTool('button-remove') - // } - const container = document.getElementById('containerImg') - const ports = container.querySelectorAll( - '.x6-port-body', - ) - this.showPorts(ports, false) - }) - - this.graph.on('edge:mouseenter', ({cell}) => { - // alert(123) - cell.addTools([ - { - name: 'source-arrowhead', - }, - { - name: 'target-arrowhead', - args: { - attrs: { - fill: 'red', - }, - }, - }, - { - name: 'segments', - args: {snapRadius: 20, attrs: {fill: '#444'}} - }, - ]) - }) - - this.graph.on('edge:mouseleave', ({cell}) => { - cell.removeTools() - }) - + this.isInitialization = true await this.getDiagram(this.dataForm.id) }, showPorts(ports, show) { diff --git a/web/src/views/modules/taskReliability/OperatConditModel.vue b/web/src/views/modules/taskReliability/OperatConditModel.vue index ab8ec8a..81f7506 100644 --- a/web/src/views/modules/taskReliability/OperatConditModel.vue +++ b/web/src/views/modules/taskReliability/OperatConditModel.vue @@ -151,8 +151,6 @@ title:row.modelName + '妯″瀷璁捐' } this.$emit('collapseTransitionChange', param) - - } } } diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index 93c984d..e721bd1 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -935,7 +935,7 @@ for (let i = 1; i <= node.getData().basicUnitNum; i++) { if (deviceNoArr.findIndex(item => item === i) === -1) { no = i - if (node.getData().basicUnitNum > 1) { + if (node.getData().basicUnitNum >= 1) { node.getData().deviceNo = i node.attr('text/text', node.attr('text/text') + '-' + i) } -- Gitblit v1.9.1