perf(views): 优化“设备分组”页面

1. 设备分组页面增加路由参数分组 id
2. 去掉 AI 智控路由数组
3. 以 Tab 内容形式渲染实时监测、设备工况等页面

src/router/index.ts

@@ -15,30 +15,6 @@ declare module 'vue-router' {
   }
 }
 
-/**
- * AI智控相关路由
- */
-const aiSmartCtrlRoutes: RouteRecordRaw[] = [
-  {
-    path: 'real-time-monitor',
-    name: 'realTimeMonitor',
-    component: () => import('@/views/real-time-monitor/RealTimeMonitor.vue'),
-    meta: {
-      title: 'realTimeMonitor',
-      requiresAuth: true,
-    },
-  },
-  {
-    path: 'device-work-status',
-    name: 'deviceWorkStatus',
-    component: () => import('@/views/device-work-status/DeviceWorkStatus.vue'),
-    meta: {
-      title: 'deviceWorkStatus',
-      requiresAuth: true,
-    },
-  },
-];
-
 /**
  * 数据中心相关路由
  */
@@ -401,14 +377,13 @@ const routes: Readonly<RouteRecordRaw[]> = [
     },
     children: [
       {
-        path: 'device-group',
+        path: 'device-group/:id',
         name: 'deviceGroup',
         component: () => import('@/views/device-group/DeviceGroup.vue'),
         meta: {
           title: 'deviceGroup',
           requiresAuth: true,
         },
-        children: aiSmartCtrlRoutes,
       },
     ],
   },
@@ -437,6 +412,6 @@ const router = createRouter({
 //   }
 // });
 
-export { aiSmartCtrlRoutes, dataCenterRoutes, opsCenterRoutes, routes };
+export { dataCenterRoutes, opsCenterRoutes, routes };
 
 export default router;

src/views/device-group/DeviceGroup.vue

@@ -1,29 +1,68 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { aiSmartCtrlRoutes } from '@/router';
+import DeviceWorkStatus from '@/views/device-work-status/DeviceWorkStatus.vue';
+import RealTimeMonitor from '@/views/real-time-monitor/RealTimeMonitor.vue';
+import { useRefreshView } from '@/hooks/refresh-view';
 import { translateNavigation } from '@/utils';
 
+import type { Component } from 'vue';
+
+interface TabComponent {
+  name: string;
+  component: Component;
+}
+
 const router = useRouter();
 const route = useRoute();
-const activeKey = ref(route.name as string);
+const { renderView, refreshView } = useRefreshView();
+const activeKey = ref('');
+
+const deviceGroupId = computed(() => {
+  return route.params.id as string;
+});
+
+const aiSmartCtrlTabs: TabComponent[] = [
+  {
+    name: 'realTimeMonitor',
+    component: RealTimeMonitor,
+  },
+  {
+    name: 'deviceWorkStatus',
+    component: DeviceWorkStatus,
+  },
+];
+
+watch(deviceGroupId, () => {
+  refreshView();
+});
+
+onMounted(() => {
+  activeKey.value = (route.query.tab as string) ?? aiSmartCtrlTabs[0].name;
+  refreshView();
+});
 
 const handleTabClick = (activeKey: string | number) => {
-  router.push({
-    name: activeKey as string,
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      tab: activeKey,
+    },
   });
+
+  refreshView();
 };
 </script>
 
 <template>
   <div>
-    <div>
-      <ATabs class="device-group-tab" v-model:active-key="activeKey" @tab-click="handleTabClick">
-        <ATabPane v-for="item in aiSmartCtrlRoutes" :key="item.name" :tab="translateNavigation(item.meta?.title)" />
-      </ATabs>
-    </div>
-    <RouterView />
+    <ATabs class="device-group-tab" v-model:active-key="activeKey" @tab-click="handleTabClick">
+      <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.name" :tab="translateNavigation(item.name)">
+        <component v-if="renderView" :is="item.component" :device-group-id="Number(deviceGroupId)" />
+      </ATabPane>
+    </ATabs>
   </div>
 </template>