时序图模板修改

wente

2024-10-31 a7892d2ab77735063408c24be9bddfba01740e1d

时序图模板修改

 web/src/views/modules/taskReliability/ConfigEdge/configEdge.vue

@@ -6,7 +6,7 @@
        <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>
            <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.strokeWidth" @change="onStrokeWidthChange"></el-slider>
            <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
          </el-col>
        </el-row>
        <el-row :gutter="5" align="middle" style="margin-top:20px;">
@@ -65,7 +65,13 @@
    return{
      left_p:document.documentElement.clientHeight*0.9,
      activeName: 'first',
      // globalGridAttr:{},
      globalGridAttr:{
        nodeStrokeWidth:1,
        stroke:'',
        connector:'',
        label:'',
        distance:''
      },
      curCell:Edge,
      options: [{
        value: 'rounded',
@@ -80,38 +86,14 @@
    id: {
      type: String,
    },
    globalGridAttr:{
      type: Object,
    },
    graph:{
      type: String,
    }
  },
  watch:{
    'id'(val,oldVal){
      const cell = this.graph.getCellById(this.id)
      if(!cell || !cell.isEdge()){
        return
      }
      this.curCell = cell
      let connector = cell.getConnector() || {
        name:'默认'
      }
      this.globalGridAttr.stroke = cell.attr('line/stroke')
      this.globalGridAttr.strokeWidth = cell.attr('line/strokeWidth')
      this.globalGridAttr.connector = connector.name
      this.globalGridAttr.label = cell.getLabels()[0].attrs.text? cell.getLabels()[0].attrs.text.text:''
      this.globalGridAttr.distance =cell.getLabels()[0].position.distance
      // this.globalGridAttr.angle =cell.getLabels()[0].position.angle
      console.log(cell.getLabels(),'cell.getLabels()')
      // console.log(cell.getLabels()[0],'cell.getLabels()[0]')
      //  this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
    }
  },
  methods:{
    onStrokeWidthChange(val) {

      this.globalGridAttr.strokeWidth = val
      console.log(val,'val')
      this.globalGridAttr.nodeStrokeWidth = val
      this.curCell.attr('line/strokeWidth', val)
    },

@@ -174,25 +156,22 @@
        }
      ])
    },
    // onLabelAngleChange(e){
    //   const val = e
    //   // this.globalGridAttr.angle = val
    //   this.curCell.setLabels([
    //     {
    //       attrs: {
    //         text: {
    //           text: this.globalGridAttr.label,
    //         },
    //       },
    //       position: {
    //         distance:this.globalGridAttr.distance,
    //         options: {
    //           keepGradient: true
    //         }
    //       },
    //     }
    //   ])
    // }
    loadData(cell){
      this.curCell = cell
      let connector = cell.getConnector() || {
        name:'默认'
      }
      this.globalGridAttr.stroke = cell.attr('line/stroke')
      this.globalGridAttr.nodeStrokeWidth = cell.attr('line/strokeWidth')
      this.globalGridAttr.connector = connector.name
      this.globalGridAttr.label = cell.getLabels()[0].attrs.text? cell.getLabels()[0].attrs.text.text:''
      this.globalGridAttr.distance =cell.getLabels()[0].position.distance
      // this.globalGridAttr.angle =cell.getLabels()[0].position.angle
      console.log(this.globalGridAttr.nodeStrokeWidth,cell.attr('line/strokeWidth'),'globalGridAttr.nodeStrokeWidth')
      console.log(this.globalGridAttr,'this.globalGridAttr')
      // console.log(cell.getLabels()[0],'cell.getLabels()[0]')
      //  this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
    }
  }
}
</script>

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

