diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 8f2b955fc..4ebd6f629 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -146,7 +146,12 @@
           <div style="width: 100%;margin-top: 10px">
             <div class="thresholds-box">
               <el-row class="thresholds-title">
-                <el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}</el-col>
+                <el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
+                  <span @click="changeValueMappingSort">
+                    <i  :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i>
+                    <i  :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i>
+                  </span>
+                </el-col>
                 <el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
                 <el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
                 <el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
@@ -154,7 +159,14 @@
               </el-row>
 
               <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
-                <el-col class="thresholds-cell" :span="4"> {{item.level}}</el-col>
+                <el-col class="thresholds-cell" :span="4">
+                  <span v-if="selection.pen.data.valueMappingSort==='desc'">
+                     {{index===0?selection.pen.data.valueMapping.length-1:(item.level-1)}}
+                  </span>
+                  <span v-else>
+                    {{item.level}}
+                  </span>
+                </el-col>
                 <el-col class="thresholds-cell" :span="4">
                    <span v-if="item.level!==0">
                     <div style="display: inline-block">
@@ -190,14 +202,14 @@
                   <span v-else>base</span>
                 </el-col>
                 <el-col class="thresholds-cell" :span="6" style="display: flex">
-                  <span v-if="item.level!==0" style="display: inline-block;width: 30%;text-align: center"> > </span>
-                  <el-input-number
+                  <el-input
                     v-if="item.level!==0"
-                    v-model="item.value"
+                    v-model.number="item.value"
                     @change="valueMappingValueChange(item)"
-                    :controls="false"
                     size="small"
-                  />
+                  >
+                    <template slot="prepend"> > </template>
+                  </el-input>
                   <span v-else>base</span>
                 </el-col>
                 <el-col class="thresholds-cell" :span="8">
@@ -867,7 +879,7 @@
             <div class="full pr10 h32">
               <el-radio-group v-model="topologyData.data.align" size="small" @change="changeTopologyOpt">
                 <el-radio-button label="left">left</el-radio-button>
-                <el-radio-button label="bottom">center</el-radio-button>
+                <el-radio-button label="center">center</el-radio-button>
                 <el-radio-button label="right">right</el-radio-button>
               </el-radio-group>
             </div>
@@ -1175,11 +1187,6 @@
             name:'',
             bkColor:'#FFFFFF',
             bkImage:'',
-            grid:false,
-            gridSize:'',
-            gridColor:undefined,
-            rule:false,
-            ruleColor:undefined,
             lineName:'curve',
             lineWidth:1,
             fromArrow:'',
@@ -1573,6 +1580,7 @@
           }
         });
         getTopology(this.index).render();
+        this.$emit('changeProjectTitle')
       },
       colorRGBtoHex(color){//获取颜色16进制数
         if(!color){
@@ -1630,21 +1638,61 @@
         }
       },
       valueMappingAdd(){
-        this.selection.pen.data.valueMapping.push({
-          color:{
-            line:'#000000',
-            fill:'#ffffff',
-            text:'#000000',
-          },
-          showColor:undefined,
-          animateType:this.selection.pen.type?1:'upDown',
-          value:0,
-          level:this.selection.pen.data.valueMapping.length,
-          showType:'fill',//bac text border
-        });
+        if(this.selection.pen.data.valueMappingSort==='desc'){
+          this.selection.pen.data.valueMapping.push({
+            color:{
+              line:'#000000',
+              fill:'#ffffff',
+              text:'#000000',
+            },
+            showColor:undefined,
+            animateType:this.selection.pen.type?1:'upDown',
+            value:0,
+            level:1,
+            showType:'fill',//bac text border
+          });
+          this.selection.pen.data.valueMapping.forEach((item,index)=>{
+            if(index===0){
+              return
+            }
+            item.level=this.selection.pen.data.valueMapping.length-index;
+          })
+        }else{
+          this.selection.pen.data.valueMapping.push({
+            color:{
+              line:'#000000',
+              fill:'#ffffff',
+              text:'#000000',
+            },
+            showColor:undefined,
+            animateType:this.selection.pen.type?1:'upDown',
+            value:0,
+            level:this.selection.pen.data.valueMapping.length,
+            showType:'fill',//bac text border
+          });
+        }
       },
       valueMappingValueChange(index,row){
 
+      },
+      changeValueMappingSort(){
+        if(this.selection.pen.data.valueMappingSort==='desc'){
+          this.selection.pen.data.valueMappingSort='asc';
+          let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
+          let a=arr.splice(0,1);
+          arr.reverse();
+          arr.unshift(a[0]);
+          this.selection.pen.data.valueMapping=arr;
+        } else{
+          this.selection.pen.data.valueMappingSort='desc';
+          let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
+          let a=arr.splice(0,1);
+          arr.reverse();
+          arr.unshift(a[0]);
+          console.log(arr);
+          this.selection.pen.data.valueMapping=arr;
+          console.log('aaa')
+        }
       },
       valueMappingDel(index,row){
         this.selection.pen.data.valueMapping.splice(index,1);
@@ -1927,6 +1975,15 @@
       padding: 5px 5px;
       height: 42px;
       line-height: 32px;
+      /deep/  .el-input-group__prepend{
+        padding: 0 10px;
+      }
+      .is-arrow-active{
+        color: #FA901C;
+      }
+      .nz-icon.nz-icon-arrow-up1{
+        margin-right: -15px;
+      }
     }
   }
   .value-mapping-add{
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 455560c43..3e9377ae9 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -5,7 +5,7 @@
 <template>
   <div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
     <!--project主要信息-->
-    <div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
+    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
         <!--工具栏-->
         <span class="project-topology-tool">
@@ -118,8 +118,8 @@
            </button>
          </span>
       </div>
-      <div style="width: 100%;display: flex;justify-content: space-between">
-        <div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
+      <div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
+        <div class="facade-top">
           <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
             <div class="facade-top-title">
               Project information
@@ -176,8 +176,8 @@
             </div>
           </div>
         </div>
-        <div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
-        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
+        <div  :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
+        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 
 
 
@@ -200,6 +200,7 @@
         <CanvasProps :selection.sync="props"
                      @change="onUpdateProps"
                      @animate="animateCanvas"
+                     @changeProjectTitle="changeProjectTitle"
                      :index="topologyIndex"
                      @del="delPen"
                      :modules="modules"
@@ -328,7 +329,6 @@
   import CanvasContextMenu from './L5//CanvasContextMenu';
   import topologyTopTool from './L5//topologyTopTool';
   import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
-  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
   import popDataMain from './popData/Main'
   import popDataInfo from './popData/Info'
   import TotalChart from "./popData/totalChart";
@@ -1158,6 +1158,7 @@
                 level:0,
                 base:true,
               }],
