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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"

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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>

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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/basic/device/list.vue b/src/views/basic/device/list.vue
index cea4585..85d36a4 100644
--- a/src/views/basic/device/list.vue
+++ b/src/views/basic/device/list.vue
@@ -11,6 +11,7 @@
 import { delDevice, exportDevice, getDeviceListPage, batchImportDevice } from '@/api/basic/device'
 import { getDeviceLatestBizData } from '@/api/data/query'
 import AddDeviceDialog from './addDeviceDialog.vue'
+import batchconfig from './batchconfig.vue'
 import axios from 'axios'
 const route = useRoute()
 const router = useRouter()
@@ -216,7 +217,11 @@
   }
   fetchData(true)
 }
-
+// 批量下发配置
+const batchConfigRef = ref()
+const bacthConfig = () => {
+  batchConfigRef.value.initDialog()
+}
 // 删除
 const deleteDeviceById = (row: IDeviceInfo) => {
   ElMessageBox.confirm(`是否删除设备 ${row.devcode}`, '提示', {
@@ -345,6 +350,8 @@
 <template>
   <app-container>
     <add-device-dialog ref="refAddDeviceDialog" :needGroup="true" @record-saved="searchList" />
+    <!-- 批量下发配置弹窗 -->
+     <batchconfig ref="batchConfigRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="searchList" @clear="reset">
       <search-item>
@@ -394,7 +401,7 @@
         <el-button type="primary" @click="downTemplate">
           模板下载
         </el-button>
-        <el-button type="primary" @click="">
+        <el-button type="primary" @click="bacthConfig">
           批量下发配置
         </el-button>
         <!-- 导入上传组件 -->

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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/basic/device/list.vue b/src/views/basic/device/list.vue
index cea4585..85d36a4 100644
--- a/src/views/basic/device/list.vue
+++ b/src/views/basic/device/list.vue
@@ -11,6 +11,7 @@
 import { delDevice, exportDevice, getDeviceListPage, batchImportDevice } from '@/api/basic/device'
 import { getDeviceLatestBizData } from '@/api/data/query'
 import AddDeviceDialog from './addDeviceDialog.vue'
+import batchconfig from './batchconfig.vue'
 import axios from 'axios'
 const route = useRoute()
 const router = useRouter()
@@ -216,7 +217,11 @@
   }
   fetchData(true)
 }
-
+// 批量下发配置
+const batchConfigRef = ref()
+const bacthConfig = () => {
+  batchConfigRef.value.initDialog()
+}
 // 删除
 const deleteDeviceById = (row: IDeviceInfo) => {
   ElMessageBox.confirm(`是否删除设备 ${row.devcode}`, '提示', {
@@ -345,6 +350,8 @@
 <template>
   <app-container>
     <add-device-dialog ref="refAddDeviceDialog" :needGroup="true" @record-saved="searchList" />
+    <!-- 批量下发配置弹窗 -->
+     <batchconfig ref="batchConfigRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="searchList" @clear="reset">
       <search-item>
@@ -394,7 +401,7 @@
         <el-button type="primary" @click="downTemplate">
           模板下载
         </el-button>
-        <el-button type="primary" @click="">
+        <el-button type="primary" @click="bacthConfig">
           批量下发配置
         </el-button>
         <!-- 导入上传组件 -->
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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/basic/device/list.vue b/src/views/basic/device/list.vue
index cea4585..85d36a4 100644
--- a/src/views/basic/device/list.vue
+++ b/src/views/basic/device/list.vue
@@ -11,6 +11,7 @@
 import { delDevice, exportDevice, getDeviceListPage, batchImportDevice } from '@/api/basic/device'
 import { getDeviceLatestBizData } from '@/api/data/query'
 import AddDeviceDialog from './addDeviceDialog.vue'
+import batchconfig from './batchconfig.vue'
 import axios from 'axios'
 const route = useRoute()
 const router = useRouter()
@@ -216,7 +217,11 @@
   }
   fetchData(true)
 }
-
+// 批量下发配置
+const batchConfigRef = ref()
+const bacthConfig = () => {
+  batchConfigRef.value.initDialog()
+}
 // 删除
 const deleteDeviceById = (row: IDeviceInfo) => {
   ElMessageBox.confirm(`是否删除设备 ${row.devcode}`, '提示', {
@@ -345,6 +350,8 @@
 <template>
   <app-container>
     <add-device-dialog ref="refAddDeviceDialog" :needGroup="true" @record-saved="searchList" />
+    <!-- 批量下发配置弹窗 -->
+     <batchconfig ref="batchConfigRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="searchList" @clear="reset">
       <search-item>
@@ -394,7 +401,7 @@
         <el-button type="primary" @click="downTemplate">
           模板下载
         </el-button>
-        <el-button type="primary" @click="">
+        <el-button type="primary" @click="bacthConfig">
           批量下发配置
         </el-button>
         <!-- 导入上传组件 -->
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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/basic/device/list.vue b/src/views/basic/device/list.vue
index cea4585..85d36a4 100644
--- a/src/views/basic/device/list.vue
+++ b/src/views/basic/device/list.vue
@@ -11,6 +11,7 @@
 import { delDevice, exportDevice, getDeviceListPage, batchImportDevice } from '@/api/basic/device'
 import { getDeviceLatestBizData } from '@/api/data/query'
 import AddDeviceDialog from './addDeviceDialog.vue'
+import batchconfig from './batchconfig.vue'
 import axios from 'axios'
 const route = useRoute()
 const router = useRouter()
@@ -216,7 +217,11 @@
   }
   fetchData(true)
 }
-
+// 批量下发配置
+const batchConfigRef = ref()
+const bacthConfig = () => {
+  batchConfigRef.value.initDialog()
+}
 // 删除
 const deleteDeviceById = (row: IDeviceInfo) => {
   ElMessageBox.confirm(`是否删除设备 ${row.devcode}`, '提示', {
@@ -345,6 +350,8 @@
 <template>
   <app-container>
     <add-device-dialog ref="refAddDeviceDialog" :needGroup="true" @record-saved="searchList" />
+    <!-- 批量下发配置弹窗 -->
+     <batchconfig ref="batchConfigRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="searchList" @clear="reset">
       <search-item>
@@ -394,7 +401,7 @@
         <el-button type="primary" @click="downTemplate">
           模板下载
         </el-button>
-        <el-button type="primary" @click="">
+        <el-button type="primary" @click="bacthConfig">
           批量下发配置
         </el-button>
         <!-- 导入上传组件 -->
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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/basic/device/list.vue b/src/views/basic/device/list.vue
index cea4585..85d36a4 100644
--- a/src/views/basic/device/list.vue
+++ b/src/views/basic/device/list.vue
@@ -11,6 +11,7 @@
 import { delDevice, exportDevice, getDeviceListPage, batchImportDevice } from '@/api/basic/device'
 import { getDeviceLatestBizData } from '@/api/data/query'
 import AddDeviceDialog from './addDeviceDialog.vue'
+import batchconfig from './batchconfig.vue'
 import axios from 'axios'
 const route = useRoute()
 const router = useRouter()
@@ -216,7 +217,11 @@
   }
   fetchData(true)
 }
-
+// 批量下发配置
+const batchConfigRef = ref()
+const bacthConfig = () => {
+  batchConfigRef.value.initDialog()
+}
 // 删除
 const deleteDeviceById = (row: IDeviceInfo) => {
   ElMessageBox.confirm(`是否删除设备 ${row.devcode}`, '提示', {
@@ -345,6 +350,8 @@
 <template>
   <app-container>
     <add-device-dialog ref="refAddDeviceDialog" :needGroup="true" @record-saved="searchList" />
+    <!-- 批量下发配置弹窗 -->
+     <batchconfig ref="batchConfigRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="searchList" @clear="reset">
       <search-item>
@@ -394,7 +401,7 @@
         <el-button type="primary" @click="downTemplate">
           模板下载
         </el-button>
-        <el-button type="primary" @click="">
+        <el-button type="primary" @click="bacthConfig">
           批量下发配置
         </el-button>
         <!-- 导入上传组件 -->
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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/basic/device/list.vue b/src/views/basic/device/list.vue
index cea4585..85d36a4 100644
--- a/src/views/basic/device/list.vue
+++ b/src/views/basic/device/list.vue
@@ -11,6 +11,7 @@
 import { delDevice, exportDevice, getDeviceListPage, batchImportDevice } from '@/api/basic/device'
 import { getDeviceLatestBizData } from '@/api/data/query'
 import AddDeviceDialog from './addDeviceDialog.vue'
+import batchconfig from './batchconfig.vue'
 import axios from 'axios'
 const route = useRoute()
 const router = useRouter()
@@ -216,7 +217,11 @@
   }
   fetchData(true)
 }
-
+// 批量下发配置
+const batchConfigRef = ref()
+const bacthConfig = () => {
+  batchConfigRef.value.initDialog()
+}
 // 删除
 const deleteDeviceById = (row: IDeviceInfo) => {
   ElMessageBox.confirm(`是否删除设备 ${row.devcode}`, '提示', {
@@ -345,6 +350,8 @@
 <template>
   <app-container>
     <add-device-dialog ref="refAddDeviceDialog" :needGroup="true" @record-saved="searchList" />
+    <!-- 批量下发配置弹窗 -->
+     <batchconfig ref="batchConfigRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="searchList" @clear="reset">
       <search-item>
@@ -394,7 +401,7 @@
         <el-button type="primary" @click="downTemplate">
           模板下载
         </el-button>
-        <el-button type="primary" @click="">
+        <el-button type="primary" @click="bacthConfig">
           批量下发配置
         </el-button>
         <!-- 导入上传组件 -->
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/basic/device/addDeviceDialog.vue b/src/views/basic/device/addDeviceDialog.vue
index cd3bbb7..efd2bf7 100644
--- a/src/views/basic/device/addDeviceDialog.vue
+++ b/src/views/basic/device/addDeviceDialog.vue
@@ -242,7 +242,7 @@
 </script>
 
 <template>
-  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false"
+  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" :modal="true"
     @closed="resetForm" width="450px">
     <detail-block title="">
       <el-form ref="infoFormRef" :model="deviceInfo" :rules="deviceInfoRules" label-position="right" label-width="110px"
diff --git a/src/views/basic/device/batchconfig.vue b/src/views/basic/device/batchconfig.vue
new file mode 100644
index 0000000..e1aa6e1
--- /dev/null
+++ b/src/views/basic/device/batchconfig.vue
@@ -0,0 +1,170 @@
+<!--
+  Description: 批量下发配置
+  Author: 李亚光
+  Date: 2025-06-12
+ -->
+<script name="BatchConfigDialog" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emit = defineEmits(['refresh'])
+const $props = defineProps({
+  deviceType: {
+    type: String,
+    default: ''
+  },
+})
+const formRef = ref()
+const showDialog = ref(false)
+const configInfo = ref({
+  deviceId: '',
+  deviceCode: '',
+  percent: '', // 报警阈值
+  installHeight: '', // 安装高度
+  attemptsMax: '3', // 做大尝试次数
+  retryTimes: '3', // 重传次数
+  ip: '',
+  port: '',
+  deviceType: '',
+  collectInterval: '', // 采集间隔
+  uploadPeriod: '', // 上传周期
+})
+const validateCollectInterval = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('采集间隔不能为空'))
+  }
+  else {
+    if (Number(value) >= 5 && Number(value) <= 1440) {
+      callback()
+    }
+    else {
+      callback(new Error('采集间隔需在5-1440之间'))
+    }
+  }
+}
+const configInfoRules = ref({
+  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
+  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
+  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
+}) // 表单验证规则
+const initDialog = () => {
+  showDialog.value = true
+
+}
+const close = () => {
+  showDialog.value = false
+}
+defineExpose({
+  initDialog,
+})
+
+const loadingBtn = ref(false)
+// 保存
+const saveForm = async () => {
+  if (!formRef.value) { return }
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      // btnLoading.value = true;
+      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
+      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
+      //   dialogVisible.value = false
+      //   $emits('closeRefresh')
+      //   btnLoading.value = false
+      // }).catch(() => {
+      //   btnLoading.value = false
+      // })
+    }
+  })
+
+}
+
+
+const deviceList = ref([])
+const deviceTypeList = ref([])
+const fetchDict = () => {
+  getDictByCode('deviceType').then((res: any) => {
+    if (res.code === 200) {
+      deviceTypeList.value = res.data
+      console.log(deviceTypeList.value, 'deviceTypeList.value')
+    }
+  })
+}
+fetchDict()
+const computeOptions = (val: any[]) => {
+  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
+}
+</script>
+
+<template>
+
+  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
+    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
+              style="width: 100%;" clearable filterable>
+            </el-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重传次数" prop="retryTimes">
+            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大尝试次数" prop="attemptsMax">
+            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
+          <el-form-item label="采集间隔(分)" prop="collectInterval">
+            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
+          <el-form-item label="上传周期(分)" prop="uploadPeriod">
+            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="报警阈值(%)" prop="percent">
+            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="IP" prop="ip">
+            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
+          保存
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/basic/device/list.vue b/src/views/basic/device/list.vue
index cea4585..85d36a4 100644
--- a/src/views/basic/device/list.vue
+++ b/src/views/basic/device/list.vue
@@ -11,6 +11,7 @@
 import { delDevice, exportDevice, getDeviceListPage, batchImportDevice } from '@/api/basic/device'
 import { getDeviceLatestBizData } from '@/api/data/query'
 import AddDeviceDialog from './addDeviceDialog.vue'
+import batchconfig from './batchconfig.vue'
 import axios from 'axios'
 const route = useRoute()
 const router = useRouter()
@@ -216,7 +217,11 @@
   }
   fetchData(true)
 }
-
+// 批量下发配置
+const batchConfigRef = ref()
+const bacthConfig = () => {
+  batchConfigRef.value.initDialog()
+}
 // 删除
 const deleteDeviceById = (row: IDeviceInfo) => {
   ElMessageBox.confirm(`是否删除设备 ${row.devcode}`, '提示', {
@@ -345,6 +350,8 @@
 <template>
   <app-container>
     <add-device-dialog ref="refAddDeviceDialog" :needGroup="true" @record-saved="searchList" />
+    <!-- 批量下发配置弹窗 -->
+     <batchconfig ref="batchConfigRef" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="searchList" @clear="reset">
       <search-item>
@@ -394,7 +401,7 @@
         <el-button type="primary" @click="downTemplate">
           模板下载
         </el-button>
-        <el-button type="primary" @click="">
+        <el-button type="primary" @click="bacthConfig">
           批量下发配置
         </el-button>
         <!-- 导入上传组件 -->
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>