diff --git a/src/views/dataBoard/cpts/homeDetails/index.vue b/src/views/dataBoard/cpts/homeDetails/index.vue
index 3fccea977..d52eeb6c5 100644
--- a/src/views/dataBoard/cpts/homeDetails/index.vue
+++ b/src/views/dataBoard/cpts/homeDetails/index.vue
@@ -12,6 +12,9 @@
           },
         ]" />
     </div>
+    <div class="top-nav-list">
+      <div v-for="item in buildingList" :key="item.id" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">{{ item.buildingName }}{{ item.unitName }}</div>
+    </div>
     <el-row :gutter="48">
       <el-col :span="8">
         <div class="bg">
@@ -104,6 +107,7 @@ export default {
       homeMsg: {},
       list: [],
       homeText: "",
+      buildingList: [],
       houseMountArr: [],
     };
   },
@@ -150,36 +154,50 @@ export default {
     getList() {
       this.loading = true;
       const homeType = this.$route.query.type;
-      // if (homeType === "building") {
-      //   this.$http.get(`/actual/base/streetOverview/getUnitHouseOverviewList?unitId=` + this.$route.query.id).then((res) => {
-      //     console.log(res);
-      //   });
-      // } else {
-      this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + this.$route.query.id).then((res) => {
-        const {
-          code,
-          data: { houseList, unitInfo },
-        } = res.data;
-        if (code === 0) {
-          let unitInfos = unitInfo || {};
-          this.list = houseList;
-          this.homeMsg = unitInfos;
-          this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
-          console.log(this.homeText, " this.homeText");
-          this.houseMountArr = this.getDoorNameList(this.list);
-          // this.houseMountArr = [
-          //   [{ doorName: 101 }, { doorName: 102 }, { doorName: 103 }, { doorName: 104 }, { doorName: 105 }, { doorName: 106 }, { doorName: 107 }, { doorName: 108 }, { doorName: 109 }],
-          //   [{ doorName: 201 }, { doorName: 202 }, { doorName: 203 }, { doorName: 204 }, { doorName: 205 }, { doorName: 206 }, { doorName: 207 }, { doorName: 208 }, { doorName: 209 }],
-          // ];
-          if (this.houseMountArr.length > 0) {
-            this.flexWidth = this.houseMountArr[0].length * 58;
+      if (homeType === "building") {
+        this.$http.get(`/actual/base/streetOverview/getUnitListByBuilding?buildingId=` + "1514914015259979777").then((res) => {
+          const { code, data } = res.data;
+          if (code === 0) {
+            this.buildingList = data;
+            this.homeText = this.buildingList[0].buildingName + this.buildingList[0].unitName;
+            this.buildingList.forEach((item, i) => {
+              if (i === 0) {
+                item.ifActive = true;
+              } else {
+                item.ifActive = false;
+              }
+            });
+            this.loading = false;
+          } else {
+            this.loading = false;
           }
-          this.loading = false;
-        } else {
-          this.loading = false;
-        }
-      });
-      // }
+        });
+      } else {
+        this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + this.$route.query.id).then((res) => {
+          const {
+            code,
+            data: { houseList, unitInfo },
+          } = res.data;
+          if (code === 0) {
+            let unitInfos = unitInfo || {};
+            this.list = houseList;
+            this.homeMsg = unitInfos;
+            this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
+            console.log(this.homeText, " this.homeText");
+            this.houseMountArr = this.getDoorNameList(this.list);
+            // this.houseMountArr = [
+            //   [{ doorName: 101 }, { doorName: 102 }, { doorName: 103 }, { doorName: 104 }, { doorName: 105 }, { doorName: 106 }, { doorName: 107 }, { doorName: 108 }, { doorName: 109 }],
+            //   [{ doorName: 201 }, { doorName: 202 }, { doorName: 203 }, { doorName: 204 }, { doorName: 205 }, { doorName: 206 }, { doorName: 207 }, { doorName: 208 }, { doorName: 209 }],
+            // ];
+            if (this.houseMountArr.length > 0) {
+              this.flexWidth = this.houseMountArr[0].length * 58;
+            }
+            this.loading = false;
+          } else {
+            this.loading = false;
+          }
+        });
+      }
     },
 
     getRentFlag(type) {
@@ -200,6 +218,19 @@ export default {
       ]);
       return houseTypeMap.get(type);
     },
+
+    chooseNav(item) {
+      let buildList = [...this.buildingList];
+      this.homeText = item.buildingName + item.unitName;
+      buildList.forEach((d) => {
+        if (item.id === d.id) {
+          d.ifActive = true;
+        } else {
+          d.ifActive = false;
+        }
+      });
+      this.buildingList = buildList;
+    },
   },
 };
 </script>
@@ -221,9 +252,36 @@ export default {
   font-weight: 500;
 }
 
+@mixin navListCommon {
+  min-width: 120px;
+  height: 36px;
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 500;
+  margin-right: 4px;
+  text-align: center;
+  line-height: 36px;
+  cursor: pointer;
+}
+
+.top-nav-list {
+  display: flex;
+  margin-bottom: 16px;
+  .top-nav-item {
+    @include navListCommon;
+    background-image: url("~@/assets/images/home/noChooseMain.png");
+    color: #96b1ce;
+  }
+  .top-nav-itemAC {
+    @include navListCommon;
+    background-image: url("~@/assets/images/home/chooseMain.png");
+    color: #fff;
+  }
+}
+
 .homeWrap {
   .bread {
-    margin-bottom: 25px;
+    margin-bottom: 16px;
   }
 
   .apar_top {