+              valueMappingSort:'asc',
               expressArr:[""],
               legends:[""],
               tooltipShow:true,
@@ -1183,8 +1184,8 @@
               //chart 配置项
               valueMapping:[{
                 color:{
-                  border:'#000000',
-                  bac:'#ffffff',
+                  line:'#000000',
+                  fill:'#ffffff',
                   text:'#000000',
                 },
                 value:'base',
@@ -1192,6 +1193,7 @@
                 level:0,
                 base:true,
               }],
+              valueMappingSort:'asc',/*desc*/
               expressArr:[""],
               legends:[""],
               tooltipShow:true,
@@ -1732,6 +1734,18 @@
         this.topoPrevData.grid=false;
         this.previewShow=true;
       },
+
+      //联动 project
+      changeProjectTitle(){
+        let data=getTopology(this.topologyIndex).data;
+        this.topologyInfo={
+          fontSize:data.data.fontSize,
+          align:data.data.align,
+          fontColor:data.data.fontColor,
+          opacity:data.data.opacity,
+          name:data.name
+        }
+      },
       /*tools 方法*/
 
       winResize(){
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index a315f4adf..b101d7cbe 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -5,7 +5,7 @@
 <template>
   <div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
     <!--project主要信息-->
-    <div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
+    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
         <!--工具栏-->
         <span class="project-topology-tool">
@@ -118,8 +118,8 @@
            </button>
          </span>
       </div>
-      <div style="width: 100%;display: flex;justify-content: space-between">
-        <div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
+      <div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
+        <div class="facade-top">
           <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
             <div class="facade-top-title">
               Project information
@@ -176,8 +176,8 @@
             </div>
           </div>
         </div>
-        <div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
-        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
+        <div  :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
+        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 
 
 
@@ -200,6 +200,7 @@
         <CanvasProps :selection.sync="props"
                      @change="onUpdateProps"
                      @animate="animateCanvas"
+                     @changeProjectTitle="changeProjectTitle"
                      :index="topologyIndex"
                      @del="delPen"
                      :modules="modules"
@@ -328,7 +329,6 @@
   import CanvasContextMenu from './L5//CanvasContextMenu';
   import topologyTopTool from './L5//topologyTopTool';
   import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
-  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
   import popDataMain from './popData/Main'
   import popDataInfo from './popData/Info'
   import TotalChart from "./popData/totalChart";
@@ -1158,6 +1158,7 @@
                 level:0,
                 base:true,
               }],
+              valueMappingSort:'asc',
               expressArr:[""],
               legends:[""],
               tooltipShow:true,
@@ -1183,8 +1184,8 @@
               //chart 配置项
               valueMapping:[{
                 color:{
-                  border:'#000000',
-                  bac:'#ffffff',
+                  line:'#000000',
+                  fill:'#ffffff',
                   text:'#000000',
                 },
                 value:'base',
@@ -1192,6 +1193,7 @@
                 level:0,
                 base:true,
               }],
+              valueMappingSort:'asc',/*desc*/
               expressArr:[""],
               legends:[""],
               tooltipShow:true,
@@ -1732,6 +1734,18 @@
         this.topoPrevData.grid=false;
         this.previewShow=true;
       },
+
+      //联动 project
+      changeProjectTitle(){
+        let data=getTopology(this.topologyIndex).data;
+        this.topologyInfo={
+          fontSize:data.data.fontSize,
+          align:data.data.align,
+          fontColor:data.data.fontColor,
+          opacity:data.data.opacity,
+          name:data.name
+        }
+      },
       /*tools 方法*/
 
       winResize(){