diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 8ddc6617b..462d67b2a 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -71,7 +71,8 @@ const en = {
       failedDetail:'Failed Detail'
     },
     reset:'Reset',
-    submit:'Submit'
+    submit:'Submit',
+    noData:'No data',
   },
   pageSize: '/page',
   webshell:{
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index b553c0578..f93bed371 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -140,6 +140,9 @@
           <div class="right-box-sub-title">{{$t('asset.createAssetTab.location')}}</div>
           <div class="line-100 right-box-line"></div>
           <!------------------------------------------IDC---------------------------------------------->
+          <el-form-item>
+<!--            <location-cascader :default-model-u-size="temp"></location-cascader>-->
+          </el-form-item>
           <el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
             <template v-if="!tabView">
 <!--              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
@@ -171,7 +174,6 @@
           </el-form-item>
           <el-divider></el-divider>
 
-
           <!------------------------------------------cabinet---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
             <template v-if="!tabView">
@@ -205,6 +207,7 @@
             </template>
             <span v-if="tabView">{{assetViewData.cabinetName}}</span>
           </el-form-item>
+
           <el-form-item :label="$t('asset.editAssetTab.uSize')">
             <span>{{cabinetSelectedData.uSize}}</span>
           </el-form-item>
@@ -248,14 +251,17 @@
   import accountConfig from '../../page/asset/accountConfig';
   import {host} from '../js/validate';
   import {port} from '../js/validate'
+  import locationCascader from "./locationCascader";
   export default {
     name: "assetEditUnit",
     props: ["editUnitShow", "editUnitId"],
     components:{
       'account-config-box': accountConfig,
+      'location-cascader':locationCascader,
     },
     data() {
       return {
+        temp:3,
         visible: '',
         vendorModelData: '',
         assetData: {
diff --git a/nezha-fronted/src/components/common/rightBox/locationCascader.vue b/nezha-fronted/src/components/common/rightBox/locationCascader.vue
new file mode 100644
index 000000000..69a4d3d5c
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/locationCascader.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="location" >
+    <div @click="toggleDropdown">
+      <el-input :placeholder="$t('overall.select')" size="small" style="position: relative" >
+        <i slot="suffix" class="el-select__caret el-input__icon el-icon-arrow-down" style="font-size: 14px" :class="{'reverse':dropDownVisible == true}"></i>
+      </el-input>
+    </div>
+    <div class="dropdown" :class="{'dropdown-active':dropDownVisible == true}">
+      <div class="container">
+        <div class="container-item">
+          <el-scrollbar style="height: 100%;">
+            <ul v-if="idcInfos&& idcInfos.length>0">
+              <li v-for="(item,index) in idcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
+                <div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.idc&&selectedData.idc.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
+              </li>
+            </ul>
+            <div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
+          </el-scrollbar>
+        </div>
+        <div class="container-item" v-show="isShowCabinet">
+          <el-scrollbar style="height: 100%;">
+            <ul v-if="showCabinetInfos&& showCabinetInfos.length>0">
+              <li v-for="(item,index) in showCabinetInfos" :key="item.id+'-'+index" @click="loadCabinetUInfos(item)">
+                <div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.cabinet&&selectedData.cabinet.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
+              </li>
+            </ul>
+            <div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
+          </el-scrollbar>
+        </div>
+        <div class="container-item" v-show="isShowCabinetU" style="border-right: unset">
+          <el-scrollbar style="height: 100%">
+            <el-checkbox-group v-model="uChecked" v-if="refresh" @change="uChange">
+              <el-checkbox v-for="(item,index) in showUInfos " :label="item.label" :value="item.value" :disabled="item.occupy==true" :checked="item.occupy==true||item.checked==true" :ref="'u-'+selectedData.idc.id+'-'+selectedData.cabinet.id+'-'+item.value" style="width: 50%"></el-checkbox>
+            </el-checkbox-group>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+    <div class="dropdown-arrow"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "locationCascader",
+    components:{
+
+    },
+    props:{
+      defaultModelUSize:{default:1}
+    },
+    data(){
+      return {
+        dropDownVisible:false,
+        idcInfos:[],
+        cabinetInfos:new Map(),
+        showCabinetInfos:[],
+        uInfos:new Map(),
+        showUInfos:[],
+        selectedData:{
+          idc:null,
+          cabinet:null,
+          u:null
+        },
+        isShowCabinet:false,
+        isShowCabinetU:false,
+        occupyU:[],
+        uCheckedInfos:new Map(),
+        uChecked:[],
+        refresh:true,
+        oldUChecked:[],
+      }
+    },
+    created(){
+      this.queryIdcInfos();
+    },
+    methods:{
+      toggleDropdown:function(){
+        this.dropDownVisible = !this.dropDownVisible;
+      },
+      queryIdcInfos:function(){
+        this.idcInfos=[];
+        this.$get('idc?pageSize=-1').then(response=>{
+          if(response.code == 200){
+              this.idcInfos=response.data.list;
+          }else{
+            console.error(response.msg);
+          }
+        })
+      },
+      loadCabinetInfos:function(idc){
+        this.selectedData.idc=idc;
+        let cabinetKey='idc-'+idc.name+'-'+idc.id;
+        this.showCabinetInfos=[];
+        if(this.cabinetInfos.has(cabinetKey)&&this.cabinetInfos.get(cabinetKey)&&this.cabinetInfos.get(cabinetKey).length>0){
+          this.showCabinetInfos=this.cabinetInfos.get(cabinetKey);
+        }else{
+          this.$get('cabinet?pageSize=-1&idcId='+idc.id).then(response=>{
+            if(response.code == 200){
+              this.cabinetInfos.set(cabinetKey,response.data.list);
+              this.showCabinetInfos=response.data.list;
+            }else{
+              console.error(response.msg);
+            }
+          })
+        }
+        this.isShowCabinet=true;
+        this.isShowCabinetU=false;
+        this.showUInfos=[];
+      },
+      loadCabinetUInfos:function(cabinet){
+        this.selectedData.cabinet=cabinet;
+        let cabinetUKey='cabinet-'+this.selectedData.idc.id+'-'+cabinet.id
+        this.showUInfos=[];
+        this.uChecked=[];
+        if(this.uInfos.has(cabinetUKey)&&this.uInfos.get(cabinetUKey)&&this.uInfos.get(cabinetUKey).length>0){
+          this.showUInfos=this.uInfos.get(cabinetUKey);
+        }else{
+          let us=[];
+          this.$get('cabinet/u?id='+cabinet.id).then(response=>{
+            if(response.code == 200){
+              for(let i=1;i<=response.data.total;i++){
+                let u={
+                  label:i,
+                  value:i,
+                  occupy:false,
+                  checked:false,
+                }
+                this.occupyU=response.data.occupy;
+                if(response.data.occupy.find((item)=>{return u.value == item})){
+                  u.occupy=true;
+                }
+                us.push(u)
+              }
+              this.showUInfos=us;
+              this.uInfos.set(cabinetUKey,us);
+            }else{
+              console.error(response.msg);
+            }
+          })
+        }
+        this.isShowCabinetU=true;
+        this.refreshCheckBox();
+      },
+      uChange:function(data){
+        if(data.length < this.oldUChecked.length){ //取消选择操作
+          //1.判断是否仅剩下defualtModelusize 的u位选中
+          let checkedValue=this.findUnoccupyU(this.oldUChecked);
+          if(checkedValue.length <= this.defaultModelUSize){ // 刚好满足或小于默认usize
+            this.uChecked=[];
+            this.uChecked.push(this.occupyU);
+          }else{
+            let unCheckValue=this.oldUChecked.filter((item)=>{//取消选择的那个元素
+              return this.oldUChecked.includes(item)&&!data.includes(item);
+            })
+            //2.判断是否连续，如果不是连续取消
+          }
+        }else{
+          let checkValues=this.findUnoccupyU(data);
+          let checkValue=data[data.length-1]; //当前选中的u
+          if(checkValues.length < this.defaultModelUSize){ //如果小于model 规定的大小，需要自动选择
+            let suitU=this.findSuitableU(checkValue);
+            if(suitU.length>0){ //有合适的u位
+              while(this.uChecked.length - this.occupyU.length < this.defaultModelUSize){
+                let popU=suitU.splice(0,1)[0]
+                this.uChecked.push(popU.value);
+              }
+            }else{
+              this.uChecked.splice(this.uChecked.length-1,1);
+            }
+          }else{//至少已经选择了defaultCabinetUsize 个u ，这里需要处理不连续选择的情况
+            //1.判断是否连续
+            let oldUCheckCopy=Object.assign([],this.oldUChecked);
+            oldUCheckCopy=this.findUnoccupyU(oldUCheckCopy)
+            oldUCheckCopy.sort((a,b)=>{return a-b});
+            let min=oldUCheckCopy[0];
+            let max=oldUCheckCopy[oldUCheckCopy.length-1];
+            if(checkValue - max > 1 ){ //不连续
+              //2.不连续需要判断中间数值是否有被占用的，有占用的不可选
+              let occupyFlag=false;
+              for(let i=max+1;i<checkValue;i++){
+                if(this.occupyU.find((item)=>{return i == item})){
+                  occupyFlag=true;
+                  break;
+                }
+              }
+              if(!occupyFlag){//没有占用，需要将中间未选中的选中
+                for(let i=max+1;i<checkValue;i++){
+                  this.uChecked.push(i);
+                }
+              }else{//占用，取消当前选中
+                this.uChecked.splice(this.uChecked.length-1,1);
+              }
+            }else if(min - checkValue >1){//不连续
+              let occupyFlag=false;
+              for(let i=checkValue;i<min;i++){
+                if(this.occupyU.find((item)=>{return i==item})){
+                  occupyFlag=true;
+                  break;
+                }
+              }
+              if(!occupyFlag == true){
+                for(let i=checkValue;i<min;i++){
+                  this.uChecked.push(i);
+                }
+              }else{
+                this.uChecked.splice(this.uChecked.length-1,1);
+              }
+            }else{//连续
+              //doNothing
+            }
+
+          }
+
+        }
+        this.oldUChecked=this.uChecked;
+      },
+      findUnoccupyU:function(arr){
+        return  arr.filter((item,index)=>{
+         return !this.occupyU.includes(item);
+        })
+      },
+      findSuitableU:function(checkValue){
+        //将u位数组分为左右两部分，先查找右边的是否符合
+        let left=this.showUInfos.filter((item,index)=>{return item.value < checkValue});
+        left=left.reverse();//自下而上查找
+        let right=this.showUInfos.filter((item,index)=>{return item.value > checkValue});
+        let leftCount=[]; //存放左侧合适的u位
+        let rightCount=[];//存放右侧合适的u位
+        for(let i=0;i<left.length;i++){
+          let item=left[i];
+          if(item.occupy == false){
+            leftCount.push(item);
+          }else{
+            break;
+          }
+        }
+
+        for(let i=0;i<right.length;i++){
+          let item=right[i];
+          if(item.occupy == false){
+            rightCount.push(item);
+          }else{
+            break;
+          }
+        }
+        let result=rightCount.concat(leftCount);
+        if(result.length < this.defaultModelUSize - 1){
+          result=[];
+        }
+        return result;
+      },
+      refreshCheckBox:function(){
+        this.refresh = false
+        this.$nextTick(() => {
+          this.refresh = true
+        })
+      }
+    },
+    mounted() {
+
+    }
+  }
+</script>
+
+<style scoped>
+  .location{
+    position: relative;
+  }
+  .reverse{
+    transform: rotate(-180deg);
+  }
+  .dropdown{
+    position: absolute;
+    min-width: 200px;
+    padding:5px;
+    background-color: #fff;
+    display: none;
+    z-index: 2020;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    margin: 10px 0;
+  }
+  .dropdown:before{
+    content: "";
+    width: 0;
+    height: 0;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #fff;
+    border-left: 5px solid transparent;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    position: absolute;
+    left: 10%;
+    top:0%;
+    margin-top:-5px
+  }
+  .dropdown:after{
+
+  }
+  .dropdown-active{
+    display: block !important;
+    height: 200px;
+    width: 100%;
+  }
+  .container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+  }
+  .container .container-item{
+    height: 100%;
+    flex: 1;
+    width: 0;
+    border-right: 1px solid #E4E7ED;
+    padding-left: 5px;
+  }
+  .container-item-content{
+    display: flex;
+    justify-content: space-between;
+    padding:5px;
+  }
+  .container-item-content .container-item-content_label{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .container-item-content .selected{
+    font-weight: 700;
+    color:#ee9d3f;
+  }
+  .container-item-content .container-item-content_label:hover{
+    color:#ee9d3f;
+  }
+
+  .dropdown-empty{
+    margin: 0;
+    text-align: center;
+    color: #999;
+    font-size: 14px;
+  }
+</style>
+<style>
+
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index 4a6d0dccb..1e87fcbee 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -808,7 +808,11 @@
                   }else{
                     areaName=areaInfo.name;
                   }
-                  seriesDatas.push({name:areaName,value:[areaInfo.longitude,areaInfo.latitude,dcStat]})
+                  seriesDatas.push({
+                    name:areaName,
+                    value:[areaInfo.longitude,areaInfo.latitude,dcStat],
+                    // symbolSize:5,
+                  })
                 }
               }
             }
@@ -841,7 +845,7 @@
         let dcStat=params.data.value[2];
         let tooltip=`
             <div class="tooltip">
-                <div>${dcStat.name}</div>
+                <div style="margin-left: 12px">${dcStat.name}</div>
                 <div class="flex-box">
                    <div style="width: 60%;">
                         <table  style="width: 100%;" class="tooltip-table">