新增产品节点上设置关系，可设置项为“无/旁联/表决”

xyc

2024-03-28 f3ad14f8af7fb651426d1ee617e7ecb9d3fc9aab

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

@@ -3,7 +3,7 @@
    <el-row :gutter="[8,8]">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div class="fa-card-a" style="height: 100%">
          <div  style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
@@ -157,6 +157,7 @@
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
        },
        // emptyJson: {
        //   // 节点
@@ -184,7 +185,8 @@
        id: '',
        graph: null,
        globalGridAttr: {
          voteSum: '',
          productType:'',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
          repairDistribType: '',
@@ -335,19 +337,24 @@
      },
      async getDiagram(modelId) {
        let params = {
          modelId: modelId
          modelId: modelId,
          urlPref: window.SITE_CONFIG['apiURL'],
          token: Cookies.get('token'),
        }
        let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
        console.log(res, 'async getDiagram( res')
        if (res.data !== null && res.data.content != null) {
        if (res.data !== null && (res.data.content != null)) {
          this.dataForm = res.data
          console.log(this.dataForm, 'this.dataForm in getDiagram')
          this.diagramJson = JSON.parse(this.dataForm.content)
          if(this.dataForm.content!=''){
            this.diagramJson = JSON.parse(this.dataForm.content)
          }
          // console.log(this.dataForm.content,'this.Diagram content')
          console.log(this.diagramJson, 'this.Diagram json')
          this.graph.fromJSON(this.diagramJson)
          this.graph.centerContent()
          this.graph.zoomToFit()
          this.graph.positionContent('left')
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          await this.clearDiagram()
        }
@@ -356,8 +363,8 @@
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        this.graph.centerContent()
        this.graph.zoomToFit()
        // this.graph.centerContent()
        // this.graph.zoomToFit()
        // this.graph.freeze()
      },
      async initDigram(productId) {
@@ -372,15 +379,16 @@
          grid: {
            visible: true,
          },
          onToolItemCreated({tool}) {
            const handle = tool
            const options = handle.options
            if (options && options.index % 2 === 1) {
              tool.setAttrs({fill: 'red'})
            }
          },
          autoResize: true,
          history: true,
            history: {
                enabled: true,
                beforeAddCommand(event, args) {
                    if (args.key==='tools') {
                        console.log(args.key,'event, args')
                        return false
                    }
                },
            },
          // panning: {
          //   enabled: true,
          // },
@@ -450,6 +458,12 @@
                    }
                  }
                }],
                tools: {
                  name: 'segments',
                  args: {
                    attrs: { fill: '#666' },
                  },
                },
                zIndex: 0,
              })
            },
@@ -485,6 +499,7 @@
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({ keepId: true }),
          getDropNode(node) {
            let {width, height} = node.size()
            if (node.getData().imgWidth) {
@@ -493,31 +508,33 @@
            if (node.getData().imgHeight) {
              height = node.getData().imgHeight
            }
            console.log(node.getData().imgWidth, node.getData().imgHeight, 'node.size()')
            return node.clone().size(width, height)
            return node.clone({ keepId: true }).size(width, height)
          },
        // 返回一个新的节点作为实际放置到画布上的节点
            validateNode(node){
              console.log(node.id)
            },
          title: '',
          target: this.graph,
          stencilGraphWidth: 230,
          stencilGraphHeight: 300,
          collapsable: false,
            stencilGraphWidth: 200,
            stencilGraphHeight: 280,
            collapsable: true,
          groups: [
            {
              title: '运算符号',
              name: 'group1',
              collapsable: false
            },
            {
              title: '设备节点',
              name: 'group2',
              collapsable: false
                graphHeight: '',
                layoutOptions: {
                    rowHeight: 90,
                },
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 110,
            // rowHeight: 75,
            columnWidth: 105,
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)
@@ -532,7 +549,8 @@
            data: {
              dataId: '',
              nodeType: item.nodeType,
              nodeTypeExt: ''
              nodeTypeExt: '',
              voteNum:''
            },
            attrs: {
              text: {
@@ -563,8 +581,9 @@
            imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
            data: {
              isRepair: false,
              isRepair: item.isRepair,
              dataId: item.dataId,
              nodeType: item.nodeType,
              nodeTypeExt: item.nodeTypeExt,
@@ -576,9 +595,9 @@
              repairMttcrOther: item.repairMttcrOther,
              taskMtbcf: item.taskMtbcf,
              taskMtbcfOther: item.taskMtbcfOther,
              voteSum: '',
              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth
              imgWidth: item.imgWidth,
              voteNum:'',
            },
            attrs: {
              text: {
@@ -718,7 +737,7 @@
          this.id = cell.id
          if (this.type === 'node') {
            this.nodeType = cell.getData().nodeType
            console.log(this.nodeType, 'this.nodeType')
            console.log(this.nodeType,cell.id,'this.nodeType')
          }
          console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
@@ -799,7 +818,7 @@
          this.showPorts(ports, false)
        })

        this.graph.on('edge:mouseenter', ({cell, view}) => {
        this.graph.on('edge:mouseenter', ({cell}) => {
          // alert(123)
          cell.addTools([
            {
@@ -813,15 +832,11 @@
                },
              },
            },
          ])
          cell.addTools(
            [
              {
                name: 'segments',
                args: {snapRadius: 20, attrs: {fill: '#444'}}
              }
            ]
          )
                  name: 'segments',
                  args: {snapRadius: 20, attrs: {fill: '#444'}}
              },
          ])
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
@@ -889,6 +904,7 @@
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        console.log(this.dataForm, 'dataFrom')
        await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
@@ -901,7 +917,7 @@
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        console.log(this.dataForm, 'dataFrom')
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$alert('解析成功', '提示', {
@@ -1055,10 +1071,15 @@
    position: relative;
    height: 100%;
  }

#stencilImg .x6-graph-svg-viewport{
    height: 100%;
}
  .x6-widget-stencil-content {
    position: relative;
    height: 100%;
  height: calc(100% - 32px);
}
#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content{
    top:0
  }

</style>