From 7917c76b02b213a5fa805a6e2c9936167fae5cc8 Mon Sep 17 00:00:00 2001 From: wente <329538422@qq.com> Date: 星期一, 14 十月 2024 09:23:29 +0800 Subject: [PATCH] 时序图 --- web/src/views/modules/taskReliability/timeDiagramThumbnail.vue | 22 +++++++++++----------- web/src/views/modules/taskReliability/TimeDiagram.vue | 12 ++++++------ web/src/views/modules/taskReliability/textDiagram.vue | 22 ++++++++++------------ 3 files changed, 27 insertions(+), 29 deletions(-) diff --git a/web/src/views/modules/taskReliability/TimeDiagram.vue b/web/src/views/modules/taskReliability/TimeDiagram.vue index 1361558..3e6d46f 100644 --- a/web/src/views/modules/taskReliability/TimeDiagram.vue +++ b/web/src/views/modules/taskReliability/TimeDiagram.vue @@ -142,6 +142,7 @@ }, mounted() { this.getProductList() + this.init() this.$refs.textDiagram.init() this.$refs.timeDiagramThumbnail.init() }, @@ -162,8 +163,6 @@ this.$refs.timeDiagramThumbnail.getNodePointX(left,this.bigWidth) }, init() { - console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth') - console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight') this.graph = new Graph({ container: document.getElementById('timeDiagram'), // width: document.documentElement.clientWidth - 100, @@ -246,8 +245,8 @@ this.knob = document.createElement('div',false) this.knob.style.position = 'absolute' document.getElementById('timeDiagram').appendChild(this.knob) - this.graph.centerContent() - + this.graph.positionContent('left',{ padding: { left: 0 }}) + // this.graph.centerContent() Graph.registerNode( 'custom-rect', { @@ -582,7 +581,7 @@ this.$nextTick(() => { this.$refs.ProductModelTree.getProductList() }) - this.init() + // this.init() }, onTaskSelected(data) { console.log(data, ' onProductSelected(data)') @@ -632,7 +631,8 @@ this.$refs.timeDiagramThumbnail.getThumbnail(smallDiagramJson) } else { this.graph.fromJSON(this.emptyJson) - this.graph.centerContent() + this.graph.positionContent('left',{ padding: { left: 0 }}) + // this.graph.centerContent() //this.graph.zoomToFit() this.graph.freeze() } diff --git a/web/src/views/modules/taskReliability/textDiagram.vue b/web/src/views/modules/taskReliability/textDiagram.vue index 3c1f530..2fb3627 100644 --- a/web/src/views/modules/taskReliability/textDiagram.vue +++ b/web/src/views/modules/taskReliability/textDiagram.vue @@ -9,14 +9,12 @@ name: "textDiagram", data(){ return{ - graph:null, + textGraph:null, } }, methods:{ init() { - console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth') - console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight') - this.graph = new Graph({ + this.textGraph = new Graph({ container: document.getElementById('textDiagram'), // width:250, height: document.documentElement.clientHeight - 440, @@ -75,7 +73,7 @@ }, keyboard: true, }) - this.graph.centerContent() + this.textGraph.centerContent() Graph.registerNode( 'custom-rect', @@ -276,15 +274,15 @@ ) }, getTextDiagram(diagramJson){ - this.graph.unfreeze() - this.graph.fromJSON(diagramJson) - this.graph.positionContent('left',{ padding: { left: 0 }}) - this.graph.freeze() - // this.graph.centerContent() - // this.graph.zoomToFit() + this.textGraph.unfreeze() + this.textGraph.fromJSON(diagramJson) + this.textGraph.positionContent('left',{ padding: { left: 0 }}) + this.textGraph.freeze() + // this.textGraph.centerContent() + // this.textGraph.zoomToFit() }, setScroll(top){ - this.graph.setScrollbarPosition(null, top) + this.textGraph.setScrollbarPosition(null, top) } }, } diff --git a/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue b/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue index f0b0876..7475f33 100644 --- a/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue +++ b/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue @@ -9,7 +9,7 @@ name: "timeDiagramThumbnail", data(){ return{ - graph:null, + thumbnailGraph:null, smallWidth:0, targetNode:{}, } @@ -19,7 +19,7 @@ console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth') console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight') - this.graph = new Graph({ + this.thumbnailGraph = new Graph({ container: document.getElementById('timeDiagramThumbnail'), // width:250, height: 150, @@ -66,7 +66,7 @@ // autoResize: true, // keyboard: true, }) - this.graph.centerContent() + this.thumbnailGraph.centerContent() Graph.registerNode( 'custom-rect', { @@ -265,23 +265,23 @@ true, ) - this.graph.on('node:moving', ({ e, x, y, node, view }) => { + this.thumbnailGraph.on('node:moving', ({ e, x, y, node, view }) => { this.$emit('getPoint',x,this.smallWidth) }) }, getThumbnail(smallDiagramJson){ - this.graph.fromJSON(smallDiagramJson) - this.graph.centerContent() - this.smallWidth = this.graph.getContentBBox().width - const nodes = this.graph.getNodes() + this.thumbnailGraph.fromJSON(smallDiagramJson) + this.thumbnailGraph.centerContent() + this.smallWidth = this.thumbnailGraph.getContentBBox().width + const nodes = this.thumbnailGraph.getNodes() for (const otherNode of nodes) { if (otherNode.hasParent()){ this.targetNode = otherNode console.log(this.targetNode,'targetNode') } } - // console.log(this.graph.getContentBBox().width,'DiagramJson11') - // this.graph.zoomToFit() + // console.log(this.thumbnailGraph.getContentBBox().width,'DiagramJson11') + // this.thumbnailGraph.zoomToFit() }, getNodePointX(x,bigWidth){ let pointX = Number((x / ( bigWidth /this.smallWidth)).toFixed(0)) @@ -292,7 +292,7 @@ }, // setScroll(top){ - // this.graph.setScrollbarPosition(null, top) + // this.thumbnailGraph.setScrollbarPosition(null, top) // } }, } -- Gitblit v1.9.1