diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index d243b6484..2c78974d4 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -311,7 +311,7 @@ export function myCubeAnchors(node) {//立方体锚点
 
 
 
-export function onChangeAnimate(node,animateType) {
+export function onChangeAnimate(node,animateType,fillStyle,strokeStyle) {
   if (node.animateType === 'custom') {
     return;
   }
@@ -392,7 +392,7 @@ export function onChangeAnimate(node,animateType) {
       });
       break;
     case 'success':
-      state.strokeStyle = '#237804';
+      state.strokeStyle =  strokeStyle?strokeStyle:'#237804';
       node.animateFrames.push({
         duration: 100,
         linear: true,
@@ -414,8 +414,8 @@ export function onChangeAnimate(node,animateType) {
         linear: true,
         state: Node.cloneState(node)
       });
-      state.strokeStyle = '#237804';
-      state.fillStyle = '#389e0d22';
+      state.strokeStyle = strokeStyle?strokeStyle: '#237804';
+      state.fillStyle = fillStyle?fillStyle:'#389e0d22';
       node.animateFrames.push({
         duration: 3000,
         linear: true,
@@ -423,8 +423,8 @@ export function onChangeAnimate(node,animateType) {
       });
       break;
     case 'warning':
-      state.strokeStyle = '#fa8c16';
-      state.fillStyle = '#fa8c16';
+      state.strokeStyle = strokeStyle?strokeStyle:'#fa8c16';
+      state.fillStyle = fillStyle?fillStyle:'#fa8c16';
       state.lineWidth=5;
       state.dash = 2;
       node.animateFrames.push({
@@ -432,7 +432,7 @@ export function onChangeAnimate(node,animateType) {
         linear: true,
         state
       });
-      state.strokeStyle = '#fa8c16';
+      state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
       state.dash = 0;
       state.lineWidth=1;
       state.fillStyle = '#ffffff';
@@ -441,10 +441,10 @@ export function onChangeAnimate(node,animateType) {
         linear: true,
         state: Node.cloneState(state)
       });
-      state.strokeStyle = '#fa8c16';
+      state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
       state.dash = 2;
       state.lineWidth=5;
-      state.fillStyle = '#fa8c16';
+      state.fillStyle = fillStyle?fillStyle: '#fa8c16';
       node.animateFrames.push({
         duration: 300,
         linear: true,
@@ -452,8 +452,8 @@ export function onChangeAnimate(node,animateType) {
       });
       break;
     case 'error':
-      state.strokeStyle = '#cf1322';
-      // state.fillStyle = '#cf132222';
+      state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
+      state.fillStyle = fillStyle?fillStyle:'#cf132222';
       state.lineWidth=5;
       state.dash = 2;
       node.animateFrames.push({
@@ -461,7 +461,8 @@ export function onChangeAnimate(node,animateType) {
         linear: true,
         state
       });
-      state.strokeStyle = '#cf1322';
+      state.strokeStyle = strokeStyle?strokeStyle:'#cf1322';
+      state.fillStyle = '#ffffff';
       state.dash = 0;
       state.lineWidth=1;
       node.animateFrames.push({
@@ -469,7 +470,8 @@ export function onChangeAnimate(node,animateType) {
         linear: true,
         state: Node.cloneState(state)
       });
-      state.strokeStyle = '#cf1322';
+      state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
+      state.fillStyle = fillStyle?fillStyle:'#cf132222';
       state.dash = 2;
       state.lineWidth=5;
       node.animateFrames.push({
@@ -479,14 +481,14 @@ export function onChangeAnimate(node,animateType) {
       });
       break;
     case 'show':
-      state.strokeStyle = '#fa541c';
-      state.rotate = -10;
+      state.strokeStyle = strokeStyle?strokeStyle: '#fa541c';
+      state.rotate = -5;
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(state)
       });
-      state.rotate = 10;
+      state.rotate = 5;
       node.animateFrames.push({
         duration: 100,
         linear: true,
diff --git a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
index 603057096..539e8a2c6 100644
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -4,7 +4,7 @@
     <div class="expression-info-content" v-if="expressionInfoData.length===0">No Data</div>
     <div class="expression-info-content" v-if="expressionInfoData.length>0">
       <el-row v-for="(item,index) in expressionInfoData" :key="index" v-if="index<20">
-        <el-col class="info-title" :span="18">{{item.legend.alias}}</el-col>
+        <el-col class="info-title" :span="18" :title="item.legend.name">{{item.legend.alias}}</el-col>
         <el-col class="info-content" :span="6" :style="{background:computeData(item).fill,color:computeData(item).text}">{{item.showValue}}</el-col>
       </el-row>
     </div>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index bb95bb690..cddd940e0 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -3,7 +3,7 @@
   @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box">
+  <div class="project-box" v-loading="topologyLoading">
     <div class="project-title" v-if="showTopTools&&!fromOverView">
       <div v-show="editTopologyFlag" class="edit-topologyLine">
         <!--工具栏-->
@@ -128,7 +128,7 @@
     </div>
     <div class="page">
       <!--画布部分-->
-      <div :id="'topology-canvas' + topologyIndexF" class="full" ref="topology-canvas"></div>
+      <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
       <!--设置属性-->
       <div class="props" v-if="editTopologyFlag&&toolShow.attr">
         <CanvasProps :selection.sync="props"
@@ -272,6 +272,7 @@
         editFlag:true,
         tools:Tools,
         props:{},
+        topologyLoading:false,
         contextmenu:{
           left:null,
           top:null,
@@ -395,14 +396,18 @@
         immediate:true,
         handler(n){
           if(n){
+            this.editTopologyFlag=false;
+            this.topologyLoading=true;
             if(!this.timer){
               this.timer=setTimeout(()=>{
+                this.topologyLoading=true;
                 this.init();
                 this.timer=null
               },300)
             }else{
               clearTimeout(this.timer);
               this.timer=setTimeout(()=>{
+                this.topologyLoading=true;
                 this.init();
                 this.timer=null
               },300)
@@ -474,7 +479,22 @@
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
               if(this.fromOverView){
-                getTopology(this.topologyIndex).centerView();
+                let flag=false;
+
+                let position={
+                  x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
+                  y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
+                }
+                getTopology(this.topologyIndex).centerView(50);
+                getTopology(this.topologyIndex).data.pens.forEach(item=>{
+                  if(flag){
+                    return
+                  }
+                  if(item.rect.x>position.x || item.rect.y>position.y){
+                    getTopology(this.topologyIndex).fitView(50);
+                    flag=true
+                  }
+                });
                 // getTopology(this.topologyIndex).fitView();
                 this.getNodesArr();
               }
@@ -523,11 +543,6 @@
             Promise.all(promiseArr).then((res)=>{
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
-              if(this.fromOverView){
-                getTopology(this.topologyIndex).centerView();
-                // getTopology(this.topologyIndex).fitView();
-                this.getNodesArr();
-              }
             });
           })
         });
@@ -536,6 +551,7 @@
         return new Promise(resolve=>{
           let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
           canvas.open(data);
+          this.topologyLoading=false;
           setTopology(this.topologyIndex,canvas);
           if(!getTopology(this.topologyIndex).data.name){
             getTopology(this.topologyIndex).data.name=this.obj.name;
@@ -611,6 +627,8 @@
           if(pen.type===0){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
             pen.font.color=selLevel.color.text;
+            pen.fillStyle=selLevel.color.fill;
+            pen.strokeStyle=selLevel.color.line;
             onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
           }else if(pen.type===1){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
@@ -705,7 +723,6 @@
       //获取module
       getModule(){
         this.projectInfo.loading=true;
-        // this.$refs['visNetwork'].topologyLoading=true;
         this.$get('project/info',{id:this.obj.id}).then(response=>{
           if(response.code===200){
             this.projectInfo.loading=false;
@@ -827,7 +844,7 @@
         },100);
       },
 
-      onMessage(event,data){
+      onMessage(event,data,e){
         console.log('onMessage',event,data);
         // console.log(getTopology(this.topologyIndex))
         if(getTopology(this.topologyIndex)){
@@ -916,28 +933,31 @@
         switch(event){
           case 'moveInNode':
           case 'moveInLine':
-            // if(this.timer3){
-            //   clearTimeout(this.timer3);
-            //   this.timer3=null
-            // }
+            if(this.timer3){
+              clearTimeout(this.timer3);
+              this.timer3=null
+            }
             this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
-            this.tooltipPosition.show=true;
+            this.tooltipPosition.show=false;
+            setTimeout(()=>{
+              this.tooltipPosition.show=true;
+            },50);
             break;
           case 'moveOutNode':
           case 'moveOutLine':
-            this.tooltipPosition.show=false;
-            return
+            // this.tooltipPosition.show=false;
+            // return
             if(!this.timer3){
               this.timer3=setTimeout(()=>{
                 this.tooltipPosition.show=false;
                 this.timer3=null
-              },300)
+              },150)
             }else{
               clearTimeout(this.timer3);
               this.timer3=setTimeout(()=>{
                 this.tooltipPosition.show=false;
                 this.timer3=null
-              },300)
+              },150)
             }
             break;
         }
@@ -1408,21 +1428,21 @@
         getTopology(this.topologyIndex).centerView();
       },
       canvasMove(e){// 画布上的移动 确定tooltip的位置
-        if(!this.tooltipPosition.show||this.timer3){
+        if(this.tooltipPosition.show){
           return
         }
         this.tooltipPosition.top=e.offsetY;
         this.tooltipPosition.left=e.offsetX+20;
       },
       tooltipOver(){
-        // clearTimeout(this.timer3);
-        // this.timer3=null
+        clearTimeout(this.timer3);
+        this.timer3=null
       },
       tooltipOut(){
-        // this.timer3=setTimeout(()=>{
-        //   this.tooltipPosition.show=false;
-        //   this.timer3=null
-        // },300)
+        this.timer3=setTimeout(()=>{
+          this.tooltipPosition.show=false;
+          this.timer3=null
+        },150)
       },
       nodeDefaultWidth(nodeName){
         switch(nodeName){