style:设置曲线为直线

This commit is contained in:
zhangyu
2020-09-02 09:38:26 +08:00
parent 33d5463275
commit f33c16c50c
4 changed files with 34 additions and 20 deletions

View File

@@ -2,7 +2,7 @@
<div class="mc" @click.self="clickOutside">
<div class="right-box right-box-edit-endpoint">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btns" v-if="lineData.id">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -234,6 +234,8 @@
if( this.lineData.expressions){
this.lineData.expressions.forEach((item,index)=>{
console.log(this.$refs['promql-'+(index)],'promql-'+( index));
console.log(this.expressions[index]);
this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
})
}
},

View File

@@ -2,11 +2,11 @@
<div class="mc" @click.self="clickOutside">
<div class="right-box right-box-edit-endpoint">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
<!--<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>-->
<!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
<!--</button>-->
<div class="right-box-top-btns" v-if="nodeData.id">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
@@ -155,10 +155,16 @@
watch:{
nodeData:{
handler(n){
for(let key in this.form){
this.form[key]=n[key]
}
this.form.moduleId=n.id;
if( n.expressions){
n.expressions.forEach((item,index)=>{
this.addExpression();
this.name[index]=item.name;
this.unit[index]=item.unit;
this.expressions[index]=item.metric;
this.legends[index]=item.legend;
})
}
},
immediate: true,
deep: true,
@@ -212,7 +218,12 @@
},
mounted(){
// this.addExpression();
this.addNodeInit()
this.addNodeInit();
if( this.nodeData.expressions){
this.nodeData.expressions.forEach((item,index)=>{
this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
})
}
},
methods:{
addNodeInit(selImageId){
@@ -228,8 +239,8 @@
setTimeout(()=>{
this.iconArray=[...this.iconArray];
this.imgageLoading=false;
if(selImageId){
this.form.iconId=selImageId;
if(selImageId || this.nodeData.iconId){
this.form.iconId=selImageId || this.nodeData.iconId;
}
},100)
}

View File

@@ -4,12 +4,12 @@
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
Module element :
<span class="edit-topology-add" @click="addModelShow">Add</span>
<span class="edit-topology-remove" @click="nodeDel">Remove</span>
<!--<span class="edit-topology-remove" @click="nodeDel">Remove</span>-->
</span>
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
Line :
<span class="edit-topology-add" @click="addLineTitleShow">Add</span>
<span class="edit-topology-remove" @click="lineDel">Remove</span>
<!--<span class="edit-topology-remove" @click="lineDel">Remove</span>-->
</span>
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
<el-button @click="saveTopology" class="saveTopology">save</el-button>
@@ -284,6 +284,7 @@
type: 'error'
});
});
// this.$put('/project/topo',{topo:'{}',projectId:this.allModuleInfo.basic.id});
this.$emit('editVisNetworkChange',false);
},
cancelTopology(){
@@ -353,7 +354,7 @@
edges: {
width: 2,
smooth:{ //设置两个节点之前的连线的状态
enabled: true,//默认是true设置为false之后两个节点之前的连线始终为直线不会出现贝塞尔曲线
enabled: false,//默认是true设置为false之后两个节点之前的连线始终为直线不会出现贝塞尔曲线
roundness:0.5,
type: "curvedCW",
},
@@ -456,6 +457,7 @@
x:'',
y:'',
image:'',
id:'',
}
},
addLine(edges){ // 添加或者編輯line
@@ -658,7 +660,7 @@
this_.network.selectNodes(this_.NodeArr,true);
return
}
if(this_.NodeArr.length===0){
if(this_.NodeArr.length===0&&this_.editVisNetwork){
this_.nodeEdit();
}
this_.setPopPosition(selId,params);
@@ -677,7 +679,6 @@
}
if(this_.editVisNetwork){
this_.lineData.color=this_.lineData.color.color?this_.lineData.color.color:this_.lineData.color;
console.log(this_.lineData);
this_.addLineShow=true;
this_.isLineAdd=false;
}
@@ -895,7 +896,7 @@
margin-left: 30px;
}
.edit-topologyLine{
margin-left: 130px;
margin-left: 60px;
}
.edit-topology-add,.edit-topology-remove,.edit-topologyCancel{
color: #1989fa;

View File

@@ -198,7 +198,7 @@
this.topologyLoading=true;
this.editVisNetwork=false;
this.$get('/project/topo',{projectId:n.id}).then(res=>{
if(res.data.topo&&res.data.topo.nodes.length>0){
if(res.data.topo&&res.data.topo.nodes&&res.data.topo.nodes.length>0){
this.nodesArray=[];
this.edgesArray=[];
this.nodesArrayOther=this.formatNodesArr(res.data.topo.nodes);
@@ -221,7 +221,7 @@
this.topologyLoading=true;
this.editVisNetwork=false;
this.$get('/project/topo',{projectId:this.projectInfo.id}).then(res=>{
if(res.data.topo&&res.data.topo.nodes.length>0){
if(res.data.topo&&res.data.topo.nodes&&res.data.topo.nodes.length>0){
this.nodesArray=[];
this.edgesArray=[];
this.nodesArrayOther=this.formatNodesArr(res.data.topo.nodes);