router.js+menu

src/router/index.js

@@ -30,16 +30,28 @@ const createRouter = () =>
               import(
                 /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/Index.vue"
               ),
+            // children: [
+            //   // 电子地图
+            //   {
+            //     id: 11,
+            //     path: "electronic-map",
+            //     name: "electronicMap",
+            //     component: () =>
+            //       import(
+            //         /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/electronicMap.vue"
+            //       ),
+            //   },
+            // ],
           },
           {
-            // 电子地图
-            id: 11,
-            path: "cockpitManage/electronic-map",
-            name: "electronicMap",
-            component: () =>
-              import(
-                /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/electronicMap.vue"
-              ),
+             // 电子地图
+              id: 11,
+              path: "cockpitManage/electronic-map",
+              name: "electronicMap",
+              component: () =>
+                import(
+                  /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/electronicMap.vue"
+                ),
           },
           // 电子地图
           // {

src/styles/global.scss

@@ -25,8 +25,8 @@
   border-color: var(--primary-color);
   color: var(--text-color);
 }
-.el-switch {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-  color: var(--text-color);
-}
+// .el-switch {
+//   background-color: var(--primary-color);
+//   border-color: var(--primary-color);
+//   color: var(--text-color);
+// }

src/views/home/components/Menu.vue

@@ -15,9 +15,7 @@
             { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
             `/home/cockpitManage?name=驾驶舱`
           )
-          " :class="isCollapse ? 'stop-animation' : 'active-animation'">
-          风机运行管理平台
-        </span>
+          " :class="isCollapse ? 'stop-animation' : 'active-animation'">风机运行管理平台</span>
       </div>
     </div>
     <el-menu collapse-transition ref="menu" class="mt-3 el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
@@ -45,20 +43,14 @@
       </div>
     </el-menu>
     <div class="foldBox flexCenter">
-      <span v-show="isCollapse" class="el-icon-s-unfold icon" @click="debouncedToggleCollapse(false)">
-        展开
-      </span>
-      <span v-show="!isCollapse" class="el-icon-s-fold icon" @click="debouncedToggleCollapse(true)">
-        收起
-      </span>
+      <span v-show="isCollapse" class="el-icon-s-unfold icon" @click="isCollapse = false">展开</span>
+      <span v-show="!isCollapse" class="el-icon-s-fold icon" @click="isCollapse = true">收起</span>
     </div>
   </el-aside>
 </template>
 
 <script>
-import debounce from "lodash/debounce";
 import { orgList } from "./mockData";
-
 export default {
   data() {
     return {
@@ -70,13 +62,13 @@ export default {
       keyObject: {},
       routerList: [
         {
-          id: 1,
+          id:1,
           path: "cockpitManage",
           name: "驾驶舱",
           iconName: "gps",
           children: [
             {
-              id: 11,
+              id:11,
               iconName: "gps",
               path: "electronic-map",
               name: "电子地图",
@@ -92,24 +84,21 @@ export default {
       ...this.$store.state.auth.dynamicRouter,
     ];
     console.log(this.routerList, "组件内dynamicRouter");
-
-    // Debounce the toggle collapse function to prevent rapid toggling
-    this.debouncedToggleCollapse = debounce(this.toggleCollapse, 300);
   },
   computed: {
-    // currentMenuIndex() {
-    //   return this.$store.state.breadStore?.currentUrl?.routeUrl;
-    // },
+    currentMenuIndex() {
+      return this.$store.state.breadStore?.currentUrl?.routeUrl;
+    },
   },
   watch: {
-    // currentMenuIndex: {
-    //   deep: true,
-    //   handler(newVale, oldVal) {
-    //     if (newVale) {
-    //       this.$refs.menu.close(newVale);
-    //     }
-    //   },
-    // },
+    currentMenuIndex: {
+      deep: true,
+      handler(newVale, oldVal) {
+        if (newVale) {
+          this.$refs.menu.close(newVale);
+        }
+      },
+    },
     keyObject: {
       deep: true,
       handler(newVale) {
@@ -153,16 +142,16 @@ export default {
         keyPath,
       };
     },
-    // shrinkTree() {
-    //   this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
-    // },
-    // handleChangeRouter() {
-    //   this.activeIndex = true;
-    //   this.defaultActive = "";
-    //   this.$store.commit("breadStore/ADD_BREAD", []);
-    //   this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
-    //   this.$router.push("/");
-    // },
+    shrinkTree() {
+      this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
+    },
+    handleChangeRouter() {
+      this.activeIndex = true;
+      this.defaultActive = "";
+      this.$store.commit("breadStore/ADD_BREAD", []);
+      this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
+      this.$router.push("/");
+    },
     handleChangeMenuUrl(item, key) {
       this.defaultActive = key;
       if (item) {
@@ -172,9 +161,6 @@ export default {
         path: key,
       });
     },
-    toggleCollapse(value) {
-      this.isCollapse = value;
-    },
   },
 };
 </script>
@@ -311,40 +297,17 @@ export default {
   justify-content: center !important;
 }
 
-// .foldBox {
-//   position: fixed;
-//   bottom: 10px;
-//   left: 20px;
-//   padding: 10px;
-
-//   .icon {
-//     cursor: pointer;
-//     color: #666;
-//     font-size: 14px;
-//   }
-// }
-/* 添加过渡效果 */
-.foldBox .icon {
-  transition: opacity 0.3s ease;
-}
-
-/* 菜单 icon 居中展示 */
 .foldBox {
-  display: flex;
-  align-items: center;
-}
-
-.foldBox .icon {
-  cursor: pointer;
-  color: #666;
-  font-size: 14px;
-  margin-right: 8px;
-  /* 调整图标与文字之间的间距 */
-}
-
-.foldBox .icon:last-child {
-  margin-right: 0;
-  /* 最后一个图标不设置右边距 */
+  position: fixed;
+  bottom: 10px;
+  left: 20px;
+  padding: 10px;
+
+  .icon {
+    cursor: pointer;
+    color: #666;
+    font-size: 14px;
+  }
 }
 
 ::v-deep .el-submenu__title {