From 28200f4931603817a8ba3ccadcc3e7e698dae929 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 10 Jan 2025 14:28:59 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BB=AA=E8=A1=A8=E7=9B=98?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=EF=BC=88=E6=9C=AA=E6=8E=A5=E9=80=9A=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/api/auth.ts                       |   8 +
 src/typings/api.d.ts                          |  41 +++
 src/typings/auto-imports.d.ts                 |   1 +
 src/typings/components.d.ts                   |   5 +-
 src/views/dashboard/modules/card-data.vue     | 280 ++++++++++++-----
 src/views/dashboard/modules/header-banner.vue | 285 +++++++++++++++---
 src/views/device/dashboard/index.vue          |   8 +
 7 files changed, 506 insertions(+), 122 deletions(-)
 create mode 100644 src/views/device/dashboard/index.vue

diff --git a/src/service/api/auth.ts b/src/service/api/auth.ts
index 67734f0..e46bee5 100644
--- a/src/service/api/auth.ts
+++ b/src/service/api/auth.ts
@@ -202,6 +202,14 @@ export function updateBillRule(data: Api.Billing.BillRuleUpdate) {
     data
   });
 }
+/** 获取仪表盘概览数据 */
+export function getDashboardOverview() {
+  return request<Api.DashboardOverview>({
+    url: '/system/dashboard/overview',
+    method: 'get'
+  });
+}
+
 
 
 
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 8bcfa0b..475b304 100644
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -607,4 +607,45 @@ declare namespace Api {
       enable: boolean;
     }
   }
+
+  interface DashboardOverview {
+    cloud: {
+      connected: boolean;
+    };
+    sites: {
+      total: number;
+      countries: number;
+      connected: number;
+      disconnected: number;
+    };
+    devices: {
+      gateways: {
+        connected: number;
+        disconnected: number;
+      };
+      switches: {
+        connected: number;
+        disconnected: number;
+      };
+      olts: {
+        connected: number;
+        disconnected: number;
+      };
+      ap: {
+        connected: number;
+        disconnected: number;
+        isolated: number;
+      };
+    };
+    client: {
+      wiredUsers: number;
+      wirelessUsers: number;
+      wirelessGuests: number;
+    };
+    alerts: number;
+    users: {
+      registered: number;
+      online: number;
+    };
+  }
 }