@@ -6,31 +6,31 @@
        <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>
            <el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
            <el-slider :min=8 :max=20 :step=1 v-model="tempNodeAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
          </el-col>
        </el-row>
        <el-row :gutter="5" 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.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
            <el-color-picker  v-model="tempNodeAttr.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-input  @click.native='showDialog' v-model="tempNodeAttr.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-input  v-model="tempNodeAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
          </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"
            <el-date-picker v-model="tempNodeAttr.nodeDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                            style="width: 100%" @change="onDateChange">
            </el-date-picker>
          </el-col>
@@ -40,19 +40,19 @@
        <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-color-picker v-model="tempNodeAttr.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-slider :min=1 :max=20 :step=1 v-model="tempNodeAttr.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-color-picker  v-model="tempNodeAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
          </el-col>
        </el-row>
      </el-tab-pane>
@@ -83,7 +83,16 @@
      content:'',
      dialogVisible:false,
      activeName: 'first',
      // globalGridAttr:{},
      tempNodeAttr:{
        nodeFontSize:'',
        nodeColor:'',
        inspectName:'',
        nodeText:'',
        nodeDate:'',
        nodeStroke:'',
        nodeStrokeWidth:'',
        nodeFill:'',
      },
      curCel:Cell,
      left_p:document.documentElement.clientHeight*0.9,
    }
@@ -101,9 +110,6 @@
    refY2:{
      type: Number
    },
    globalGridAttr:{
      type: Object,
    },
    graph:{
      type: String,
    },
@@ -113,14 +119,6 @@
    diagramId:{
      type: String,
    }
  },
  watch:{
    'id'(val,oldVal){
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    }
  },
  mounted() {
    // this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
  },
  methods:{
    showDialog() {
@@ -135,9 +133,9 @@
      // 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.tempNodeAttr.dataId = this.dateId
      this.tempNodeAttr.inspectName = this.text
      this.tempNodeAttr.nodeText = this.text
      this.data={
        dataId:this.dateId,
        inspectName:this.text
@@ -146,56 +144,56 @@
      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.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
      this.dialogVisible = false
      // console.log(node,'dialog窗口返回值')
    },
    // 改变边框颜色
    onStrokeChange(e){
      let val = e
      this.globalGridAttr.nodeStroke = val
      this.tempNodeAttr.nodeStroke = val
     this.curCel.attr('body/stroke', val)
    },
    //改变边框大小
    onStrokeWidthChange(e){
      let val =e
      this.globalGridAttr.nodeStrokeWidth = val
      this.tempNodeAttr.nodeStrokeWidth = val
      this.curCel.attr('body/strokeWidth', val)
    },
    //改变文本颜色
    onFillChange(e){
      let val = e
      this.globalGridAttr.nodeFill=val
      this.tempNodeAttr.nodeFill=val
      this.curCel.attr('body/fill', val)
      // this.curCel.attr('title/fill', val)
    },
    // 改变字体大小
    onFontSizeChange(e){
      let val =e
      this.globalGridAttr.nodeFontSize = val
      this.tempNodeAttr.nodeFontSize = val
      this.curCel.attr('text/fontSize', val)
      this.curCel.attr('title/fontSize', val)
    },
    // 改变字体颜色
    onColorChange(e){
      let val =e
      this.globalGridAttr.nodeColor = val
      this.tempNodeAttr.nodeColor = val
      this.curCel.attr('text/fill', val)
      this.curCel.attr('title/fill', val)
      this.curCel.attr('text/style/color', val)
      this.curCel.attr('title/style/color', val)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
    },
    // 改变文本
    onTextChange(e){
      this.text =e
      this.globalGridAttr.nodeText = this.text
      this.tempNodeAttr.nodeText = this.text
      this.curCel.attr('label/textWrap/text', this.text)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
    },
    onDateChange(e){
      this.date =e
       this.globalGridAttr.nodeDate = this.date
       this.tempNodeAttr.nodeDate = this.date
       this.data={
        finishDate:this.date,
      }
@@ -204,42 +202,24 @@
        this.curCel.attr('text/text', this.date)
      }
      this.curCel.attr('title/text', this.date)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
    },
    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.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
        globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
        // 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('label/textWrap/text')
        console.log(globalGridAttr.nodeText,'globalGridAttr.nodeText')
        if(this.shape=='custom-circle1'){
          globalGridAttr.nodeDate = cell.attr('text/text')
        }
        globalGridAttr.nodeDate = cell.attr('title/text')
        globalGridAttr.dataId = cell.getData().dataId
        globalGridAttr.inspectName =cell.getData().inspectName
        // console.log(globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate,'globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate 789')
        cell.getData()
        // console.log( cell.getData(),' cell.getData() 909')
    loadData(cell){
      this.curCel=cell
      this.tempNodeAttr.nodeStroke = cell.attr('body/stroke')
      this.tempNodeAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
      this.tempNodeAttr.nodeFill = cell.attr('body/fill')
      this.tempNodeAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
      this.tempNodeAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
      this.tempNodeAttr.nodeUsers = cell.attr('approve/users')
      this.tempNodeAttr.nodeText = cell.attr('label/textWrap/text')
      console.log(this.tempNodeAttr.nodeText,'tempNodeAttr.nodeText')
      if(this.shape=='custom-circle1'){
        this.tempNodeAttr.nodeDate = cell.attr('text/text')
      }
      return this.curCel;
      this.tempNodeAttr.nodeDate = cell.attr('title/text')
      this.tempNodeAttr.dataId = cell.getData().dataId
      this.tempNodeAttr.inspectName =cell.getData().inspectName
    }
  }
}

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

