1

src/project/saas/AppBuilding/AppBuilding.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="AppBuilding">
-    <search-map v-if="show && isGridMember"/>
+    <div class="tab">
+      <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">网格地图</span>
+      <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">楼栋地图</span>
+    </div>
+    <div v-if="show && isGridMember">
+      <search-map v-if="currIndex === 1" />
+      <grid-map v-if="currIndex === 0" />
+    </div>
     <div v-if="!isGridMember" class="empty">
       <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
       <p>没有网格员权限<br/>无法查看楼栋信息哦~</p>
@@ -10,23 +17,31 @@
 
 <script>
 
-import SearchMap from "./components/searchMap";
+import SearchMap from "./components/searchMap"
+import GridMap from "./components/gridMap"
 import {mapState} from "vuex";
 
 export default {
   name: 'AppBuilding',
-  components: {SearchMap},
   appName: '人房地图',
+
+  components: {
+    GridMap,
+    SearchMap
+  },
+
   computed: {
     ...mapState(['user']),
+
     isGridMember() {
       return this.user.girdCheckType > 0
     }
   },
 
-  data() {
+  data () {
     return {
       show: true,
+      currIndex: 0
     }
   }
 }
@@ -36,6 +51,29 @@ export default {
 .AppBuilding {
   height: 100%;
 
+  .tab {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 11;
+    width: 100%;
+    background: #3975C6;
+
+    span {
+      flex: 1;
+      height: 96px;
+      line-height: 96px;
+      text-align: center;
+      color: #a2d3ff;
+      font-size: 28px;
+
+      &.active {
+        color: #fff;
+      }
+    }
+  }
+
   .empty {
     height: 100%;