修改

jinlin

2024-05-10 72952f7989bac610b6250f451cc97ec6c4e7ac1c

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

@@ -1,71 +1,49 @@
<template>
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="4">
      <el-col :span="3">
        <div :style="'height:' +left_p+'px'">
          <div class="fa-card-a" style="height: 100%">
          <div style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
      <el-col :span="21">
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
              <el-input placeholder="搜索施工内容" v-model="dataForm.modelId" clearable class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
              </el-input>
            </el-form-item>

              <el-form-item>
                  <el-button type="primary" @click="saveDiagram()">保存</el-button>
                  <el-button type="primary" @click="analyzeDiagram()">解析</el-button>
              </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="左对齐" placement="left">
                  <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
                             @click="leftAlign()"><i style="font-size: 2rem;"
                                                     class="wt-iconfont icon-zuoduiqi"></i></el-button>
                </el-tooltip>
              模型名称：{{ modelName }}
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="centerAlign()"><i style="font-size: 2rem;"
                                                       class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
                </el-tooltip>
              <el-button type="primary" @click="saveDiagram()">暂存</el-button>
              <el-button type="primary" @click="analyzeDiagram()">保存</el-button>
              <el-button type="primary" @click="clearDiagram()">清空图形</el-button>
              <el-button @click="leftAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
              </el-button>
              <el-button @click="centerAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i>
              </el-button>
              <el-button @click="rightAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i>
              </el-button>
              <el-button @click="topAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i>
              </el-button>
              <el-button @click="shuipingAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i>
              </el-button>
              <el-button @click="bottomAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
              </el-button>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="右对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="rightAlign()"><i style="font-size: 2rem;"
                                                      class="wt-iconfont icon-youduiqi"></i></el-button>
                </el-tooltip>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="topAlign()"><i style="font-size: 2rem;"
                                                    class="wt-iconfont icon-dingduiqi"></i></el-button>
                </el-tooltip>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="shuipingAlign()"><i style="font-size: 2rem;"
                                                         class="wt-iconfont icon-shuipingduiqi"></i></el-button>
                </el-tooltip>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="bottomAlign()"><i style="font-size: 2rem;"
                                                       class="wt-iconfont icon-diduiqi"></i></el-button>
                </el-tooltip>
              <el-button @click="undo()">撤销</el-button>
              <el-button @click="redo()">重做</el-button>
            </el-form-item>
          </el-form>
          <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
        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"
