wente
2024-03-12 3c08a64d7829849811ef19a0ba11d41b6268fa5e
web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -167,6 +167,15 @@
        id: '',
        graph: null,
        globalGridAttr: {
          voteSum:'',
          repairMttcr:'',
          repairMttcrOther:'',
          repairDistribType:'',
          reliabDistribType:'',
          taskMtbcfOther:'',
          isRepair:0,
          taskMtbcf:'',
          numberInputValue:'',
          statusImg:'',
          nodeTypeExt:'',
          type: 'mesh',
@@ -335,8 +344,6 @@
        // 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')
@@ -485,287 +492,6 @@
          },
        })
        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},
            },
            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',
                },
              },
              // markup: [
              //   {
              //     tagName: 'polygon',
              //     selector: 'body',
              //   },
              //   {
              //     tagName: 'text',
              //     selector: 'title',
              //   },
              //   {
              //     tagName: 'text',
              //     selector: 'text',
              //   },
              // ],
              ports: {
                ...this.ports
                // items: [
                //   {
                //     group: 'top',
                //   },
                //   {
                //     group: 'bottom',
                //   },
                // ],
              },
            },
            true,
        )
        //
        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},
            },
            true,
        )
        Graph.registerNode(
            'custom-circle1',
            {
              inherit: 'ellipse',
              width: 65,
              height: 65,
              data: {
                dataId: '',
                finishDate: ''
              },
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                //日期
                text: {
                  // fontFamily: '仿宋',
                  fontSize: 12,
                  text: '日期节点',
                  fill: '#262626',
                },
              },
              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',
@@ -811,11 +537,19 @@
              x:item.imgWidth,
              y:item.imgHeight,
              data: {
                isRepair:false,
                dataId: item.dataId,
                nodeType: item.nodeType,
                nodeTypeExt: item.nodeTypeExt,
                productType: item.productType,
                statusImg:item.statusImg
                statusImg:item.statusImg,
                reliabDistribType:item.reliabDistribType,
                repairDistribType:item.repairDistribType,
                repairMttcr:item.repairMttcr,
                repairMttcrOther:item.repairMttcrOther,
                taskMtbcf:item.taskMtbcf,
                taskMtbcfOther:item.taskMtbcfOther,
                voteSum:'',
              },
              attrs: {
                text:{