滚轮在页面加载之前报错报错问题

wente

2024-11-05 1696a5ccc97a923f65eaf3a554eabce2436bc510

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

@@ -2,58 +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 style="height: 42vh;margin-top: 30px;background: #f5f5f5;padding-bottom:20px ">
              <h3 style="background: #ededed;font-size: 12px;height: 32px;line-height: 32px;padding: 0 5px 0 8px">
                对齐方式</h3>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="左对齐" placement="left">
                  <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
                             @click="leftAlign()"><i style="font-size: 2rem;color: #5F95FF"
                                                     class="wt-iconfont icon-zuoduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="centerAlign()"><i style="font-size: 2rem;color: #5F95FF"
                                                       class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="右对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="rightAlign()"><i style="font-size: 2rem;color: #5F95FF"
                                                      class="wt-iconfont icon-youduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="topAlign()"><i style="font-size: 2rem;color:#5F95FF"
                                                    class="wt-iconfont icon-dingduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="shuipingAlign()"><i style="font-size: 2rem;color:#5F95FF"
                                                         class="wt-iconfont icon-shuipingduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="bottomAlign()"><i style="font-size: 2rem;color:#5F95FF"
                                                       class="wt-iconfont icon-diduiqi"></i></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="fa-card-a">
@@ -80,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>
@@ -190,7 +138,6 @@
          opacity: 0.1,

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'normal',
          label: '',
          nodeStroke: '#5F95FF',
@@ -294,9 +241,7 @@
    },
    watch: {
      '$route.params.configId'() {
        // alert('$route.params.projectId change')
        this.projectId = this.$route.params.projectId
        //this.diagramId = this.$route.params.diagramId
        console.log(this.$route.params.projectId, 'this.$route.params.projectId')
        console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
        this.projectChange2(this.$route.params.diagramId)
@@ -454,7 +399,7 @@
                  line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: 'classic'
                    targetMarker: null,
                  }
                },
                tools: {
@@ -722,80 +667,13 @@
          },
          true,
        )
        // 一级网络图的日期文字节点
        const r5 = this.graph.createNode({
          shape: 'custom-circle',
          data: {
            dataId: '',
            finishDate: '',
            inspectName: ''
          },
          label: '阶段',
        })
        // 二级网络图日期节点
        const r6 = this.graph.createNode({
          shape: 'custom-circle1',
          data: {
            dataId: '',
            finishDate: '',
            inspectName: ''
          },
        })
        // 二级网络图文字节点
        const r9 = this.graph.createNode({
          shape: 'custom-rect'
        })

        const scaleImgCenter = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/center.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'center'
          }
        })

        const scaleImgTop = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/top.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'top'
          }
        })

        const scaleImgRight = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/right.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'right'
          }
        })
        const scaleImgBottom = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/bottom.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'bottom'
          }
        })
        const scaleImgLeft = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/left.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'left'
          }
        })

        // scaleImgTop.setAttribute('crossOrigin', 'Anonymous')
        stencil.load([r5, r6, r9, scaleImgTop, scaleImgCenter, scaleImgRight, scaleImgBottom, scaleImgLeft], 'group1')
        stencil.load([r9], 'group1')
        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
@@ -906,20 +784,20 @@
          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)
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
          // this.reset()
          edge.attr('line/stroke', '#5F95FF')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: '#5F95FF',
              },
            },

          })
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
@@ -965,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()')
@@ -1154,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;
  }