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

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

@@ -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>

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

@@ -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="content-title"><i class="nz-icon nz-icon-jiantou-top colorFFF bg23BF9A"></i>high</span>
-          <span class="float-right">123</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="content-title"><i class="nz-icon nz-icon-jiantou-right colorFFF bg3C92F1"></i>medium</span>
-          <span class="float-right">123</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="content-title"><i class="nz-icon nz-icon-jiantou-down colorFFF bgEC7F66"></i>low</span>
-          <span class="float-right">123</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>
 

nezha-fronted/src/components/common/project/topology.vue

@@ -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>