fix:优化窗口变化时overview的topology变化的问题

This commit is contained in:
zhangyu
2021-02-24 13:56:43 +08:00
parent 3c0e874ab2
commit 03f7a9993f
9 changed files with 52 additions and 53 deletions

View File

@@ -264,9 +264,6 @@
this.isError = false; this.isError = false;
this.searchTime = bus.getTimezontDateRange(); this.searchTime = bus.getTimezontDateRange();
this.chart = JSON.parse(JSON.stringify(chartInfo)); this.chart = JSON.parse(JSON.stringify(chartInfo));
console.log('chart',this.chart,chartInfo)
let chartType= chartInfo.type; let chartType= chartInfo.type;
let chartContainerId = 'chartEchartPreview'; let chartContainerId = 'chartEchartPreview';
if(chartType==='table'){ if(chartType==='table'){

View File

@@ -1538,9 +1538,7 @@
let a=arr.splice(0,1); let a=arr.splice(0,1);
arr.reverse(); arr.reverse();
arr.unshift(a[0]); arr.unshift(a[0]);
console.log(arr);
this.selection.pen.data.valueMapping=arr; this.selection.pen.data.valueMapping=arr;
console.log('aaa')
} }
}, },
valueMappingDel(index,row){ valueMappingDel(index,row){

View File

@@ -123,7 +123,6 @@
}, },
undo(){//撤销 undo(){//撤销
getTopology(this.index).undo(); getTopology(this.index).undo();
console.log(getTopology(this.index).caches.index);
// if(!this.redoFlag){ // if(!this.redoFlag){
// this.$emit('redoIndexChange',getTopology(this.index).caches.index) // this.$emit('redoIndexChange',getTopology(this.index).caches.index)
// } // }
@@ -134,7 +133,6 @@
// },200) // },200)
}, },
redo(){//重做 redo(){//重做
console.log(getTopology(this.index))
getTopology(this.index).redo(); getTopology(this.index).redo();
}, },
centerView(){//居中显示 centerView(){//居中显示

View File

@@ -29,7 +29,6 @@
this.expressionInfoData=this.expressionInfoData.concat(item.data.result); this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
} }
}); });
console.log(this.expressionInfoData);
} }
} }
}, },
@@ -45,7 +44,6 @@
this.expressionInfoData=this.expressionInfoData.concat(item.data.result); this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
} }
}); });
console.log(this.expressionInfoData);
} }
}, },
methods:{ methods:{

View File

@@ -384,6 +384,7 @@
name:'', name:'',
}, },
saveData:{}, saveData:{},
oldTopologyData:'',
redoIndex:0, redoIndex:0,
dataLength:0, dataLength:0,
editTopologyFlag:false, editTopologyFlag:false,
@@ -670,6 +671,7 @@
// getTopology(this.topologyIndex).scaleTo(data.scale/2) // getTopology(this.topologyIndex).scaleTo(data.scale/2)
// } // }
// getTopology(this.topologyIndex).fitView(); // getTopology(this.topologyIndex).fitView();
this.oldTopologyData=JSON.stringify(getTopology(this.topologyIndex).data)
this.getNodesArr(); this.getNodesArr();
}); });
}) })
@@ -1771,27 +1773,32 @@
/*tools 方法*/ /*tools 方法*/
winResize(){ winResize(){
let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect(); setTimeout(()=>{
// this.toolShow.attrCord=[domRect.width-350,0]; let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect();
// this.toolShow.height=domRect.height; // this.toolShow.attrCord=[domRect.width-350,0];
getTopology(this.topologyIndex).canvasPos=domRect; // this.toolShow.height=domRect.height;
let flag=false; getTopology(this.topologyIndex).canvasPos=domRect;
if(this.fromOverView){
getTopology(this.topologyIndex).open(this.oldTopologyData);
}
let flag=false;
let position={ let position={
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth, x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight, y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
}
getTopology(this.topologyIndex).data.pens.forEach(item=>{
if(flag){
return
} }
if(item.rect.ex>position.x || item.rect.ey>position.y){ getTopology(this.topologyIndex).data.pens.forEach(item=>{
getTopology(this.topologyIndex).fitView(20); if(flag){
flag=true return
} }
}); if(item.rect.ex>position.x || item.rect.ey>position.y){
getTopology(this.topologyIndex).centerView(20); getTopology(this.topologyIndex).fitView(20);
this.getNodesArr(); flag=true
}
});
getTopology(this.topologyIndex).centerView(20);
this.getNodesArr();
},100)
}, },
canvasMove(e){// 画布上的移动 确定tooltip的位置 canvasMove(e){// 画布上的移动 确定tooltip的位置
if(this.tooltipPosition.show){ if(this.tooltipPosition.show){

View File

@@ -384,6 +384,7 @@
name:'', name:'',
}, },
saveData:{}, saveData:{},
oldTopologyData:'',
redoIndex:0, redoIndex:0,
dataLength:0, dataLength:0,
editTopologyFlag:false, editTopologyFlag:false,
@@ -670,6 +671,7 @@
// getTopology(this.topologyIndex).scaleTo(data.scale/2) // getTopology(this.topologyIndex).scaleTo(data.scale/2)
// } // }
// getTopology(this.topologyIndex).fitView(); // getTopology(this.topologyIndex).fitView();
this.oldTopologyData=JSON.stringify(getTopology(this.topologyIndex).data)
this.getNodesArr(); this.getNodesArr();
}); });
}) })
@@ -1771,27 +1773,32 @@
/*tools 方法*/ /*tools 方法*/
winResize(){ winResize(){
let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect(); setTimeout(()=>{
// this.toolShow.attrCord=[domRect.width-350,0]; let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect();
// this.toolShow.height=domRect.height; // this.toolShow.attrCord=[domRect.width-350,0];
getTopology(this.topologyIndex).canvasPos=domRect; // this.toolShow.height=domRect.height;
let flag=false; getTopology(this.topologyIndex).canvasPos=domRect;
if(this.fromOverView){
getTopology(this.topologyIndex).open(this.oldTopologyData);
}
let flag=false;
let position={ let position={
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth, x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight, y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
}
getTopology(this.topologyIndex).data.pens.forEach(item=>{
if(flag){
return
} }
if(item.rect.ex>position.x || item.rect.ey>position.y){ getTopology(this.topologyIndex).data.pens.forEach(item=>{
getTopology(this.topologyIndex).fitView(20); if(flag){
flag=true return
} }
}); if(item.rect.ex>position.x || item.rect.ey>position.y){
getTopology(this.topologyIndex).centerView(20); getTopology(this.topologyIndex).fitView(20);
this.getNodesArr(); flag=true
}
});
getTopology(this.topologyIndex).centerView(20);
this.getNodesArr();
},100)
}, },
canvasMove(e){// 画布上的移动 确定tooltip的位置 canvasMove(e){// 画布上的移动 确定tooltip的位置
if(this.tooltipPosition.show){ if(this.tooltipPosition.show){

View File

@@ -30,10 +30,6 @@
id="alert-box-input-promql" id="alert-box-input-promql"
></promql-input> ></promql-input>
</div> </div>
<!--&lt;!&ndash;operator&ndash;&gt;-->
<!--<el-form-item :label="$t('alert.config.operator')" prop="operator" style="display: inline-block;">-->
<!--</el-form-item>-->
<!--threshold--> <!--threshold-->
<el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;"> <el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;">
<el-input type="text" placeholder="" v-model="editAlertRule.threshold" size="small" id="alert-box-input-threshold"> <el-input type="text" placeholder="" v-model="editAlertRule.threshold" size="small" id="alert-box-input-threshold">

View File

@@ -670,7 +670,6 @@
} }
}); });
}else{ }else{
console.log(213123123123);
this.prevent_opt.save=false; this.prevent_opt.save=false;
return false; return false;
} }

View File

@@ -778,7 +778,6 @@
return ''; return '';
}, },
changeTopologyIndexF(){ changeTopologyIndexF(){
console.log(132123132123123);
this.topologyIndexF=0; this.topologyIndexF=0;
}, },
}, },