diff --git a/src/typings/auto-imports.d.ts b/src/typings/auto-imports.d.ts
index dc8316c..05bd787 100644
--- a/src/typings/auto-imports.d.ts
+++ b/src/typings/auto-imports.d.ts
@@ -152,6 +152,7 @@ declare global {
   const getCacheRouteNames: typeof import('../store/modules/route/shared')['getCacheRouteNames']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getDashboardOverview: typeof import('../service/api/auth')['getDashboardOverview']
   const getData: typeof import('../service/api/dictData')['getData']
   const getDefaultHomeTab: typeof import('../store/modules/tab/shared')['getDefaultHomeTab']
   const getDictDataType: typeof import('../service/api/dict')['getDictDataType']
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index ba4e03c..1f73c16 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -45,7 +45,6 @@ declare module 'vue' {
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
-    AStatistic: typeof import('ant-design-vue/es')['Statistic']
     AStep: typeof import('ant-design-vue/es')['Step']
     ASteps: typeof import('ant-design-vue/es')['Steps']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
@@ -77,7 +76,11 @@ declare module 'vue' {
     IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
+    IconMdiAccessPoint: typeof import('~icons/mdi/access-point')['default']
+    IconMdiAlert: typeof import('~icons/mdi/alert')['default']
+    IconMdiCloud: typeof import('~icons/mdi/cloud')['default']
     IconMdiDrag: typeof import('~icons/mdi/drag')['default']
+    IconMdiLaptop: typeof import('~icons/mdi/laptop')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
diff --git a/src/views/dashboard/modules/card-data.vue b/src/views/dashboard/modules/card-data.vue
index ba6a15a..670e7d2 100644
--- a/src/views/dashboard/modules/card-data.vue
+++ b/src/views/dashboard/modules/card-data.vue
@@ -1,109 +1,231 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { createReusableTemplate } from '@vueuse/core';
-import { $t } from '@/locales';
+import { computed, ref } from 'vue';
+import {
+  EnvironmentOutlined,
+  EditOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  HomeOutlined,
+  SearchOutlined,
+  PlusOutlined
+} from '@ant-design/icons-vue';
 
 defineOptions({
   name: 'CardData'
 });
 
-interface CardData {
-  key: string;
-  title: string;
-  value: number;
-  unit: string;
-  color: {
-    start: string;
-    end: string;
-  };
-  icon: string;
+interface SiteData {
+  id: number;
+  name: string;
+  region: string;
+  alerts: number;
+  gateway: string;
+  switches: string;
+  olts: string;
+  eaps: string;
 }
 
-const cardData = computed<CardData[]>(() => [
+// 搜索和分页状态
+const searchValue = ref('');
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 表格列定义
+const columns = [
   {
-    key: 'visitCount',
-    title: $t('page.home.visitCount'),
-    value: 9725,
-    unit: '',
-    color: {
-      start: '#ec4786',
-      end: '#b955a4'
-    },
-    icon: 'ant-design:bar-chart-outlined'
+    title: 'NAME',
+    key: 'name',
+    dataIndex: 'name'
   },
   {
-    key: 'turnover',
-    title: $t('page.home.turnover'),
-    value: 1026,
-    unit: '$',
-    color: {
-      start: '#865ec0',
-      end: '#5144b4'
-    },
-    icon: 'ant-design:money-collect-outlined'
+    title: 'COUNTRY/REGION',
+    key: 'region',
+    dataIndex: 'region'
   },
   {
-    key: 'downloadCount',
-    title: $t('page.home.downloadCount'),
-    value: 970925,
-    unit: '',
-    color: {
-      start: '#56cdf3',
-      end: '#719de3'
-    },
-    icon: 'carbon:document-download'
+    title: 'ALERTS',
+    key: 'alerts',
+    dataIndex: 'alerts',
+    width: 100
   },
   {
-    key: 'dealCount',
-    title: $t('page.home.dealCount'),
-    value: 9527,
-    unit: '',
-    color: {
-      start: '#fcbc25',
-      end: '#f68057'
-    },
-    icon: 'ant-design:trademark-circle-outlined'
+    title: 'GATEWAY',
+    key: 'gateway',
+    dataIndex: 'gateway',
+    width: 100
+  },
+  {
+    title: 'SWITCHES',
+    key: 'switches',
+    dataIndex: 'switches',
+    width: 100
+  },
+  {
+    title: 'OLTS',
+    key: 'olts',
+    dataIndex: 'olts',
+    width: 100
+  },
+  {
+    title: 'EAPS',
+    key: 'eaps',
+    dataIndex: 'eaps',
+    width: 100
+  },
+  {
+    title: 'ACTION',
+    key: 'action',
+    width: 150,
+    fixed: 'right'
+  }
+];
+
+const siteData = computed<SiteData[]>(() => [
+  {
+    id: 1,
+    name: 'wfc-dev-omada1-site1',
+    region: 'China mainland',
+    alerts: 0,
+    gateway: '-',
+    switches: '0 / 0',
+    olts: '0 / 0',
+    eaps: '1 / 1'
+  },
+  {
+    id: 2,
+    name: 'wfc-dev-omada1-site2',
+    region: 'China mainland',
+    alerts: 0,
+    gateway: '-',
+    switches: '0 / 0',
+    olts: '0 / 0',
+    eaps: '0 / 1'
   }
 ]);
 
-interface GradientBgProps {
-  gradientColor: string;
-}
+// 按钮操作处理函数
+const handleEdit = (record: SiteData) => {
+  console.log('Edit:', record);
+};
 
-const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
+const handleCopy = (record: SiteData) => {
+  console.log('Copy:', record);
+};
 
-function getGradientColor(color: CardData['color']) {
-  return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
-}
+const handleDelete = (record: SiteData) => {
+  console.log('Delete:', record);
+};
+
+const handleHome = (record: SiteData) => {
+  console.log('Home:', record);
+};
+
+// 分页处理函数
+// const handlePageChange = (page: number) => {
+//   currentPage.value = page;
+// };
+
+// const handlePageSizeChange = (size: number) => {
+//   pageSize.value = size;
+//   currentPage.value = 1;
+// };
+
+// const handleGoToPage = () => {
+//   // 处理跳转页面逻辑
+//   console.log('Go to page:', currentPage.value);
+// };
 </script>
 
 <template>
   <ACard :bordered="false" size="small" class="card-wrapper">
-    <!-- define component start: GradientBg -->
-    <DefineGradientBg v-slot="{ $slots, gradientColor }">
-      <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
-        <component :is="$slots.default" />
+    <div class="flex justify-between items-center mb-16px">
+      <div class="flex items-center gap-8px">
+        <span class="text-16px font-medium">Site List</span>
+<!--        <span class="text-12px text-gray-500">1-2 of 2 records</span>-->
       </div>
-    </DefineGradientBg>
-    <!-- define component end: GradientBg -->
+      <div class="flex items-center gap-16px">
+        <AInput
+          v-model:value="searchValue"
+          placeholder="Search Site Name"
+          class="w-240px"
+          allow-clear
+        >
+          <template #prefix>
+            <search-outlined />
+          </template>
+        </AInput>
+        <AButton type="primary">
+          <template #icon>
+            <plus-outlined />
+          </template>
+          Import Site
+        </AButton>
+        <AButton type="primary">
+          <template #icon>
+            <plus-outlined />
+          </template>
+          Add New Site
+        </AButton>
+      </div>
+    </div>
 
-    <ARow :gutter="[16, 16]">
-      <ACol v-for="item in cardData" :key="item.key" :span="24" :md="12" :lg="6">
-        <GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
-          <h3 class="text-16px">{{ item.title }}</h3>
-          <div class="flex justify-between pt-12px">
-            <SvgIcon :icon="item.icon" class="text-32px" />
-            <CountTo
-              :prefix="item.unit"
-              :start-value="1"
-              :end-value="item.value"
-              class="text-30px text-white dark:text-dark"
-            />
+    <ATable
+      :columns="columns"
+      :data-source="siteData"
+      :pagination="false"
+      :scroll="{ x: 1200 }"
+      row-key="id"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
+          <div class="flex items-center gap-8px">
+            <environment-outlined class="text-16px" />
+            <span>{{ record.name }}</span>
           </div>
-        </GradientBg>
-      </ACol>
-    </ARow>
+        </template>
+        <template v-else-if="column.key === 'alerts'">
+          <ATag v-if="record.alerts > 0" color="error">{{ record.alerts }}</ATag>
+          <span v-else>{{ record.alerts }}</span>
+        </template>
+        <template v-else-if="column.key === 'action'">
+          <div class="flex items-center gap-8px">
+            <edit-outlined class="cursor-pointer text-primary" @click="handleEdit(record)" />
+            <copy-outlined class="cursor-pointer text-primary" @click="handleCopy(record)" />
+            <delete-outlined class="cursor-pointer text-red-500" @click="handleDelete(record)" />
+            <home-outlined class="cursor-pointer text-primary" @click="handleHome(record)" />
+          </div>
+        </template>
+      </template>
+    </ATable>
+
+    <div class="flex justify-between items-center mt-16px">
+      <div class="text-12px text-gray-500">
+        Showing 1-2 of 2 records
+      </div>
+      <div class="flex items-center gap-8px">
+        <ASelect v-model:value="pageSize" style="width: 100px">
+          <ASelectOption :value="10">10 / page</ASelectOption>
+          <ASelectOption :value="20">20 / page</ASelectOption>
+          <ASelectOption :value="50">50 / page</ASelectOption>
+        </ASelect>
+        <span class="text-12px text-gray-500">Go to page:</span>
+        <AInput v-model:value="currentPage" style="width: 50px" />
+        <AButton>Go</AButton>
+      </div>
+    </div>
   </ACard>
 </template>
 
-<style scoped></style>
+<style scoped>
+.card-wrapper {
+  margin-bottom: 16px;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.w-240px {
+  width: 240px;
+}
+</style>
diff --git a/src/views/dashboard/modules/header-banner.vue b/src/views/dashboard/modules/header-banner.vue
index df1e80c..149105a 100644
--- a/src/views/dashboard/modules/header-banner.vue
+++ b/src/views/dashboard/modules/header-banner.vue
@@ -1,62 +1,263 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { $t } from '@/locales';
-import { useAuthStore } from '@/store/modules/auth';
+import {
+  EnvironmentOutlined,
+  SafetyOutlined,
+  HddOutlined,
+  GroupOutlined,
+  UserAddOutlined,
+  UserSwitchOutlined
+} from '@ant-design/icons-vue';
 
 defineOptions({
   name: 'HeaderBanner'
 });
 
-const authStore = useAuthStore();
-
-interface StatisticData {
-  id: number;
-  title: string;
-  value: string;
-}
-
-const statisticData = computed<StatisticData[]>(() => [
-  {
-    id: 0,
-    title: $t('page.home.projectCount'),
-    value: '25'
+const overviewData = ref<Api.DashboardOverview>({
+  cloud: { connected: false },
+  sites: { total: 0, countries: 0, connected: 0, disconnected: 0 },
+  devices: {
+    gateways: { connected: 0, disconnected: 0 },
+    switches: { connected: 0, disconnected: 0 },
+    olts: { connected: 0, disconnected: 0 },
+    ap: { connected: 0, disconnected: 0, isolated: 0 }
   },
-  {
-    id: 1,
-    title: $t('page.home.todo'),
-    value: '4/16'
-  },
-  {
-    id: 2,
-    title: $t('page.home.message'),
-    value: '12'
-  }
-]);
+  client: { wiredUsers: 0, wirelessUsers: 0, wirelessGuests: 0 },
+  alerts: 0,
+  users: { registered: 0, online: 0 }
+});
+
+const fetchOverviewData = async () => {
+  // try {
+  //   const data = await authStore.getDashboardOverview();
+  //   overviewData.value = data;
+  // } catch (error) {
+  //   console.error('Failed to fetch overview data:', error);
+  // }
+};
+
+onMounted(() => {
+  fetchOverviewData();
+});
+
+const deviceStatus = computed(() => ({
+  ap: overviewData.value.devices.ap,
+  client: overviewData.value.client,
+  alerts: overviewData.value.alerts,
+  users: overviewData.value.users
+}));
+
+const siteInfo = computed(() => overviewData.value.sites);
+
+const otherDevices = computed(() => ({
+  gateways: overviewData.value.devices.gateways,
+  switches: overviewData.value.devices.switches,
+  olts: overviewData.value.devices.olts
+}));
 </script>
 
 <template>
   <ACard :bordered="false" class="card-wrapper">
+    <div class="text-16px font-bold mb-4px">Controller Overview</div>
     <ARow :gutter="[16, 16]">
-      <ACol :span="24" :md="18">
-        <div class="flex-y-center">
-          <div class="size-72px shrink-0 overflow-hidden rd-1/2">
-            <img src="@/assets/imgs/soybean.jpg" class="size-full" />
+      <ACol :span="24">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8px">
+          <!-- Connected Status -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-blue-50 rounded-lg">
+                <icon-mdi-cloud class="text-primary text-24px" />
+              </div>
+              <div class="text-16px font-medium">Connected</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="text-12px text-gray-500">
+              Cloud Access
+            </div>
           </div>
-          <div class="pl-12px">
-            <h3 class="text-18px font-semibold">
-              {{ $t('page.home.greeting', { username: authStore.userInfo.username }) }}
-            </h3>
-            <p class="text-#999 leading-30px">{{ $t('page.home.weatherDesc') }}</p>
+
+          <!-- Sites -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-gray-100 rounded-lg relative">
+                <environment-outlined class="text-24px text-primary" />
+                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ siteInfo.total }}</span>
+              </div>
+              <div class="text-16px font-medium">Sites</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Total Sites: {{ siteInfo.total }}</span>
+              <span>Countries: {{ siteInfo.countries }}</span>
+              <span>Connected: {{ siteInfo.connected }}</span>
+              <span>Disconnected: {{ siteInfo.disconnected }}</span>
+            </div>
+          </div>
+
+          <!-- Gateways -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-gray-100 rounded-lg relative">
+                <safety-outlined class="text-24px text-primary" />
+                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.gateways.connected + otherDevices.gateways.disconnected }}</span>
+              </div>
+              <div class="text-16px font-medium">Gateways</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Connected: {{ otherDevices.gateways.connected }}</span>
+              <span>Disconnected: {{ otherDevices.gateways.disconnected }}</span>
+            </div>
+          </div>
+
+          <!-- Switches -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-gray-100 rounded-lg relative">
+                <hdd-outlined class="text-24px text-primary" />
+                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.switches.connected + otherDevices.switches.disconnected }}</span>
+              </div>
+              <div class="text-16px font-medium">Switches</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Connected: {{ otherDevices.switches.connected }}</span>
+              <span>Disconnected: {{ otherDevices.switches.disconnected }}</span>
+            </div>
+          </div>
+
+          <!-- OLTs -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-gray-100 rounded-lg relative">
+                <group-outlined class="text-24px text-primary" />
+                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.olts.connected + otherDevices.olts.disconnected }}</span>
+              </div>
+              <div class="text-16px font-medium">OLTs</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Connected: {{ otherDevices.olts.connected }}</span>
+              <span>Disconnected: {{ otherDevices.olts.disconnected }}</span>
+            </div>
+          </div>
+
+          <!-- Register Users -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-blue-50 rounded-lg">
+                <user-add-outlined class="text-primary text-24px" />
+              </div>
+              <div class="text-16px font-medium">Register Users</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Total: {{ deviceStatus.users.registered }}</span>
+              <span>Online: {{ deviceStatus.users.online }}</span>
+            </div>
+          </div>
+
+          <!-- Online Users -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-green-50 rounded-lg">
+                <user-switch-outlined class="text-primary text-24px" />
+              </div>
+              <div class="text-16px font-medium">Online Users</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Active: {{ deviceStatus.users.online }}</span>
+              <span>Total: {{ deviceStatus.users.registered }}</span>
+            </div>
+          </div>
+
+          <!-- AP Status -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-green-50 rounded-lg">
+                <icon-mdi-access-point class="text-primary text-24px" />
+              </div>
+              <div class="text-16px font-medium">AP</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Connected: {{ deviceStatus.ap.connected }}</span>
+              <span>Disconnected: {{ deviceStatus.ap.disconnected }}</span>
+              <span>Isolated: {{ deviceStatus.ap.isolated }}</span>
+            </div>
+          </div>
+
+          <!-- Client Status -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-purple-50 rounded-lg">
+                <icon-mdi-laptop class="text-primary text-24px" />
+              </div>
+              <div class="text-16px font-medium">Client</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Wired Users: {{ deviceStatus.client.wiredUsers }}</span>
+              <span>Wireless Users: {{ deviceStatus.client.wirelessUsers }}</span>
+              <span>Wireless Guests: {{ deviceStatus.client.wirelessGuests }}</span>
+            </div>
+          </div>
+
+          <!-- Alerts -->
+          <div class="flex flex-col p-6px">
+            <div class="flex items-center gap-6px mb-6px">
+              <div class="size-48px flex-center bg-yellow-50 rounded-lg">
+                <icon-mdi-alert class="text-warning text-24px" />
+              </div>
+              <div class="text-16px font-medium">Alerts</div>
+            </div>
+            <div class="border-t border-gray-100 my-4px"></div>
+            <div class="flex flex-col text-12px text-gray-500">
+              <span>Total: {{ deviceStatus.alerts }}</span>
+              <span>Active: {{ deviceStatus.alerts }}</span>
+            </div>
           </div>
         </div>
       </ACol>
-      <ACol :span="24" :md="6">
-        <ASpace class="w-full justify-end" :size="24">
-          <AStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item" />
-        </ASpace>
-      </ACol>
     </ARow>
   </ACard>
 </template>
 
-<style scoped></style>
+<style scoped>
+.card-wrapper {
+  margin-bottom: 16px;
+  padding: 12px;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.size-48px {
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+
+.flex-col > span {
+  line-height: 1.5;
+}
+
+.bg-gray-50 {
+  background-color: #fafafa;
+}
+
+.p-6px {
+  padding: 6px;
+}
+
+.mt-8px {
+  margin-top: 8px;
+}
+
+.mb-6px {
+  margin-bottom: 6px;
+}
+</style>
diff --git a/src/views/device/dashboard/index.vue b/src/views/device/dashboard/index.vue
new file mode 100644
index 0000000..0b0fc85
--- /dev/null
+++ b/src/views/device/dashboard/index.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>仪表盘面板</div>
+</template>
+
+<style scoped></style>