| | |
| | | <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;"> |
| | |
| | | return{ |
| | | left_p:document.documentElement.clientHeight*0.9, |
| | | activeName: 'first', |
| | | // globalGridAttr:{}, |
| | | globalGridAttr:{ |
| | | nodeStrokeWidth:1, |
| | | stroke:'', |
| | | connector:'', |
| | | label:'', |
| | | distance:'' |
| | | }, |
| | | curCell:Edge, |
| | | options: [{ |
| | | value: 'rounded', |
| | |
| | | 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) |
| | | }, |
| | | |
| | | onStrokeChange(e) { |
| | | console.log(e,'eee') |
| | | const val = e |
| | | this.globalGridAttr.stroke = val |
| | | this.curCell.attr('line/stroke', val) |
| | |
| | | } |
| | | ]) |
| | | }, |
| | | // 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> |