fix: navbar show bug

src/api/rts/stream.ts

@@ -147,7 +147,7 @@ export const updateConfig = (name: 'RTSP' | 'RTMP' | 'HLS' | 'HDL' | 'GB28181',
 
 /** 系统监控 */
 export const getSummary = () => {
-  return request<RTS.STREAM.Detail[]>({
+  return request<RTS.SUMMARY.Detail>({
     url: '/api/summary',
     method: 'GET'
   })

src/controller/rts/rts.ts

@@ -1,4 +1,4 @@
-import { closeStream, createPull, createPush, getConfig, getPullList, getPushList, getRecording, getRecordList, getStreams, stopPull, stopPush, updateConfig } from '@/api/rts/stream'
+import { closeStream, createPull, createPush, getConfig, getPullList, getPushList, getRecording, getRecordList, getStreams, getSummary, stopPull, stopPush, updateConfig } from '@/api/rts/stream'
 import { message } from 'ant-design-vue'
 
 export class RtsController {
@@ -63,4 +63,8 @@ export class RtsController {
     await updateConfig(name, data)
     message.success('修改协议成功')
   }
+
+  static async summary () {
+    return await getSummary()
+  }
 }

src/layout/navbar.vue

@@ -11,7 +11,7 @@
           theme="dark"
           mode="horizontal"
           :style="{ lineHeight: '64px' }"
-          v-model:selectedKeys="selectedKeys1"
+          v-model:selectedKeys="selectedKeys"
       >
           <a-menu-item
             v-for="route in appRouter.$state.router.navbar.route"
@@ -31,18 +31,61 @@
 </template>
 
 <script lang="ts" setup >
-import { ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useAppRouter } from '@/store/router'
 import user from './user.vue'
-// import logo from '@/assets/logo.png'
+import { useRouter, useRoute } from 'vue-router'
+import { routes } from '@/router/index'
 
 const logoPng = require('@/assets/logo.png')
 
+const router = useRouter()
+
+const route = useRoute()
+
 const appRouter = useAppRouter()
 
-const selectedKeys1 = ref<string[]>([appRouter.$state.router.navbar.selectPath])
+console.log('router:', router.currentRoute)
+// [appRouter.$state.router.navbar.selectPath]
+
+const selectedKeys = ref<string[]>()
+
+const changeRouter = (path: string) => {
+  console.log('changeRouter:', path)
+
+  selectedKeys.value = path
+  appRouter.changeNavbar(path)
+}
+
+console.log('routes', routes)
+
+const navbarRoutes = ['/', 'rts']
+
+// const active = computed(() => {
+//   routes.forEach( item => {
+//     item
+//   })
+// })
+
+const hasCurrentRourte = (children: ROUTER.RoutesProps[]): boolean => {
+  let r = false
+  children.forEach(item => {
+    if (item.path === route.path) {
+      r = true
+    }
+  })
+  return r
+}
 
-const changeRouter = (path: string) => appRouter.changeNavbar(path)
+onMounted(() => {
+  routes.forEach(item => {
+    if (hasCurrentRourte(item.children)) {
+      selectedKeys.value = [item.path]
+      appRouter.changeNavbar(item.path)
+      appRouter.changeSiderRoute()
+    }
+  })
+})
 
 </script>
 

src/pages/rts/monitor/index.vue

@@ -1,5 +1,30 @@
-<template><h1/></template>
+<template>
+  <a-card>
+    <a-alert message="Success Text" type="success" />
+  </a-card>
+</template>
 <script lang="ts" setup >
+import { RtsController } from '@/controller/rts'
+import { onMounted, reactive } from 'vue'
+
+const state = reactive<{
+  loading: boolean,
+  summary: Partial<RTS.SUMMARY.Detail>
+}>({
+  loading: false,
+  summary: {}
+})
+
+const getSummary = async () => {
+  const { data } = await RtsController.summary()
+  state.summary = data
+}
+
+onMounted(() => {
+  getSummary()
+})
+
 </script>
 
-<style></style>
+<style lang="less" scoped >
+</style>

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-const routes: Array<ROUTER.RoutesProps> = [
+export const routes: Array<ROUTER.RoutesProps> = [
   {
     path: '/',
     name: '物联网',
@@ -190,6 +190,7 @@ const routes: Array<ROUTER.RoutesProps> = [
     ]
   }
 ]
+
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes

src/store/router.ts

@@ -50,8 +50,6 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
     appRouter.navbar.selectPath = RootRouter.options.routes[0].path
 
     appRouter.sider.route = siderRoutes.value!
-
-    // setAppRouterState(appRouter)
   }
 
   const changeNavbar = (path: string) => {
@@ -61,26 +59,26 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
 
   watch(
     () => RootRouter.currentRoute.value.path,
-    () => {
-      console.log('当前路由改变：', RootRouter.currentRoute.value.path)
-
-      appRouter.sider = {
-        route: RootRouter.getRoutes().find(item => item.path === appRouter.navbar!.selectPath)?.children as ROUTER.RoutesProps[],
-        selectPath: RootRouter.currentRoute.value.path,
-        openKeys: RootRouter.currentRoute.value.matched.map(item => item.path)
-      }
-      // setAppRouterState(appRouter)
-      emitter.emit(Emitter.NAVBAR)
-    }
+    () => changeSiderRoute()
   )
 
-  // appRouter = appRouterState.value as ROUTER.RouterRecords
+  const changeSiderRoute = () => {
+    console.log(' appRouter.navbar!.selectPath:', appRouter.navbar!.selectPath)
+
+    appRouter.sider = {
+      route: RootRouter.getRoutes().find(item => item.path === appRouter.navbar!.selectPath)?.children as ROUTER.RoutesProps[],
+      selectPath: RootRouter.currentRoute.value.path,
+      openKeys: RootRouter.currentRoute.value.matched.map(item => item.path)
+    }
+    emitter.emit(Emitter.NAVBAR)
+  }
 
   if (appRouter.navbar.route.length === 0) {
     initAppRouter()
   }
   return {
     router: appRouter,
-    changeNavbar
+    changeNavbar,
+    changeSiderRoute
   }
 })