菜单重构

src/router/index.js

@@ -3,27 +3,31 @@ import Home from '../views/Home/Home.vue'
 
 const routes = [
   {
-    path: '/', // 驾驶舱
+    path: '/',
+    redirect: '/monitor/home'
+  },
+  {
+    path: '/monitor/home', // 驾驶舱
     name: 'Home',
     component: Home,
   },
   {
-    path: '/about',
+    path: '/monitor/about',
     name: 'About',
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
   },
   {
-    path: '/status', // 状态监视
+    path: '/monitor/status', // 状态监视
     name: 'Status',
     component: () => import(/* webpackChunkName: "status" */ '../views/Status/Status.vue'),
   },
   {
-    path: '/agc', // AGC 监视
+    path: '/monitor/agc', // AGC 监视
     name: 'Agc',
     component: () => import(/* webpackChunkName: "agc" */ '../views/Agc/Agc.vue'),
   },
   {
-    path: '/windsite',
+    path: '/monitor/windsite',
     name: 'WindSite',
     component: () => import(/* webpackChunkName: "windsite" */ '../views/WindSite/WindSite.vue'),
     children: [{
@@ -59,75 +63,75 @@ const routes = [
     }]
   },
   {
-    path: '/lightmatrix', // 光伏明细矩阵
+    path: '/monitor/lightmatrix', // 光伏明细矩阵
     name: 'LightMatrix',
     component: () => import(/* webpackChunkName: "lightmatrix" */ '../views/LightMatrix/LightMatrix.vue'),
   },
   {
-    path: '/lightmatrix1', // 基础矩阵
+    path: '/monitor/lightmatrix1', // 基础矩阵
     name: 'LightMatrix1',
     component: () => import(/* webpackChunkName: "lightmatrix1" */ '../views/LightMatrix1/LightMatrix1.vue'),
   },
   {
-    path: '/lightmatrix2', // 欠发矩阵
+    path: '/monitor/lightmatrix2', // 欠发矩阵
     name: 'LightMatrix2',
     component: () => import(/* webpackChunkName: "lightmatrix2" */ '../views/LightMatrix2/LightMatrix2.vue'),
   }, {
-    path: '/lightmatrix3', // 明细矩阵
+    path: '/monitor/lightmatrix3', // 明细矩阵
     name: 'LightMatrix3',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue'),
   }, {
-    path: '/decision1',
+    path: '/decision/decision1',
     name: 'decision1',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision1.vue'),
   },
   {
-    path: '/decision2',
+    path: '/decision/decision2',
     name: 'decision2',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision2.vue'),
   },
   {
-    path: '/decision3',
+    path: '/decision/decision3',
     name: 'decision3',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision3.vue'),
   },
   {
-    path: '/decision4',
+    path: '/decision/decision4',
     name: 'decision4',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision4.vue'),
   },
   {
-    path: '/health1',
+    path: '/health/health1',
     name: 'health1',
     component: () => import('../views/HealthControl/Health1.vue'),
   },
   {
-    path: '/health2',
+    path: '/health/health2',
     name: 'health2',
     component: () => import('../views/HealthControl/Health2.vue'),
   },
   {
-    path: '/health3',
+    path: '/health/health3',
     name: 'health3',
     component: () => import('../views/HealthControl/Health3.vue'),
   },
   {
-    path: '/health4',
+    path: '/health/health4',
     name: 'health4',
     component: () => import('../views/HealthControl/Health4.vue'),
   },
   {
-    path: '/health5',
+    path: '/health/health5',
     name: 'health5',
     component: () => import('../views/HealthControl/Health5.vue'),
   },
   {
-    path: '/health6',
+    path: '/health/health6',
     name: 'health6',
     component: () => import('../views/HealthControl/Health6.vue'),
   },
   {
-    path: '/health7',
+    path: '/health/health7',
     name: 'health7',
     component: () => import('../views/HealthControl/Health7.vue'),
   },

src/views/layout/Header.vue

@@ -14,7 +14,7 @@
       </ul>
     </ul> -->
     <ul class="header-menu-user">
-      <li class="header-menu-user-title"><i class="fa fa-user"></i>王军</li>
+      <li class="header-menu-user-title"><i class="fa fa-user"></i>Administrator</li>
     </ul>
   </div>
 </template>
@@ -26,43 +26,43 @@ export default {
         {
           id: "monitor",
           text: "状态监视",
-          path: "/",
+          path: "/monitor/home",
           isActive: true,
         },
         {
           id: "datacenter",
           text: "数据管理",
-          path: "/",
+          path: "/datacenter",
           isActive: false,
         },
         {
           id: "statistic",
           text: "统计分析",
-          path: "/",
+          path: "/statistic",
           isActive: false,
         },
         {
           id: "health",
           text: "健康管理",
-          path: "/",
+          path: "/health/health1",
           isActive: false,
         },
         {
           id: "decision",
           text: "决策支持",
-          path: "/",
+          path: "/decision/decision1",
           isActive: false,
         },
         {
           id: "knowledge",
           text: "知识管理",
-          path: "/",
+          path: "/knowledge",
           isActive: false,
         },
         {
           id: "report",
           text: "智能报表",
-          path: "/",
+          path: "/report",
           isActive: false,
         },
       ],
@@ -84,13 +84,10 @@ export default {
       // dropdown: false,
     };
   },
-  emits: {
-    onMenuClick: null,
-  },
   methods: {
     click(index, data) {
       this.activeIndex = index;
-      this.$emit("onMenuClick", { id: data.id });
+      this.$router.push(data.path);
     },
     clickSubMenu(index, code) {
       console.log(index, code);
@@ -108,7 +105,7 @@ export default {
     $route: {
       handler: function(val, oldVal) {
         this.menus.some((t, index) => {
-          if (t.id == val.query.root) {
+          if (val.path.includes(t.id)) {
             this.activeIndex = index;
           }
         });

src/views/layout/Menu.vue

@@ -2,7 +2,7 @@
   <div class="menu">
     <ul class="menu-list">
       <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
-        <router-link v-if="!menu.children" :to="{ path: menu.path, query: { root: currRoot } }">
+        <router-link v-if="!menu.children" :to="menu.path">
           <el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
             <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
               <SvgIcon :svgid="menu.icon"></SvgIcon>
@@ -20,7 +20,7 @@
   <div class="sub-menu" v-show="isShowSubMenu">
     <ul class="menu-list">
       <li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
-        <router-link :to="{ path: menu.path, query: { root: currRoot } }">
+        <router-link :to="menu.path">
           <div class="menu-icon svg-icon">
             <SvgIcon :svgid="menu.icon"></SvgIcon>
           </div>
@@ -36,9 +36,7 @@ export default {
   components: {
     SvgIcon,
   },
-  props: {
-    root: { type: String, default: "monitor" },
-  },
+  props: {},
   data() {
     return {
       currRoot: "monitor",
@@ -50,37 +48,42 @@ export default {
             {
               text: "驾驶舱",
               icon: "svg-lead-cockpit",
-              path: "/",
+              path: "/monitor/home",
             },
             {
               text: "基础矩阵",
               icon: "svg-matrix",
-              path: "/lightmatrix1",
+              path: "/monitor/lightmatrix1",
             },
             {
-              text: "风场明细矩阵",
+              text: "风场明细",
               icon: "svg-mx-matrix",
-              path: "/lightmatrix2",
+              path: "/monitor/lightmatrix3",
             },
             {
               text: "欠发矩阵",
               icon: "svg-qf-matrix",
-              path: "/lightmatrix3",
+              path: "/monitor/lightmatrix2",
             },
             {
-              text: "光伏明细矩阵",
+              text: "光伏矩阵",
               icon: "svg-gf-matrix",
-              path: "/lightmatrix",
+              path: "/monitor/lightmatrix",
             },
             {
               text: "状态监视",
               icon: "svg-state-watch",
-              path: "/status",
+              path: "/monitor/status",
             },
             {
               text: "Agc",
               icon: "svg-agc",
-              path: "/agc",
+              path: "/monitor/agc",
+            },
+            {
+              text: "风场",
+              icon: "svg-wind-site",
+              path: "/monitor/windsite/home",
             },
           ],
         },
@@ -101,38 +104,38 @@ export default {
             {
               text: "健康管理1",
               icon: "svg-wind-site",
-              path: "/health1",
-            },
-            {
-              text: "健康管理2",
-              icon: "svg-wind-site",
-              path: "/health2",
-            },
-            {
-              text: "健康管理3",
-              icon: "svg-wind-site",
-              path: "/health3",
-            },
-            {
-              text: "健康管理4",
-              icon: "svg-wind-site",
-              path: "/health4",
-            },
-            {
-              text: "健康管理5",
-              icon: "svg-wind-site",
-              path: "/health5",
-            },
-            {
-              text: "健康管理6",
-              icon: "svg-wind-site",
-              path: "/health6",
-            },
-            {
-              text: "健康管理7",
-              icon: "svg-wind-site",
-              path: "/health7",
+              path: "/health/health1",
             },
+            // {
+            //   text: "健康管理2",
+            //   icon: "svg-wind-site",
+            //   path: "/health/health2",
+            // },
+            // {
+            //   text: "健康管理3",
+            //   icon: "svg-wind-site",
+            //   path: "/health/health3",
+            // },
+            // {
+            //   text: "健康管理4",
+            //   icon: "svg-wind-site",
+            //   path: "/health/health4",
+            // },
+            // {
+            //   text: "健康管理5",
+            //   icon: "svg-wind-site",
+            //   path: "/health/health5",
+            // },
+            // {
+            //   text: "健康管理6",
+            //   icon: "svg-wind-site",
+            //   path: "/health/health6",
+            // },
+            // {
+            //   text: "健康管理7",
+            //   icon: "svg-wind-site",
+            //   path: "/health/health7",
+            // },
           ],
         },
         {
@@ -142,22 +145,22 @@ export default {
             {
               text: "决策支持1",
               icon: "svg-matrix",
-              path: "/decision1",
+              path: "decision/decision1",
             },
             // {
             //   text: "决策支持2",
             //   icon: "svg-matrix",
-            //   path: "/decision2",
+            //   path: "decision/decision2",
             // },
             // {
             //   text: "决策支持3",
             //   icon: "svg-matrix",
-            //   path: "/decision3",
+            //   path: "decision/decision3",
             // },
             // {
             //   text: "决策支持4",
             //   icon: "svg-matrix",
-            //   path: "/decision4",
+            //   path: "decision/decision4",
             // },
           ],
         },
@@ -204,7 +207,6 @@ export default {
       let data = this.menuData.filter((t) => {
         return t.id == this.currRoot;
       })[0].data;
-
       return data;
     },
   },
@@ -212,11 +214,9 @@ export default {
     // 监听路由
     $route: {
       handler: function(val, oldVal) {
-        if (val.query.root) this.currRoot = val.query.root;
-
-        this.currentMenu.some((element, index) => {
-          if (element.path == val.path) {
-            this.activeIndex = index;
+        this.menuData.some((element, index) => {
+          if (val.path.includes(element.id)) {
+            this.currRoot = element.id;
             return true;
           }
         });
@@ -224,27 +224,6 @@ export default {
       //深度观察监听
       deep: true,
     },
-    root: {
-      handler: function(val, oldVal) {
-        this.currRoot = val;
-      },
-    },
-    currentMenu: {
-      handler: function(val, oldVal) {
-        if (val && val.length > 0) {
-          // 基于 root 和 currRoot 为一致
-          // 进行页面刷新
-          // 防止 刷新页面也同步执行切换页面逻辑
-          if (this.root == this.currRoot) {
-            this.activeIndex = 0;
-            this.$router.push({
-              path: val[0].path,
-              query: { root: this.currRoot },
-            });
-          }
-        }
-      },
-    },
   },
 };
 </script>