From d5dda9b67ab834cb2c317674a56a7ecb81455dee Mon Sep 17 00:00:00 2001
From: XiaofengZeng <798065964@qq.com>
Date: Tue, 22 Mar 2022 12:07:03 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(module):=20=E5=AE=8C=E6=88=90=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=A8=A1=E5=9D=97=E6=8E=A7=E5=88=B6=E5=99=A8ModuleCon?=
 =?UTF-8?q?troller=E7=BB=84=E4=BB=B6=E7=9A=84=E5=88=9D=E6=AD=A5=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 使用模块目录ModuleDirectory组件和模块项ModuleItem组件组织模块内容
2. 使用Vuex管理功能模块配置
3. 优化部分代码格式
---
 .../ModuleDirectory/index.vue                 | 27 +++++++
 .../ModuleController/ModuleItem/index.vue     | 59 +++++++++++++++
 .../SideMenu/ModuleController/index.vue       | 73 ++++++++++++++++++-
 .../SideMenu/SceneSwitcher/index.vue          | 32 +++++---
 src/store/index.js                            |  8 ++
 src/store/map2d.js                            | 20 ++++-
 6 files changed, 205 insertions(+), 14 deletions(-)
 create mode 100644 src/components/SideMenu/ModuleController/ModuleDirectory/index.vue
 create mode 100644 src/components/SideMenu/ModuleController/ModuleItem/index.vue

diff --git a/src/components/SideMenu/ModuleController/ModuleDirectory/index.vue b/src/components/SideMenu/ModuleController/ModuleDirectory/index.vue
new file mode 100644
index 0000000..62540da
--- /dev/null
+++ b/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>
diff --git a/src/components/SideMenu/ModuleController/ModuleItem/index.vue b/src/components/SideMenu/ModuleController/ModuleItem/index.vue
new file mode 100644
index 0000000..02e1ea8
--- /dev/null
+++ b/src/components/SideMenu/ModuleController/ModuleItem/index.vue
@@ -0,0 +1,59 @@
+<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;
+    },
+    toggleModule(value) {
+      if (this.activatedModule !== value) {
+        this.activatedModule = value;
+      } else {
+        this.activatedModule = '';
+      }
+    },
+  },
+};
+</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>
diff --git a/src/components/SideMenu/ModuleController/index.vue b/src/components/SideMenu/ModuleController/index.vue
index d93c21c..fd211f9 100644
--- a/src/components/SideMenu/ModuleController/index.vue
+++ b/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>
diff --git a/src/components/SideMenu/SceneSwitcher/index.vue b/src/components/SideMenu/SceneSwitcher/index.vue
index a07e2b2..f4ad834 100644
--- a/src/components/SideMenu/SceneSwitcher/index.vue
+++ b/src/components/SideMenu/SceneSwitcher/index.vue
@@ -16,7 +16,7 @@
             :class="isActivated(s.key)"
             @click="changeScene(s.key, s.routePath)"
           >
-            {{s.title}}
+            {{ s.title }}
           </el-button>
         </li>
       </ul>
@@ -31,9 +31,9 @@ export default {
     return {
       activatedScene: 'dashboard',
       scenes: [
-        { key: 'dashboard', title: '看板' },
-        { key: 'warehouse', title: '仓库管理' },
-        { key: 'map', title: '地图展示' },
+        { key: 'dashboard', title: '看板', path: '/dashboard' },
+        { key: 'warehouse', title: '仓库管理', path: '/warehouse' },
+        { key: 'map', title: '地图展示', path: '/map/2d' },
       ],
     };
   },
@@ -42,10 +42,20 @@ export default {
       return this.activatedScene === value ? 'active' : null;
     },
     changeScene(value) {
-      this.activatedScene = value;
-      this.$router.push(`/${value}`);
+      if (this.activatedScene !== value) {
+        this.activatedScene = value;
+        this.$store.commit('changeScene', value);
+        this.$router.push(`/${value}`);
+      }
     },
   },
+  mounted() {
+    this.scenes.forEach((s) => {
+      if (this.$router.currentRoute.path.indexOf(s.route) > -1) {
+        this.activatedScene = s.key;
+      }
+    });
+  },
 };
 </script>
 
@@ -60,8 +70,8 @@ export default {
     width: 30px;
     display: flex;
     align-items: center;
-    color: #FFF;
-    background-color: #f48031
+    color: #fff;
+    background-color: #f48031;
   }
   .scene-options {
     width: 320px;
@@ -79,9 +89,9 @@ export default {
       }
     }
     .active {
-      background: #F38031;
-      border-color: #F38031;
-      color: #FFF;
+      background: #f38031;
+      border-color: #f38031;
+      color: #fff;
     }
   }
 }
