时序图模板修改

wente

2024-10-31 a7892d2ab77735063408c24be9bddfba01740e1d

 web/src/views/modules/taskReliability/TimeDiagramTemp.vue

@@ -2,11 +2,9 @@
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="5">
        <div style="height: 80vh">
          <div class="fa-card-a">
          <div class="fa-card-a" style="height: calc(100vh - 128px)">
            <div id="stencil"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="fa-card-a">
@@ -33,11 +31,8 @@
          <div id="container" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
          </div>
          <config-edge ref="configEdge" v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr"
                       :graph="graph"/>
          <config-node v-show="type === 'node'"  :id="id" :globalGridAttr="globalGridAttr"
                       :graph="graph"
                       :shape="shape"/>
          <config-edge ref="configEdge" v-show="type === 'edge'"/>
          <config-node ref="configNode" v-show="type === 'node'" />
        </div>
      </el-col>
    </el-row>
@@ -143,7 +138,6 @@
          opacity: 0.1,

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'normal',
          label: '',
          nodeStroke: '#5F95FF',
@@ -790,8 +784,14 @@
          this.shape = cell.shape
          this.id = cell.id
          console.log(this.shape, 'this.shape')
          if (this.type === 'edge') {
            //this.nodeType = cell.getData().nodeType
          // if (this.type === 'edge') {
          //   //this.nodeType = cell.getData().nodeType
          //   this.$refs.configEdge.loadData(cell)
          // }
          if (this.type === 'node') {
            this.$refs.configNode.loadData(cell,this.globalGridAttr)
          }
           if (this.type === 'edge') {
            this.$refs.configEdge.loadData(cell)
          }
          // this.nodeOpt(this.id, this.globalGridAttr)
@@ -843,24 +843,22 @@
          })
        })

        this.graph.on('node:mouseenter', ({node}) => {
          const container = document.getElementById('container')
          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('container')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, false)
        })
        // this.graph.on('node:mouseenter', ({node}) => {
        //   const container = document.getElementById('container')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        // })
        //
        // this.graph.on('node:mouseleave', ({node}) => {
        //   // if (node.hasTool('button-remove')) {
        //   //   node.removeTool('button-remove')
        //   // }
        //   const container = document.getElementById('container')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        // })

        // this.graph.on('edge:mouseenter', ({cell, view}) => {
        //   // alert(123)
@@ -1037,7 +1035,7 @@

  #stencil {
    width: 100%;
    height: 350px;
    height:100%;
    position: relative;
    border-right: 1px solid #dfe3e8;
  }