修改

wente

2024-11-13 40b60ccb89d6d50b0ccc577937f462360c7c2d4d

修改

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

@@ -59,6 +59,7 @@
    },
    data() {
      return {
        isInitialization:false,
        nodeX: '',
        nodeY: '',
        isFirstLoad: true,
@@ -276,7 +277,14 @@
        this.modelName = row.title
        this.dataForm.id = row.id
        this.collapseTransition = row.collapseTransition
        this.clearDiagram()
        // this.clearDiagram()
        // if(!this.isInitialization){
        //   this.initDigram()
        // }
        // setTimeout(()=>{
        //   console.log(this.graph,'this.graph this.graph')
        //   this.getDiagram(this.dataForm.id)
        // },0)
        this.initDigram()
        console.log(this.dataForm, 'init(row){')
      },
@@ -299,12 +307,15 @@

          this.diagramJson = JSON.parse(this.dataForm.content)
          this.graph.fromJSON(this.diagramJson)
          console.log(this.diagramJson, 'this.diagramJson')
          this.isFirstLoad = false;
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

          // this.graph.positionContent('left')
          this.graph.positionContent('left', {padding: {left: 0}})
          // this.graph.centerContent()
          this.graph.positionContent('left', {padding: {left: 0}})
          this.graph.freeze()

          // this.graph.zoomToFit()
        } /*else {
          this.graph.fromJSON(this.RBDDefault)
@@ -320,8 +331,6 @@
      },
      async initDigram() {
        this.timer = setHartBeat(10, 240);
        console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
        console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
        this.graph = new Graph({
          container: document.getElementById('containerImg'),
          width: document.documentElement.clientWidth,
@@ -331,285 +340,16 @@
            visible: true,
          },
          autoResize: true,
          history: {
          panning: {
            enabled: true,
            beforeAddCommand(event, args) {
              if (args.key === 'tools') {
                // console.log(args.key, 'event, args')
                return false
              }
            },
          },
          // scroller: {
          //   enabled: true,
          //   pageVisible: true,
          //   autoResize: true,
          //   pageBreak: true,
          //   pannable: true,
          //   minVisibleWidth: 200,
          //   minVisibleHeight: 200,
          //   modifiers: 'shift',
          //   autoResize: false,
          // },
          connecting: {
            router: {
              name: 'manhattan',
            },
            connector: {
              name: 'rounded',
              args: {
                radius: 5,
              },
            },
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
            snap: {
              radius: 20,
            },
            createEdge() {
              return new Shape.Edge({
                attrs: {
                  line: {
                    //  sourceMarker: 'block', // 实心箭头
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: null
                  }
                },
                labels: [{
                  attrs: {
                    body: {
                      stroke: '#5F95FF',
                    },
                    text: {
                      text: ''
                    }
                  },
                  position: {
                    distance: 0.5,
                    angle: 180,
                    options: {
                      keepGradient: true,
                      ensureLegibility: true
                    }
                  }
                }],
                tools: {
                  name: 'segments',
                  args: {
                    attrs: {fill: '#666'},
                  },
                },
                zIndex: -100,
              })
            },
            validateConnection({targetMagnet}) {
              return !!targetMagnet
            },
          },
          highlighting: {
            magnetAdsorbed: {
              name: 'stroke',
              args: {
                attrs: {
                  fill: '#5F95FF',
                  stroke: '#5F95FF',
                },
              },
            },
          },
          resizing: true,
          rotating: true,
          // selecting: {
          //   enabled: true,
          //   rubberband: true,
          //   rubberEdge: true,
          //   showNodeSelectionBox: true,
          // },
          snapline: true,
          keyboard: true,
          clipboard: true,
        })
        this.graph.centerContent()
        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
            this.graph.copy(cells)
          }
          return false
        })

        this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
            this.graph.cut(cells)
          }
          return false
        })
        this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
          if (!this.graph.isClipboardEmpty()) {
            const cells = this.graph.paste({offset: 32})
            this.graph.cleanSelection()
            this.graph.select(cells)
          }
          return false
        })
// select all
        this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
          const nodes = this.graph.getNodes()
          if (nodes) {
            this.graph.select(nodes)
          }
        })
//delete
        this.graph.bindKey('delete', () => {
          this.deleteCompment()
        })
// zoom
        this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
          const zoom = this.graph.zoom()
          if (zoom < 1.5) {
            this.graph.zoom(0.1)
          }
        })

        this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
          const zoom = this.graph.zoom()
          if (zoom > 0.5) {
            this.graph.zoom(-0.1)
          }
        })

        this.graph.on('blank:click', ({cell}) => {
          this.type = 'grid'

        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          if (this.isFirstLoad) {
            return
          }
          if (node.getData().isSelfCreated) {
            return
          }
          const nodeType = node.getData().nodeType; // 获取节点的类型
          const nodeObj = node
          console.log(123)
          let intersectNode = this.findIntersectsNode(node)
          if (intersectNode) { // 当有节点相交 ==>并行
            this.addBranch(intersectNode, nodeObj)
            return
          } else {
            let isSelfCreated = null
            try {
              isSelfCreated = node.getData().isSelfCreated
            } catch (e) {
            }
            if (!isSelfCreated) {
              let intersectEdge = this.findIntersectsEdge(this.graph, node)
              if (intersectEdge) { // 当有边相交 ==>串联
                this.addNodeAndInsertEdge(intersectEdge, nodeObj)
                return
              } else {
                //提示
              }
            }
          }
          node.remove()
        });
        this.graph.on('cell:contextmenu', ({cell}) => {
          // this.type.value = cell.isNode() ? "node" : "edge"
          this.type = cell.isNode() ? 'node' : 'edge'
          /*          this.shape = cell.shape
                    this.id = cell.id*/
          if (this.type === 'node') {
            //this.nodeType = cell.getData().nodeType
            this.$refs.configNode.loadData(cell)
          } else {
            this.$refs.configNode.loadData(cell)
          }
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
        })

        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {
          e.stopPropagation()
          view.cell.remove()
        })

        this.graph.on('node:customevent', ({name, view, e}) => {
          if (name === 'node:delete') {
            e.stopPropagation()
            view.cell.remove()
          }
        })
        // 双击编辑
        this.graph.on('cell:dblclick', ({cell, e}) => {
          const isNode = cell.isNode()
          const name = cell.isNode() ? 'node-editor' : 'edge-editor'
          cell.removeTool(name)
          cell.addTools({
            name,
            args: {
              event: e,
              attrs: {
                backgroundColor: isNode ? '#EFF4FF' : '#FFF',
                text: {
                  fontSize: 16,
                  fill: '#262626',
                },
              },
            },
          })
        })

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

        this.graph.on('edge:mouseenter', ({cell}) => {
          // alert(123)
          cell.addTools([
            {
              name: 'source-arrowhead',
            },
            {
              name: 'target-arrowhead',
              args: {
                attrs: {
                  fill: 'red',
                },
              },
            },
            {
              name: 'segments',
              args: {snapRadius: 20, attrs: {fill: '#444'}}
            },
          ])
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
          cell.removeTools()
        })

        this.isInitialization = true
        await this.getDiagram(this.dataForm.id)
      },
      showPorts(ports, show) {

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

@@ -151,8 +151,6 @@
          title:row.modelName + '模型设计'
        }
        this.$emit('collapseTransitionChange', param)


      }
    }
  }

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

@@ -935,7 +935,7 @@
              for (let i = 1; i <= node.getData().basicUnitNum; i++) {
                if (deviceNoArr.findIndex(item => item === i) === -1) {
                  no = i
                  if (node.getData().basicUnitNum > 1) {
                  if (node.getData().basicUnitNum >= 1) {
                    node.getData().deviceNo = i
                    node.attr('text/text', node.attr('text/text') + '-' + i)
                  }