目录代码整合

packages/grid/AppBuildMap/buildingToolBar.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="buildingToolBar">
+    <div class="toolBar">
+      <div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
+        <ai-icon :icon="op.icon"/>
+        <div>{{ op.name }}</div>
+      </div>
+    </div>
+    <component :is="currentNav.comp" class="toolPane"/>
+  </section>
+</template>
+
+<script>
+import BuildingInfo from "./toolBar/buildingInfo";
+import CommunityOverview from "./toolBar/communityOverview";
+// import NearbyGCS from "./toolBar/nearbyGCS";
+import RecentEvents from "./toolBar/recentEvents";
+
+export default {
+  name: "buildingToolBar",
+  components: {RecentEvents, CommunityOverview, BuildingInfo},
+  computed: {
+    navs() {
+      return [
+        {icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
+        {icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
+        // {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
+        // {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
+      ]
+    },
+    currentNav() {
+      return this.navs[this.active]
+    }
+  },
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingToolBar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .toolBar {
+    height: 40px;
+    background: #FFFFFF;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    padding: 4px;
+    width: 400px;
+    display: flex;
+    gap: 8px;
+    box-sizing: border-box;
+    align-self: flex-end;
+
+    .nav {
+      flex: 1;
+      height: 32px;
+      color: #3A3A3A;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      cursor: pointer;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      }
+
+      &:hover {
+        color: #2266FF;
+      }
+
+      &.selected {
+        background: #E4F0FF;
+        color: #2266FF;
+      }
+    }
+  }
+
+  .toolPane {
+    background: #FFFFFF;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+}
+</style>