fix: 菜单显示

src/layout/components/Sidebar/index.vue

@@ -41,7 +41,6 @@ const showLogo = computed(() => settingsStore.sidebarLogo);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);
 const isCollapse = computed(() => !appStore.sidebar.opened);
-
 const activeMenu = computed(() => {
   const { meta, path } = route;
   // if set path, the sidebar will highlight the path you set

src/layout/components/topMenu/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="top-menu-row" v-if="routeData.length">
+    <span v-for="(item,index) in routeData" :key="index" :class="['s-span',{'active-span':currentPath === item.path}]">
+      <router-link :to="item.path" >{{ item.title }}
+<!--        <span class="s-line" v-show="index+1 != routeData.length">|</span>-->
+      </router-link>
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+import {menuData} from "./menu"
+import {useRoute, useRouter} from "vue-router"
+import {onMounted, watch} from "vue";
+
+const router = useRouter()
+const route = useRoute()
+const routeData = ref([])
+const currentPath = ref("")
+const findMatchingArray = (path) => {
+  currentPath.value = path
+  return menuData.find(group =>
+      group.some(item => item.path === path || item.path.endsWith(path))
+  ) || [];
+}
+
+watch(() => route.path, (value) => {
+  routeData.value = findMatchingArray(value)
+})
+
+onMounted(() => {
+  routeData.value = findMatchingArray(route.path)
+})
+
+
+</script>
+<style scoped lang="scss">
+.top-menu-row {
+  border-bottom: 1px solid #e6e6e6;
+  background: #f9f9f9;
+  padding: 10px;
+  display: flex;
+  align-items: flex-start;
+
+  .s-span {
+    font-size: 14px;
+    border:1px solid #e6e6e6;
+    margin-right:15px;
+    background: white;
+    padding:4px 10px;
+    border-radius: 4px;
+    .s-line {
+      margin: 0 10px;
+      color: #888;
+    }
+
+    &:hover{
+      @extend .active-span;
+      transition: all 0.5s;
+    }
+  }
+
+  .active-span{
+    color: #409eff;
+    font-weight: bold;
+    border-color: #409eff;
+    background: rgba($color: #409eff, $alpha: 0.1);
+  }
+}
+</style>

src/layout/components/topMenu/menu.js

@@ -0,0 +1,31 @@
+export const menuData = [
+    [
+        {title: '运行风险查询', path: '/pxf-risk-monitor-web/alarm/record'},
+        {title: '业务类型统计', path: '/pxf-risk-monitor-web/alarm/bizType'},
+        {title: '应用组件统计', path: '/pxf-risk-monitor-web/alarm/bizSort'},
+        {title: '系统压力排名', path: '/pxf-risk-monitor-web/alarm/bizAccess'}
+    ],
+    [
+        {title: '异类组件分析', path: '/pxf-risk-monitor-web/risk/heterogeneous'},
+        {title: '异常状态分析', path: '/pxf-risk-monitor-web/risk/frequency'},
+        {title: '异常趋势分析', path: '/pxf-risk-monitor-web/risk/numerical'},
+        {title: '业务主机及运行载体风险分析', path: '/pxf-risk-monitor-web/risk/bizHost'},
+        {title: '业务网络状况评估分析', path: '/pxf-risk-monitor-web/risk/bizNetwork'},
+        {title: '业务应用可持续性服务评估分析', path: '/pxf-risk-monitor-web/risk/bizServer'},
+    ],
+    [
+        {title: '指标类别定义', path: '/pxf-risk-monitor-web/ms/type'},
+        {title: '运行指标定义', path: '/pxf-risk-monitor-web/ms/def'},
+        {title: '运行模板定义', path: '/pxf-risk-monitor-web/ms/mstpl'},
+    ],
+    [
+        {title: '推送配置', path: '/pxf-risk-monitor-web/sendMsg/pushConfig'},
+        {title: '短信推送记录', path: '/pxf-risk-monitor-web/sendMsg/pushRecordSms'},
+        {title: '邮件推送记录', path: '/pxf-risk-monitor-web/sendMsg/pushRecordMail'},
+    ],
+    [
+        {title: '定时任务', path: '/pxf-risk-monitor-web/monitor/job'},
+        {title: '参数设置', path: '/pxf-risk-monitor-web/system/config'},
+        {title: '字典管理', path: '/pxf-risk-monitor-web/system/dict'},
+    ]
+]

src/layout/index.vue

@@ -9,6 +9,7 @@
         <navbar @setLayout="setLayout" v-show="!layoutHide"/>
         <tags-view v-if="needTagsView" v-show="!layoutHide"/>
       </div>
+      <top-nav />
       <app-main/>
       <settings ref="settingRef"/>
     </div>
@@ -22,6 +23,7 @@ import {AppMain, Navbar, Settings, TagsView} from './components'
 import {useRoute} from 'vue-router';
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
+import topNav from "./components/topMenu"
 
 const route = useRoute();
 

src/router/index.js

@@ -85,181 +85,188 @@ export const constantRoutes = [
         ]
     },
     {
-        path: prefix + '/user',
+        path:prefix,
         component: Layout,
-        hidden: true,
-        redirect: 'noredirect',
         children: [
             {
-                path: 'profile',
-                component: () => import('@/views/system/user/profile/index'),
-                name: 'Profile',
-                meta: {title: '个人中心', icon: 'user'}
-            }
-        ]
-    },
-    {
-        path: prefix + '/link/pp-link',
-        component: () => import('@/views/obj/pp/link')
-    },
-    {
-        path: prefix + '/hl/bm',
-        component: () => import('@/views/hl/bm/index')
-    },
-    {
-        path: prefix + '/hl/check',
-        component: () => import('@/views/hl/check/index')
-    },
-    {
-        path: prefix + '/alarm/record',
-        component: () => import('@/views/alarm/record/index')
-    },
-    {
-        path: prefix + '/alarm/bizType',
-        component: () => import('@/views/alarm/record/bizType')
-    },
-    {
-        path: prefix + '/alarm/bizSort',
-        component: () => import('@/views/alarm/record/bizSort')
-    },
-    {
-        path: prefix + '/alarm/bizAccess',
-        component: () => import('@/views/alarm/record/bizAccess')
-    },
-    {
-        path: prefix + '/risk/heterogeneous',
-        component: () => import('@/views/risk/r2/index')
-    },
-    {
-        path: prefix + '/risk/frequency',
-        component: () => import('@/views/risk/r3/index')
-    },
-    {
-        path: prefix + '/risk/numerical',
-        component: () => import('@/views/risk/r4/index')
-    },
-    {
-        path: prefix + '/risk/bizHost',
-        component: () => import('@/views/risk/r5/index')
-    },
-    {
-        path: prefix + '/risk/bizNetwork',
-        component: () => import('@/views/risk/r6/index')
-    },
-    {
-        path: prefix + '/risk/bizServer',
-        component: () => import('@/views/risk/r7/index')
-    },
-    {
-        path: prefix + '/ms/type',
-        component: () => import('@/views/ms/type/index')
-    },
-    {
-        path: prefix + '/ms/def',
-        component: () => import('@/views/ms/def/index')
-    },
-    {
-        path: prefix + '/ms/mstpl',
-        component: () => import('@/views/ms/mstpl/index')
-    },
-    {
-        path: prefix + '/obj/obj',
-        component: () => import('@/views/obj/obj/index')
-    },
-    {
-        path: prefix + '/sendMsg/pushConfig',
-        component: () => import('@/views/push/pushConfig/index')
-    },
-    {
-        path: prefix + '/sendMsg/pushRecordSms',
-        component: () => import('@/views/push/pushRecord/sms')
-    },
-    {
-        path: prefix + '/sendMsg/pushRecordMail',
-        component: () => import('@/views/push/pushRecord/mail')
-    },
-    {
-        path: prefix + '/monitor/job',
-        component: () => import('@/views/monitor/job/index')
-    },
-    {
-        path: prefix + '/system/config',
-        component: () => import('@/views/system/config/index')
-    },
-    {
-        path: prefix + '/system/dict',
-        component: () => import('@/views/system/dict/index')
-    },
-    {
-        path: prefix + '/system/dict-data',
-        component: Layout,
-        hidden: true,
-        permissions: ['system:dict:list'],
-        children: [
+                path: prefix + '/user',
+                component: Layout,
+                hidden: true,
+                redirect: 'noredirect',
+                children: [
+                    {
+                        path: 'profile',
+                        component: () => import('@/views/system/user/profile/index'),
+                        name: 'Profile',
+                        meta: {title: '个人中心', icon: 'user'}
+                    }
+                ]
+            },
             {
-                path: 'index/:dictId(\\d+)',
-                component: () => import('@/views/system/dict/data'),
-                name: 'Data',
-                meta: {title: '字典数据', activeMenu: '/system/dict'}
-            }
-        ]
-    },
-    {
-        path: prefix + '/system/user-auth',
-        component: Layout,
-        hidden: true,
-        permissions: ['system:user:edit'],
-        children: [
+                path: prefix + '/link/pp-link',
+                component: () => import('@/views/obj/pp/link')
+            },
             {
-                path: 'role/:userId(\\d+)',
-                component: () => import('@/views/system/user/authRole'),
-                name: 'AuthRole',
-                meta: {title: '分配角色', activeMenu: '/system/user'}
-            }
-        ]
-    },
-    {
-        path: prefix + '/system/role-auth',
-        component: Layout,
-        hidden: true,
-        permissions: ['system:role:edit'],
-        children: [
+                path: prefix + '/hl/bm',
+                component: () => import('@/views/hl/bm/index')
+            },
             {
-                path: 'user/:roleId(\\d+)',
-                component: () => import('@/views/system/role/authUser'),
-                name: 'AuthUser',
-                meta: {title: '分配用户', activeMenu: '/system/role'}
-            }
-        ]
-    },
-    {
-        path: prefix + '/monitor/job-log',
-        component: Layout,
-        hidden: true,
-        permissions: ['monitor:job:list'],
-        children: [
+                path: prefix + '/hl/check',
+                component: () => import('@/views/hl/check/index')
+            },
             {
-                path: 'index/:jobId(\\d+)',
-                component: () => import('@/views/monitor/job/log'),
-                name: 'JobLog',
-                meta: {title: '调度日志', activeMenu: '/monitor/job'}
-            }
-        ]
-    },
-    {
-        path: prefix + '/tool/gen-edit',
-        component: Layout,
-        hidden: true,
-        permissions: ['tool:gen:edit'],
-        children: [
+                path: prefix + '/alarm/record',
+                component: () => import('@/views/alarm/record/index')
+            },
             {
-                path: 'index/:tableId(\\d+)',
-                component: () => import('@/views/tool/gen/editTable'),
-                name: 'GenEdit',
-                meta: {title: '修改生成配置', activeMenu: '/tool/gen'}
+                path: prefix + '/alarm/bizType',
+                component: () => import('@/views/alarm/record/bizType')
+            },
+            {
+                path: prefix + '/alarm/bizSort',
+                component: () => import('@/views/alarm/record/bizSort')
+            },
+            {
+                path: prefix + '/alarm/bizAccess',
+                component: () => import('@/views/alarm/record/bizAccess')
+            },
+            {
+                path: prefix + '/risk/heterogeneous',
+                component: () => import('@/views/risk/r2/index')
+            },
+            {
+                path: prefix + '/risk/frequency',
+                component: () => import('@/views/risk/r3/index')
+            },
+            {
+                path: prefix + '/risk/numerical',
+                component: () => import('@/views/risk/r4/index')
+            },
+            {
+                path: prefix + '/risk/bizHost',
+                component: () => import('@/views/risk/r5/index')
+            },
+            {
+                path: prefix + '/risk/bizNetwork',
+                component: () => import('@/views/risk/r6/index')
+            },
+            {
+                path: prefix + '/risk/bizServer',
+                component: () => import('@/views/risk/r7/index')
+            },
+            {
+                path: prefix + '/ms/type',
+                component: () => import('@/views/ms/type/index')
+            },
+            {
+                path: prefix + '/ms/def',
+                component: () => import('@/views/ms/def/index')
+            },
+            {
+                path: prefix + '/ms/mstpl',
+                component: () => import('@/views/ms/mstpl/index')
+            },
+            {
+                path: prefix + '/obj/obj',
+                component: () => import('@/views/obj/obj/index')
+            },
+            {
+                path: prefix + '/sendMsg/pushConfig',
+                component: () => import('@/views/push/pushConfig/index')
+            },
+            {
+                path: prefix + '/sendMsg/pushRecordSms',
+                component: () => import('@/views/push/pushRecord/sms')
+            },
+            {
+                path: prefix + '/sendMsg/pushRecordMail',
+                component: () => import('@/views/push/pushRecord/mail')
+            },
+            {
+                path: prefix + '/monitor/job',
+                component: () => import('@/views/monitor/job/index')
+            },
+            {
+                path: prefix + '/system/config',
+                component: () => import('@/views/system/config/index')
+            },
+            {
+                path: prefix + '/system/dict',
+                component: () => import('@/views/system/dict/index')
+            },
+            {
+                path: prefix + '/system/dict-data',
+                component: Layout,
+                hidden: true,
+                permissions: ['system:dict:list'],
+                children: [
+                    {
+                        path: 'index/:dictId(\\d+)',
+                        component: () => import('@/views/system/dict/data'),
+                        name: 'Data',
+                        meta: {title: '字典数据', activeMenu: '/system/dict'}
+                    }
+                ]
+            },
+            {
+                path: prefix + '/system/user-auth',
+                component: Layout,
+                hidden: true,
+                permissions: ['system:user:edit'],
+                children: [
+                    {
+                        path: 'role/:userId(\\d+)',
+                        component: () => import('@/views/system/user/authRole'),
+                        name: 'AuthRole',
+                        meta: {title: '分配角色', activeMenu: '/system/user'}
+                    }
+                ]
+            },
+            {
+                path: prefix + '/system/role-auth',
+                component: Layout,
+                hidden: true,
+                permissions: ['system:role:edit'],
+                children: [
+                    {
+                        path: 'user/:roleId(\\d+)',
+                        component: () => import('@/views/system/role/authUser'),
+                        name: 'AuthUser',
+                        meta: {title: '分配用户', activeMenu: '/system/role'}
+                    }
+                ]
+            },
+            {
+                path: prefix + '/monitor/job-log',
+                component: Layout,
+                hidden: true,
+                permissions: ['monitor:job:list'],
+                children: [
+                    {
+                        path: 'index/:jobId(\\d+)',
+                        component: () => import('@/views/monitor/job/log'),
+                        name: 'JobLog',
+                        meta: {title: '调度日志', activeMenu: '/monitor/job'}
+                    }
+                ]
+            },
+            {
+                path: prefix + '/tool/gen-edit',
+                component: Layout,
+                hidden: true,
+                permissions: ['tool:gen:edit'],
+                children: [
+                    {
+                        path: 'index/:tableId(\\d+)',
+                        component: () => import('@/views/tool/gen/editTable'),
+                        name: 'GenEdit',
+                        meta: {title: '修改生成配置', activeMenu: '/tool/gen'}
+                    }
+                ]
             }
         ]
-    }
+    },
+
 ];
 
 // 动态路由，基于用户权限动态去加载

src/views/hl/check/index.vue

@@ -208,7 +208,7 @@ const handleCheck = (i) => {
     }
   }
 
-  const randomStep = getRandomInt(2, 5);
+  const randomStep = getRandomInt(1, 4);
   const index = Math.min(i + randomStep, listData.value.length - 1);
 
   if (i < listData.value.length) {
@@ -225,7 +225,7 @@ const handleCheck = (i) => {
         }
       }
       handleCheck(index + 1);
-    }, getRandomInt(1000, 3000));
+    }, getRandomInt(1000, 4000));
   } else {
     cLoading.value = false;
     currentProgress.value = 100;