Merge pull request #22 from XiaofengZeng/dev

feat(module): 推进二维地图Map2d组件功能开发

src/components/SideMenu/ModuleController/ModuleDirectory/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="directory">
+    <div class="directory-title">
+      {{ item.title }}
+    </div>
+    <div class="directory-item">
+      <ModuleItem :list="item.list"></ModuleItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModuleItem from '../ModuleItem';
+
+export default {
+  name: 'ModuleDirectory',
+  components: {
+    ModuleItem,
+  },
+  props: {
+    item: Object, // 当前所在场景
+  },
+};
+</script>
+
+<style>
+</style>

src/components/SideMenu/ModuleController/ModuleItem/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <ul>
+    <li v-for="i in list" :key="i.id">
+      <el-button
+        type="primary"
+        plain
+        :class="isActivated(i.enName)"
+        @click="toggleModule(i.enName)"
+      >
+        {{ i.cnName }}
+      </el-button>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'ModuleItem',
+  props: {
+    list: Array,
+  },
+  data() {
+    return {
+      activatedModule: '',
+    };
+  },
+  methods: {
+    isActivated(value) {
+      return this.activatedModule === value ? 'active' : null;
+    },
+    // TODO: 触发功能，执行相关方法
+    toggleModule(value) {
+      if (this.activatedModule !== value) {
+        this.activatedModule = value;
+        // this.$store.commit('map2d/addToActivatedModules', value);
+        this.$store.commit('map2d/setActivatedModule', value);
+      } else {
+        this.activatedModule = '';
+        // this.$store.commit('map2d/romoveFromActivatedModules', value);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  width: inherit;
+  list-style: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  li {
+    display: inline;
+    margin: 5px;
+  }
+  .active {
+    background: #f38031;
+    border-color: #f38031;
+    color: #fff;
+  }
+}
+</style>

src/components/SideMenu/ModuleController/index.vue

@@ -1,17 +1,88 @@
 <template>
-  <div class="kn-module-cotroller"></div>
+  <div class="kn-module-cotroller">
+    <div class="module-title">
+      <span>功能模块</span>
+    </div>
+    <div class="module-directories">
+      <ModuleDirectory
+        v-for="d in directorise"
+        :key="d.key"
+        :item="d"
+      ></ModuleDirectory>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
+import ModuleDirectory from './ModuleDirectory';
+
 export default {
   name: 'ModuleController',
+  components: {
+    ModuleDirectory,
+  },
+  data() {
+    return {
+      directorise: [],
+    };
+  },
+  methods: {
+    getDirectorise() {
+      switch (this.currentScene.toLowerCase()) {
+        case 'dashboard':
+          this.directorise = [];
+          break;
+        case 'warehouse':
+          this.directorise = [];
+          break;
+        case 'map':
+          this.directorise = this.$store.state.map2d.moduleDrectories;
+          break;
+        default:
+          break;
+      }
+    },
+  },
+  mounted() {
+    this.getDirectorise();
+  },
+  computed: {
+    ...mapState(['currentScene']),
+  },
+  watch: {
+    currentScene(_, newVal) {
+      this.getDirectorise(newVal);
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .kn-module-cotroller {
   width: inherit;
+  display: flex;
   flex: 1;
+  flex-direction: row;
   background-color: rgb(255, 255, 255);
+  .module-title {
+    width: 30px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    background-color: #f4a031;
+  }
+  .module-directories {
+    width: 320px;
+    display: flex;
+    flex-direction: column;
+  }
+  .active {
+    background: #f38031;
+    border-color: #f38031;
+    color: #fff;
+  }
 }
 </style>

src/components/SideMenu/SceneSwitcher/index.vue

@@ -11,42 +11,39 @@
             type="primary"
             plain
             :class="isActivated(s.key)"
-            @click="changeScene(s.key, s.routePath)"
-          >{{ s.title }}</el-button>
+            @click="setScene(s.key)"
+          >
+            {{ s.title }}
+          </el-button>
         </li>
       </ul>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
   name: 'SceneSwitcher',
-  data() {
-    return {
-      activatedScene: 'dashboard',
-      scenes: [
-        { key: 'dashboard', title: '看板', routePath: '/dashboard' },
-        { key: 'warehouse', title: '仓库管理', routePath: '/warehouse' },
-        { key: 'map', title: '地图展示', routePath: '/map/2d' },
-      ],
-    };
-  },
   methods: {
     isActivated(value) {
-      return this.activatedScene === value ? 'active' : null;
+      return this.currentScene === value ? 'active' : null;
     },
-    changeScene(value) {
-      if (this.activatedScene !== value) {
-        this.activatedScene = value;
+    setScene(value) {
+      if (this.currentScene !== value) {
+        this.$store.commit('setScene', value);
         this.$router.push(`/${value}`);
       }
     },
   },
+  computed: {
+    ...mapState(['currentScene', 'scenes']),
+  },
   mounted() {
     this.scenes.forEach((s) => {
-      if (this.$router.currentRoute.path.indexOf(s.routePath) > -1) {
-        this.activatedScene = s.key;
+      if (this.$router.currentRoute.path.indexOf(s.path) > -1) {
+        this.$store.commit('setScene', s.key);
       }
     });
   },

src/components/SideMenu/index.vue

@@ -55,35 +55,35 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .kn-side-menu {
-    // width: 370px;
-    left: -350px;
+.kn-side-menu {
+  // width: 370px;
+  left: -350px;
+  height: inherit;
+  display: flex;
+  position: absolute;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  transition: all 1s cubic-bezier(0.1, 1, 1, 1);
+  .menu-body {
+    width: 350px;
     height: inherit;
     display: flex;
-    position: absolute;
-    flex-direction: row;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
-    text-align: center;
-    transition: all 1s cubic-bezier(0.1, 1, 1, 1);
-    .menu-body {
-      width: 350px;
-      height: inherit;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: center;
-    }
-    .expend-btn {
-      background-color: rgba(115, 119, 124, 0.5);
-      width: 20px;
-      height: 80px;
-      line-height: 80px;
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
   }
-  .active {
-    left: 0px;
+  .expend-btn {
+    background-color: rgba(115, 119, 124, 0.5);
+    width: 20px;
+    height: 80px;
+    line-height: 80px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
+}
+.active {
+  left: 0px;
+}
 </style>

src/router/index.js

@@ -13,7 +13,7 @@ const routes = [
     children: [
       {
         path: 'dashboard',
-        name: 'DashBoard',
+        name: 'Dashboard',
         component: () => import('../components/Dashboard'),
       },
       {

src/store/index.js

@@ -7,6 +7,19 @@ import map2d from './map2d';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  state: {
+    currentScene: 'dashboard',
+    scenes: [
+      { key: 'dashboard', title: '看板', path: '/dashboard' },
+      { key: 'warehouse', title: '仓库管理', path: '/warehouse' },
+      { key: 'map', title: '地图展示', path: '/map/2d' },
+    ],
+  },
+  mutations: {
+    setScene(state, name) {
+      state.currentScene = name;
+    },
+  },
   modules: {
     user,
     map2d,

src/store/map2d.js

@@ -13,10 +13,41 @@ export default {
       zoom: 12,
     },
     // 功能相关配置
-    actionsConfig: {
-    },
+    moduleDrectories: [
+      {
+        key: 'commonTool',
+        title: '常用工具',
+        list: [
+          { id: '001', cnName: '测距', enName: 'measureDistance' },
+          { id: '002', cnName: '侧面积', enName: 'measureArea' },
+          { id: '003', cnName: '属性查询', enName: 'AttributesQuery' },
+        ],
+      },
+      {
+        key: 'analyzeTool',
+        title: '分析工具',
+        list: [
+          { id: '001', cnName: '缓冲区分析', enName: 'BufferAnalysis' },
+        ],
+      },
+    ],
+    // 当前激活的功能
+    activatedModules: [],
+    activatedModule: '',
   },
   mutations: {
+    addToActivatedModules(state, name) {
+      state.activatedModules.push(name);
+    },
+    romoveFromActivatedModules(state, name) {
+      const index = state.activatedModules.indexOf(name);
+      if (index > -1) {
+        state.activatedModules.splice(index, 1);
+      }
+    },
+    setActivatedModule(state, name) {
+      state.activatedModule = name;
+    },
   },
   actions: {
   },