@@ -85,6 +63,9 @@
  import ConfigEdge from './ConfigEdge/index.vue'
  import {removeCurrentTabHandle} from '@/commonJS/common'
  import {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'
  import {getUUID} from '../../../../packages/utils'
  import RBDDefault from './RBD-default.json'

  export default {
    name: 'RBD-edit-img',
@@ -112,19 +93,76 @@
    },
    data() {
      return {
        isFirstLoad: true,
        hasMoveNode: false,
        hasMoveSingleNode: null,
        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:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
          {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
          {imgPath:'switchRight',imgName:'switch',nodeType:'switch',imgWidth:60,imgHeight:60,imgId:'5',data:{}},
          {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
        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',
            nodeType: 'parallel',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '9',
            data: {}
          },
          {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
          {
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '5',
            data: {}
          },
          {
            imgPath: 'bridgeConnection',
            imgName: 'bridgeConnection',
            nodeType: 'bridgeConnection',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '10',
            data: {}
          },
          // {
          //   imgPath: 'dashedBox',
          //   imgName: 'dashedBox',
          //   nodeType: 'dashedBox',
          //   imgWidth: 60,
          //   imgHeight: 60,
          //   imgId: '10000',
          //   data: {}
          // },
        ],
        imgsList2:[
          {imgPath:'logo',imgName:'logo',nodeType:'node',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:'aaa'}},
        ],
        nodeType:'',
        imagesList2: [],
        nodeType: '',
        first: true,
        shape: '',
        projectList: [],
@@ -135,49 +173,27 @@
        diagramIdDisabled: false,
        dataForm: {
          id: null,
          projectId: null,
          diagramId: null,
          content: null,
          publishContent: null,
          hasPublish: 0,
          modelId: '1',
          urlPref: '',
        },
        flowInfo: {
          bizId: '',
          bizGroupId: '',
          flowCode: '',
          flowStepMark: '',
          status: 0,
          myStatus: 0
        },
        // 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: {
          statusImg:'',
          nodeTypeExt:'',
          productType: '',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
          repairDistribType: '',
          reliabDistribType: '',
          taskMtbcfOther: '',
          isRepair: 0,
          taskMtbcf: '',
          numberInputValue: '',
          statusImg: '',
          nodeTypeExt: '',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
@@ -194,7 +210,8 @@

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'normal',
          connector: 'rounded',
          router: 'manhattan',
          label: '',
          nodeStroke: '#5F95FF',
          nodeStrokeWidth: 1,
@@ -213,11 +230,11 @@
        },
        isReady: false,
        curCel: Cell,
        left_p: document.documentElement.clientHeight-100,
        left_p: document.documentElement.clientHeight - 100,
        ports: {
          groups: {
            top: {
              position: 'top',
              position: {name: 'top'},
              attrs: {
                circle: {
                  r: 4,
@@ -232,7 +249,7 @@
              },
            },
            right: {
              position: 'right',
              position: {name: 'right'},
              attrs: {
                circle: {
                  r: 4,
@@ -247,7 +264,7 @@
              },
            },
            bottom: {
              position: 'bottom',
              position: {name: 'bottom'},
              attrs: {
                circle: {
                  r: 4,
@@ -262,7 +279,7 @@
              },
            },
            left: {
              position: 'left',
              position: {name: 'left'},
              attrs: {
                circle: {
                  r: 4,
@@ -279,15 +296,19 @@
          },
          items: [
            {
              id: 'top1',
              group: 'top',
            },
            {
              id: 'right1',
              group: 'right',
            },
            {
              id: 'bottom1',
              group: 'bottom',
            },
            {
              id: 'left1',
              group: 'left',
            },
          ],
@@ -301,164 +322,96 @@
        //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')
        this.projectChange2(this.$route.params.diagramId)
      }
    },
    mounted() {
      this.getProject()
      this.init()
      //this.initDigram()
      this.type = 'grid'
    },
    methods: {
      async finish() {
        if (await this.$tip.confirm('确定要进行提交操纵吗?')) {
          let submitForm = {
            params: {
              wfIdCode: 'wltFlow',
              bizId: this.dataForm.projectId,
              stepIdMark: this.pageCode
            }
          }
          let res = await this.$http.get('/wf/approvePass', submitForm)
          if (res.success) {
            await this.$alert('提交成功', '友情提示')
            removeCurrentTabHandle(this)
            this.$EventBus.$emit('taskRefeshEvent', '网络图')
          }
        }
      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 getProject() {
        //let res = await this.$http.get(`/maintain/projectNetworkDiagram/getProjectList`)
        let res = await this.$http.get(`/homeFunction/projectSelect`)

        this.projectList = res.data
        if (this.$store.state.user.isAdmin || this.$store.state.user.isAssistant) {
          this.projectList.push({id: '10000', name: '样式模板'})
        }
        if (this.$route.params.projectId) {
          this.projectId = this.$route.params.projectId
          this.diagramId = this.$route.params.diagramId
        } else {
          if (this.projectList.length > 0) {
            this.projectId = this.projectList[0].id
            this.diagramId = this.projectId
            console.log(this.diagramId, '123456789')
          }
        }
        await this.projectChange2(this.diagramId)
      },

     /* projectChange() {
        // alert(555)
        this.projectChange2(this.projectId)
      },

      async projectChange2(diagramId) {
        // alert(1)
      async getDiagram(modelId) {
        this.isFirstLoad = true;
        let params = {
          wfIdCodes: 'wltFlow',
          bizId: this.projectId,
          stepIdMark: 'wlt_pz'
          modelId: modelId,
          urlPref: window.SITE_CONFIG['apiURL'],
          token: Cookies.get('token'),
        }
        this.$http.get(`/wf/getFlowStepStatus`, {params: params}).then(res => {
          console.log(res, 'getFlowStepStatus res')
          if (res.data) {
            this.flowInfo = res.data
          }
        })

        this.diagramName = ''
        this.dataForm.projectId = this.projectId
        this.dataForm.diagramId = diagramId
        this.diagramId = diagramId
        if (!this.$store.state.user.isZcRole && !this.$store.state.user.isAdmin) {
          this.diagramIdDisabled = true
          console.log(this.$store.state.user.deptId, 'this.$store.state.user.deptId')
          this.diagramId = this.$store.state.user.deptId
          this.dataForm.diagramId = this.diagramId
        } else {
          this.diagramIdDisabled = false
        }
        //this.getDiagramIdList(this.projectId)
        let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagramCjList?projectId=${this.projectId}`)
        this.diagramList = res.data
        console.log(this.diagramList, 'this.diagramId asdfgh')
        if (this.diagramList.length > 0) {
          this.diagramId = this.diagramList[0].diagramId
          console.log(this.dataForm.diagramId, 'this.dataForm.diagramId.........................')
        }
        await this.getDiagram()
      },*/

/*      diagramIdChanges() {
        this.dataForm.diagramId = this.diagramId
        // this.diagramIdChange(this.diagramId)
        this.getDiagram()
      },*/
      async getDiagram() {
        let params = {
          modelId : this.dataForm.modelId
        }
          let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
          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)
            // console.log(this.dataForm.content,'this.Diagram content')
            console.log(this.diagramJson, 'this.Diagram json')
        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)
            this.graph.fromJSON(this.diagramJson)
            this.graph.centerContent()
            this.graph.zoomToFit()
          } else {
            this.dataForm.id = null
            // this.graph.fromJSON(this.emptyJson)
            this.graph.centerContent()
            this.graph.zoomToFit()
            // this.graph.freeze()
          }
          this.isFirstLoad = false;
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

          this.graph.positionContent('left')
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          this.graph.fromJSON(RBDDefault)
        }
      },
      init() {
      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 - 100,
          height: document.documentElement.clientHeight - 200,
          // async: true,
          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,
          // },
          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.1,
            maxScale: 10,
            minScale: 0.5,
            maxScale: 3,
          },
          connecting: {
            router: {
              name: 'normal',
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
@@ -466,10 +419,10 @@
            connector: {
              name: 'rounded',
              args: {
                radius: 8,
                radius: 5,
              },
            },
            // anchor: 'center',
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            snap: {
@@ -481,7 +434,7 @@
                  line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: 'classic'
                    targetMarker: {fill: 'none'}
                  }
                },
                labels: [{
@@ -502,7 +455,13 @@
                    }
                  }
                }],
                zIndex: 0,
                tools: {
                  name: 'segments',
                  args: {
                    attrs: {fill: '#666'},
                  },
                },
                zIndex: -100,
              })
            },
            validateConnection({targetMagnet}) {
@@ -520,10 +479,7 @@
              },
            },
          },
          resizing: {
            enabled: true,
            restricted: true
          },
          resizing: true,
          rotating: true,
          selecting: {
            enabled: true,
@@ -537,396 +493,160 @@
        })
        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(100, 60)
            }
            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; // 取消添加节点操作
              }
            }
          },
          title: '',
          target: this.graph,
          stencilGraphWidth: 230,
          stencilGraphHeight: 300,
          collapsable: false,
          stencilGraphWidth: 200,
          stencilGraphHeight: 280,
          collapsable: true,
          groups: [
            {
              title: '运算符号',
              name: 'group1',
              collapsable: false
              graphHeight: 200,
            },
            {
              title: '设备节点',
              name: 'group2',
              collapsable: false
              graphHeight: '',
              layoutOptions: {
                rowHeight: 90,
              },
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 110,
            // rowHeight: 75,
            columnWidth: 105,
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)

        Graph.registerNode(
            'custom-rect',
            {
              inherit: 'rect',
              width: 86,
              height: 26,
              zIndex: 10,
              data: {
                dataId: '',
                finishDate: '',
                inspectName: ''
              },
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: 'none',
                  fill: 'none',
                },
                text: {
                  // fontFamily: '仿宋',
                  fontSize: 20,
                  fill: '#000',
                },
                label: {
                  refX: 0,
                  refY: 0.5,
                  textAnchor: 'start',
                  textVerticalAnchor: 'middle',
                  textWrap: {
                    text: '文字模板',
                    width: -10,      // 宽度减少 10px
                    ellipsis: false,  // 文本超出显示范围时，自动添加省略号
                    breakWord: true, // 是否截断单词
                  }
                },
              },
              ports: {...this.ports},
        const imageNodes = this.imagesList.map((item) =>
          this.graph.createNode({
            shape: 'image',
            // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            width: item.imgWidth,
            height: item.imgHeight,
            id: item.imgId,
            data: {
              type: 'imageNodes',
              dataId: '',
              startNodeId: '',
              endNodeId: '20000',
              nodeType: item.nodeType,
              nodeTypeExt: '',
              voteNum: ''
            },
            true,
        )

        Graph.registerNode(
            'custom-polygon',
            {
              inherit: 'polygon',
              width: 86,
              height: 56,
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                // title:{
                //   text:'',
                //   refX: 40,
                //   refY: 38,
                //   fontSize: 20,
                //   fill: '#262626',
                //   'text-anchor': 'start',
                // },
                text: {
                  // refX: 40,
                  // refY: 20,
                  fontSize: 20,
                  fill: '#262626',
                  // 'text-anchor': 'start',
                },
            attrs: {
              image: {
                'xlink:href': '/modelImg/' + item.imgPath + '.svg',
              },
              // markup: [
              //   {
              //     tagName: 'polygon',
              //     selector: 'body',
              //   },
              //   {
              //     tagName: 'text',
              //     selector: 'title',
              //   },
              //   {
              //     tagName: 'text',
              //     selector: 'text',
              //   },
              // ],
              ports: {
                ...this.ports
                // items: [
                //   {
                //     group: 'top',
                //   },
                //   {
                //     group: 'bottom',
                //   },
                // ],
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
              },
            },
            true,
            ports: {...this.ports},
          }),
        )
        //
        Graph.registerNode(
            'custom-circle',
            {
              inherit: 'ellipse',
              width: 120,
              height: 120,
              data: {
                dataId: '',
                finishDate: ''
              },
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                //日期
                title: {
                  text: '',
                  fontSize: 12,
                  fill: '#262626',
                  refX: 0.5,
                  refY: '100%',
                  refY2: -10,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'bottom',
                },
                // 名称
                text: {
                  // fontFamily: '仿宋',
                  fontSize: 20,
                  fill: '#262626',
                  textWrap: {
                    width: 80,      // 宽度为 80px换行
                    ellipsis: false,  // 文本超出显示范围时，自动添加省略号
                    breakWord: true, // 是否截断单词
                  }
                },
              },
              markup: [
                {
                  tagName: 'ellipse',
                  selector: 'body',
                },
                {
                  tagName: 'text',
                  selector: 'title',
                },
                {
                  tagName: 'text',
                  selector: 'text',
                },
              ],
              ports: {...this.ports},
        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}`,
            width: 60,
            height: 60,
            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,
              taskMtbcf: item.taskMtbcf,
              taskMtbcfOther: item.taskMtbcfOther,
              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
              voteNum: '',
            },
            true,
        )
        Graph.registerNode(
            'custom-circle1',
            {
              inherit: 'ellipse',
              width: 65,
              height: 65,
              data: {
                dataId: '',
                finishDate: ''
              },
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
            attrs: {
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                //日期
                text: {
                  // fontFamily: '仿宋',
                  fontSize: 12,
                  text: '日期节点',
                  fill: '#262626',
                },
                refX: 0.5,
                refY: '100%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
              },
              ports: {...this.ports},
            },
            true,
        )
        Graph.registerNode(
            'custom-text',
            {
              inherit: 'text-block',
              width: 86,
              height: 56,
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                text: {
                  text: '专业',
                  fontSize: 20,
                  style: {
                    color: this.globalGridAttr.nodeColor
                  },
                  refX: '0',
                  refY: -0.5,
                  refY2: 1,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'middle',
                },
              },
              markup: [
                {
                  tagName: 'rect',
                  selector: 'body',
                },
                {
                  tagName: 'text',
                  selector: 'text',
                },
              ],
              ports: {...this.ports},
            },
            true,
        )
        Graph.registerNode(
            'rectangle',
            {
              width: 86,
              height: 56,
              attrs: {
                body: {
                  fill: '#FFF',
                  stroke: '#000',
                  strokeWidth: 1,
                },
                icon: {
                  class: 'el-icon-refresh', // Element UI图标的class名称
                  'xlink:href': '', // 如果需要使用SVG图标，请设置xlink:href属性来引入SVG文件
                  refX: '50%',
                  refY: '50%',
                  yAlignment: 'middle',
                  xAlignment: 'middle',
                },
              },
              markup: [
                {
                  tagName: 'rect',
                  selector: 'body',
                },
                {
                  tagName: 'i',
                  selector: 'icon',
                },
              ],
              ports: {...this.ports},
            },
            true
        )
        // 一级网络图的日期文字节点
        const r5 = this.graph.createNode({
          shape: 'custom-circle',
          data: {
            dataId: '',
            finishDate: '',
            inspectName: ''
          },
          label: '阶段',
        })

        // 二级网络图日期节点
        const r6 = this.graph.createNode({
          shape: 'custom-circle1',
          data: {
            dataId: '',
            finishDate: '',
            inspectName: ''
          },
        })
        // 二级网络图文字节点
        const r9 = this.graph.createNode({
          shape: 'custom-rect'
        })
        const imageNodes = this.imgsList.map((item) =>
            this.graph.createNode({
              shape: 'image',
              imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
              width: item.imgWidth,
              height: item.imgHeight,
              x: item.imgWidth,
              y: item.imgHeight,
              data: {
                dataId: '',
                nodeType: item.nodeType,
                nodeTypeExt: ''
              },
              attrs: {
                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},
            }),
        )
        const imageNodes2 = this.imgsList2.map((item) =>
            this.graph.createNode({
              shape: 'image',
              imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
              width:item.imgWidth,
              height:item.imgHeight,
              x:item.imgWidth,
              y:item.imgHeight,
              data: {
                dataId: item.data.dataId,
                nodeType: item.nodeType,
                nodeTypeExt: item.data.nodeTypeExt,
                statusImg:item.statusImg
              },
              attrs: {
                text:{
                  text: item.imgName,
                  fontSize: 14,
                  style: {
                    color: this.globalGridAttr.nodeColor
                  },
                  refX: 0.5,
                  refY: '100%',
                  refY2: 4,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'top',
                },
              },
              tools: [
                {
                  name: 'button',
                  args: {
                    markup: [
                      {
                        tagName: 'image',
                        selector: 'icon',
                        attrs: {
                          // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
                          'xlink:href':item.statusImg,
                          width: 30,
                          height: 30,
                          x: 0,
                          y: 0
                        }
            tools: [
              {
                name: 'button',
                args: {
                  markup: [
                    {
                      tagName: 'image',
                      selector: 'icon',
                      attrs: {
                        // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
                        'xlink:href': item.statusImg,
                        width: 30,
                        height: 30,
                        x: 0,
                        y: 0
                      }
                    ]
                  }
                    }
                  ]
                }
              ],
              ports: {...this.ports},
            }),
              }
            ],
            ports: {...this.ports},
          }),
        )
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')


        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
@@ -951,21 +671,6 @@
          }
          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+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()
@@ -976,23 +681,83 @@
//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: '已取消删除'
              })
            })
          console.log(cells, 'cells')
          if (cells.length === 1) {
            let node = cells[0]
            if (!node.isNode()) {
              this.$message({message: '请选中节点', type: 'warning'})
              return false; // 取消操作
            }
            let nodeType = node.getData().nodeType
            let deleteType = 0
            if (nodeType === 'node' || nodeType === 'dashedBox') {
              deleteType = 1
            } else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) {
              deleteType = 2
            }
            let canDelete = false
            if (nodeType === 'start' || nodeType === 'end') {
              this.$message({message: '无法删除起始和结束节点', type: 'warning'})
              return false; // 取消操作
            }
            if (deleteType > 0) {
              let startNode = null
              if (deleteType === 1) {
                startNode = node
              } else if (deleteType === 2) {
                startNode = this.graph.getCellById(node.getData().startNodeId)
              }
              let isSeriesNode = this.isSeriesNode(startNode, node)
              if (isSeriesNode) {
                let inLine = this.getInLinesOfNode(startNode)
                let outLine = this.getOutLinesOfNode(node)
                let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id)
                let inNode = isSeriesNode.inNode
                let outNode = isSeriesNode.outNode
                console.log(inLine, outLine, 'inLine,outLine')
                console.log(inNode, outNode, 'inNode,outNode')
                if (inLineIsToLine) {
                  inLine[0].target = {cell: outNode.id, port: 'left1'}
                } else {
                  outLine[0].source = {cell: inNode.id, port: 'right1'}
                }
                //提示是否要删除
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (deleteType === 1){
                    node.remove()
                  }
                  else{
                    this.deleteCombination(node)
                  }
                  this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                })
              }
              if (this.isMultipleBrach(node)) {
                //提示是否要删除
                if (deleteType === 1)
                  node.remove()
                else
                  this.deleteCombination(node)
                return
              }
            }
            //提示不能删除
          } else {
            //提示不能删除
            this.$message({message: '只能选中一个节点', type: 'warning'})
            return false; // 取消操作
          }
        })
// zoom
@@ -1016,17 +781,55 @@
          this.type = 'grid'
          // this.id = cell.id
        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          if (this.isFirstLoad) {
            return
          }
          if (node.getData().isSelfCreated) {
            return
          }
          const nodeType = node.getData().nodeType; // 获取节点的类型
          const nodeObj = node
          console.log(123)
          let intersectNode = this.findIntersectsNode(node)
          if (intersectNode) { // 当有节点相交 ==>并行
            this.addBranch(intersectNode, nodeObj)
            return
          } else {
            let isSelfCreated = null
            try {
              isSelfCreated = node.getData().isSelfCreated
            } catch (e) {
            }
            if (!isSelfCreated) {
              let intersectEdge = this.findIntersectsEdge(this.graph, node)
              if (intersectEdge) { // 当有边相交 ==>串联
                this.addNodeAndInsertEdge(intersectEdge, nodeObj)
                return
              } else {
                //提示
              }
            }
          }
          node.remove()

        this.graph.on('cell:click', ({cell}) => {
          /*//如果节点与节点相交
          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
          if(this.type==='node'){
          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')
          // console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
        })
        //单击边节点
@@ -1044,15 +847,6 @@
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
          this.reset()
          node.attr('line/stroke', 'orange')
          node.prop('labels/0', {
            attrs: {
              body: {
                stroke: 'orange',
              },
            },
          })
        })
        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {
@@ -1105,7 +899,7 @@
          this.showPorts(ports, false)
        })

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

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

        this.getDiagram()
        await this.getDiagram(this.dataForm.id)
      },
      showPorts(ports, show) {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
@@ -1159,42 +949,13 @@
          })
        })
      },
      // nodeOpt(id, globalGridAttr) {
      //   this.curCel = null
      //   if (id) {
      //     let cell = this.graph.getCellById(id)
      //     console.log(cell, 'let cell 123456')
      //     if (!cell || !cell.isNode()) {
      //       return
      //     }
      //     this.curCel = cell
      //     globalGridAttr.nodeStroke = cell.attr('body/stroke')
      //     globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
      //     globalGridAttr.nodeFill = cell.attr('body/fill')
      //     globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
      //     globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
      //     globalGridAttr.nodeColor = cell.attr('text/fill')
      //     globalGridAttr.nodeColor = cell.attr('title/fill')
      //     globalGridAttr.nodeColor = cell.attr('text/style/color')
      //     globalGridAttr.nodeColor =  cell.attr('title/style/color')
      //     globalGridAttr.nodeUsers = cell.attr('approve/users')
      //     globalGridAttr.nodeText = cell.attr('text/text')
      //     globalGridAttr.nodeDate = cell.attr('title/text')
      //     // let data={
      //     //   dataId:this.projectId,
      //     //   finishDate: globalGridAttr.nodeDate,
      //     // }
      //     cell.getData()
      //     console.log( cell.getData(),' cell.getData() 909')
      //   }
      //   return this.curCel;
      // },
      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') {
@@ -1207,7 +968,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('解析成功', '提示', {
@@ -1216,17 +977,6 @@
          }
        })
      },
      // AlignmentsChanges(val){
      //   console.log(val,'align.value')
      //     if(val ==='选项1'){
      //       console.log(val,'align.value')
      //        this.leftAlign()
      //     }
      //     if(val ==='选项2') {
      //       console.log('右对齐','align.value')
      //        this.rightAlign()
      //     }
      // },
      leftAlign() {
        const NODE = this.graph.getSelectedCells()
        let leftX = null
@@ -1253,7 +1003,6 @@
        for (let a of NODE) {
          let x = a.getBBox().x
          a.position(x, topY)
          // console.log(leftX, ':', y, '  x:y')
        }
      },
      centerAlign() {
@@ -1276,7 +1025,6 @@
        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() {
@@ -1329,42 +1077,651 @@
        }
      },
      close() {
        if (this.timer){
        if (this.timer) {
          window.clearInterval(this.timer)
        }
      },
    },
      // 定义函数来检查两个包围框是否相交
      findIntersectsNode(node) {
        const nodes = this.graph.getNodes()
        let intersectNodes = []
        const bbox1 = node.getBBox();
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const otherNode of nodes) {
          if (otherNode === node) continue;
          let nodeType = otherNode.getData().nodeType
          if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "dashedBox") {
            const bbox2 = otherNode.getBBox();
            if (bbox1.x < bbox2.x + bbox2.width &&
              bbox1.x + bbox1.width > bbox2.x &&
              bbox1.y < bbox2.y + bbox2.height &&
              bbox1.y + bbox1.height > bbox2.y) {
              intersectNodes.push(otherNode);
            }
          }
        }
        if (intersectNodes.length === 1) {
          //console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 相交节点的对象
          return intersectNodes[0]
        } else {
          //提示用户只能拖到一个有效的节点上
          return null
        }
      },
      // 相交的节点
      addBranch(graphNode, dragNode) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let graphNodeType = graphNode.getData().nodeType

        let dragNodeType = dragNode.getData().nodeType
        let offHeight = 50
        if (dragNodeType === 'node') {
          offHeight = 50
        } else if (dragNodeType === 'bridgeConnection') {
          offHeight = 230
        } else {
          offHeight = 70
        }
        if (graphNodeType === 'dashedBox') { //虚框
          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
          let startNode = null
          let endNode = null
          if (inEdges.length === 1) {
            let startNodeId = inEdges[0].source.cell
            startNode = this.graph.getCellById(startNodeId)
          }
          let outEdges = edges.filter(edge => edge.source.cell === graphNode.id)
          if (outEdges.length === 1) {
            let endNodeId = outEdges[0].target.cell
            endNode = this.graph.getCellById(endNodeId)
          }
          if (startNode && endNode) {
            let centerY = graphNode.position().y
            let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY)
            if (!result){
              dragNode.remove()
              return
            }
            inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
            outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}
            graphNode.remove()
          }
        } else { //并行结构
          const graphNodeStartNodeId = graphNode.getData().startNodeId  // 获取画布上原有节点的开始ID
          const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 通过开始ID得到初始节点对象
          let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 获取画布原有节点的y坐标
          let minY = graphNode.position().y
          let maxY = graphNode.position().y + graphNode.getBBox().height

          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
          //遍历这个组合里面所有节点， 修改minY，maxY

          let pointXY = {minY: minY, maxY: maxY}
          console.log(pointXY, 'old')
          this.getYRange(inEdges, graphNodeStartNode, pointXY)
          console.log(pointXY, 'new')

          let minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width
          let maxX = graphNode.position().x
          let centerX = minX + (maxX - minX) / 2
          let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30

          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          if (!result){
            dragNode.remove()
            return
          }
          this.graph.addEdge({
            source: {cell: graphNodeStartNode, port: 'right1'},
            target: {cell: result.newStartNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
          this.graph.addEdge({
            source: {cell: result.newEndNode, port: 'right1'},
            target: {cell: graphNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
        }
      },
      addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node') {
          width =60
          height = 60
        }else if (dragNodeType === 'dashedBox') {
          width =100
          height = 60
        } else if (dragNodeType === 'bridgeConnection') {
          width =550
          height = 115
          leftTopX = leftX - width/2
          leftTopY = centerY - height/2
          // leftTopY = 240/2
        } else {
          width =270
          height = 60
        }

        if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
          return false
        }

        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(leftX, centerY)
          return {newStartNode: dragNode, newEndNode: dragNode}
        } else if (dragNodeType === 'bridgeConnection') {
          return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
        } else {
          return this.createParallelBrach(leftTopX, leftTopY, dragNode)
        }
      },
      // 相交的边
      addNodeAndInsertEdge(graphEdge, dragNode) {
        let startNodeId = graphEdge.source.cell
        let startNode = this.graph.getCellById(startNodeId)
        let endNodeId = graphEdge.target.cell
        let endNode = this.graph.getCellById(endNodeId)
        if (startNode && endNode) {
          let centerY = dragNode.position().y
          let isRight = true;
          let startPort = 'right1'
          let endPort = 'left1'
          if (this.isTopBottom(graphEdge)) {
            startPort = 'bottom1'
            endPort = 'top1'
          }
          if (this.hasOtherLineToMyLine(graphEdge.id)) {
            let leftX = startNode.position().x + startNode.getBBox().width
            let rightX = endNode.position().x
            let centerX = dragNode.position().x + dragNode.getBBox().width / 2
            if (centerX - leftX < rightX - centerX) {
              isRight = false
            }
          }
          let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
          if (!result){
            dragNode.remove()
            return
          }
          if (isRight) {
            graphEdge.target = {cell: result.newStartNode.id, port: endPort}
            this.graph.addEdge({
              source: {cell: result.newEndNode, port: startPort},
              target: {cell: endNode, port: endPort},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })

          } else {
            this.graph.addEdge({
              source: {cell: startNode, port: startPort},
              target: {cell: result.newStartNode, port: endPort},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
            graphEdge.source = {cell: result.newEndNode.id, port: startPort}
          }
          // graphEdge.remove()
        }
      },
      findIntersectsEdge(graph, node) {
        const edges = graph.getEdges()
        const bbox = node.getBBox();
        const lines = [bbox.leftLine, bbox.rightLine, bbox.topLine, bbox.bottomLine];
        let res = [];
        edges.forEach((edge) => {
          const view = graph.findViewByCell(edge);
          lines.forEach((line) => {
            if (view) {
              if (view.path.intersectsWithLine(line)) {
                res.push(edge);
              }
            }
          })
        })
        const uniqueArr = res.filter((insEdge, index) =>
          res.findIndex(i => i.id === insEdge.id) === index);
        console.log(uniqueArr, 'uniqueArr')
        if (uniqueArr.length === 1) {
          return uniqueArr[0]
        } else {
          return false
        }
      },
      createParallelBrach(x, y, dragNode) {
        dragNode.position(x + 320, y - dragNode.size().height / 2)
        const connectNode = this.createConnectNode(x + 50, y)
        const dashedBox = this.createDashedBox(x + 150, y)
        dragNode.setData({startNodeId: connectNode.id})

        this.graph.addEdge({
          source: {cell: connectNode, port: 'right1'},
          target: {cell: dashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: dashedBox, port: 'right1'},
          target: {cell: dragNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        return {newStartNode: connectNode, newEndNode: dragNode}
        /*        this.graph.addEdge({
                  source: {cell: startNode, port: 'right1'},
                  target: {cell: connectNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
                this.graph.addEdge({
                  source: {cell: dragNode, port: 'right1'},
                  target: {cell: endNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })*/
      },
      createBridgeConnection(x, y, dragNode) {
        console.log(x,y,'leftX centerY')
        const leftTopDashedBox = this.createDashedBox(x + 40, y)
        const rightTopDashedBox = this.createDashedBox(x + 380, y)

        const leftConnectNode = this.createConnectNode(x, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x+ 210, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)

        const leftBottomDashedBox = this.createDashedBox(x+ 50, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 370 , y + 160)

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
        /*        this.graph.addEdge({
                  source: {cell: startNode, port: 'right1'},
                  target: {cell: leftConnectNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'},
                })
                this.graph.addEdge({
                  source: {cell: rightConnectNode, port: 'right1'},
                  target: {cell: endNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })*/
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox, port: 'right1'},
          target: {cell: rightTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox, port: 'right1'},
          target: {cell: rightBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

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

        this.graph.addEdge({
          source: {cell: edgeTop},
          target: {cell: alignCenterDashedBox, port: 'top1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: alignCenterDashedBox, port: 'bottom1'},
          target: {cell: edgeBottom},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        dragNode.remove()
        return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
      },
      createDashedBox(x, y) {
        const dashId = getUUID().toString()
        let dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 100,
          height: 60,
          id: dashId,
          data: {
            isSelfCreated: true,
            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},
        })
        dashedBox.position(x, y - dashedBox.size().height / 2)
        return dashedBox
      },
      createConnectNode(x, y) {
        const connectId = getUUID().toString()
        const dragNodeId = getUUID().toString()
        let connectNode = this.graph.addNode({
          shape: 'image',
          width: 10,
          height: 10,
          id: connectId,
          data: {
            isSelfCreated: true,
            type: 'imageNodes',
            endNodeId: dragNodeId,
            dataId: '',
            nodeType: 'connect',
            nodeTypeExt: '',
            voteNum: ''
          },
          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},
        })
        connectNode.position(x, y - connectNode.size().height / 2)
        return connectNode
      },
      createBridgeNode(x, y) {
        const connectId = getUUID().toString()
        const dragNodeId = getUUID().toString()
        let bridgeNode = this.graph.addNode({
          shape: 'image',
          width: 30,
          height: 30,
          id: connectId,
          data: {
            isSelfCreated: true,
            type: 'imageNodes',
            endNodeId: dragNodeId,
            dataId: '',
            nodeType: 'bridge',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/connect.svg',
            },
            text: {
              text: 'bridge',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        bridgeNode.position(x, y - bridgeNode.size().height / 2)
        return bridgeNode
      },
      getYRange(inEdges, startNode, pointXY) {
        for (let inEdge of inEdges) {
          let nodeId = inEdge.source.cell
          let node = this.graph.getCellById(nodeId)
          if (node.position().y < pointXY.minY) {
            pointXY.minY = node.position().y
          }
          if (node.position().y + node.getBBox().height > pointXY.maxY) {
            pointXY.maxY = node.position().y + node.getBBox().height
          }
          if (node.id === startNode.id) {
            continue
          }
          const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
          let inEdgesPrev = edges.filter(edge => edge.target.cell === node.id)
          this.getYRange(inEdgesPrev, startNode, pointXY)
        }
      },
      isSeriesNode(startNode, endNode) {
        let result = false
        let inNode = null
        let outNode = null
        let inEdges = this.getInLinesOfNode(startNode)
        console.log(inEdges, 'inEdges')
        if (inEdges.length === 1) {
          let isMyLineToOtherLine = this.isMyLineToOtherLine(inEdges[0])
          let hasOtherLineToMyLine = this.hasOtherLineToMyLine(inEdges[0].id)
          let inNodeId = inEdges[0].source.cell
          inNode = this.graph.getCellById(inNodeId)
          if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
            let inNodeType = inNode.getData().nodeType
            console.log(inNodeType, 'inNodeType')
            if ('node,dashedBox,parallel,switch,vote,bridge'.indexOf(inNodeType) > -1) {
              result = true
            }
          }
        }
        let outEdges = this.getOutLinesOfNode(endNode)
        console.log(outEdges, 'outEdges')
        if (outEdges.length === 1) {
          let isMyLineToOtherLine = this.isMyLineToOtherLine(outEdges[0])
          let hasOtherLineToMyLine = this.hasOtherLineToMyLine(outEdges[0].id)
          let outNodeId = outEdges[0].target.cell
          outNode = this.graph.getCellById(outNodeId)
          if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
            let outNodeType = outNode.getData().nodeType
            if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) {
              result = true
            }
          }
        }
        console.log(result, 'result')
        if (result && inNode && outNode) {
          console.log(inNode, outNode, 'inNode, outNode')
          return {inNode, outNode}
        } else {
          return false
        }
      },
      hasOtherLineToMyLine(edgeId) {
        for (let edge of this.graph.getEdges()) {
          if (edge.source.cell === edgeId || edge.target.cell === edgeId)
            return true
        }
        return false
      },
      isMyLineToOtherLine(myEdge) {
        for (let edge of this.graph.getEdges()) {
          if (myEdge.source.cell === edge.id || myEdge.target.cell === edge.id)
            return true
        }
        return false
      },
      isTopBottom(edge) {
        if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') {
          return true
        }
      },
      isMultipleBrach(node) {
        let outEdges = this.getOutLinesOfNode(node)
        let outNodeId = outEdges[0].target.cell
        if (this.isTopBottom(outEdges[0]))
          return false
        let outNode = this.graph.getCellById(outNodeId)
        if ('bridge,end'.indexOf(outNode.getData().nodeType) > -1) {
          return false
        }
        let inEdges = this.getInLinesOfNode(outNode)
        return inEdges.length > 1;
      },
      deleteCombination(node) {
        let startNode = this.graph.getCellById(node.getData().startNodeId)
        let allCombinationNodes = []
        console.log(startNode, 'startNode')
        this.getAllCombinationNodes(startNode.id, node, allCombinationNodes)
        console.log(allCombinationNodes, 'allCombinationNodes')
        this.graph.removeCells(allCombinationNodes)
      },
      getAllCombinationNodes(startNodeId, node, allCombinationNodes) {
        allCombinationNodes.push(node)
        if (node.id == startNodeId || node.isEdge()) {
          return
        }
        let inEdges = this.getInLinesOfNode(node) // 如果？？？
        for (let inEdge of inEdges) {
          let lineNode = this.getNodeOfConectLine(inEdge)
          if (lineNode) {
            this.getAllCombinationNodes(startNodeId, lineNode, allCombinationNodes)
          }
          let inNodeId = inEdge.source.cell
          let inNode = this.graph.getCellById(inNodeId)
          if (inNode.isEdge())
            continue
          this.getAllCombinationNodes(startNodeId, inNode, allCombinationNodes)
        }
      },
      getNodeOfConectLine(paramEdge) {
        for (let edge of this.graph.getEdges()) {
          let nodeId = null
          /*          if (edge.source.cell === paramEdge.id){
                      nodeId = edge.target.cell
                    }*/
          if (edge.target.cell === paramEdge.id) {
            nodeId = edge.source.cell
          }
          if (nodeId) {
            let node = this.graph.getCellById(nodeId)
            if (node.isNode())
              return node
          }
        }
        return null
      },
      getInLinesOfNode(node) {
        const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
        console.log(edges, '获取画布上开始节点所有的线 edges')
        return edges.filter(edge => edge.target.cell === node.id)
      },
      getOutLinesOfNode(node) {
        console.log(node, '获取画布上的结束节点 node')
        const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
        console.log(edges, '获取画布上的结束节点所有的线 edges')
        return edges.filter(edge => edge.source.cell === node.id)
      },
      canPlace(targetNode,dragNode,box2){
        const nodes = this.graph.getNodes()
        let intersectNodes = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const otherNode of nodes) {
          if (otherNode === dragNode || otherNode === targetNode) continue;
             const bbox1 = otherNode.getBBox();
            if (bbox1.x < box2.leftTopX + box2.width &&
              bbox1.x + bbox1.width > box2.leftTopX &&
              bbox1.y < box2.leftTopY + box2.height &&
              bbox1.y + bbox1.height > box2.leftTopY) {
              intersectNodes.push(otherNode);
            }
        }
        console.log(box2,'box2')
        console.log(intersectNodes,'intersectNodes')
        return intersectNodes.length <= 0;
      },
      undo(){
        if (this.graph.history.canUndo()) {
          this.graph.history.undo()
        }
      },
      redo(){
        if (this.graph.history.canRedo()) {
          this.graph.history.redo()
        }
      }
    },
  }
</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%;
  }

.x6-widget-stencil-content {
  position: relative;
  height: 100%;
}
  #stencilImg .x6-graph-svg-viewport {
    height: 100%;
  }

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

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

</style>