新增属性

wente

2024-03-12 3c08a64d7829849811ef19a0ba11d41b6268fa5e

新增属性

 web/src/views/modules/taskReliability/ConfigNode/index.vue

@@ -1,8 +1,97 @@
<template>
  <div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
  <div style="position: absolute;top:0;right:0;background:#cccccc;width: 400px;" :style="'height:'+ left_p + 'px'">
  <el-card style="height: 100%">
    <el-tabs v-model="activeName" id="tabPane">
      <el-tab-pane label="文本"  name="first">
      <el-tab-pane label="属性"  name="first">
        <el-row :gutter="5" v-show="shape!=='custom-circle1'"  align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">节点名称</el-col>
          <el-col :span=16 >
            <el-input  v-model="globalGridAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">连接关系</el-col>
          <el-col :span=16>
            <el-select style="width: 100%" v-model="globalGridAttr.nodeTypeExt" @change="onNodeTypeExtChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="nodeType=='node' && showNumberInput" align="middle" style="margin-top:20px;">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">数量</el-col>
          <el-col :span=16>
            <el-input type="number" v-model="globalGridAttr.numberInputValue" @change="onNumberInputValue"  placeholder="请输入数字"></el-input>
          </el-col>
        </el-row>
<!--        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">-->
<!--          <el-col :span=8 style="font-size: 16px;line-height: 32px">状态</el-col>-->
<!--          <el-col :span=16>-->
<!--            <el-select style="width: 100%" v-model="globalGridAttr.statusImg" @change="onStatusImgChange">-->
<!--              <el-option-->
<!--                  v-for="item in options1"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">可靠性分布类型</el-col>
          <el-col :span=16>
            <zt-dict v-model="globalGridAttr.reliabDistribType" @input="onReliabDistribType" dict="ReliabDistribType" placeholder="可靠性分布类型" clearable/>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
          <el-col :span=24>
            <el-input  type="number" v-model="globalGridAttr.taskMtbcf" @change="onTaskMtbcfChange"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">参数2</el-col>
          <el-col :span=16>
            <el-input  v-model="globalGridAttr.taskMtbcfOther" @change="onTaskMtbcfOtherChange"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">是否可维修</el-col>
          <el-col :span=16>
            <el-select style="width: 100%" v-model="globalGridAttr.isRepair" @change="onIsRepairChange">
              <el-option
                  v-for="item in isRepair"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <div v-show="nodeType=='node' && showRepairInput">
          <el-row :gutter="5"  align="middle" style="margin-top:20px;">
            <el-col :span=8 style="font-size: 16px;line-height: 32px">可维修性分布类型</el-col>
            <el-col :span=16>
              <zt-dict v-model="globalGridAttr.repairDistribType" dict="RepairDistribType" @input="onRepairDistribTypeChange" placeholder="维修性分布类型" clearable/>
            </el-col>
          </el-row>
          <el-row :gutter="5"  align="middle" style="margin-top:20px;">
            <el-col :span=24>
              <el-input  type="number" v-model="globalGridAttr.repairMttcr" @change="onRepairMttcrChange"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="5"  align="middle" style="margin-top:20px;">
            <el-col :span=8 style="font-size: 16px;line-height: 32px">参数2</el-col>
            <el-col :span=16>
              <el-input  v-model="globalGridAttr.repairMttcrOther" @change="onRepairMttcrOtherChange"></el-input>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="样式"  name="second">
        <el-row :gutter="5" align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 38px">文本大小</el-col>
          <el-col :span=16>
@@ -15,84 +104,14 @@
            <el-color-picker  v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
          </el-col>
        </el-row>
        <el-row v-show="shape!=='custom-text' || shape!=='custom-circle1'" :gutter="5" align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">项目名称</el-col>
          <el-col :span=16 >
            <el-input  @click.native='showDialog' v-model="globalGridAttr.inspectName" style="width:100%"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="shape!=='custom-circle1'"  align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">过程名称</el-col>
          <el-col :span=16 >
            <el-input  v-model="globalGridAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">关系</el-col>
          <el-col :span=16>
            <el-select style="width: 100%" v-model="globalGridAttr.nodeTypeExt" @change="onNodeTypeExtChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">状态</el-col>
          <el-col :span=16>
            <el-select style="width: 100%" v-model="globalGridAttr.statusImg" @change="onStatusImgChange">
              <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row v-show="shape!=='custom-text'" :gutter="5" align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">日期</el-col>
          <el-col :span=16 >
            <el-date-picker v-model="globalGridAttr.nodeDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                            style="width: 100%" @change="onDateChange">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="节点"  name="second">
        <el-row align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 40px">边框颜色</el-col>
          <el-col :span=16>
            <el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
          </el-col>
        </el-row>
        <el-row align="middle"style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 38px">边框宽度</el-col>
          <el-col :span=16>
            <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
          </el-col>
        </el-row>
        <el-row align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 40px">颜色</el-col>
          <el-col :span=16>
            <el-color-picker  v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
    <el-dialog ref="detailedDialog"  title="选择项目" width='85%' :visible.sync="dialogVisible ">
      <Inspection @func="procResult" ref="inspectionNode" />
    </el-dialog>
  </div>
