修改

jinlin

2024-06-06 8c834663344b1cc9c2ca569e6911900edd407f73

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

@@ -48,12 +48,8 @@
          <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: 100%">
          </div>
          <config-node v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr"
                       :graph="graph"
                       :nodeType="nodeType"
                       :projectId="projectId"
                       :shape="shape"/>
          <config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/>
          <config-node ref="configNode" v-show="type === 'node'"/>
          <config-edge ref="configEdge" v-show="type === 'edge'"/>
        </div>
      </el-col>
    </el-row>
@@ -62,19 +58,15 @@

<script>
  import {Graph, Shape, Addon, Cell} from '@antv/x6'
  import ConfigNode from './ConfigNode/index.vue'
  import ConfigEdge from './ConfigEdge/index.vue'
  import {removeCurrentTabHandle} from '@/commonJS/common'
  import ConfigNode from './ConfigNode/configNode.vue'
  import ConfigEdge from './ConfigEdge/configEdge.vue'
  import {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'
  import {getUUID} from '../../../../packages/utils'
  import RBDDefault from './RBD-default.json'
  // import RBDDefault from './RBD-default.json'

  export default {
    name: 'RBD-edit-img',
    /*props: {

    },*/
    props: {
      projectId: {
        type: String
@@ -94,6 +86,425 @@
      ConfigNode,
      ConfigEdge
    },
    computed: {
      RBDDefault() {
        let url = `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`
        let result = `
        {
          "cells":
          [
            {
              "position": {
                "x": -600,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "start",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "${url}10011"
                }
              },
              "visible": true,
              "shape": "image",
              "id": "10000",
              "data": {
                "type": "imageNodes",
                "endNodeId": "20000",
                "dataId": "",
                "nodeType": "start",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 1
            },
            {
              "position": {
                "x": 0,
                "y": 0
              },
              "size": {
                "width": 100,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "dashedBox",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "${url}10015"
                }
              },
              "visible": true,
              "shape": "image",
              "id": 15000,
              "data": {
                "type": "imageNodes",
                "dataId": "",
                "nodeType": "dashedBox",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 2
            },
            {
              "position": {
                "x": 600,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "end",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "${url}10012"
                }
              },
              "visible": true,
              "shape": "image",
              "id": "20000",
              "data": {
                "type": "imageNodes",
                "startNodeId": "10000",
                "dataId": "",
                "nodeType": "end",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 3
            },
            {
              "shape": "edge",
              "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
              "router": {
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": "10000",
                "port": "right1"
              },
              "target": {
                "cell": 15000,
                "port": "left1"
              },
              "zIndex": 4
            },
            {
              "shape": "edge",
              "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
              "router": {
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": 15000,
                "port": "right1"
              },
              "target": {
                "cell": "20000",
                "port": "left1"
              },
              "zIndex": 5
            }
          ]
        }
        `
        return JSON.parse(result)
      }
    },
    data() {
      return {
        isFirstLoad: true,
@@ -106,26 +517,6 @@
        modelType: '',
        timer: null,
        imagesList: [
          // {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}},
          // {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}},
          // {
          //   imgPath: 'connect',
          //   imgName: 'connect',
          //   nodeType: 'connect',
          //   imgWidth: 30,
          //   imgHeight: 30,
          //   imgId: '3',
          //   data: {}
          // },
          // {
          //   imgPath: 'connect',
          //   imgName: 'bridge',
          //   nodeType: 'bridge',
          //   imgWidth: 50,
          //   imgHeight: 50,
          //   imgId: '12',
          //   data: {}
          // },
          {
            imgPath: 'parallel',
            imgName: 'parallel',
@@ -176,10 +567,15 @@
        diagramIdDisabled: false,
        dataForm: {
          id: null,
          pid: null,
          model_tag: '',
          model_name: '',
          product_id: null,
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
          nodeArr: []
        },
        type: '',
        id: '',
@@ -758,8 +1154,10 @@
          token: Cookies.get('token'),
        }
        let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
        if (res.data !== null && (res.data.content != null)) {
          this.dataForm = res.data
        if (res.data.content != null) {
          console.log(this.dataForm, 'getDiagram datafrom')
          console.log(res.data, 'getDiagram res.data')
          this.diagramJson = JSON.parse(this.dataForm.content)
          this.graph.fromJSON(this.diagramJson)
          this.isFirstLoad = false;
@@ -769,14 +1167,14 @@
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          this.graph.fromJSON(RBDDefault)
          this.graph.fromJSON(this.RBDDefault)
          this.isFirstLoad = false
        }
      },
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON(RBDDefault)
        console.log(this.RBDDefault, 'clearDiagram')
        this.graph.fromJSON(this.RBDDefault)
        this.graph.positionContent('left')
        this.isFirstLoad = false;
        // this.graph.centerContent()
@@ -805,9 +1203,6 @@
              }
            },
          },
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
@@ -828,9 +1223,6 @@
          connecting: {
            router: {
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
            },
            connector: {
              name: 'rounded',
@@ -997,9 +1389,10 @@
        }
        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;
        /*for(let i =0;i<this.imagesList2.length;i++){

        }*/
        console.log(this.imagesList2, 'getProduct(productId)234567890')
        const imageNodes2 = this.imagesList2.map((item) =>
          this.graph.createNode({
            shape: 'image',
@@ -1009,18 +1402,21 @@
            id: item.dataId, // 手动设置节点的 ID
            data: {
              type: 'imageNodes2',
              isRepair: item.isRepair,
              dataId: item.dataId,
              nodeType: item.nodeType,
              nodeTypeExt: item.nodeTypeExt,
              productType: item.productType,
              statusImg: item.statusImg,
              reliabDistribType: item.reliabDistribType,
              repairDistribType: item.repairDistribType,
              repairMttcr: item.repairMttcr,
              repairMttcrOther: item.repairMttcrOther,

              reliabDistribType: item.reliabDistribType ? item.reliabDistribType : 1,
              taskMtbcf: item.taskMtbcf,
              taskMtbcfOther: item.taskMtbcfOther,

              isRepair: item.isRepair,
              repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
              repairMttcr: item.repairMttcr,
              repairMttcrOther: item.repairMttcrOther,

              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
              voteNum: '',
@@ -1157,24 +1553,18 @@
            }
          }
          node.remove()

          /*//如果节点与节点相交
          console.log(node.position().x, node.position().x, 'node.position().x')
          if (nodeType === 'bridgeConnection') {
            this.getBridgeConnection()
          }*/
        });
        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
          /*          this.shape = cell.shape
                    this.id = cell.id*/
          if (this.type === 'node') {
            this.nodeType = cell.getData().nodeType
            // console.log(this.nodeType, cell.id, 'this.nodeType')
            //this.nodeType = cell.getData().nodeType
            this.$refs.configNode.loadData(cell)
          } else {
            this.$refs.configNode.loadData(cell)
          }
          // console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
@@ -1422,6 +1812,16 @@
      },
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        const nodes = this.graph.getNodes()
        let nodeArr2 = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const node of nodes) {
          console.log(node, 'saveDiagram node')
          if (node.getData().nodeType == 'node' && node.getData().productType != 'product_xdy' && node.getData().dataId) {
            nodeArr2.push(node.getData().dataId)
          }
        }
        this.dataForm.nodeArr = nodeArr2
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        console.log(this.dataForm, 'dataFrom')
@@ -1435,6 +1835,15 @@
      },
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        const nodes = this.graph.getNodes()
        let nodeArr2 = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const node of nodes) {
          if (node.getData().nodeType === 'node' && node.getData().productType !== 'product_xdy' && node.getData().dataId) {
            nodeArr2.push(node.getData().dataId)
          }
        }
        this.dataForm.nodeArr = nodeArr2
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {