组合图

wente

2024-04-30 225616b409fff50107ad7e9c790c96a65434e35d

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

@@ -54,486 +54,503 @@
</template>

<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 {setHartBeat} from '@/commonJS/common';
import Cookies from 'js-cookie'
  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 {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'

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

  },*/
  props: {
    projectId: {
      type: String
    },
    diagarmId: {
      type: String
    },
    pageCode: {
      default: 'wlt_pz'
    },
    flowCode: {
      type: String,
      default: 'wltFlow'
    },
  },
  components: {
    ConfigNode,
    ConfigEdge
  },
  data() {
    return {
      nodeAdded: false,
      connectNode: {},
      modelId: '',
      modelName: '',
      modelType: '',
      timer: null,
      imgsList: [
        {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: 'switch',
          imgName: 'switch',
          nodeType: 'switch',
          imgWidth: 60,
          imgHeight: 60,
          imgId: '5',
          data: {}
        },
        {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
      ],
      imgsList2: [
        // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
      ],
      combiningImages: [
        {
          imgPath: 'switch',
          imgName: 'switch',
          nodeType: 'switch',
          imgWidth: 60,
          imgHeight: 60,
          imgId: '5',
          data: {}
        },
        {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}}
      ],
      nodeType: '',
      first: true,
      shape: '',
      projectList: [],
      diagramList: [],
      diagramId: '',
      projectId: '',
      diagramJson: '',
      diagramIdDisabled: false,
      dataForm: {
        id: null,
        content: null,
        publishContent: null,
        hasPublish: 0,
        urlPref: '',
    },*/
    props: {
      projectId: {
        type: String
      },
      // emptyJson: {
      //   // 节点
      //   nodes: [
      //     {
      //       id: 'node1', // String，可选，节点的唯一标识
      //       width: 500,   // Number，可选，节点大小的 width 值
      //       height: 300,  // Number，可选，节点大小的 height 值
      //       label: '该项目还未配置厂家网络图',
      //       attrs: {
      //         body: {
      //           strokeWidth: 0
      //         },
      //       }
      //       //   text: {
      //       //     text: '该项目还未编制网络图',
      //       //     // fontSize: 56,
      //       //     fill: 'rgba(0,0,0,0.7)'
      //       //   },
      //       // },
      //     }
      //   ],
      // },
      type: '',
      id: '',
      graph: null,
      globalGridAttr: {
        productType: '',
        voteNum: '',
        repairMttcr: '',
        repairMttcrOther: '',
        repairDistribType: '',
        reliabDistribType: '',
        taskMtbcfOther: '',
        isRepair: 0,
        taskMtbcf: '',
        numberInputValue: '',
        statusImg: '',
        nodeTypeExt: '',
        type: 'mesh',
        size: 10,
        color: '#e5e5e5',
        thickness: 1,
        colorSecond: '#d0d0d0',
        thicknessSecond: 1,
        factor: 4,
        bgColor: '#e5e5e5',
        showImage: true,
        repeat: 'watermark',
        position: 'center',
        bgSize: JSON.stringify({width: 150, height: 150}),
        opacity: 0.1,

        stroke: '#5F95FF',
        strokeWidth: 1,
        connector: 'rounded',
        router: 'manhattan',
        label: '',
        nodeStroke: '#5F95FF',
        nodeStrokeWidth: 1,
        nodeFill: '#ffffff',
        nodeFontSize: 12,
        nodeColor: '#080808',
        nodeText: '',
        nodeDate: '',
        nodeUsers: '',
        nodeDataDate: '',
        nodeDataText: '',
        dataId: '',
        inspectName: '',
        distance: 0.5,
        angle: 0,
      diagarmId: {
        type: String
      },
      isReady: false,
      curCel: Cell,
      left_p: document.documentElement.clientHeight - 100,
      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: [
      pageCode: {
        default: 'wlt_pz'
      },
      flowCode: {
        type: String,
        default: 'wltFlow'
      },
    },
    components: {
      ConfigNode,
      ConfigEdge
    },
    data() {
      return {
        hasMoveNode: false,
        hasMoveSingleNode: null,
        nodeAdded: false,
        connectNode: {},
        modelId: '',
        modelName: '',
        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: {}},
          {
            id: 'top1',
            group: 'top',
            imgPath: 'connect',
            imgName: 'connect',
            nodeType: 'connect',
            imgWidth: 30,
            imgHeight: 30,
            imgId: '3',
            data: {}
          },
          {
            id: 'right1',
            group: 'right',
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '5',
            data: {}
          },
          {
            id: 'bottom1',
            group: 'bottom',
            imgPath: 'parallel',
            imgName: 'parallel',
            nodeType: 'parallel',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            data: {}
          },
          {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
          {
            imgPath: 'dashedBox',
            imgName: 'dashedBox',
            nodeType: 'dashedBox',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            data: {}
          },
          {
            id: 'left1',
            group: 'left',
            imgPath: 'bridgeConnection',
            imgName: 'bridgeConnection',
            nodeType: 'bridgeConnection',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            data: {}
          },
        ],
      }
    }
  },
  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')
    }
  },
  mounted() {
    //this.initDigram()
    this.type = 'grid'
  },
  methods: {
    init(row) {
      this.modelName = row.modelName
      this.dataForm.id = row.id
      // this.productId = row.productId
      // this.getProduct(row.productId)
      this.initDigram(row.productId)
      console.log(this.dataForm, 'init(row){')
    },
    async getDiagram(modelId) {
      let params = {
        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)) {
        this.dataForm = res.data
        console.log(this.dataForm, 'this.dataForm in getDiagram')
        if (this.dataForm.content != '') {
          this.diagramJson = JSON.parse(this.dataForm.content)
        imagesList2: [
          // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
        ],
        nodeType: '',
        first: true,
        shape: '',
        projectList: [],
        diagramList: [],
        diagramId: '',
        projectId: '',
        diagramJson: '',
        diagramIdDisabled: false,
        dataForm: {
          id: null,
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
        },
        // emptyJson: {
        //   // 节点
        //   nodes: [
        //     {
        //       id: 'node1', // String，可选，节点的唯一标识
        //       width: 500,   // Number，可选，节点大小的 width 值
        //       height: 300,  // Number，可选，节点大小的 height 值
        //       label: '该项目还未配置厂家网络图',
        //       attrs: {
        //         body: {
        //           strokeWidth: 0
        //         },
        //       }
        //       //   text: {
        //       //     text: '该项目还未编制网络图',
        //       //     // fontSize: 56,
        //       //     fill: 'rgba(0,0,0,0.7)'
        //       //   },
        //       // },
        //     }
        //   ],
        // },
        type: '',
        id: '',
        graph: null,
        globalGridAttr: {
          productType: '',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
          repairDistribType: '',
          reliabDistribType: '',
          taskMtbcfOther: '',
          isRepair: 0,
          taskMtbcf: '',
          numberInputValue: '',
          statusImg: '',
          nodeTypeExt: '',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
          thickness: 1,
          colorSecond: '#d0d0d0',
          thicknessSecond: 1,
          factor: 4,
          bgColor: '#e5e5e5',
          showImage: true,
          repeat: 'watermark',
          position: 'center',
          bgSize: JSON.stringify({width: 150, height: 150}),
          opacity: 0.1,

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'rounded',
          router: 'manhattan',
          label: '',
          nodeStroke: '#5F95FF',
          nodeStrokeWidth: 1,
          nodeFill: '#ffffff',
          nodeFontSize: 12,
          nodeColor: '#080808',
          nodeText: '',
          nodeDate: '',
          nodeUsers: '',
          nodeDataDate: '',
          nodeDataText: '',
          dataId: '',
          inspectName: '',
          distance: 0.5,
          angle: 0,
        },
        isReady: false,
        curCel: Cell,
        left_p: document.documentElement.clientHeight - 100,
        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',
            },
          ],
        }
        // console.log(this.dataForm.content,'this.Diagram content')
        console.log(this.diagramJson, 'this.Diagram json')
        this.graph.fromJSON(this.diagramJson)
        this.graph.positionContent('left')
      }
    },
    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')
      }
    },
    mounted() {
      //this.initDigram()
      this.type = 'grid'
    },
    methods: {
      init(row) {
        this.modelName = row.modelName
        this.dataForm.id = row.id
        // this.productId = row.productId
        // this.getProduct(row.productId)
        this.initDigram(row.productId)
        console.log(this.dataForm, 'init(row){')
      },
      async getDiagram(modelId) {
        let params = {
          modelId: modelId,
          urlPref: window.SITE_CONFIG['apiURL'],
          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
          this.diagramJson = JSON.parse(this.dataForm.content)
          if(this.diagramJson.cells.length!==0){
            this.graph.fromJSON(this.diagramJson)
          }else {
            this.initCells()
          }
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

          this.graph.positionContent('left')
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          await this.clearDiagram()
        }
      },
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        // this.graph.centerContent()
        // this.graph.zoomToFit()
      } else {
        await this.clearDiagram()
      }
    },
    async clearDiagram() {
      this.dataForm.id = null
      // this.graph.fromJSON(this.emptyJson)
      this.graph.fromJSON('')
      // this.graph.centerContent()
      // this.graph.zoomToFit()
      // this.graph.freeze()
    },
    async initDigram(productId) {
      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,
        height: document.documentElement.clientHeight - 200,
        // async: true,
        grid: {
          visible: true,
        },
        autoResize: true,
        history: {
          enabled: true,
          beforeAddCommand(event, args) {
            if (args.key === 'tools') {
              console.log(args.key, 'event, args')
              return false
            }
        // this.graph.freeze()
      },
      async initDigram(productId) {
        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,
          height: document.documentElement.clientHeight - 200,
          // async: true,
          grid: {
            visible: true,
          },
        },
        // panning: {
        //   enabled: true,
        // },
        scroller: {
          enabled: true,
          pageVisible: true,
          autoResize: true,
          pageBreak: true,
          pannable: true,
          minVisibleWidth: 200,
          minVisibleHeight: 200,
          modifiers: 'shift',
        },
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: 'ctrl',
          minScale: 0.5,
          maxScale: 3,
        },
        connecting: {
          router: {
            name: 'manhattan',
            // args: {
            //   padding: 1,
            // },
          },
          connector: {
            name: 'rounded',
            args: {
              radius: 5,
          history: {
            enabled: true,
            beforeAddCommand(event, args) {
              if (args.key === 'tools') {
                // console.log(args.key, 'event, args')
                return false
              }
            },
          },
          anchor: 'center',
          connectionPoint: 'anchor',
          allowBlank: false,
          snap: {
            radius: 20,
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
            autoResize: true,
            pageBreak: true,
            pannable: true,
            minVisibleWidth: 200,
            minVisibleHeight: 200,
            modifiers: 'shift',
          },
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  targetMarker: 'classic'
                }
          mousewheel: {
            enabled: true,
            zoomAtMousePosition: true,
            modifiers: 'ctrl',
            minScale: 0.5,
            maxScale: 3,
          },
          connecting: {
            router: {
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
            },
            connector: {
              name: 'rounded',
              args: {
                radius: 5,
              },
              labels: [{
            },
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            snap: {
              radius: 20,
            },
            createEdge() {
              return new Shape.Edge({
                attrs: {
                  body: {
                    stroke: '#5F95FF',
                  line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: 'classic'
                  }
                },
                labels: [{
                  attrs: {
                    body: {
                      stroke: '#5F95FF',
                    },
                    text: {
                      text: ''
                    }
                  },
                  text: {
                    text: ''
                  position: {
                    distance: 0.5,
                    angle: 180,
                    options: {
                      keepGradient: true,
                      ensureLegibility: true
                    }
                  }
                }],
                tools: {
                  name: 'segments',
                  args: {
                    attrs: {fill: '#666'},
                  },
                },
                position: {
                  distance: 0.5,
                  angle: 180,
                  options: {
                    keepGradient: true,
                    ensureLegibility: true
                  }
                }
              }],
              tools: {
                name: 'segments',
                args: {
                  attrs: {fill: '#666'},
                zIndex: 0,
              })
            },
            validateConnection({targetMagnet}) {
              return !!targetMagnet
            },
          },
          highlighting: {
            magnetAdsorbed: {
              name: 'stroke',
              args: {
                attrs: {
                  fill: '#5F95FF',
                  stroke: '#5F95FF',
                },
              },
              zIndex: 0,
            })
          },
          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()
      const stencil = new Addon.Stencil({
        getDragNode: (node) => node.clone({keepId: true}),
        getDropNode: (node) => {
          if (node.getData().type && node.getData().type === 'imageNodes2') {
            return node.clone({keepId: true})
          } else {
            return node.clone()
          }
        },
        validateNode: (node) => {
          const existingNodes = this.graph.getNodes(); // 获取画布上所有节点
          for (const existingNode of existingNodes) {
            if (existingNode.id === node.id) {
              this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
              return false; // 取消添加节点操作
          resizing: true,
          rotating: true,
          selecting: {
            enabled: true,
            rubberband: true,
            rubberEdge: true,
            showNodeSelectionBox: true,
          },
          snapline: true,
          keyboard: true,
          clipboard: true,
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({keepId: true}),
          getDropNode: (node) => {
            const { width, height } = node.size()
            if(node.getData().type && node.getData().nodeType === 'dashedBox'){
              return node.clone().size(170, 90)
            }
          }
        },
        title: '',
        target: this.graph,
        stencilGraphWidth: 200,
        stencilGraphHeight: 280,
        collapsable: true,
        groups: [
          {
            title: '运算符号',
            name: 'group1',
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
            } else {
              return node.clone()
            }
          },
          {
            title: '组合图',
            name: 'combiningImages',
            graphHeight: 100,
          validateNode: (node) => {
            const existingNodes = this.graph.getNodes(); // 获取画布上所有节点
            for (const existingNode of existingNodes) {
              if (existingNode.id === node.id) {
                this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
                return false; // 取消添加节点操作
              }
            }
          },
          {
            title: '设备节点',
            name: 'group2',
            graphHeight: '',
            layoutOptions: {
              rowHeight: 90,
          title: '',
          target: this.graph,
          stencilGraphWidth: 200,
          stencilGraphHeight: 280,
          collapsable: true,
          groups: [
            {
              title: '运算符号',
              name: 'group1',
              graphHeight: 360,
            },
          }
        ],
        layoutOptions: {
          columns: 2,
          columnWidth: 105,
        },
      })
      document.getElementById('stencilImg').appendChild(stencil.container)
      const imageNodes = this.imgsList.map((item) =>
            {
              title: '设备节点',
              name: 'group2',
              graphHeight: '',
              layoutOptions: {
                rowHeight: 90,
              },
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 105,
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)
        const imageNodes = this.imagesList.map((item) =>
          this.graph.createNode({
            shape: 'image',
            // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
@@ -565,47 +582,14 @@
            },
            ports: {...this.ports},
          }),
      )
      const combiningImages = this.combiningImages.map((item) =>
          this.graph.createNode({
            shape: 'image',
            // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            width: item.imgWidth,
            height: item.imgHeight,
            data: {
              type: 'imageNodes',
              dataId: '',
              nodeType: item.nodeType,
              nodeTypeExt: '',
              voteNum: ''
            },
            attrs: {
              image: {
                'xlink:href': '/modelImg/' + item.imgPath + '.svg',
              },
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
              },
            },
            ports: {...this.ports},
          }),
      )
      let params = {
        productId: productId
      }
      let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
      this.imgsList2 = res.data
      console.log(this.imgsList2, 'getProduct(productId)234567890')
      const imageNodes2 = this.imgsList2.map((item) =>
        )
        let params = {
          productId: productId
        }
        let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
        this.imagesList2 = res.data
        console.log(this.imagesList2, 'getProduct(productId)234567890')
        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}`,
@@ -667,562 +651,715 @@
            ],
            ports: {...this.ports},
          }),
      )
      stencil.load(imageNodes, 'group1')
      stencil.load(imageNodes2, 'group2')
      stencil.load(combiningImages, 'combiningImages')
        )
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')

      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+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
      })
        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
        })
//undo redo
      this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
        if (this.graph.history.canUndo()) {
          this.graph.history.undo()
        }
        return false
      })
        this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
          if (this.graph.history.canUndo()) {
            this.graph.history.undo()
          }
          return false
        })

      this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
        if (this.graph.history.canRedo()) {
          this.graph.history.redo()
        }
        return false
      })
        this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
          if (this.graph.history.canRedo()) {
            this.graph.history.redo()
          }
          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', () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.$confirm('是否删除该节点?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.graph.removeCells(cells)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      })
// 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.reset()
        // this.type.value = "grid"
        this.type = 'grid'
        // this.id = cell.id
      })
      // 监听节点添加事件
      this.graph.on('node:added', ({node}) => {
        const nodeId = node.id; // 获取节点的唯一 ID
        const nodeObj = node
        const intersectNodes = [];
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const otherNode of this.graph.getNodes()) {
          if (otherNode === node) continue;
          const bbox1 = node.getBBox();
          const bbox2 = otherNode.getBBox();
          if (this.isIntersect(bbox1, bbox2)) {
            intersectNodes.push(otherNode);
        this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
          const nodes = this.graph.getNodes()
          if (nodes) {
            this.graph.select(nodes)
          }
        }
        if (intersectNodes.length > 0) {
          // console.log('Nodes intersect with node:', node.id);
          console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 相交节点的对象
          intersectNodes.map(node => {
            this.addNodeAndConnect(node, nodeObj);
          })
        }
      });
      this.graph.on('cell:click', ({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
          console.log(this.nodeType, cell.id, 'this.nodeType')
        }
        console.log(this.shape, 'this.shape')
        // this.nodeOpt(this.id, this.globalGridAttr)
      })
      //单击边节点
      this.graph.on('edge:click', ({edge}) => {
        this.reset()
        edge.attr('line/stroke', 'orange')
        edge.prop('labels/0', {
          attrs: {
            body: {
              stroke: 'orange',
            },
          },

        })
      })
      // 单击node节点
      this.graph.on('node:click', ({node}) => {
      })
      // 控制连接桩显示/隐藏
      this.graph.on('node:delete', ({view, e}) => {
        e.stopPropagation()
        view.cell.remove()
      })
//delete
        this.graph.bindKey('delete', () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
            this.$confirm('是否删除该节点?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.graph.removeCells(cells)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          }
        })
// zoom
        this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
          const zoom = this.graph.zoom()
          if (zoom < 1.5) {
            this.graph.zoom(0.1)
          }
        })

      this.graph.on('node:customevent', ({name, view, e}) => {
        if (name === 'node:delete') {
        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.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          const nodeId = node.id; // 获取节点的唯一 ID
          const nodeObj = node
          const intersectNodes = [];
          // 检查除当前节点之外的所有节点的包围框是否相交
          for (const otherNode of this.graph.getNodes()) {
            if (otherNode === node) continue;
            const bbox1 = node.getBBox();
            const bbox2 = otherNode.getBBox();
            if (this.isIntersect(bbox1, bbox2)) {
              intersectNodes.push(otherNode);
            }
          }
          if (intersectNodes.length > 0) {
            // console.log('Nodes intersect with node:', node.id);
            console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 相交节点的对象
            intersectNodes.map(node => {
              this.addNodeAndConnect(node, nodeObj);
            })
          }
        });
        // 监听节点位置改变事件
        this.graph.on('node:change:position', ({node}) => {
          this.hasMoveNode = true
          this.hasMoveSingleNode = node
        });
        // 抬起
        this.graph.on('node:mouseup', ({e,x,y,node}) => {

          if (this.hasMoveNode) {
            const selectionNodes = this.graph.getSelectedCells().filter(node => node.isNode() )
            if (selectionNodes.length == 0){
              selectionNodes.push(this.hasMoveSingleNode)
            }
            //let selectionNodes = []
            console.log('横坐标：',x,'纵坐标：'+y)
            // let allNodes = this.graph.getNodes()
            //
            // for(let node of allNodes){
            //    if (this.graph.isSelected(node)){
            //      selectionNodes.push(node)
            //    }
            //
            // }
            // 获取包含指定坐标点的节点
            const nodes = this.graph.getNodes();
            let hasNodes = []
            for (let i = 0; i < nodes.length; i++) {
              const node = nodes[i];
              const bbox = node.getBBox();
              if (x>=bbox.x && x <= bbox.x + bbox.width && y>=bbox.y && y <= bbox.y + bbox.height) {
                if ( selectionNodes.indexOf(node)===-1) {
                  hasNodes.push(node);
                }
              }
            }
            if(hasNodes){}
            console.log('获取包含指定坐标点的节点集合',hasNodes)
            console.log('选中的节点集合：',selectionNodes)

            // if (selectionNodes.length>2)
            //   this.graph.addEdge({
            //     source: {cell: selectionNodes[0], port: 'left1'},
            //     target: {cell: selectionNodes[selectionNodes.length-1], port: 'right1'},
            //     router: {name: 'manhattan'},
            //     connector: {name: 'rounded'}
            //   })
            this.hasMoveNode = false
            this.hasMoveSingleNode = null


            // console.log('移动过节点（多个）再抬起鼠标后得到的节点',selectedNodes);
          }
        });
        this.graph.on('cell:click', ({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
            // console.log(this.nodeType, cell.id, 'this.nodeType')
          }
          // console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
          this.reset()
          edge.attr('line/stroke', 'orange')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: 'orange',
              },
            },

          })
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
        })
        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {
          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',
        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: {
                fill: 'red',
                backgroundColor: isNode ? '#EFF4FF' : '#FFF',
                text: {
                  fontSize: 16,
                  fill: '#262626',
                },
              },
            },
          },
          {
            name: 'segments',
            args: {snapRadius: 20, attrs: {fill: '#444'}}
          },
        ])
      })

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

      await this.getDiagram(this.dataForm.id)
    },
    showPorts(ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
    },
    reset() {
      this.graph.drawBackground({color: '#fff'})
      const nodes = this.graph.getNodes()
      const edges = this.graph.getEdges()
      nodes.forEach((node) => {
        node.attr('body/stroke', '#5F95FF')
      })
      edges.forEach((edge) => {
        edge.attr('line/stroke', '#5F95FF')
        edge.prop('labels/0', {
          attrs: {
            body: {
              stroke: '#5F95FF',
            },
          },
          })
        })
      })
    },
    async search() {
      await this.getDiagram();
    },
    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') {
          this.$alert('保存成功', '提示', {
            confirmButtonText: '确定'

        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()
        })

        await this.getDiagram(this.dataForm.id)
      },
      showPorts(ports, show) {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
      },
      reset() {
        this.graph.drawBackground({color: '#fff'})
        const nodes = this.graph.getNodes()
        const edges = this.graph.getEdges()
        nodes.forEach((node) => {
          node.attr('body/stroke', '#5F95FF')
        })
        edges.forEach((edge) => {
          edge.attr('line/stroke', '#5F95FF')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: '#5F95FF',
              },
            },
          })
        })
      },
      async search() {
        await this.getDiagram();
      },
      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') {
            this.$alert('保存成功', '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        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 => {
          if (res.msg === 'success') {
            this.$alert('解析成功', '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      leftAlign() {
        const NODE = this.graph.getSelectedCells()
        let leftX = null
        for (let a of NODE) {
          if (leftX == null || a.getBBox().x < leftX) {
            leftX = a.getBBox().x
          }
        }
      })
    },
    async analyzeDiagram() {
      console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
      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 => {
        if (res.msg === 'success') {
          this.$alert('解析成功', '提示', {
            confirmButtonText: '确定'
          })
        for (let a of NODE) {
          let y = a.getBBox().y
          a.position(leftX, y)
          // console.log(leftX, ':', y, '  x:y')
        }
      })
    },
    leftAlign() {
      const NODE = this.graph.getSelectedCells()
      let leftX = null
      for (let a of NODE) {
        if (leftX == null || a.getBBox().x < leftX) {
          leftX = a.getBBox().x
      },
      topAlign() {
        const NODE = this.graph.getSelectedCells()
        let topY = null
        for (let a of NODE) {
          console.log(a.getBBox(), 'a.getBBox()')
          if (topY == null || a.getBBox().y < topY) {
            topY = a.getBBox().y
          }
        }
      }
      for (let a of NODE) {
        let y = a.getBBox().y
        a.position(leftX, y)
        // console.log(leftX, ':', y, '  x:y')
      }
    },
    topAlign() {
      const NODE = this.graph.getSelectedCells()
      let topY = null
      for (let a of NODE) {
        console.log(a.getBBox(), 'a.getBBox()')
        if (topY == null || a.getBBox().y < topY) {
          topY = a.getBBox().y
        for (let a of NODE) {
          let x = a.getBBox().x
          a.position(x, topY)
        }
      }
      for (let a of NODE) {
        let x = a.getBBox().x
        a.position(x, topY)
        // console.log(leftX, ':', y, '  x:y')
      }
    },
    centerAlign() {
      const NODE = this.graph.getSelectedCells()
      let rightX = null
      let leftX = null
      for (let a of NODE) {
        if (leftX == null || a.getBBox().x < leftX) {
          leftX = a.getBBox().x
      },
      centerAlign() {
        const NODE = this.graph.getSelectedCells()
        let rightX = null
        let leftX = null
        for (let a of NODE) {
          if (leftX == null || a.getBBox().x < leftX) {
            leftX = a.getBBox().x
          }
        }
      }
      for (let a of NODE) {
        if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
          rightX = a.getBBox().x + a.getBBox().width
        for (let a of NODE) {
          if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
            rightX = a.getBBox().x + a.getBBox().width
          }
        }
      }

      let centerX = leftX + (rightX - leftX) / 2
        let centerX = leftX + (rightX - leftX) / 2

      for (let a of NODE) {
        let y = a.getBBox().y
        a.position(centerX - a.getBBox().width / 2, y)
        // console.log(leftX, ':', y, '  x:y')
      }
    },
    shuipingAlign() {
      const NODE = this.graph.getSelectedCells()
      let bottomY = null
      let topY = null
      for (let a of NODE) {
        if (topY == null || a.getBBox().y || 0 < topY) {
          topY = a.getBBox().y
        for (let a of NODE) {
          let y = a.getBBox().y
          a.position(centerX - a.getBBox().width / 2, y)
        }
      }
      for (let a of NODE) {
        if (bottomY == null || a.getBBox().y + a.getBBox().height > bottomY) {
          bottomY = a.getBBox().y + a.getBBox().height
      },
      shuipingAlign() {
        const NODE = this.graph.getSelectedCells()
        let bottomY = null
        let topY = null
        for (let a of NODE) {
          if (topY == null || a.getBBox().y || 0 < topY) {
            topY = a.getBBox().y
          }
        }
      }
        for (let a of NODE) {
          if (bottomY == null || a.getBBox().y + a.getBBox().height > bottomY) {
            bottomY = a.getBBox().y + a.getBBox().height
          }
        }

      let centerY = topY + (bottomY - topY) / 2
      for (let a of NODE) {
        let x = a.getBBox().x
        let centerHei = a.getBBox().height / 2
        a.position(x, centerY - centerHei)
      }
    },
    rightAlign() {
      const NODE = this.graph.getSelectedCells()
      let rightX = null
      for (let a of NODE) {
        if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
          rightX = a.getBBox().x + a.getBBox().width
        let centerY = topY + (bottomY - topY) / 2
        for (let a of NODE) {
          let x = a.getBBox().x
          let centerHei = a.getBBox().height / 2
          a.position(x, centerY - centerHei)
        }
      }
      for (let a of NODE) {
        let y = a.getBBox().y
        a.position(rightX - a.getBBox().width, y)
      }
    },
    bottomAlign() {
      const NODE = this.graph.getSelectedCells()
      let bottomY = null
      for (let a of NODE) {
        if (bottomY == null || (a.getBBox().y + a.getBBox().height) > bottomY) {
          bottomY = a.getBBox().y + a.getBBox().height
      },
      rightAlign() {
        const NODE = this.graph.getSelectedCells()
        let rightX = null
        for (let a of NODE) {
          if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
            rightX = a.getBBox().x + a.getBBox().width
          }
        }
      }
        for (let a of NODE) {
          let y = a.getBBox().y
          a.position(rightX - a.getBBox().width, y)
        }
      },
      bottomAlign() {
        const NODE = this.graph.getSelectedCells()
        let bottomY = null
        for (let a of NODE) {
          if (bottomY == null || (a.getBBox().y + a.getBBox().height) > bottomY) {
            bottomY = a.getBBox().y + a.getBBox().height
          }
        }

      for (let a of NODE) {
        let x = a.getBBox().x
        a.position(x, bottomY - a.getBBox().height)
      }
    },
    close() {
      if (this.timer) {
        window.clearInterval(this.timer)
      }
    },
    // 定义函数来检查两个包围框是否相交
    isIntersect(bbox1, bbox2) {
      return (
        for (let a of NODE) {
          let x = a.getBBox().x
          a.position(x, bottomY - a.getBBox().height)
        }
      },
      close() {
        if (this.timer) {
          window.clearInterval(this.timer)
        }
      },
      // 定义函数来检查两个包围框是否相交
      isIntersect(bbox1, bbox2) {
        return (
          bbox1.x < bbox2.x + bbox2.width &&
          bbox1.x + bbox1.width > bbox2.x &&
          bbox1.y < bbox2.y + bbox2.height &&
          bbox1.y + bbox1.height > bbox2.y
      )
    },
    addNodeAndConnect(node, nodeObj) { // node是画布原有的节点。nodeObj是当前拖拽的节点
      const nodeType = node.getData().nodeType  // 获取节点类型
      const edges = this.graph.getConnectedEdges(node); // 获取与原节点相关联的所有连接线
      let TopSum = 0 // 在原节点上方
      let BottomSum = 0 // 在原节点下方
      const edgesSum = edges.length
      if (nodeType !== 'node') {
        if (edges.length === 0) {
          if (!this.nodeAdded) {
            // 添加节点的操作
            this.connectNode = this.graph.addNode({
              shape: 'image',
              // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
              width: 30,
              height: 30,
              data: {
                type: 'imageNodes',
                dataId: '',
                nodeType: 'connect',
                nodeTypeExt: '',
                voteNum: ''
              },
              attrs: {
                image: {
                  'xlink:href': '/modelImg/connect.svg',
        )
      },
      addNodeAndConnect(node, nodeObj) { // node是画布原有的节点。nodeObj是当前拖拽的节点
        const nodeType = node.getData().nodeType  // 获取画布原有的节点类型
        const nodeObjType = nodeObj.getData().nodeType  // 获取当前拖拽的节点类型
        const edges = this.graph.getConnectedEdges(node); // 获取与原节点相关联的所有连接线
        let TopSum = 0 // 在原节点上方
        let BottomSum = 0 // 在原节点下方
        const edgesSum = edges.length
        if ((nodeType === 'end'|| nodeType === 'vote' || nodeType === 'switch' || nodeType === 'parallel') && nodeObjType === 'node') {
          if (edges.length === 0) {
            if (!this.nodeAdded) {
              // 添加节点的操作
              this.connectNode = this.graph.addNode({
                shape: 'image',
                // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
                width: 30,
                height: 30,
                data: {
                  type: 'imageNodes',
                  dataId: '',
                  signId:node.id,
                  nodeType: 'connect',
                  nodeTypeExt: '',
                  voteNum: ''
                },
                text: {
                  text: 'connect',
                  fontSize: 14,
                  refX: 0.5,
                  refY: '100%',
                  refY2: 4,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'top',
                attrs: {
                  image: {
                    'xlink:href': '/modelImg/connect.svg',
                  },
                  text: {
                    text: 'connect',
                    fontSize: 14,
                    refX: 0.5,
                    refY: '100%',
                    refY2: 4,
                    textAnchor: 'middle',
                    textVerticalAnchor: 'top',
                  },
                },
              },
              ports: {...this.ports},
            })
            // 设置标记为 true，表示已经添加过节点
            this.nodeAdded = true;
          }
          nodeObj.position(node.position().x - 240, node.position().y - (120 * edgesSum));
          this.connectNode.position(node.position().x - 480, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
        } else if (edges.length === 1) {
          // 将节点移动到指定的位置
          nodeObj.position(node.position().x - 240, node.position().y - (120 * edgesSum));
        } else {
          for (const edge of edges) {
            const sourcePointY = edge.getSourcePoint().y; // 获取连接线的起始点y坐标
            const targetPointY = edge.getTargetPoint().y; // 获取连接线的结束点y坐标
            console.log('原节点Y坐标' + node.position().y, '连接线起始Y坐标' + sourcePointY)
            if (targetPointY > sourcePointY) {
              TopSum++
            } else if (targetPointY < sourcePointY) {
              BottomSum++
                ports: {...this.ports},
              })
              // 设置标记为 true，表示已经添加过节点
              this.nodeAdded = true;
            }
            nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
            this.connectNode.position(node.position().x - 240, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
          } else if (edges.length === 1) {
            // 将节点移动到指定的位置
            nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
          } else {
            for (const edge of edges) {
              const sourcePointY = edge.getSourcePoint().y; // 获取连接线的起始点y坐标
              const targetPointY = edge.getTargetPoint().y; // 获取连接线的结束点y坐标
              console.log('原节点Y坐标' + node.position().y, '连接线起始Y坐标' + sourcePointY)
              if (targetPointY > sourcePointY) {
                TopSum++
              } else if (targetPointY < sourcePointY) {
                BottomSum++
              }
            }
            console.log('在原节点上方的连接线数量:' + TopSum, '在原节点下方的连接线数量:' + BottomSum)
            if (TopSum > BottomSum) {
              nodeObj.position(node.position().x - 120, node.position().y + (120 + (120 * BottomSum)))
            } else {
              nodeObj.position(node.position().x - 120, node.position().y - (120 + (120 * TopSum)));
            }
          }
          console.log('在原节点上方的连接线数量:' + TopSum, '在原节点下方的连接线数量:' + BottomSum)
          if (TopSum > BottomSum) {
            nodeObj.position(node.position().x - 240, node.position().y + (120 + (120 * BottomSum)))
          } else {
            nodeObj.position(node.position().x - 240, node.position().y - (120 + (120 * TopSum)));
          this.graph.addEdge({
            source: {cell: nodeObj, port: 'right1'},
            target: {cell: node, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
          if (this.nodeAdded) {
            console.log(this.connectNode, 'connectNode')
            this.graph.addEdge({
              source: {cell: this.connectNode, port: 'right1'},
              target: {cell: nodeObj, port: 'left1'},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
          }
        }
        if (nodeType === 'node' || (nodeType === 'dashedBox' && nodeObjType === 'dashedBox')) {
          // 遍历所有连接线并删除与给定节点对象相关的连接线
          console.log(edges, '所有有关联的连接线 edge')
          if (edges.length === 0) {
            this.graph.addEdge({
              source: {cell: node, port: 'right1'},
              target: {cell: nodeObj, port: 'left1'},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
            return nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
          } else {
            for (const edge of edges) {
              console.log(edge, '所有有关联的连接线 edge')
              if (edge.source.cell === node.id) { // 如果连接线的起始节点等于当前画布目标节点的ID
                const sourceNode = this.graph.getCellById(edge.source.cell); // 获取连接线的源节点对象
                const targetNode = this.graph.getCellById(edge.target.cell) // 获取连接线的目标节点对象
                console.log(sourceNode, targetNode, 'targetNode 目标节点对象')
                // edge.remove(); // 从图中删除该连接线
                nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y + (node.size().height - nodeObj.size().height) / 2);
                // edge.source = {cell: node, port: 'right1'}
                edge.target = {cell: nodeObj, port: 'left1'}
                // targetNode.position(nodeObj.position().x +nodeObj.getBBox().width+50, node.position().y);
                // this.graph.addEdge({
                //   source: {cell: node, port: 'right1'},
                //   target: {cell: nodeObj, port: 'left1'},
                //   router: {name: 'manhattan'},
                //   connector: {name: 'rounded'}
                // })
                this.graph.addEdge({
                  source: {cell: nodeObj, port: 'right1'},
                  target: {cell: targetNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
              } else {
                this.graph.addEdge({
                  source: {cell: node, port: 'right1'},
                  target: {cell: nodeObj, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
                nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
              }
            }
          }


        }
      },
      initCells(){
        const startNode = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 60,
          height: 60,
          data: {
            type: 'imageNodes',
            dataId: '',
            nodeType: 'start',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/start.svg',
            },
            text: {
              text: 'start',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        const dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 170,
          height: 90,
          data: {
            type: 'imageNodes',
            dataId: '',
            nodeType: 'dashedBox',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/dashedBox.svg',
            },
            text: {
              text: 'dashedBox',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        const endNode = this.graph.addNode({
          shape: 'image',
          width: 60,
          height: 60,
          data: {
            type: 'imageNodes',
            dataId: '',
            nodeType: 'end',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/end.svg',
            },
            text: {
              text: 'end',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        startNode.position(-600, 0);
        dashedBox.position(0, (startNode.size().height - dashedBox.size().height) / 2);
        endNode.position(600, 0);
        this.graph.addEdge({
          source: {cell: nodeObj, port: 'right1'},
          target: {cell: node, port: 'left1'},
          source: {cell: startNode, port: 'right1'},
          target: {cell: dashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        if (this.nodeAdded) {
          console.log(this.connectNode, 'connectNode')
          this.graph.addEdge({
            source: {cell: this.connectNode, port: 'right1'},
            target: {cell: nodeObj, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
        }
      } else {
          // 遍历所有连接线并删除与给定节点对象相关的连接线
        console.log(edges, '所有有关联的连接线 edge')
        if(edges.length === 0){
          this.graph.addEdge({
            source: {cell: node, port: 'right1'},
            target: {cell: nodeObj, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
           return nodeObj.position(node.position().x +node.getBBox().width+50, node.position().y);
        }else {
          for (const edge of edges) {
            console.log(edge, '所有有关联的连接线 edge')
            if (edge.source.cell === node.id) { // 如果连接线的起始节点等于当前画布目标节点的ID
              const sourceNode = this.graph.getCellById(edge.source.cell); // 获取连接线的源节点对象
              const targetNode = this.graph.getCellById(edge.target.cell) // 获取连接线的目标节点对象
              console.log(sourceNode, targetNode, 'targetNode 目标节点对象')
              // edge.remove(); // 从图中删除该连接线
              nodeObj.position(node.position().x +node.getBBox().width+50, node.position().y);
              // edge.source = {cell: node, port: 'right1'}
              edge.target = {cell: nodeObj, port: 'left1'}
              // targetNode.position(nodeObj.position().x +nodeObj.getBBox().width+50, node.position().y);
              // this.graph.addEdge({
              //   source: {cell: node, port: 'right1'},
              //   target: {cell: nodeObj, port: 'left1'},
              //   router: {name: 'manhattan'},
              //   connector: {name: 'rounded'}
              // })
              this.graph.addEdge({
                source: {cell: nodeObj, port: 'right1'},
                target: {cell: targetNode, port: 'left1'},
                router: {name: 'manhattan'},
                connector: {name: 'rounded'}
              })
            }else {
              this.graph.addEdge({
                source: {cell: node, port: 'right1'},
                target: {cell: nodeObj, port: 'left1'},
                router: {name: 'manhattan'},
                connector: {name: 'rounded'}
              })
              nodeObj.position(node.position().x +node.getBBox().width+50, node.position().y);
            }
          }
        }


      }
        this.graph.addEdge({
          source: {cell: dashedBox, port: 'right1'},
          target: {cell: endNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
      },
    },
  },

}
  }
</script>

<style>
#containerImg {
  display: flex;
  border: 1px solid #dfe3e8;
  height: 400px;
  width: 100% !important;
}
  #containerImg {
    display: flex;
    border: 1px solid #dfe3e8;
    height: 400px;
    width: 100% !important;
  }

.x6-graph-scroller.x6-graph-scroller-pannable {
  width: 100% !important;
}
  .x6-graph-scroller.x6-graph-scroller-pannable {
    width: 100% !important;
  }

#stencilImg {
  width: 100%;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
}
  #stencilImg {
    width: 100%;
    height: 100%;
    position: relative;
    border-right: 1px solid #dfe3e8;
  }

.x6-widget-stencil {
  position: relative;
  height: 100%;
}
  .x6-widget-stencil {
    position: relative;
    height: 100%;
  }

#stencilImg .x6-graph-svg-viewport {
  height: 100%;
}
  #stencilImg .x6-graph-svg-viewport {
    height: 100%;
  }

.x6-widget-stencil-content {
  position: relative;
  height: calc(100% - 32px);
}
  .x6-widget-stencil-content {
    position: relative;
    height: calc(100% - 32px);
  }

#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
  top: 0
}
  #stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
    top: 0
  }

</style>