新增svgEditor

xyc

2024-05-17 6b24f642b01cf3cd1be0d5833273fa2867d389e1

 web/src/views/modules/taskReliability/RBD-edit-img.vue

@@ -363,7 +363,9 @@
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        this.graph.fromJSON(RBDDefault)
        this.graph.positionContent('left')
        this.isFirstLoad = false;
        // this.graph.centerContent()
        // this.graph.zoomToFit()
        // this.graph.freeze()
@@ -583,10 +585,12 @@
        let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
        this.imagesList2 = res.data
        console.log(this.imagesList2, 'getProduct(productId)234567890')
        let urlObject = window.URL || window.webkitURL || window;

        const imageNodes2 = this.imagesList2.map((item) =>
          this.graph.createNode({
            shape: 'image',
            imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
@@ -609,6 +613,10 @@
              voteNum: '',
            },
            attrs: {
              image: {
                'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
                //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
              },
              text: {
                text: item.imgName,
                fontSize: 14,
@@ -686,7 +694,22 @@
          if (cells.length === 1) {
            let node = cells[0]
            if (!node.isNode()) {
              this.$message({message: '请选中节点', type: 'warning'})
              this.$confirm('是否删除该连接线点?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
              // this.$message({message: '请选中节点', type: 'warning'})
              return false; // 取消操作
            }
            let nodeType = node.getData().nodeType
@@ -717,17 +740,17 @@
                let outNode = isSeriesNode.outNode
                console.log(inLine, outLine, 'inLine,outLine')
                console.log(inNode, outNode, 'inNode,outNode')
                if (inLineIsToLine) {
                  inLine[0].target = {cell: outNode.id, port: 'left1'}
                } else {
                  outLine[0].source = {cell: inNode.id, port: 'right1'}
                }
                //提示是否要删除
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (inLineIsToLine) {
                    inLine[0].target = {cell: outNode.id, port: 'left1'}
                  } else {
                    outLine[0].source = {cell: inNode.id, port: 'right1'}
                  }
                  if (deleteType === 1){
                    node.remove()
                  }
@@ -743,15 +766,37 @@
                    type: 'info',
                    message: '已取消删除'
                  })
                  return false
                })
              }
              if (this.isMultipleBrach(node)) {
                //提示是否要删除
                if (deleteType === 1)
                  node.remove()
                else
                  this.deleteCombination(node)
                return
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (inLineIsToLine) {
                    inLine[0].target = {cell: outNode.id, port: 'left1'}
                  } else {
                    outLine[0].source = {cell: inNode.id, port: 'right1'}
                  }
                  if (deleteType === 1)
                    node.remove()
                  else
                    this.deleteCombination(node)
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })

                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                  return false
                })
              }
            }
            //提示不能删除
@@ -1141,6 +1186,7 @@
            let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY)
            if (!result){
              dragNode.remove()
              this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
              return
            }
            inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
@@ -1171,6 +1217,7 @@
          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          if (!result){
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          this.graph.addEdge({
@@ -1246,6 +1293,7 @@
          let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
          if (!result){
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          if (isRight) {