</template>

<script>
import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6';
import Inspection from './project-list-select'
// const {inject} = require("vue");
export default {
  name: "index",
@@ -103,12 +122,11 @@
        finishDate: '',
        inspectName:''
      },
      showNumberInput:false,
      showRepairInput:false,
      options: [{
        value: '',
        label: '无'
      }, {
        value: 'parallel',
        label: '并联'
      },{
        value: 'switch',
        label: '旁连'
@@ -116,6 +134,15 @@
        value: 'vote',
        label: '表决'
      }],
      isRepair:[
        {
          value: 0,
          label: '否'
        }, {
          value: 1,
          label: '是'
        }
      ],
      options1: [{
        value: '',
        label: '无'
@@ -126,19 +153,15 @@
        value:'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
        label: 'antv'
      }],
      date:'',
      text:'',
      dateId:'',
      content:'',
      dialogVisible:false,
      activeName: 'first',
      // globalGridAttr:{},
      curCel:Cell,
      left_p:document.documentElement.clientHeight*0.9,
      left_p:document.documentElement.clientHeight* 0.75,
    }
  },
  components:{
    Inspection
  },
  props:{
    id: {
@@ -183,44 +206,6 @@
        this.$refs.inspectionNode.init(param)
      })
    },
    procResult(node) {
      // console.log(node,'node')
      this.text =node.nodeName
      this.dateId = node.nodeId
      this.globalGridAttr.dataId = this.dateId
      this.globalGridAttr.inspectName = this.text
      this.globalGridAttr.nodeText = this.text
      this.data={
        dataId:this.dateId,
        inspectName:this.text
      }
      this.curCel.setData(this.data)
      this.curCel.attr('text/text', this.text)
      this.curCel.attr('data/dataId', this.dateId)
      this.curCel.attr('data/inspectName', this.text)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      this.dialogVisible = false
      // console.log(node,'dialog窗口返回值')
    },
    // 改变边框颜色
    onStrokeChange(e){
      let val = e
      this.globalGridAttr.nodeStroke = val
     this.curCel.attr('body/stroke', val)
    },
    //改变边框大小
    onStrokeWidthChange(e){
      let val =e
      this.globalGridAttr.nodeStrokeWidth = val
      this.curCel.attr('body/strokeWidth', val)
    },
    //改变文本颜色
    onFillChange(e){
      let val = e
      this.globalGridAttr.nodeFill=val
      this.curCel.attr('body/fill', val)
      // this.curCel.attr('title/fill', val)
    },
    // 改变字体大小
    onFontSizeChange(e){
      let val =e
@@ -242,16 +227,95 @@
    onTextChange(e){
      this.text =e
      this.globalGridAttr.nodeText = this.text
      this.curCel.attr('label/textWrap/text', this.text)
      this.curCel.attr('text/text', this.text)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)

    },
    onNodeTypeExtChange(e){
      if (this.globalGridAttr.nodeTypeExt === 'vote') {
        this.showNumberInput = true;
      } else {
        this.showNumberInput = false;
        this.globalGridAttr.numberInputValue = '';
      }
      this.globalGridAttr.nodeTypeExt = e
      let nodeTypeExt={
        nodeTypeExt:this.globalGridAttr.nodeTypeExt
      }
      this.curCel.setData(nodeTypeExt)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 表决数量
    onNumberInputValue(e){
      this.globalGridAttr.voteSum = e
      let voteSum={
        voteSum:this.globalGridAttr.voteSum
      }
      this.curCel.setData(voteSum)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 可靠性分布类型
    onReliabDistribType(e){
      this.globalGridAttr.reliabDistribType = e
      let reliabDistribType={
        reliabDistribType:this.globalGridAttr.reliabDistribType
      }
      this.curCel.setData(reliabDistribType)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // mtbf
    onTaskMtbcfChange(e){
      this.globalGridAttr.taskMtbcf =e
      let taskMtbcf={
        taskMtbcf:this.globalGridAttr.taskMtbcf
      }
      this.curCel.setData(taskMtbcf)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 参数2
    onTaskMtbcfOtherChange(e){
      this.globalGridAttr.taskMtbcfOther = e
      let taskMtbcfOther={
        taskMtbcfOther:this.globalGridAttr.taskMtbcfOther
      }
      this.curCel.setData(taskMtbcfOther)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 是否可维修
    onIsRepairChange(e){
      this.showRepairInput = this.globalGridAttr.isRepair === 1;
      this.globalGridAttr.isRepair = e
      let isRepair={
        isRepair:this.globalGridAttr.isRepair
      }
      this.curCel.setData(isRepair)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 可维修性分布类型
    onRepairDistribTypeChange(e){
      this.globalGridAttr.repairDistribType = e
      let repairDistribType={
        repairDistribType:this.globalGridAttr.repairDistribType
      }
      this.curCel.setData(repairDistribType)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // Mttcr
    onRepairMttcrChange(e){
      this.globalGridAttr.repairMttcr = e
      let repairMttcr={
        repairMttcr:this.globalGridAttr.repairMttcr
      }
      this.curCel.setData(repairMttcr)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 可维修性分布类型 参数2
    onRepairMttcrOtherChange(e){
      this.globalGridAttr.repairMttcrOther = e
      let repairMttcrOther={
        repairMttcrOther:this.globalGridAttr.repairMttcrOther
      }
      this.curCel.setData(repairMttcrOther)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    onStatusImgChange(e){
@@ -287,19 +351,6 @@
      ])
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    onDateChange(e){
      this.date =e
       this.globalGridAttr.nodeDate = this.date
       this.data={
        finishDate:this.date,
      }
      this.curCel.setData(this.data)
      if(this.shape=='custom-circle1'){
        this.curCel.attr('text/text', this.date)
      }
      this.curCel.attr('title/text', this.date)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    nodeOpt(id, globalGridAttr){
      this.curCel=null
      if(id){
@@ -321,15 +372,20 @@
        // globalGridAttr.nodeColor = cell.attr('text/style/color')
        // globalGridAttr.nodeColor =  cell.attr('title/style/color')
        globalGridAttr.nodeUsers = cell.attr('approve/users')
        globalGridAttr.nodeText = cell.attr('label/textWrap/text')
        if(this.shape=='custom-circle1'){
          globalGridAttr.nodeDate = cell.attr('text/text')
        }
        globalGridAttr.nodeText =cell.attr('text/text')
        globalGridAttr.nodeDate = cell.attr('title/text')
        globalGridAttr.dataId = cell.getData().dataId
        globalGridAttr.inspectName =cell.getData().inspectName
        globalGridAttr.nodeTypeExt=cell.getData().nodeTypeExt
        globalGridAttr.statusImg = cell.getData().statusImg
        globalGridAttr.reliabDistribType = cell.getData().reliabDistribType
        globalGridAttr.repairDistribType = cell.getData().repairDistribType
        globalGridAttr.repairMttcr = cell.getData().repairMttcr
        globalGridAttr.repairMttcrOther = cell.getData().repairMttcrOther
        globalGridAttr.taskMtbcf = cell.getData().taskMtbcf
        globalGridAttr.taskMtbcfOther = cell.getData().taskMtbcfOther
        globalGridAttr.isRepair = cell.getData().isRepair
        this.showRepairInput = cell.getData().isRepair
        cell.removeTools()
        cell.addTools([
          {

 web/src/views/modules/taskReliability/ModelLine.vue

@@ -11,7 +11,7 @@
        </el-form>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update @refreshDataList="table.query"/>
        <el-dialog v-dialogDrag title="可靠性框图" top="1vh" width='95%' :visible.sync="dialogVisible2">
        <el-dialog v-dialogDrag title="可靠性框图" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2">
          <RBDEditImg ref="RBDEditImg"></RBDEditImg>
        </el-dialog>
      </zt-table-wraper>

 web/src/views/modules/taskReliability/ModelRbd.vue

@@ -37,7 +37,7 @@
            </el-table>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update @refreshDataList="table.query" ref="AddOrUpdate"/>
            <el-dialog v-dialogDrag title="模型设计" top="1vh" width='95%' :visible.sync="dialogVisible2">
            <el-dialog v-dialogDrag title="模型设计" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2">
              <RBDEditImg ref="rbdEditImg"></RBDEditImg>
            </el-dialog>
          </zt-table-wraper>

 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:{