diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/views/data/statistics/components/bottom.vue b/src/views/data/statistics/components/bottom.vue
new file mode 100644
index 0000000..ca95910
--- /dev/null
+++ b/src/views/data/statistics/components/bottom.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 设备分组统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06']
+  data.value = [
+    {
+      name: '数量',
+      data: [15, 19, 50, 11, 20, 0],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+  xAxisData1.value = [
+    '北燃哨兵', '济南项目', '便携式管盯调试202412', '运维组测试分组1', '设备分组联调2', '设备分组联调12月01', '测试g'
+  ]
+  data1.value = [
+    {
+      name: '设备数量',
+      data: [1, 3, 5, 1, 9, 15, 7],
+    },
+  ]
+  resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分组统计 -->
+    <layout class="header-right" title="设备分组统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警趋势统计 -->
+    <layout class="header-left" title="报警趋势统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <line-chart :x-axis-data="xAxisData" :data="data" :gradient="true"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 60,
+                right: 60,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+          </div>
+        </div>
+      </template>
+    </layout>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/views/data/statistics/components/bottom.vue b/src/views/data/statistics/components/bottom.vue
new file mode 100644
index 0000000..ca95910
--- /dev/null
+++ b/src/views/data/statistics/components/bottom.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 设备分组统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06']
+  data.value = [
+    {
+      name: '数量',
+      data: [15, 19, 50, 11, 20, 0],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+  xAxisData1.value = [
+    '北燃哨兵', '济南项目', '便携式管盯调试202412', '运维组测试分组1', '设备分组联调2', '设备分组联调12月01', '测试g'
+  ]
+  data1.value = [
+    {
+      name: '设备数量',
+      data: [1, 3, 5, 1, 9, 15, 7],
+    },
+  ]
+  resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分组统计 -->
+    <layout class="header-right" title="设备分组统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警趋势统计 -->
+    <layout class="header-left" title="报警趋势统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <line-chart :x-axis-data="xAxisData" :data="data" :gradient="true"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 60,
+                right: 60,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+          </div>
+        </div>
+      </template>
+    </layout>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/header.vue b/src/views/data/statistics/components/header.vue
new file mode 100644
index 0000000..a825816
--- /dev/null
+++ b/src/views/data/statistics/components/header.vue
@@ -0,0 +1,204 @@
+<!--
+  Description: 设备统计/报警统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceAndAlarm">
+import layout from './layout.vue'
+import {img} from './imgData'
+const runLoading = ref(false)
+const reportLoading = ref(false)
+const runData = ref([
+  {
+    name: '正常',
+    img:img.backup,
+    unit: '台',
+    value:155
+  },
+  {
+    name: '使用中',
+    img:img.online,
+    unit: '台',
+    value:132
+  },
+   {
+    name: '离线',
+    img:img.offline,
+    unit: '台',
+    value:15
+  },
+])
+const reportData = ref([
+  {
+    name: '正在报警',
+    value: 22,
+    unit: '个'
+  },
+  {
+    name: '今日报警',
+    value: 3,
+    unit: '个'
+  },
+  {
+    name: '本周报警',
+    value: 15,
+    unit: '个'
+  },
+  {
+    name: '本月报警',
+    value: 19,
+    unit: '个'
+  },
+  {
+    name: '全年报警',
+    value: 22,
+    unit: '个'
+  },
+])
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备统计 -->
+    <layout class="left" title="设备统计">
+      <template #content>
+        <div v-loading="runLoading" class="content">
+          <div v-for="item in runData" :key="item.name" class="item">
+            <div class="img">
+              <img :src="item.img">
+            </div>
+            <div class="text">
+              <div class="name">
+                {{ item.name }}
+              </div>
+              <div class="value">
+                <span class="count"> {{ item.value }}</span>
+                <span class="unit"> {{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警统计 -->
+    <layout class="right" title="报警统计">
+      <template #content>
+        <div v-loading="reportLoading" class="content">
+          <div v-for="item in reportData" :key="item.name" class="item">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="conut"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 34%;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-around;
+    padding-top: 10px;
+
+    .item {
+      // width: 21%;
+      box-sizing: border-box;
+      display: flex;
+      // padding: 10px;
+
+      img {
+        width: 55px;
+        height: 55px;
+      }
+
+      .text {
+        margin-left: 25px;
+
+        .name {
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          // font-size: 22px;
+
+          .count {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 65%;
+    box-sizing: border-box;
+    // padding: 10px;
+
+    .content {
+      display: flex;
+      padding: 10px;
+      // justify-content: space-around;
+      justify-content: space-evenly;
+
+      .item {
+        width: 20%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .name {
+          // font-weight: 700;
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+          border-left: 4px solid red;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+
+          .conut {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/views/data/statistics/components/bottom.vue b/src/views/data/statistics/components/bottom.vue
new file mode 100644
index 0000000..ca95910
--- /dev/null
+++ b/src/views/data/statistics/components/bottom.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 设备分组统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06']
+  data.value = [
+    {
+      name: '数量',
+      data: [15, 19, 50, 11, 20, 0],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+  xAxisData1.value = [
+    '北燃哨兵', '济南项目', '便携式管盯调试202412', '运维组测试分组1', '设备分组联调2', '设备分组联调12月01', '测试g'
+  ]
+  data1.value = [
+    {
+      name: '设备数量',
+      data: [1, 3, 5, 1, 9, 15, 7],
+    },
+  ]
+  resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分组统计 -->
+    <layout class="header-right" title="设备分组统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警趋势统计 -->
+    <layout class="header-left" title="报警趋势统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <line-chart :x-axis-data="xAxisData" :data="data" :gradient="true"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 60,
+                right: 60,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+          </div>
+        </div>
+      </template>
+    </layout>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/header.vue b/src/views/data/statistics/components/header.vue
new file mode 100644
index 0000000..a825816
--- /dev/null
+++ b/src/views/data/statistics/components/header.vue
@@ -0,0 +1,204 @@
+<!--
+  Description: 设备统计/报警统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceAndAlarm">
+import layout from './layout.vue'
+import {img} from './imgData'
+const runLoading = ref(false)
+const reportLoading = ref(false)
+const runData = ref([
+  {
+    name: '正常',
+    img:img.backup,
+    unit: '台',
+    value:155
+  },
+  {
+    name: '使用中',
+    img:img.online,
+    unit: '台',
+    value:132
+  },
+   {
+    name: '离线',
+    img:img.offline,
+    unit: '台',
+    value:15
+  },
+])
+const reportData = ref([
+  {
+    name: '正在报警',
+    value: 22,
+    unit: '个'
+  },
+  {
+    name: '今日报警',
+    value: 3,
+    unit: '个'
+  },
+  {
+    name: '本周报警',
+    value: 15,
+    unit: '个'
+  },
+  {
+    name: '本月报警',
+    value: 19,
+    unit: '个'
+  },
+  {
+    name: '全年报警',
+    value: 22,
+    unit: '个'
+  },
+])
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备统计 -->
+    <layout class="left" title="设备统计">
+      <template #content>
+        <div v-loading="runLoading" class="content">
+          <div v-for="item in runData" :key="item.name" class="item">
+            <div class="img">
+              <img :src="item.img">
+            </div>
+            <div class="text">
+              <div class="name">
+                {{ item.name }}
+              </div>
+              <div class="value">
+                <span class="count"> {{ item.value }}</span>
+                <span class="unit"> {{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警统计 -->
+    <layout class="right" title="报警统计">
+      <template #content>
+        <div v-loading="reportLoading" class="content">
+          <div v-for="item in reportData" :key="item.name" class="item">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="conut"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 34%;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-around;
+    padding-top: 10px;
+
+    .item {
+      // width: 21%;
+      box-sizing: border-box;
+      display: flex;
+      // padding: 10px;
+
+      img {
+        width: 55px;
+        height: 55px;
+      }
+
+      .text {
+        margin-left: 25px;
+
+        .name {
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          // font-size: 22px;
+
+          .count {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 65%;
+    box-sizing: border-box;
+    // padding: 10px;
+
+    .content {
+      display: flex;
+      padding: 10px;
+      // justify-content: space-around;
+      justify-content: space-evenly;
+
+      .item {
+        width: 20%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .name {
+          // font-weight: 700;
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+          border-left: 4px solid red;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+
+          .conut {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/imgData.ts b/src/views/data/statistics/components/imgData.ts
new file mode 100644
index 0000000..b22047f
--- /dev/null
+++ b/src/views/data/statistics/components/imgData.ts
@@ -0,0 +1,5 @@
+export const img = {
+  online: new URL('@/assets/images/device/count/online.png', import.meta.url),
+  backup: new URL('@/assets/images/device/count/backup.png', import.meta.url),
+  offline: new URL('@/assets/images/device/count/offline.png', import.meta.url),
+}

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/views/data/statistics/components/bottom.vue b/src/views/data/statistics/components/bottom.vue
new file mode 100644
index 0000000..ca95910
--- /dev/null
+++ b/src/views/data/statistics/components/bottom.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 设备分组统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06']
+  data.value = [
+    {
+      name: '数量',
+      data: [15, 19, 50, 11, 20, 0],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+  xAxisData1.value = [
+    '北燃哨兵', '济南项目', '便携式管盯调试202412', '运维组测试分组1', '设备分组联调2', '设备分组联调12月01', '测试g'
+  ]
+  data1.value = [
+    {
+      name: '设备数量',
+      data: [1, 3, 5, 1, 9, 15, 7],
+    },
+  ]
+  resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分组统计 -->
+    <layout class="header-right" title="设备分组统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警趋势统计 -->
+    <layout class="header-left" title="报警趋势统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <line-chart :x-axis-data="xAxisData" :data="data" :gradient="true"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 60,
+                right: 60,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+          </div>
+        </div>
+      </template>
+    </layout>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/header.vue b/src/views/data/statistics/components/header.vue
new file mode 100644
index 0000000..a825816
--- /dev/null
+++ b/src/views/data/statistics/components/header.vue
@@ -0,0 +1,204 @@
+<!--
+  Description: 设备统计/报警统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceAndAlarm">
+import layout from './layout.vue'
+import {img} from './imgData'
+const runLoading = ref(false)
+const reportLoading = ref(false)
+const runData = ref([
+  {
+    name: '正常',
+    img:img.backup,
+    unit: '台',
+    value:155
+  },
+  {
+    name: '使用中',
+    img:img.online,
+    unit: '台',
+    value:132
+  },
+   {
+    name: '离线',
+    img:img.offline,
+    unit: '台',
+    value:15
+  },
+])
+const reportData = ref([
+  {
+    name: '正在报警',
+    value: 22,
+    unit: '个'
+  },
+  {
+    name: '今日报警',
+    value: 3,
+    unit: '个'
+  },
+  {
+    name: '本周报警',
+    value: 15,
+    unit: '个'
+  },
+  {
+    name: '本月报警',
+    value: 19,
+    unit: '个'
+  },
+  {
+    name: '全年报警',
+    value: 22,
+    unit: '个'
+  },
+])
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备统计 -->
+    <layout class="left" title="设备统计">
+      <template #content>
+        <div v-loading="runLoading" class="content">
+          <div v-for="item in runData" :key="item.name" class="item">
+            <div class="img">
+              <img :src="item.img">
+            </div>
+            <div class="text">
+              <div class="name">
+                {{ item.name }}
+              </div>
+              <div class="value">
+                <span class="count"> {{ item.value }}</span>
+                <span class="unit"> {{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警统计 -->
+    <layout class="right" title="报警统计">
+      <template #content>
+        <div v-loading="reportLoading" class="content">
+          <div v-for="item in reportData" :key="item.name" class="item">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="conut"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 34%;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-around;
+    padding-top: 10px;
+
+    .item {
+      // width: 21%;
+      box-sizing: border-box;
+      display: flex;
+      // padding: 10px;
+
+      img {
+        width: 55px;
+        height: 55px;
+      }
+
+      .text {
+        margin-left: 25px;
+
+        .name {
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          // font-size: 22px;
+
+          .count {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 65%;
+    box-sizing: border-box;
+    // padding: 10px;
+
+    .content {
+      display: flex;
+      padding: 10px;
+      // justify-content: space-around;
+      justify-content: space-evenly;
+
+      .item {
+        width: 20%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .name {
+          // font-weight: 700;
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+          border-left: 4px solid red;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+
+          .conut {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/imgData.ts b/src/views/data/statistics/components/imgData.ts
new file mode 100644
index 0000000..b22047f
--- /dev/null
+++ b/src/views/data/statistics/components/imgData.ts
@@ -0,0 +1,5 @@
+export const img = {
+  online: new URL('@/assets/images/device/count/online.png', import.meta.url),
+  backup: new URL('@/assets/images/device/count/backup.png', import.meta.url),
+  offline: new URL('@/assets/images/device/count/offline.png', import.meta.url),
+}
diff --git a/src/views/data/statistics/components/layout.vue b/src/views/data/statistics/components/layout.vue
new file mode 100644
index 0000000..f8a3ad0
--- /dev/null
+++ b/src/views/data/statistics/components/layout.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup name="AlarmLayout">
+const $props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <app-container class="container">
+    <div class="layout">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div>
+          <slot name="search" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <slot name="content" />
+    </div>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  // border: 2px solid #888;
+  border-left: 4px solid #0d76d4;
+  padding: 3px 6px;
+  margin: 4px 0;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      font-size: 17px;
+      font-weight: 700;
+    }
+  }
+}
+
+.container {
+  background-color: #fff !important;
+  border-radius: 5px !important;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+  border: 1px solid #e4e7ed;
+  overflow: hidden;
+}
+</style>

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/views/data/statistics/components/bottom.vue b/src/views/data/statistics/components/bottom.vue
new file mode 100644
index 0000000..ca95910
--- /dev/null
+++ b/src/views/data/statistics/components/bottom.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 设备分组统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06']
+  data.value = [
+    {
+      name: '数量',
+      data: [15, 19, 50, 11, 20, 0],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+  xAxisData1.value = [
+    '北燃哨兵', '济南项目', '便携式管盯调试202412', '运维组测试分组1', '设备分组联调2', '设备分组联调12月01', '测试g'
+  ]
+  data1.value = [
+    {
+      name: '设备数量',
+      data: [1, 3, 5, 1, 9, 15, 7],
+    },
+  ]
+  resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分组统计 -->
+    <layout class="header-right" title="设备分组统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警趋势统计 -->
+    <layout class="header-left" title="报警趋势统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <line-chart :x-axis-data="xAxisData" :data="data" :gradient="true"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 60,
+                right: 60,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+          </div>
+        </div>
+      </template>
+    </layout>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/header.vue b/src/views/data/statistics/components/header.vue
new file mode 100644
index 0000000..a825816
--- /dev/null
+++ b/src/views/data/statistics/components/header.vue
@@ -0,0 +1,204 @@
+<!--
+  Description: 设备统计/报警统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceAndAlarm">
+import layout from './layout.vue'
+import {img} from './imgData'
+const runLoading = ref(false)
+const reportLoading = ref(false)
+const runData = ref([
+  {
+    name: '正常',
+    img:img.backup,
+    unit: '台',
+    value:155
+  },
+  {
+    name: '使用中',
+    img:img.online,
+    unit: '台',
+    value:132
+  },
+   {
+    name: '离线',
+    img:img.offline,
+    unit: '台',
+    value:15
+  },
+])
+const reportData = ref([
+  {
+    name: '正在报警',
+    value: 22,
+    unit: '个'
+  },
+  {
+    name: '今日报警',
+    value: 3,
+    unit: '个'
+  },
+  {
+    name: '本周报警',
+    value: 15,
+    unit: '个'
+  },
+  {
+    name: '本月报警',
+    value: 19,
+    unit: '个'
+  },
+  {
+    name: '全年报警',
+    value: 22,
+    unit: '个'
+  },
+])
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备统计 -->
+    <layout class="left" title="设备统计">
+      <template #content>
+        <div v-loading="runLoading" class="content">
+          <div v-for="item in runData" :key="item.name" class="item">
+            <div class="img">
+              <img :src="item.img">
+            </div>
+            <div class="text">
+              <div class="name">
+                {{ item.name }}
+              </div>
+              <div class="value">
+                <span class="count"> {{ item.value }}</span>
+                <span class="unit"> {{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警统计 -->
+    <layout class="right" title="报警统计">
+      <template #content>
+        <div v-loading="reportLoading" class="content">
+          <div v-for="item in reportData" :key="item.name" class="item">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="conut"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 34%;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-around;
+    padding-top: 10px;
+
+    .item {
+      // width: 21%;
+      box-sizing: border-box;
+      display: flex;
+      // padding: 10px;
+
+      img {
+        width: 55px;
+        height: 55px;
+      }
+
+      .text {
+        margin-left: 25px;
+
+        .name {
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          // font-size: 22px;
+
+          .count {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 65%;
+    box-sizing: border-box;
+    // padding: 10px;
+
+    .content {
+      display: flex;
+      padding: 10px;
+      // justify-content: space-around;
+      justify-content: space-evenly;
+
+      .item {
+        width: 20%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .name {
+          // font-weight: 700;
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+          border-left: 4px solid red;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+
+          .conut {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/imgData.ts b/src/views/data/statistics/components/imgData.ts
new file mode 100644
index 0000000..b22047f
--- /dev/null
+++ b/src/views/data/statistics/components/imgData.ts
@@ -0,0 +1,5 @@
+export const img = {
+  online: new URL('@/assets/images/device/count/online.png', import.meta.url),
+  backup: new URL('@/assets/images/device/count/backup.png', import.meta.url),
+  offline: new URL('@/assets/images/device/count/offline.png', import.meta.url),
+}
diff --git a/src/views/data/statistics/components/layout.vue b/src/views/data/statistics/components/layout.vue
new file mode 100644
index 0000000..f8a3ad0
--- /dev/null
+++ b/src/views/data/statistics/components/layout.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup name="AlarmLayout">
+const $props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <app-container class="container">
+    <div class="layout">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div>
+          <slot name="search" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <slot name="content" />
+    </div>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  // border: 2px solid #888;
+  border-left: 4px solid #0d76d4;
+  padding: 3px 6px;
+  margin: 4px 0;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      font-size: 17px;
+      font-weight: 700;
+    }
+  }
+}
+
+.container {
+  background-color: #fff !important;
+  border-radius: 5px !important;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+  border: 1px solid #e4e7ed;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/data/statistics/components/middle.vue b/src/views/data/statistics/components/middle.vue
new file mode 100644
index 0000000..08845ca
--- /dev/null
+++ b/src/views/data/statistics/components/middle.vue
@@ -0,0 +1,149 @@
+<!--
+  Description: 设备分类统计/各类报警统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['井盖状态监测仪', '井盖状态监测仪', '商用燃气智能监测终端', '商用燃气智能监测终端', '管盯']
+  data.value = [
+    {
+      name: '设备数量',
+      data: [15, 19, 50, 11, 20],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+    xAxisData1.value = [
+      '设备离线', '浓度超限', '数据异常', '设备异常',
+    ]
+    data1.value = [
+      {
+        name: '报警数量',
+        data: [1, 3, 5, 1,],
+      },
+    ]
+    resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分类统计 -->
+    <layout class="header-left" title="设备分类统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <bar-chart-horizontal v-show="xAxisData" :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]"
+              :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '0' }" />
+            <el-empty v-show="!xAxisData" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 各类报警统计 -->
+    <layout class="header-right" title="各类报警统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/assets/images/device/count/backup.png b/src/assets/images/device/count/backup.png
new file mode 100644
index 0000000..7cdc265
--- /dev/null
+++ b/src/assets/images/device/count/backup.png
Binary files differ
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/views/data/statistics/components/bottom.vue b/src/views/data/statistics/components/bottom.vue
new file mode 100644
index 0000000..ca95910
--- /dev/null
+++ b/src/views/data/statistics/components/bottom.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 设备分组统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06']
+  data.value = [
+    {
+      name: '数量',
+      data: [15, 19, 50, 11, 20, 0],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+  xAxisData1.value = [
+    '北燃哨兵', '济南项目', '便携式管盯调试202412', '运维组测试分组1', '设备分组联调2', '设备分组联调12月01', '测试g'
+  ]
+  data1.value = [
+    {
+      name: '设备数量',
+      data: [1, 3, 5, 1, 9, 15, 7],
+    },
+  ]
+  resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分组统计 -->
+    <layout class="header-right" title="设备分组统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警趋势统计 -->
+    <layout class="header-left" title="报警趋势统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <line-chart :x-axis-data="xAxisData" :data="data" :gradient="true"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 60,
+                right: 60,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+          </div>
+        </div>
+      </template>
+    </layout>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/header.vue b/src/views/data/statistics/components/header.vue
new file mode 100644
index 0000000..a825816
--- /dev/null
+++ b/src/views/data/statistics/components/header.vue
@@ -0,0 +1,204 @@
+<!--
+  Description: 设备统计/报警统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceAndAlarm">
+import layout from './layout.vue'
+import {img} from './imgData'
+const runLoading = ref(false)
+const reportLoading = ref(false)
+const runData = ref([
+  {
+    name: '正常',
+    img:img.backup,
+    unit: '台',
+    value:155
+  },
+  {
+    name: '使用中',
+    img:img.online,
+    unit: '台',
+    value:132
+  },
+   {
+    name: '离线',
+    img:img.offline,
+    unit: '台',
+    value:15
+  },
+])
+const reportData = ref([
+  {
+    name: '正在报警',
+    value: 22,
+    unit: '个'
+  },
+  {
+    name: '今日报警',
+    value: 3,
+    unit: '个'
+  },
+  {
+    name: '本周报警',
+    value: 15,
+    unit: '个'
+  },
+  {
+    name: '本月报警',
+    value: 19,
+    unit: '个'
+  },
+  {
+    name: '全年报警',
+    value: 22,
+    unit: '个'
+  },
+])
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备统计 -->
+    <layout class="left" title="设备统计">
+      <template #content>
+        <div v-loading="runLoading" class="content">
+          <div v-for="item in runData" :key="item.name" class="item">
+            <div class="img">
+              <img :src="item.img">
+            </div>
+            <div class="text">
+              <div class="name">
+                {{ item.name }}
+              </div>
+              <div class="value">
+                <span class="count"> {{ item.value }}</span>
+                <span class="unit"> {{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 报警统计 -->
+    <layout class="right" title="报警统计">
+      <template #content>
+        <div v-loading="reportLoading" class="content">
+          <div v-for="item in reportData" :key="item.name" class="item">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="conut"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </layout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 34%;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-around;
+    padding-top: 10px;
+
+    .item {
+      // width: 21%;
+      box-sizing: border-box;
+      display: flex;
+      // padding: 10px;
+
+      img {
+        width: 55px;
+        height: 55px;
+      }
+
+      .text {
+        margin-left: 25px;
+
+        .name {
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          // font-size: 22px;
+
+          .count {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 65%;
+    box-sizing: border-box;
+    // padding: 10px;
+
+    .content {
+      display: flex;
+      padding: 10px;
+      // justify-content: space-around;
+      justify-content: space-evenly;
+
+      .item {
+        width: 20%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .name {
+          // font-weight: 700;
+          font-weight: 700;
+          font-size: 20px;
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+          border-left: 4px solid red;
+        }
+
+        .value {
+          // height: 27.5px;
+          // line-height: 27.5px;
+          width: 51%;
+          text-align: center;
+
+          .conut {
+            font-size: 22px;
+            font-weight: 700;
+          }
+
+          .unit {
+            padding-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/components/imgData.ts b/src/views/data/statistics/components/imgData.ts
new file mode 100644
index 0000000..b22047f
--- /dev/null
+++ b/src/views/data/statistics/components/imgData.ts
@@ -0,0 +1,5 @@
+export const img = {
+  online: new URL('@/assets/images/device/count/online.png', import.meta.url),
+  backup: new URL('@/assets/images/device/count/backup.png', import.meta.url),
+  offline: new URL('@/assets/images/device/count/offline.png', import.meta.url),
+}
diff --git a/src/views/data/statistics/components/layout.vue b/src/views/data/statistics/components/layout.vue
new file mode 100644
index 0000000..f8a3ad0
--- /dev/null
+++ b/src/views/data/statistics/components/layout.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup name="AlarmLayout">
+const $props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <app-container class="container">
+    <div class="layout">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div>
+          <slot name="search" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <slot name="content" />
+    </div>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  // border: 2px solid #888;
+  border-left: 4px solid #0d76d4;
+  padding: 3px 6px;
+  margin: 4px 0;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      font-size: 17px;
+      font-weight: 700;
+    }
+  }
+}
+
+.container {
+  background-color: #fff !important;
+  border-radius: 5px !important;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+  border: 1px solid #e4e7ed;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/data/statistics/components/middle.vue b/src/views/data/statistics/components/middle.vue
new file mode 100644
index 0000000..08845ca
--- /dev/null
+++ b/src/views/data/statistics/components/middle.vue
@@ -0,0 +1,149 @@
+<!--
+  Description: 设备分类统计/各类报警统计
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import layout from './layout.vue'
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  })
+}
+// 设备分类统计数据
+const deviceTypeLoading = ref(false)
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = ['井盖状态监测仪', '井盖状态监测仪', '商用燃气智能监测终端', '商用燃气智能监测终端', '管盯']
+  data.value = [
+    {
+      name: '设备数量',
+      data: [15, 19, 50, 11, 20],
+    },
+  ]
+  resizePage()
+}, 1000)
+
+// 各类报警统计
+const alarmCountLoading = ref(false)
+const xAxisData1 = ref([])
+const data1 = ref([])
+setTimeout(() => {
+    xAxisData1.value = [
+      '设备离线', '浓度超限', '数据异常', '设备异常',
+    ]
+    data1.value = [
+      {
+        name: '报警数量',
+        data: [1, 3, 5, 1,],
+      },
+    ]
+    resizePage()
+}, 1000);
+// 获取数据
+const fetchData = () => {
+
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分类统计 -->
+    <layout class="header-left" title="设备分类统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="deviceTypeLoading" class="bar">
+            <bar-chart-horizontal v-show="xAxisData" :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]"
+              :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '0' }" />
+            <el-empty v-show="!xAxisData" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+    <!-- 各类报警统计 -->
+    <layout class="header-right" title="各类报警统计">
+      <template #content>
+        <div class="content">
+          <!-- 垂直柱状图 -->
+          <div v-loading="alarmCountLoading" class="bar">
+            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
+              :show-label="false" :colors="[]" :bar-width="15"
+              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
+              :grid="{
+                top: 50,
+                left: 40,
+                right: 40,
+                bottom: 20,
+                containLabel: true, // 是否包含坐标轴的刻度标签
+              }" />
+            <el-empty v-show="!xAxisData1" description="暂无数据" />
+          </div>
+        </div>
+      </template>
+    </layout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+  justify-content: space-between;
+
+  .header-left {
+    width: 49%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+      justify-content: space-between;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/data/statistics/index.vue b/src/views/data/statistics/index.vue
index d2c1e55..19cfc8b 100644
--- a/src/views/data/statistics/index.vue
+++ b/src/views/data/statistics/index.vue
@@ -4,9 +4,16 @@
   Date: 2025-05-28
  -->
 <script name="StatisticsAnalysis" lang="ts" setup>
-
+import top from './components/header.vue'
+import middle from './components/middle.vue';
+import bottom from './components/bottom.vue'
 </script>
 
 <template>
-  统计分析页面
+  <app-container>
+    <!-- 顶部  --设备统计和报警统计 -->
+     <top style="border-radius: 6px;" />
+     <middle style="border-radius: 6px; margin-top: 10px;" />
+     <bottom style="border-radius: 6px; margin-top: 10px;" />
+  </app-container>
 </template>