feat: 提取一张图菜单到顶部作为跳转按钮

src/layout/components/Navbar.vue

@@ -13,10 +13,10 @@
     <div class="centerTab">
       <div
         class="tab-item"
-        v-for="item in topTabList"
+        v-for="item in newTopMenus"
         :key="item.value"
         :class="selectTab == item.value ? 'select-item' : ''"
-        @click="handleSelectTab(item.value)"
+        @click="handleSelectTab(item)"
       >
         {{ item.label }}
       </div>
@@ -75,7 +75,6 @@ import Hamburger from "@/components/Hamburger";
 import Screenfull from "@/components/Screenfull";
 import SizeSelect from "@/components/SizeSelect";
 import Search from "@/components/HeaderSearch";
-import { getFile } from "@/api/common";
 import Logo from "./Sidebar/Logo";
 
 export default {
@@ -95,10 +94,22 @@ export default {
     Search,
   },
   computed: {
+    ...mapGetters([
+      "sidebar",
+      "avatar",
+      "device",
+      "topTabList",
+      "namesJumpMenu",
+    ]),
     selectTab() {
       return this.$store.state.permission.selectTab;
     },
-    ...mapGetters(["sidebar", "avatar", "device", "topTabList"]),
+    newTopMenus() {
+      // [...this.topTabList, ...this.namesJumpMenu]按orderNum从小到大排序
+      return [...this.topTabList, ...this.namesJumpMenu].sort(
+        (a, b) => a.orderNum - b.orderNum
+      );
+    },
     showLogo() {
       return this.$store.state.settings.sidebarLogo;
     },
@@ -137,8 +148,12 @@ export default {
   },
   methods: {
     handleSelectTab(e) {
-      sessionStorage.setItem("topTab", e);
-      this.$store.dispatch("changeTopTab", e);
+      if (e.label === "一张图") {
+        this.handleJump(e.value);
+        return;
+      }
+      sessionStorage.setItem("topTab", e.value);
+      this.$store.dispatch("changeTopTab", e.value);
       this.$router.replace({
         path: `/`,
         query: {
@@ -149,6 +164,10 @@ export default {
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");
     },
+    handleJump(path) {
+      if (!path) return;
+      window.open(path, "_blank");
+    },
     async logout() {
       this.$confirm("确定注销并退出系统吗？", "提示", {
         confirmButtonText: "确定",

src/store/getters.js

@@ -15,5 +15,6 @@ const getters = {
   permission_routes: state => state.permission.routes,
   permission_add_routes: state => state.permission.addRoutes,
   topTabList: state => state.permission.topTabList,
+  namesJumpMenu: state => state.permission.namesJumpMenu,
 }
 export default getters

src/store/modules/permission.js

@@ -9,6 +9,8 @@ import Layout from '@/layout/index';
  */
 // 提取路由
 const pickRoutes = ['/reservoir', '/dike', '/sluice', '/aiSupervision'];
+// 根据meta.title提取的路由
+const pickRouteNames = ['一张图']
 
 const permission = {
   state: {
@@ -16,7 +18,8 @@ const permission = {
     routes: [],
     addRoutes: [],
     originRoutes: [],
-    selectTab: sessionStorage.getItem('topTab') || 'dike'
+    selectTab: sessionStorage.getItem('topTab') || 'dike',
+    namesJumpMenu: [] // 跳转菜单
   },
   mutations: {
     SET_ROUTES: (state, { routes, originRoutes }) => {
@@ -185,12 +188,21 @@ function resolveChildrenRoutes(routes, pickRoute = permission.state.selectTab) {
   if (!routes?.length) return;
   let pickRoutePath = `/${pickRoute}`;
   let tempRoutesArr = [];
+  let tempRoutesNameArr = [];
   let newChildrenRoutes = [];
   let newRoutes = routes.filter((v) => {
     if (pickRoutes.includes(v.path)) {
       tempRoutesArr.push(v);
     }
-    return !pickRoutes.includes(v.path);
+    // 只要是名称叫“一张图”的都不展示在菜单上
+    if(v.meta?.title && pickRouteNames.includes(v.meta.title)) {
+      if(!v.hidden) tempRoutesNameArr.push({
+        ...v,
+        label: v.meta.title,
+        value: v.path
+      })
+    }
+    return !pickRoutes.includes(v.path) && v.meta?.title !== '一张图';
   });
   if (tempRoutesArr.length) {
     let parentRoute = tempRoutesArr.filter((v) => v.path === pickRoutePath)?.[0];
@@ -201,9 +213,7 @@ function resolveChildrenRoutes(routes, pickRoute = permission.state.selectTab) {
             ...v,
             path: `${parentRoute.path}/${v.path}`
           };
-        }) || [];
-
-        newChildrenRoutes = newChildrenRoutes.map(v=> {
+        })?.map(v=> {
           if(v.path && v.path != '/' && (!v.children || !v.children.length)){
             // 为了让非目录的一级菜单正常展示
             return {
@@ -219,12 +229,17 @@ function resolveChildrenRoutes(routes, pickRoute = permission.state.selectTab) {
           } else {
             return v
           }
-        })
+        }) || [];
     }
   }
+
+  // tempRoutesNameArr 赋值给 namesJumpMenu
+  permission.state.namesJumpMenu = tempRoutesNameArr;
+
   return {
     topTabList: tempRoutesArr.map((v) => {
       return {
+        orderNum: v.orderNum,
         label: v.meta.title,
         value: v.path.slice(1)
       };