feat(views): 添加设备分组、实时监测等模块的页面及路由

src/i18n/locales/zh.json

@@ -322,12 +322,14 @@
     "logCenter": "日志中心",
     "organizationManage": "组织管理",
     "protocolManage": "协议管理",
+    "realTimeMonitor": "实时监测",
     "roleManage": "角色管理",
     "standardProtocolLibrary": "平台标准协议库",
     "userManage": "用户管理",
     "userPermission": "用户权限"
   },
   "organizationManage": {},
+  "realTimeMonitor": {},
   "registerGateway": {
     "addInterface": "添加接口",
     "addStation": "添加从站",

src/router/index.ts

@@ -15,6 +15,30 @@ 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,
+    },
+  },
+];
+
 /**
  * 数据中心相关路由
  */
@@ -127,7 +151,7 @@ const dataCenterRoutes: Readonly<RouteRecordRaw[]> = [
 ];
 
 /**
- * 运维中心中心相关路由
+ * 运维中心相关路由
  */
 const opsCenterRoutes: Readonly<RouteRecordRaw[]> = [
   {
@@ -321,27 +345,6 @@ const routes: Readonly<RouteRecordRaw[]> = [
       },
     ],
   },
-  {
-    path: '/device-work-status',
-    redirect: '/device-work-status/index',
-    component: HvacLayout,
-    meta: {
-      title: 'deviceWorkStatus',
-      icon: 'setting',
-      hideSubMenu: true,
-      requiresAuth: true,
-    },
-    children: [
-      {
-        path: 'index',
-        name: 'deviceWorkStatus',
-        component: () => import('@/views/device-work-status/DeviceWorkStatus.vue'),
-        meta: {
-          requiresAuth: true,
-        },
-      },
-    ],
-  },
   {
     path: '/first-usage',
     name: 'firstUsage',
@@ -387,6 +390,28 @@ const routes: Readonly<RouteRecordRaw[]> = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/ai-smart-ctrl',
+    name: 'aiSmartCtrl',
+    redirect: '/ai-smart-ctrl/device-group',
+    component: HvacLayout,
+    meta: {
+      title: 'aiSmartCtrl',
+      requiresAuth: true,
+    },
+    children: [
+      {
+        path: 'device-group',
+        name: 'deviceGroup',
+        component: () => import('@/views/device-group/DeviceGroup.vue'),
+        meta: {
+          title: 'deviceGroup',
+          requiresAuth: true,
+        },
+        children: aiSmartCtrlRoutes,
+      },
+    ],
+  },
   ...dataCenterRoutes,
   ...opsCenterRoutes,
 ];
@@ -412,6 +437,6 @@ const router = createRouter({
 //   }
 // });
 
-export { dataCenterRoutes, opsCenterRoutes, routes };
+export { aiSmartCtrlRoutes, dataCenterRoutes, opsCenterRoutes, routes };
 
 export default router;

src/views/device-group/DeviceGroup.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { aiSmartCtrlRoutes } from '@/router';
+import { translateNavigation } from '@/utils';
+
+const router = useRouter();
+const route = useRoute();
+const activeKey = ref(route.name as string);
+
+const handleTabClick = (activeKey: string | number) => {
+  router.push({
+    name: activeKey as string,
+  });
+};
+</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 />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.device-group-tab) {
+  font-weight: 500;
+  line-height: 22px;
+
+  &.ant-tabs-top > .ant-tabs-nav {
+    .ant-tabs-tab {
+      padding: 8px 0;
+      font-size: 16px;
+
+      + .ant-tabs-tab {
+        margin-left: 32px;
+      }
+    }
+
+    &::before {
+      border: none;
+    }
+  }
+}
+</style>

src/views/real-time-monitor/RealTimeMonitor.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>实时监测</div>
+</template>