diff --git a/index.html b/index.html
index b515a49..55a8bdf 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>智能大气腐蚀检测云平台</title>
+    <title>智能大气腐蚀监测云平台</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/rest/设备管理.http b/rest/设备管理.http
deleted file mode 100644
index ceada5e..0000000
--- a/rest/设备管理.http
+++ /dev/null
@@ -1,4 +0,0 @@
-### 查询设备列表
-GET https://test.tall.wiki/gateway/corrosion/devices/all?deviceId=&size=50
-Accept: application/json
-
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 62eb903..1876ebf 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -18,6 +18,6 @@ const menu = computed(() => store.state.menu);
       @click="toggleCollapse"
       v-if="menu.show"
     ></i>
-    {{ $route.meta.title || '智能大气腐蚀检测平台' }}
+    {{ $route.meta.title || '智能大气腐蚀监测平台' }}
   </h1>
 </template>
diff --git a/src/components/overview/chart-device-count.vue b/src/components/overview/chart-device-count.vue
new file mode 100644
index 0000000..6900f55
--- /dev/null
+++ b/src/components/overview/chart-device-count.vue
@@ -0,0 +1,61 @@
+<template>
+  <div id="device-overview-container" style="height: 228px"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { Pie } from '@antv/g2plot';
+
+const data = [
+  { type: '在线', value: 27 },
+  { type: '故障', value: 25 },
+  { type: '离线', value: 18 },
+  { type: '报警', value: 15 },
+];
+let piePlot = null;
+
+function render() {
+  piePlot = new Pie('device-overview-container', {
+    legend: false,
+    appendPadding: 10,
+    data,
+    angleField: 'value',
+    colorField: 'type',
+    radius: 1,
+    innerRadius: 0.64,
+    label: {
+      type: 'inner',
+      offset: '-50%',
+      autoRotate: false,
+      style: { textAlign: 'center' },
+    },
+    statistic: {
+      title: { offsetY: -12, content: '设备总数' },
+      content: { offsetY: 0 },
+    },
+    // 添加 中心统计文本 交互
+    interactions: [
+      { type: 'element-selected' },
+      { type: 'element-active' },
+      {
+        type: 'pie-statistic-active',
+        cfg: {
+          start: [
+            { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
+            { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
+          ],
+          end: [
+            { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
+            { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
+          ],
+        },
+      },
+    ],
+  });
+  piePlot.render();
+}
+
+onMounted(() => {
+  render();
+});
+</script>
diff --git a/src/components/overview/chart-device-detail.vue b/src/components/overview/chart-device-detail.vue
new file mode 100644
index 0000000..598ae7a
--- /dev/null
+++ b/src/components/overview/chart-device-detail.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-card shadow="hover" class="pb-4">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="text-sm text-gray-400">在线数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
+        <div class="line-wrap bg-green-50">
+          <div class="line bg-green-300" style="width: 80%"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="text-sm text-gray-400">离线数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
+        <div class="line-wrap bg-purple-50">
+          <div class="line bg-purple-300" style="width: 80%"></div>
+        </div>
+      </el-col>
+      <el-col :span="12" class="mt-10">
+        <div class="text-sm text-gray-400">故障数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
+        <div class="line-wrap bg-yellow-50">
+          <div class="line bg-yellow-300" style="width: 80%"></div>
+        </div>
+      </el-col>
+      <el-col :span="12" class="mt-10">
+        <div class="text-sm text-gray-400">报警数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
+        <div class="line-wrap bg-red-50">
+          <div class="line bg-red-300" style="width: 80%"></div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<style scoped>
+.line-wrap {
+  position: relative;
+  width: 60%;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.line {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+}
+</style>
diff --git a/src/components/overview/device-table.vue b/src/components/overview/device-table.vue
new file mode 100644
index 0000000..49fc95f
--- /dev/null
+++ b/src/components/overview/device-table.vue
@@ -0,0 +1,96 @@
+<template>
+  <template v-if="devicesAll && devicesAll.data">
+    <el-table :data="devicesAll.data" :max-height="contentHeight" border stripe class="mt-6" style="width: 100%">
+      <el-table-column align="center" label="站点名称" min-width="150" prop="address" />
+      <el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
+      <el-table-column align="center" label="注册时间" min-width="200" prop="installTime" />
+      <el-table-column align="center" label="最近上传时间" min-width="200" prop="runTime" />
+      <el-table-column align="left" header-align="center" label="设备状态" min-width="150" prop="address" />
+      <el-table-column align="left" header-align="center" label="产品类型" min-width="150" prop="area" />
+      <el-table-column align="left" header-align="center" label="协议版本" min-width="150" prop="contact" />
+    </el-table>
+
+    <el-pagination
+      :current-page="devicesAll.page.page"
+      :default-page-size="50"
+      :page-count="devicesAll.page.count"
+      :page-size="devicesAll.page.size"
+      :page-sizes="[1, 10, 20, 50, 100]"
+      :total="devicesAll.page.total"
+      background
+      class="my-3 float-right"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="onSizeChange"
+      @current-change="onCurrentPageChange"
+    ></el-pagination>
+  </template>
+
+  <!-- 编辑设备信息 -->
+  <DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
+import DeviceEdit from 'components/device-edit.vue';
+
+let timer = null;
+const store = useStore();
+const token = computed(() => store.getters['user/token']);
+const devicesAll = computed(() => {
+  return store.state.device.devicesAll;
+});
+const currentDeviceId = computed(() => store.state.device.currentDeviceId);
+const contentHeight = ref(600);
+const editing = ref(false);
+
+// 获取设备完整信息列表
+const getDevicesAllData = () => {
+  try {
+    if (token && token.value) {
+      store.dispatch('device/getDevicesAll');
+      timer && clearTimeout(timer);
+      timer = null;
+    } else {
+      timer = setTimeout(() => {
+        getDevicesAllData();
+      });
+    }
+  } catch (error) {
+    throw new Error(error);
+  }
+};
+
+getDevicesAllData();
+
+// 设置表格高度
+onMounted(() => {
+  const winHeight = document.documentElement.clientHeight;
+  contentHeight.value = winHeight - 250;
+});
+
+/**
+ * 删除
+ * @param {number} page 页码
+ * @param {number} size 每页条数
+ */
+function onSearch(page, size = 50) {
+  const deviceId = currentDeviceId.value;
+  const params = {
+    deviceId,
+    page,
+    size,
+  };
+  store.dispatch('device/getDevicesAll', params);
+}
+
+// 当前页码变化
+const onCurrentPageChange = page => {
+  onSearch(page, devicesAll.value.page.size || 50);
+};
+
+// 每页条数变化
+const onSizeChange = size => {
+  onSearch(1, size);
+};
+</script>
diff --git a/src/routers/index.js b/src/routers/index.js
index bdbdbf4..0441c90 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -2,6 +2,15 @@ import { createRouter, createWebHistory } from 'vue-router';
 // 还有 createWebHashHistory 和 createMemoryHistory
 
 export const routes = [
+  {
+    path: '/corrosion/overview',
+    name: 'overview',
+    meta: {
+      title: '设备概览',
+      icon: 'el-icon-box',
+    },
+    component: () => import('@/views/overview.vue'),
+  },
   {
     path: '/corrosion/devices',
     name: 'devices',
diff --git a/src/views/overview.vue b/src/views/overview.vue
new file mode 100644
index 0000000..1b9ef03
--- /dev/null
+++ b/src/views/overview.vue
@@ -0,0 +1,19 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="8">
+      <el-card shadow="hover">
+        <ChartDeviceCount />
+      </el-card>
+    </el-col>
+    <el-col :span="16">
+      <ChartDeviceDetail />
+    </el-col>
+  </el-row>
+  <DeviceTable />
+</template>
+
+<script setup>
+import ChartDeviceCount from 'components/overview/chart-device-count.vue';
+import ChartDeviceDetail from 'components/overview/chart-device-detail.vue';
+import DeviceTable from 'components/overview/device-table.vue';
+</script>
diff --git a/t b/t
deleted file mode 100644
index a5221f8..0000000
--- a/t
+++ /dev/null
@@ -1,38 +0,0 @@
-usage: git tag [-a | -s | -u <key-id>] [-f] [-m <msg> | -F <file>]
-		<tagname> [<head>]
-   or: git tag -d <tagname>...
-   or: git tag -l [-n[<num>]] [--contains <commit>] [--no-contains <commit>] [--points-at <object>]
-		[--format=<format>] [--[no-]merged [<commit>]] [<pattern>...]
-   or: git tag -v [--format=<format>] <tagname>...
-
-    -l, --list            list tag names
-    -n[<n>]               print <n> lines of each tag message
-    -d, --delete          delete tags
-    -v, --verify          verify tags
-
-Tag creation options
-    -a, --annotate        annotated tag, needs a message
-    -m, --message <message>
-                          tag message
-    -F, --file <file>     read message from file
-    -e, --edit            force edit of tag message
-    -s, --sign            annotated and GPG-signed tag
-    --cleanup <mode>      how to strip spaces and #comments from message
-    -u, --local-user <key-id>
-                          use another key to sign the tag
-    -f, --force           replace the tag if exists
-    --create-reflog       create a reflog
-
-Tag listing options
-    --column[=<style>]    show tag list in columns
-    --contains <commit>   print only tags that contain the commit
-    --no-contains <commit>
-                          print only tags that don't contain the commit
-    --merged <commit>     print only tags that are merged
-    --no-merged <commit>  print only tags that are not merged
-    --sort <key>          field name to sort on
-    --points-at <object>  print only tags of the object
-    --format <format>     format to use for the output
-    --color[=<when>]      respect format colors
-    -i, --ignore-case     sorting and filtering are case insensitive
-
