时序图

wente

2024-10-14 7917c76b02b213a5fa805a6e2c9936167fae5cc8

时序图

 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()
        }

 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)
      }
    },
  }

 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)
      // }
    },
  }