修改

jinlin

2024-11-19 195bb5267a6ece13363303e177fee7d1fa3941aa

 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>