diff --git a/src/store/index.js b/src/store/index.js
index 4990417..d11cd3d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,6 +7,14 @@ import map2d from './map2d';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  state: {
+    currentScene: 'dashboard',
+  },
+  mutations: {
+    changeScene(state, name) {
+      state.currentScene = name;
+    },
+  },
   modules: {
     user,
     map2d,
diff --git a/src/store/map2d.js b/src/store/map2d.js
index e133b57..a83a998 100644
--- a/src/store/map2d.js
+++ b/src/store/map2d.js
@@ -13,8 +13,24 @@ 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' },
+        ],
+      },
+    ],
   },
   mutations: {
   },

From 765b99123678977f9e23c3f634c4314a9ac36986 Mon Sep 17 00:00:00 2001
From: XiaofengZeng <798065964@qq.com>
Date: Tue, 22 Mar 2022 14:35:50 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(module):=20=E4=BD=BF=E7=94=A8Vuex?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=BD=93=E5=89=8D=E5=9C=BA=E6=99=AF=E7=9A=84?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 使用Vuex控制场景的切换
2. 优化代码格式
---
 .../SideMenu/SceneSwitcher/index.vue          | 30 +++++------
 src/components/SideMenu/index.vue             | 52 +++++++++----------
 src/router/index.js                           |  2 +-
 src/store/index.js                            |  7 ++-
 4 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/components/SideMenu/SceneSwitcher/index.vue b/src/components/SideMenu/SceneSwitcher/index.vue
index f4ad834..dcd44f0 100644
--- a/src/components/SideMenu/SceneSwitcher/index.vue
+++ b/src/components/SideMenu/SceneSwitcher/index.vue
@@ -14,7 +14,7 @@
             type="primary"
             plain
             :class="isActivated(s.key)"
-            @click="changeScene(s.key, s.routePath)"
+            @click="setScene(s.key)"
           >
             {{ s.title }}
           </el-button>
@@ -25,34 +25,28 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
   name: 'SceneSwitcher',
-  data() {
-    return {
-      activatedScene: 'dashboard',
-      scenes: [
-        { key: 'dashboard', title: '看板', path: '/dashboard' },
-        { key: 'warehouse', title: '仓库管理', path: '/warehouse' },
-        { key: 'map', title: '地图展示', path: '/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;
-        this.$store.commit('changeScene', 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.route) > -1) {
-        this.activatedScene = s.key;
+      if (this.$router.currentRoute.path.indexOf(s.path) > -1) {
+        this.$store.commit('setScene', s.key);
       }
     });
   },
diff --git a/src/components/SideMenu/index.vue b/src/components/SideMenu/index.vue
index e5c784b..9dbcff7 100644
--- a/src/components/SideMenu/index.vue
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index 15f30da..bf6782b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,7 +13,7 @@ const routes = [
     children: [
       {
         path: 'dashboard',
-        name: 'DashBoard',
+        name: 'Dashboard',
         component: () => import('../components/Dashboard'),
       },
       {
diff --git a/src/store/index.js b/src/store/index.js
index d11cd3d..1c56263 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,9 +9,14 @@ 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: {
-    changeScene(state, name) {
+    setScene(state, name) {
       state.currentScene = name;
     },
   },

From 5555782814918f7c79019558bb3e118e3a888b17 Mon Sep 17 00:00:00 2001
From: XiaofengZeng <798065964@qq.com>
Date: Tue, 22 Mar 2022 17:07:40 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(module):=20=E6=8E=A8=E8=BF=9B=E4=BA=8C?=
 =?UTF-8?q?=E7=BB=B4=E5=9C=B0=E5=9B=BE=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 删除残留Map组件
2. 增加激活模块功能状态管理
---
 src/components/Map/index.vue                      |  9 ---------
 .../ModuleController/ModuleItem/index.vue         |  4 ++++
 src/store/map2d.js                                | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 9 deletions(-)
 delete mode 100644 src/components/Map/index.vue

diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
deleted file mode 100644
index bd30769..0000000
--- a/src/components/Map/index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <router-view></router-view>
-</template>
-
-<script>
-export default {
-  name: 'Map',
-};
-</script>
diff --git a/src/components/SideMenu/ModuleController/ModuleItem/index.vue b/src/components/SideMenu/ModuleController/ModuleItem/index.vue
index 02e1ea8..5a4f7d4 100644
--- a/src/components/SideMenu/ModuleController/ModuleItem/index.vue
+++ b/src/components/SideMenu/ModuleController/ModuleItem/index.vue
@@ -28,11 +28,15 @@ export default {
     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);
       }
     },
   },
diff --git a/src/store/map2d.js b/src/store/map2d.js
index a83a998..6eb9d92 100644
--- a/src/store/map2d.js
+++ b/src/store/map2d.js
@@ -31,8 +31,23 @@ export default {
         ],
       },
     ],
+    // 当前激活的功能
+    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: {
   },