<template>
|
<div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
|
<el-card style="height: 100%">
|
<el-tabs v-model="activeName" id="EdgeTabPane">
|
<el-tab-pane label="线条" name="first">
|
<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-col>
|
</el-row>
|
<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-color-picker v-model="globalGridAttr.stroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
|
</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">类型</el-col>-->
|
<!-- <el-col :span=16>-->
|
<!-- <el-select style="width: 100%" v-model="globalGridAttr.connector" @change="onConnectorChange">-->
|
<!-- <el-option-->
|
<!-- v-for="item in options"-->
|
<!-- :key="item.value"-->
|
<!-- :label="item.label"-->
|
<!-- :value="item.value">-->
|
<!-- </el-option>-->
|
<!-- <!– <el-option value="normal">默认</el-option>–>-->
|
<!-- <!– <el-option value="smooth">平滑</el-option>–>-->
|
<!-- <!– <el-option value="rounded">圆形</el-option>–>-->
|
<!-- <!– <el-option value="jumpover">折线</el-option>–>-->
|
<!-- </el-select>-->
|
<!-- </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">标签</el-col>
|
<el-col :span=16>
|
<el-input v-model="globalGridAttr.label" style="width: 100%" @change="onLabelChange"/>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { Edge} from '@antv/x6';
|
export default {
|
name: "index",
|
data(){
|
return{
|
left_p:document.documentElement.clientHeight*0.9,
|
activeName: 'first',
|
// globalGridAttr:{},
|
curCell:Edge,
|
options: [{
|
value: 'normal',
|
label: '默认'
|
}, {
|
value: 'smooth',
|
label: '平滑连线'
|
}]
|
}
|
},
|
props:{
|
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
|
// console.log(cell.getLabels()[0],'cell.getLabels()[0]')
|
// this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
|
}
|
},
|
methods:{
|
onStrokeWidthChange(val) {
|
|
this.globalGridAttr.strokeWidth = val
|
this.curCell.attr('line/strokeWidth', val)
|
},
|
|
onStrokeChange(e) {
|
const val = e
|
this.globalGridAttr.stroke = val
|
this.curCell.attr('line/stroke', val)
|
},
|
|
|
onConnectorChange(val){
|
this.globalGridAttr.connector = val
|
this.curCell.setConnector(val)
|
},
|
|
onLabelChange(e) {
|
const val = e
|
this.globalGridAttr.label = val
|
this.curCell.setLabels([
|
{
|
attrs: {
|
text: {
|
text: val,
|
},
|
},
|
position: {
|
distance: 0.50,
|
},
|
}
|
])
|
}
|
}
|
}
|
</script>
|
|
<style >
|
#EdgeTabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
|
width: 100% !important;
|
}
|
#EdgeTabPane .el-tabs__nav.is-top{
|
-webkit-transform: translateX(35px) !important
|
}
|
#EdgeTabPane .el-color-picker__trigger{
|
width: 100%;
|
}
|
</style>
|
