时序图模板修改

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',
@@ -405,7 +399,7 @@
                  line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: 'classic'
                    targetMarker: null,
                  }
                },
                tools: {
@@ -790,6 +784,16 @@
          this.shape = cell.shape
          this.id = cell.id
          console.log(this.shape, 'this.shape')
          // 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)
        })
        //单击边节点
@@ -839,59 +843,57 @@
          })
        })

        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: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('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('edge:mouseenter', ({cell, view}) => {
          // alert(123)
          cell.addTools([
            {
              name: 'source-arrowhead',
            },
            {
              name: 'target-arrowhead',
              args: {
                attrs: {
                  fill: 'red',
                },
              },
            },
          ])
          cell.addTools(
            [
              {
                name: 'segments',
                args: {snapRadius: 20, attrs: {fill: '#444'}}
              }
            ]
          )
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
          cell.removeTools()
        })
        // this.graph.on('edge:mouseenter', ({cell, view}) => {
        //   // alert(123)
        //   cell.addTools([
        //     {
        //       name: 'source-arrowhead',
        //     },
        //     {
        //       name: 'target-arrowhead',
        //       args: {
        //         attrs: {
        //           fill: 'red',
        //         },
        //       },
        //     },
        //   ])
        //   cell.addTools(
        //     [
        //       {
        //         name: 'segments',
        //         args: {snapRadius: 20, attrs: {fill: '#444'}}
        //       }
        //     ]
        //   )
        // })
        //
        // this.graph.on('edge:mouseleave', ({cell}) => {
        //   cell.removeTools()
        // })
      },
      showPorts(ports, show) {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
      },
      // showPorts(ports, show) {
      //   for (let i = 0, len = ports.length; i < len; i = i + 1) {
      //     ports[i].style.visibility = show ? 'visible' : 'hidden'
      //   }
      // },

      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
@@ -1028,12 +1030,12 @@
  }

  .x6-graph-scroller.x6-graph-scroller-pannable {
    width: 100% !important;
    width: 100% ;
  }

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