diff --git a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
index 09836fc77..abf8842cd 100644
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -1,16 +1,27 @@
 <template>
   <div class="expressionInfo" :style="{top:expressionsInfoPosition.y+'px',left:expressionsInfoPosition.x+'px'}" v-if="expressionsData.length">
     <el-tooltip v-model="show" class="item" effect="light" content="Right Bottom 提示文字" placement="right-start" >
-      <div slot="content" style="padding: 5px;min-width: 150px;max-width: 260px">
-        <div v-if="total>10" class="more-title-other">
+      <div slot="content"  class="main-box">
+        <div v-if="total>10" class="more-title-other expressions-box">
           {{$t('dashboard.panel.moreTitleOther')}}{{$t('dashboard.panel.showAllOther')}} {{ total}}
         </div>
         <div  v-for="(item,index) in expressionsData" class="expressions-box">
           <span class="expressions-box-title">{{item.name}}</span>
-          <div v-for="item1 in item.value" class="expressions-metric">
-            {{item.legend?item.legend:item.metric }} : {{ dataFormat(item.unit,item1.value[1])}}
+          <div class="expressions-box-content"  v-if="item.value.length!==0">
+            <div class="expressions-metric">
+              <span class="expressions-box-label" style="font-weight: bold">Key</span>
+              <span class="expressions-box-value" style="font-weight: bold">Value</span>
+            </div>
+            <div v-for="item1 in item.value" class="expressions-metric">
+              <span class="expressions-box-label">{{legendFormat(item.metric,item.legend)}}</span>
+              <span class="expressions-box-value">{{ dataFormat(item.unit,item1.value[1])}}</span>
+            </div>
           </div>
-          <div v-if="item.value.length===0">
+          <div v-if="item.value.length===0" class="expressions-box-content" style="padding: 3px;border-bottom: 1px solid #ebeef5">
+            <div class="expressions-metric">
+              <span class="expressions-box-label" style="font-weight: bold">Key</span>
+              <span class="expressions-box-value" style="font-weight: bold">Value</span>
+            </div>
            NoData
           </div>
         </div>
@@ -58,6 +69,7 @@
         if(index<11){
           this.expressionsData.push({...item,value:[]})
         }
+        item.value=item.value || [];
         item.value.forEach((item1,j)=>{
           index++;
           if(index<11){
@@ -72,7 +84,25 @@
     methods:{
       dataFormat(unit,value){
         return chartDataFormat.getUnit(unit?unit:2).compute(value)
-      }
+      },
+      legendFormat:function(legend,expression){
+        if(/\{\{.+\}\}/.test(expression)&&expression){
+          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
+            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
+            let reg=new RegExp(label+'=".+?"');
+            let value=null;
+            if(reg.test(legend)){
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
+          });
+          return labelValue
+        }else{
+          return expression?expression:legend;
+        }
+
+      },
     }
   }
 </script>
@@ -88,11 +118,55 @@
   .more-title-other{
     margin-bottom: 5px;
   }
+  .main-box{
+    min-width: 150px;
+    max-width: 260px;
+    overflow: hidden;
+    padding: 0 5px 5px 5px;
+    border: 1px solid #ebeef5;
+  }
   .expressions-box{
     min-width: 100px;
   }
+  .main-box .expressions-box:not(:last-child){
+    border-bottom: 1px dashed #ebeef5;
+    padding-bottom: 5px;
+  }
   .expressions-box-title{
     margin-bottom: 5px;
+    margin-top: 5px;
     display: inline-block;
+    font-weight: bold;
+    font-size: 13px;
+    color: #1a1a1a;
+  }
+  .expressions-box-label{
+    font-size: 12px;
+    color: #1a1a1a;
+    padding: 3px;
+    border-bottom: 1px solid #ebeef5 ;
+  }
+  .expressions-box-value{
+    font-size: 12px;
+    color: #666;
+    padding: 3px 3px 3px 5px;
+    border-bottom: 1px solid #ebeef5 ;
+  }
+  .expressions-box-content{
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+  }
+  .expressions-metric{
+    display: flex;
+  }
+  .expressions-metric > span{
+    width: 50%;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    text-align: left;
+  }
+  .expressions-metric > span:not(:first-child){
+    border-left: 1px solid #ebeef5;
   }
 </style>
diff --git a/nezha-fronted/src/components/common/project/popData/totalChart.vue b/nezha-fronted/src/components/common/project/popData/totalChart.vue
index 7db09eebf..348cd642b 100644
--- a/nezha-fronted/src/components/common/project/popData/totalChart.vue
+++ b/nezha-fronted/src/components/common/project/popData/totalChart.vue
@@ -55,6 +55,7 @@
       let arr=[];
       item.expressions.forEach((item1,index)=>{
         let obj={...item,elements:[{...item1,expression:item1.metric,}],isHide:false,type:'line',title:item1.name,id:index,loading:true};
+        obj.unit=item1.unit;
         arr.push(obj)
       });
       this.dataList=arr;
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 756f62ab8..2886cdd86 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -292,6 +292,7 @@
     },
     methods:{// 保存拓扑图数据
       saveTopology(){
+        this.$emit('topologyLoad');
         let nodes=this.formatNodes([...this.nodesArray]);
         let edges=this.formatEdges([...this.edgesArray]);
         this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges,viewsCenter:this.viewsCenter,zoom:(this.zoom*1920/this.screenX)}),projectId:this.allModuleInfo.basic.id}).then(res=>{
@@ -660,6 +661,12 @@
           x:e.layerX,
           y:e.layerY,
         };
+        console.log();
+        if(e.path[0].nodeName!=='CANVAS'){
+          this.expressionsInfoShow=false;
+          this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMoveEdge);
+          return
+        }
         this.expressionsInfoPosition=position;
       },
       modelTopClick(item,index){
@@ -816,6 +823,7 @@
           }
           if(!this_.editVisNetwork){
             if(this_.lineData.expressions&&this_.lineData.expressions.length){
+              this_.expressionsInfoShow=false;
               this_.popDataShowUpdate('total')
             }else{
               this_.popDataShowUpdate()
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index e105d6331..0db49306e 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -102,6 +102,7 @@
             v-loading="topologyLoading"
             @editVisNetworkChange="editVisNetworkChange"
             @reload="reload"
+            @topologyLoad="topologyLoad"
           >
           </topology>
           <!--<cytoscape-->
@@ -343,6 +344,9 @@
         }
         this.reload();
       },
+      topologyLoad(){
+        this.topologyLoading=true;
+      }
     },
 
     mounted(){