gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：组件统计查询接口调用

Browse Source
This commit is contained in:
zhangyu
2020-09-01 14:26:27 +08:00
parent 4ab7f5cdac
commit 6358e26367
3 changed files with 101 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
nezha-fronted/src/components/common/project/popData/Info.vue
View File

@@ -13,7 +13,11 @@
</div>
<div class="content-box">
<span class="content-title">Tag</span>
<span class="content-text">{{moduleInfo.type}}</span>
<!--{{moduleInfo.type}}-->
<span class="content-text">
<span :class="{'module-type':true,'module-type-select':moduleInfo.type==='http'}">HTTP</span>
<span :class="{'module-type':true,'module-type-select':moduleInfo.type==='snmp'}">SNMP</span>
</span>
</div>
<div class="content-box">
<span class="content-title">Port</span>
@@ -100,6 +104,8 @@
}
.content-box{
padding: 0 12px;
height: 29px;
line-height: 24px;
}
.info-box-content .content-box:not(:last-child){
border-bottom: 1px solid rgba(205,205,205,0.77);
@@ -119,4 +125,28 @@
display: inline-block;
padding: 3px 5px;
}
.module-type{
border: 1px solid #DCDCDC;
text-align: center;
width: 44px;
display: inline-block;
height: 20px;
margin: 0 auto;
line-height: 20px;
}
.module-type:first-child{
border-right-color:rgba(255,140,14,0.54);
border-radius: 4px 0 0 4px;
margin-right: -4px;
border-right: none;
}
.module-type:last-child{
border-left-color:rgba(255,140,14,0.54);
border-radius: 0 4px 4px 0;
z-index: -1;
}
.module-type-select{
border-color:rgba(255,140,14,0.54);
color: rgba(255,140,14,0.54);
}
</style>

53
nezha-fronted/src/components/common/project/popData/Main.vue
View File

@@ -5,11 +5,11 @@
<div class="main-box-content">
<div class="content-box">
<span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
<span class="float-right">123</span>
<span class="float-right">{{moduleInfo.assetStat.up}}</span>
</div>
<div class="content-box">
<span class="content-title"><i class="el-icon-download colorFFF bgEC7F66"></i>down</span>
<span class="float-right">123</span>
<span class="float-right">{{moduleInfo.assetStat.down}}</span>
</div>
</div>
</div>
@@ -19,11 +19,11 @@
<div class="main-box-content">
<div class="content-box">
<span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
<span class="float-right">123</span>
<span class="float-right">{{moduleInfo.endpointStat.up}}</span>
</div>
<div class="content-box">
<span class="content-title"><i class="el-icon-download colorFFF bgEC7F66"></i>down</span>
<span class="float-right">123</span>
<span class="float-right">{{moduleInfo.endpointStat.down}}</span>
</div>
</div>
</div>
@@ -32,16 +32,16 @@
<div class="main-box-title">alert message</div>
<div class="main-box-content">
<div class="content-box">
<span class="content-title"><i class="nz-icon nz-icon-jiantou-top colorFFF bg23BF9A"></i>up</span>
<span class="float-right">123</span>
<span class="content-title"><i class="nz-icon nz-icon-jiantou-top colorFFF bg23BF9A"></i>high</span>
<span class="float-right">{{moduleInfo.alertStat.high}}</span>
</div>
<div class="content-box">
<span class="content-title"><i class="nz-icon nz-icon-jiantou-right colorFFF bg3C92F1"></i>down</span>
<span class="float-right">123</span>
<span class="content-title"><i class="nz-icon nz-icon-jiantou-right colorFFF bg3C92F1"></i>medium</span>
<span class="float-right">{{moduleInfo.alertStat.medium}}</span>
</div>
<div class="content-box">
<span class="content-title"><i class="nz-icon nz-icon-jiantou-down colorFFF bgEC7F66"></i>down</span>
<span class="float-right">123</span>
<span class="content-title"><i class="nz-icon nz-icon-jiantou-down colorFFF bgEC7F66"></i>low</span>
<span class="float-right">{{moduleInfo.alertStat.low}}</span>
</div>
</div>
</div>
@@ -55,16 +55,41 @@
moduleId:{},
projectId:{},
},
watch:{},
watch:{
moduleId(n){
this.init();
}
},
data(){
return{
moduleInfo:{
alertStat:{
high:0,
low:0,
medium:0,
},
assetStat:{
down:0,
up:0,
},
endpointStat:{
down:0,
up:0,
},
}
}
},
mounted(){
console.log(this.moduleId,this.projectId)
this.init()
},
methods:{
init(){
console.log(111);
this.$get('/module/stat',{id:this.moduleId}).then(res=>{
this.moduleInfo=res.data;
})
}
},
methods:{},
}
</script>

32
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -76,6 +76,11 @@
<popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
</div>
</div>
<!--拓扑图的放大缩小-->
<!--<div class="network-zoom">-->
<!--<div @click='zoomChange(0.1)'><i class="nz-icon nz-icon-hexagonBorder zoom-icon"></i></div>-->
<!--<div @click='zoomChange(-0.1)'><i class="nz-icon nz-icon-hexagonBorder zoom-icon"></i></div>-->
<!--</div>-->
</div>
<transition name="right-box">
@@ -596,7 +601,7 @@
};
if(key&&!this.editVisNetwork){
if(key==='total'&&this.selNodeId){
this.totalId=this.selNodeId
this.totalId=this.selNodeId;
this.totalArray=this.nodesArray;
}
if(key==='total'&&this.lineData){
@@ -606,6 +611,23 @@
this.popDataShow[key]=true;
}
},
//拓扑图放大缩小
zoomChange(num){
this.zoom+=num;
if(this.zoom<0){//每次缩小0.1 保证缩放大于0
this.zoom=0.01;
}
this.network.moveTo({
position: this.viewsCenter,
scale: this.zoom,
offset: {x:0, y:0},
});
this.$nextTick(()=>{
this.modelTopUpdate();
this.setPopPosition(this.selNodeId);
this.popDataShowUpdate();
})
}
},
mounted(){
setTimeout(()=>{
@@ -928,4 +950,12 @@
color: #FFFFFF;
padding: 4px 14px;
}
.network-zoom{
position: absolute;
bottom: 15px;
right: 15px;
}
.zoom-icon{
font-size: 42px;
}
</style>