| | |
| | | id: '', |
| | | graph: null, |
| | | globalGridAttr: { |
| | | voteSum:'', |
| | | repairMttcr:'', |
| | | repairMttcrOther:'', |
| | | repairDistribType:'', |
| | | reliabDistribType:'', |
| | | taskMtbcfOther:'', |
| | | isRepair:0, |
| | | taskMtbcf:'', |
| | | numberInputValue:'', |
| | | statusImg:'', |
| | | nodeTypeExt:'', |
| | | type: 'mesh', |
| | |
| | | // 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') |
| | |
| | | }, |
| | | }) |
| | | 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', |
| | |
| | | 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:{ |