@@ -23,8 +23,6 @@
          </zt-form-item>
          <zt-form-item>
            <zt-button @click="getDiagram(null)">查看时序图</zt-button>
<!--            <zt-button @click="graphRightTranslate()">画布右移</zt-button>-->
<!--            <zt-button @click="graphLeftTranslate()">画布左移</zt-button>-->
          </zt-form-item>
        </el-form>
        <div style="display: flex">
@@ -141,7 +139,6 @@
      window.removeEventListener('scroll', this.handleScroll,true);
    },
    mounted() {
      // alert(`mounted执行了`)
      this.getProductList()
      this.init()
      this.$refs.textDiagram.init()
@@ -158,7 +155,6 @@
      handleScroll(){
        this.graph.getScrollbarPosition()
        let left = this.graph.getScrollbarPosition().left
        console.log(left,'left left')
        let top = this.graph.getScrollbarPosition().top
        this.$refs.textDiagram.setScroll(top)
        this.$refs.timeDiagramThumbnail.getNodePointX(left,this.bigWidth)
@@ -205,20 +201,6 @@
            minVisibleHeight:300,
            pannable: true,
          },
          // minimap: {
          //   enabled: true,
          //   container: document.getElementById('thumbnail'),
          //   scalable:false,
          //   width: document.documentElement.clientWidth - 400,
          //   height: 150,
          // },
          // mousewheel: {
          //   enabled: true,
          //   zoomAtMousePosition: true,
          //   modifiers: 'ctrl',
          //   minScale: 0.1,
          //   maxScale: 10,
          // },
          createEdge() {
            return new Shape.Edge({
              data: {
@@ -277,169 +259,12 @@
                textVerticalAnchor: 'middle',
                textWrap: {
                  text: '文字模板',
                  width: -10,      // 宽度减少 10px
                  width: 120,      // 宽度减少 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',
              },
              text: {
                fontSize: 20,
                fill: '#262626',
              },
            },
            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,
@@ -460,34 +285,12 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
        })
        this.graph.on('translate', ({ tx, ty }) => {
          console.log(`当前偏移量位置: x=${tx}, y=${ty}`);
        });
        this.graph.on('cell:click', ({cell}) => {
          // this.type.value = cell.isNode() ? "node" : "edge"
          this.type = cell.isNode() ? 'node' : 'edge'
          this.shape = cell.shape
          this.id = cell.id
          console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
          // this.reset()
          edge.attr('line/stroke', '#5F95FF')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: '#5F95FF',
              },
            },

          })
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
@@ -617,14 +420,9 @@
          this.diagramJson = JSON.parse(res.data.diagramJson)
          let textDiagramJson = JSON.parse(res.data.textDiagramJson)
          let smallDiagramJson = JSON.parse(res.data.smallDiagramJson)
          console.log(this.diagramJson, 'this.Diagram json')
          console.log(smallDiagramJson, 'smallDiagramJson')
          this.graph.fromJSON(this.diagramJson)
          // this.graph.centerContent()
          this.graph.positionContent('left',{ padding: { left: 0 }})
          // this.graph.zoomToFit()
          this.bigWidth = this.graph.getContentBBox().width
          console.log(this.bigWidth,'getContentBBox')
          // this.graph.resize(this.graph.getContentBBox().width,this.graph.getContentBBox().height)
          this.graph.freeze()
          this.$refs.textDiagram.getTextDiagram(textDiagramJson)
