首页添加列表街镇跳转链接

src/views/main.vue

 <template>
   <div id="elevatorMapContainer">
     <template v-if="curStreetData.name && curStreet">
-    <Collapse :value="[curStreet]" class="menu" accordion>
-      <Panel v-for="street in streetList" :key="street" :name="street">
-        {{curStreetData.name}}小区列表
-        <div slot="content" class="community-list">
-          <div v-for="(item, i) in curCommunity" :key="item.name + i">
-            <Button
-              @click="handleView(item)"
-              size="small"
-              type="text"
-              long>
-              {{item.name}}
-            </Button>
-            <a @click="handleDetail(item)">详情</a>
+      <Collapse :value="[curStreet]" class="menu" accordion>
+        <Panel v-for="street in streetList" :key="street" :name="street">
+          <span>
+            {{curStreetData.name}}小区列表
+            <a class="back-btn" @click="backToMainPage">返回</a>
+          </span>
+          <div slot="content" class="community-list">
+            <div v-for="(item, i) in curCommunity" :key="item.name + i">
+              <Button
+                @click="handleView(item)"
+                size="small"
+                type="text"
+                long>
+                {{item.name}}
+              </Button>
+              <a @click="handleDetail(item)">详情</a>
+            </div>
           </div>
-        </div>
-      </Panel>
-    </Collapse>
-    <!-- <Tabs @on-click="handleTabSelect" v-model="curTab" class="tab-menu">
-      <TabPane label="全部" name="all"/>
-      <TabPane label="已签约" name="1"/>
-      <TabPane label="已完工" name="3"/>
-      <TabPane label="同意>50%" name="4"/>
-    </Tabs> -->
+        </Panel>
+      </Collapse>
       <div class="icon-tooltip">
         <p><span />不具备条件</p>
         <p><span />改造后具备条件</p>
@@ -32,6 +29,24 @@
         <p><img src="@/assets/images/notice.gif"/>已公告加梯幢</p>
       </div>
     </template>
+    <template v-if="!curStreet">
+      <Collapse class="menu" accordion>
+        <Panel>
+          街镇列表
+          <div slot="content" class="community-list">
+            <div v-for="(item, i) in Object.keys(streetDic)" :key="item + i">
+              <Button
+                @click="toWhichStreet(streetDic[item])"
+                size="small"
+                type="text"
+                long>
+                {{streetDic[item]}}
+              </Button>
+            </div>
+          </div>
+        </Panel>
+      </Collapse>
+    </template>
     <Drawer :closable="false" width="24%" v-model="detailDrawer">
       <div slot="header">
         <h2>{{detailDrawerData.community}}</h2>
@@ -74,7 +89,6 @@ export default {
   data() {
     return {
       map: null,
-      curTab: 'all',
       detailDrawer: false,
       detailDrawerData: {},
       mapConfig: {
@@ -395,7 +409,7 @@ export default {
           const communityName = item.sectName && (item.sectName + '').replace('(补)', '').replace('（补）', '')
           const cur = this.buildingData.building.find(e => {
             const name = e.name && (e.name + '').replace('(补)', '').replace('（补）', '')
-            return (communityName.indexOf(name) >= 0 || name.indexOf(communityName) >= 0) && (e.buildingNo.indexOf(item.unitNo) >= 0 || item.unitNo.indexOf(e.buildingNo) >= 0) && (e.lon && e.lat)
+            return (communityName.indexOf(name) >= 0 || name.indexOf(communityName) >= 0) && ((e.buildingNo + '').indexOf(item.unitNo) >= 0 || item.unitNo.indexOf(e.buildingNo) >= 0) && (e.lon && e.lat)
           }) // 查找出返回数据中的同一幢楼栋数据
           if (!cur) return
           const marker = new AMap.Marker({
@@ -426,7 +440,7 @@ export default {
           const communityName = item.sectName && (item.sectName + '').replace('(补)', '').replace('（补）', '')
           const cur = this.buildingData.building.find(e => {
             const name = e.name && (e.name + '').replace('(补)', '').replace('（补）', '')
-            return (communityName.indexOf(name) >= 0 || name.indexOf(communityName) >= 0) && (e.buildingNo.indexOf(item.unitNo) >= 0 || item.unitNo.indexOf(e.buildingNo) >= 0) && (e.lon && e.lat)
+            return (communityName.indexOf(name) >= 0 || name.indexOf(communityName) >= 0) && (e.buildingNo && e.buildingNo.indexOf(item.unitNo) >= 0 || item.unitNo.indexOf(e.buildingNo) >= 0) && (e.lon && e.lat)
           }) // 查找出返回数据中的同一幢楼栋数据
           if (!cur) return
           const marker = new AMap.Marker({
@@ -544,8 +558,18 @@ export default {
       object3d.add(prism)
       return object3d
     },
-    handleTabSelect(name) {
-      console.log('tab--', name)
+    toWhichStreet(name) {
+      this.$router.replace({
+        path: '/',
+        query: {
+          name,
+        }
+      })
+      location.reload()
+    },
+    backToMainPage() {
+      this.$router.replace({path: '/'})
+      location.reload()
     },
   },
   computed: {
@@ -594,6 +618,9 @@ export default {
   height 100%
   resize both
   position relative
+  .back-btn
+    float right
+    margin-right 1rem
   .menu
     position absolute
     width 18%