@@ -640,13 +438,7 @@
      },
      getPoint(x,smallWidth){
        let pointX = Number((x * (this.bigWidth / smallWidth )).toFixed(0))
        // console.log(pointX)
        this.graph.setScrollbarPosition(pointX, null)
        // if(pointX<600){
        // this.graph.setScrollbarPosition(pointX, null,  { animation: { duration: 400 }})
        // }else {
        //   this.graph.scrollToPoint(pointX, null, {animation: {duration: 400}})
        // }
      }
    }
  }

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

@@ -2,11 +2,9 @@
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="5">
        <div style="height: 80vh">
          <div class="fa-card-a">
          <div class="fa-card-a" style="height: calc(100vh - 128px)">
            <div id="stencil"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="fa-card-a">
@@ -33,11 +31,8 @@
          <div id="container" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
          </div>
          <config-edge ref="configEdge" v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr"
                       :graph="graph"/>
          <config-node v-show="type === 'node'"  :id="id" :globalGridAttr="globalGridAttr"
                       :graph="graph"
                       :shape="shape"/>
          <config-edge ref="configEdge" v-show="type === 'edge'"/>
          <config-node ref="configNode" v-show="type === 'node'" />
        </div>
      </el-col>
    </el-row>
@@ -143,7 +138,6 @@
          opacity: 0.1,

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'normal',
          label: '',
          nodeStroke: '#5F95FF',
@@ -790,8 +784,14 @@
          this.shape = cell.shape
          this.id = cell.id
          console.log(this.shape, 'this.shape')
          if (this.type === 'edge') {
            //this.nodeType = cell.getData().nodeType
          // if (this.type === 'edge') {
          //   //this.nodeType = cell.getData().nodeType
          //   this.$refs.configEdge.loadData(cell)
          // }
          if (this.type === 'node') {
            this.$refs.configNode.loadData(cell,this.globalGridAttr)
          }
           if (this.type === 'edge') {
            this.$refs.configEdge.loadData(cell)
          }
          // this.nodeOpt(this.id, this.globalGridAttr)
@@ -843,24 +843,22 @@
          })
        })

        this.graph.on('node:mouseenter', ({node}) => {
          const container = document.getElementById('container')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, true)
        })

        this.graph.on('node:mouseleave', ({node}) => {
          // if (node.hasTool('button-remove')) {
          //   node.removeTool('button-remove')
          // }
          const container = document.getElementById('container')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, false)
        })
        // this.graph.on('node:mouseenter', ({node}) => {
        //   const container = document.getElementById('container')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        // })
        //
        // this.graph.on('node:mouseleave', ({node}) => {
        //   // if (node.hasTool('button-remove')) {
        //   //   node.removeTool('button-remove')
        //   // }
        //   const container = document.getElementById('container')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        // })

        // this.graph.on('edge:mouseenter', ({cell, view}) => {
        //   // alert(123)
@@ -1037,7 +1035,7 @@

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