diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/operation/history/detail.vue b/src/views/home/operation/history/detail.vue
new file mode 100644
index 0000000..337d4b7
--- /dev/null
+++ b/src/views/home/operation/history/detail.vue
@@ -0,0 +1,273 @@
+<!--
+  Description: 设备报警-详情
+  Author: 李亚光
+  Date: 2023-09-14
+ -->
+<script lang="ts" setup name="WellDetail">
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { alarmProcessNode } from '@/api/home/alarm/current'
+import { toHumpObject } from '@/utils/String'
+import { getAlarmDetail } from '@/api/home/operation/history'
+import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { getDateDiff } from '@/utils/dayjs'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '报警编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '报警类别',
+    value: 'alarmCategory',
+    align: 'center',
+  },
+  {
+    text: '报警类型',
+    value: 'alarmType',
+    align: 'center',
+  },
+  {
+    text: '报警原因',
+    value: 'alarmContent',
+    align: 'center',
+  },
+  {
+    text: '报警等级',
+    value: 'alarmLevelName',
+    align: 'center',
+  },
+  {
+    text: '报警时间',
+    value: 'alarmTime',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devCode',
+    align: 'center',
+  },
+
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '位置',
+    value: 'address',
+    align: 'center',
+  },
+  {
+    text: '详细地址',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
+  {
+    text: '解除时间',
+    value: 'cancelTime',
+    align: 'center',
+  },
+  {
+    text: '处置时长',
+    value: 'processDuration',
+    align: 'center',
+  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
+])
+// 报警动态
+const alarmDynamics = ref<any[]>([])
+// 页面loading
+const loading = ref(false)
+const loadingDynamics = ref(false)
+// 获取闸井详情数据
+const fetchDetail = async () => {
+  loading.value = true
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  getAlarmDetail($route.query.id as string).then((res) => {
+    detailInfo.value = res.data
+    detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
+    detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
+    detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
+    detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    console.log(detailInfo.value, 'detailInfo.value')
+    // detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+
+  // 获取报警动态
+  loadingDynamics.value = true
+  const info = JSON.parse($route.query.row as string)
+  alarmProcessNode($route.query.id as string).then((res) => {
+    alarmDynamics.value = res.data.map((item: any) => ({ ...toHumpObject(item) }))
+    alarmDynamics.value.unshift({
+      approvalTime: info.ts, // 报警生成时间
+      process_name: '',
+      approvalPerson: '报警生成',
+      dept_name: '',
+    })
+    loadingDynamics.value = false
+  }).catch(() => {
+    loadingDynamics.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  console.log(data, 'data')
+  // if (data.text === '位置') {
+  //   if (detailInfo.value.watchObject && detailInfo.value.devcode && detailInfo.value.ledgerId) {
+  //     const watchObject = {
+  //       1: 'WellMonitorDetail',
+  //       2: 'StationMonitorDetail',
+  //       3: 'PipelineMonitorDetail',
+  //     } as { [key: string]: string }
+  //     $router.push({
+  //       name: watchObject[detailInfo.value.watchObject],
+  //       query: {
+  //         id: detailInfo.value.ledgerId,
+  //         deviceCode: detailInfo.value.devcode,
+  //         typeName: detailInfo.value.devTypeName,
+  //         row: JSON.stringify({
+  //           id: detailInfo.value.ledgerId,
+  //           typeName: detailInfo.value.devTypeName,
+  //           deviceCode: detailInfo.value.devcode,
+  //         }),
+  //       },
+  //     })
+  //     // $router
+  //   }
+  //   return
+  // }
+  if (data.text !== '详细地址' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <detail-page title="报警详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span
+            :class="`${item.text === '详细地址' ? 'pointer' : item.text === '位置' ? 'pointer link' : ''}`"
+            @click="showMap(item)"
+          >
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-loading="loadingDynamics" align="left" label-align="center">
+          <template #label>
+            <span class="label">
+              报警动态
+            </span>
+          </template>
+          <div style="padding: 25px;">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+::v-deep(.el-descriptions__content) {
+  width: 35%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// .link {
+//   color: #3d7eff;
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+.bottom {
+  --el-descriptions-table-border-top: none;
+
+  ::v-deep(.el-descriptions) {
+    --el-descriptions-table-border-top: none;
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/operation/history/detail.vue b/src/views/home/operation/history/detail.vue
new file mode 100644
index 0000000..337d4b7
--- /dev/null
+++ b/src/views/home/operation/history/detail.vue
@@ -0,0 +1,273 @@
+<!--
+  Description: 设备报警-详情
+  Author: 李亚光
+  Date: 2023-09-14
+ -->
+<script lang="ts" setup name="WellDetail">
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { alarmProcessNode } from '@/api/home/alarm/current'
+import { toHumpObject } from '@/utils/String'
+import { getAlarmDetail } from '@/api/home/operation/history'
+import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { getDateDiff } from '@/utils/dayjs'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '报警编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '报警类别',
+    value: 'alarmCategory',
+    align: 'center',
+  },
+  {
+    text: '报警类型',
+    value: 'alarmType',
+    align: 'center',
+  },
+  {
+    text: '报警原因',
+    value: 'alarmContent',
+    align: 'center',
+  },
+  {
+    text: '报警等级',
+    value: 'alarmLevelName',
+    align: 'center',
+  },
+  {
+    text: '报警时间',
+    value: 'alarmTime',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devCode',
+    align: 'center',
+  },
+
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '位置',
+    value: 'address',
+    align: 'center',
+  },
+  {
+    text: '详细地址',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
+  {
+    text: '解除时间',
+    value: 'cancelTime',
+    align: 'center',
+  },
+  {
+    text: '处置时长',
+    value: 'processDuration',
+    align: 'center',
+  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
+])
+// 报警动态
+const alarmDynamics = ref<any[]>([])
+// 页面loading
+const loading = ref(false)
+const loadingDynamics = ref(false)
+// 获取闸井详情数据
+const fetchDetail = async () => {
+  loading.value = true
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  getAlarmDetail($route.query.id as string).then((res) => {
+    detailInfo.value = res.data
+    detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
+    detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
+    detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
+    detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    console.log(detailInfo.value, 'detailInfo.value')
+    // detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+
+  // 获取报警动态
+  loadingDynamics.value = true
+  const info = JSON.parse($route.query.row as string)
+  alarmProcessNode($route.query.id as string).then((res) => {
+    alarmDynamics.value = res.data.map((item: any) => ({ ...toHumpObject(item) }))
+    alarmDynamics.value.unshift({
+      approvalTime: info.ts, // 报警生成时间
+      process_name: '',
+      approvalPerson: '报警生成',
+      dept_name: '',
+    })
+    loadingDynamics.value = false
+  }).catch(() => {
+    loadingDynamics.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  console.log(data, 'data')
+  // if (data.text === '位置') {
+  //   if (detailInfo.value.watchObject && detailInfo.value.devcode && detailInfo.value.ledgerId) {
+  //     const watchObject = {
+  //       1: 'WellMonitorDetail',
+  //       2: 'StationMonitorDetail',
+  //       3: 'PipelineMonitorDetail',
+  //     } as { [key: string]: string }
+  //     $router.push({
+  //       name: watchObject[detailInfo.value.watchObject],
+  //       query: {
+  //         id: detailInfo.value.ledgerId,
+  //         deviceCode: detailInfo.value.devcode,
+  //         typeName: detailInfo.value.devTypeName,
+  //         row: JSON.stringify({
+  //           id: detailInfo.value.ledgerId,
+  //           typeName: detailInfo.value.devTypeName,
+  //           deviceCode: detailInfo.value.devcode,
+  //         }),
+  //       },
+  //     })
+  //     // $router
+  //   }
+  //   return
+  // }
+  if (data.text !== '详细地址' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <detail-page title="报警详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span
+            :class="`${item.text === '详细地址' ? 'pointer' : item.text === '位置' ? 'pointer link' : ''}`"
+            @click="showMap(item)"
+          >
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-loading="loadingDynamics" align="left" label-align="center">
+          <template #label>
+            <span class="label">
+              报警动态
+            </span>
+          </template>
+          <div style="padding: 25px;">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+::v-deep(.el-descriptions__content) {
+  width: 35%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// .link {
+//   color: #3d7eff;
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+.bottom {
+  --el-descriptions-table-border-top: none;
+
+  ::v-deep(.el-descriptions) {
+    --el-descriptions-table-border-top: none;
+  }
+}
+</style>
diff --git a/src/views/home/operation/history/index.vue b/src/views/home/operation/history/index.vue
index b01f27c..5c04ff7 100644
--- a/src/views/home/operation/history/index.vue
+++ b/src/views/home/operation/history/index.vue
@@ -5,13 +5,15 @@
  -->
 <script lang="ts" setup name="HistoryAlarm">
 import dayjs from 'dayjs'
+import { ElLoading } from 'element-plus'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { getDeviceHistoryListPage } from '@/api/home/operation/history'
+import { exportDeviceHistory, getDeviceHistoryListPage } from '@/api/home/operation/history'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -108,9 +110,23 @@
     query: {
       id: row.id,
       type: 'history',
+      row: JSON.stringify(row),
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceHistory(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -202,7 +218,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/operation/history/detail.vue b/src/views/home/operation/history/detail.vue
new file mode 100644
index 0000000..337d4b7
--- /dev/null
+++ b/src/views/home/operation/history/detail.vue
@@ -0,0 +1,273 @@
+<!--
+  Description: 设备报警-详情
+  Author: 李亚光
+  Date: 2023-09-14
+ -->
+<script lang="ts" setup name="WellDetail">
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { alarmProcessNode } from '@/api/home/alarm/current'
+import { toHumpObject } from '@/utils/String'
+import { getAlarmDetail } from '@/api/home/operation/history'
+import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { getDateDiff } from '@/utils/dayjs'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '报警编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '报警类别',
+    value: 'alarmCategory',
+    align: 'center',
+  },
+  {
+    text: '报警类型',
+    value: 'alarmType',
+    align: 'center',
+  },
+  {
+    text: '报警原因',
+    value: 'alarmContent',
+    align: 'center',
+  },
+  {
+    text: '报警等级',
+    value: 'alarmLevelName',
+    align: 'center',
+  },
+  {
+    text: '报警时间',
+    value: 'alarmTime',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devCode',
+    align: 'center',
+  },
+
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '位置',
+    value: 'address',
+    align: 'center',
+  },
+  {
+    text: '详细地址',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
+  {
+    text: '解除时间',
+    value: 'cancelTime',
+    align: 'center',
+  },
+  {
+    text: '处置时长',
+    value: 'processDuration',
+    align: 'center',
+  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
+])
+// 报警动态
+const alarmDynamics = ref<any[]>([])
+// 页面loading
+const loading = ref(false)
+const loadingDynamics = ref(false)
+// 获取闸井详情数据
+const fetchDetail = async () => {
+  loading.value = true
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  getAlarmDetail($route.query.id as string).then((res) => {
+    detailInfo.value = res.data
+    detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
+    detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
+    detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
+    detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    console.log(detailInfo.value, 'detailInfo.value')
+    // detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+
+  // 获取报警动态
+  loadingDynamics.value = true
+  const info = JSON.parse($route.query.row as string)
+  alarmProcessNode($route.query.id as string).then((res) => {
+    alarmDynamics.value = res.data.map((item: any) => ({ ...toHumpObject(item) }))
+    alarmDynamics.value.unshift({
+      approvalTime: info.ts, // 报警生成时间
+      process_name: '',
+      approvalPerson: '报警生成',
+      dept_name: '',
+    })
+    loadingDynamics.value = false
+  }).catch(() => {
+    loadingDynamics.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  console.log(data, 'data')
+  // if (data.text === '位置') {
+  //   if (detailInfo.value.watchObject && detailInfo.value.devcode && detailInfo.value.ledgerId) {
+  //     const watchObject = {
+  //       1: 'WellMonitorDetail',
+  //       2: 'StationMonitorDetail',
+  //       3: 'PipelineMonitorDetail',
+  //     } as { [key: string]: string }
+  //     $router.push({
+  //       name: watchObject[detailInfo.value.watchObject],
+  //       query: {
+  //         id: detailInfo.value.ledgerId,
+  //         deviceCode: detailInfo.value.devcode,
+  //         typeName: detailInfo.value.devTypeName,
+  //         row: JSON.stringify({
+  //           id: detailInfo.value.ledgerId,
+  //           typeName: detailInfo.value.devTypeName,
+  //           deviceCode: detailInfo.value.devcode,
+  //         }),
+  //       },
+  //     })
+  //     // $router
+  //   }
+  //   return
+  // }
+  if (data.text !== '详细地址' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <detail-page title="报警详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span
+            :class="`${item.text === '详细地址' ? 'pointer' : item.text === '位置' ? 'pointer link' : ''}`"
+            @click="showMap(item)"
+          >
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-loading="loadingDynamics" align="left" label-align="center">
+          <template #label>
+            <span class="label">
+              报警动态
+            </span>
+          </template>
+          <div style="padding: 25px;">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+::v-deep(.el-descriptions__content) {
+  width: 35%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// .link {
+//   color: #3d7eff;
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+.bottom {
+  --el-descriptions-table-border-top: none;
+
+  ::v-deep(.el-descriptions) {
+    --el-descriptions-table-border-top: none;
+  }
+}
+</style>
diff --git a/src/views/home/operation/history/index.vue b/src/views/home/operation/history/index.vue
index b01f27c..5c04ff7 100644
--- a/src/views/home/operation/history/index.vue
+++ b/src/views/home/operation/history/index.vue
@@ -5,13 +5,15 @@
  -->
 <script lang="ts" setup name="HistoryAlarm">
 import dayjs from 'dayjs'
+import { ElLoading } from 'element-plus'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { getDeviceHistoryListPage } from '@/api/home/operation/history'
+import { exportDeviceHistory, getDeviceHistoryListPage } from '@/api/home/operation/history'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -108,9 +110,23 @@
     query: {
       id: row.id,
       type: 'history',
+      row: JSON.stringify(row),
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceHistory(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -202,7 +218,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index a975599..90baef0 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -396,7 +396,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/operation/history/detail.vue b/src/views/home/operation/history/detail.vue
new file mode 100644
index 0000000..337d4b7
--- /dev/null
+++ b/src/views/home/operation/history/detail.vue
@@ -0,0 +1,273 @@
+<!--
+  Description: 设备报警-详情
+  Author: 李亚光
+  Date: 2023-09-14
+ -->
+<script lang="ts" setup name="WellDetail">
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { alarmProcessNode } from '@/api/home/alarm/current'
+import { toHumpObject } from '@/utils/String'
+import { getAlarmDetail } from '@/api/home/operation/history'
+import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { getDateDiff } from '@/utils/dayjs'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '报警编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '报警类别',
+    value: 'alarmCategory',
+    align: 'center',
+  },
+  {
+    text: '报警类型',
+    value: 'alarmType',
+    align: 'center',
+  },
+  {
+    text: '报警原因',
+    value: 'alarmContent',
+    align: 'center',
+  },
+  {
+    text: '报警等级',
+    value: 'alarmLevelName',
+    align: 'center',
+  },
+  {
+    text: '报警时间',
+    value: 'alarmTime',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devCode',
+    align: 'center',
+  },
+
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '位置',
+    value: 'address',
+    align: 'center',
+  },
+  {
+    text: '详细地址',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
+  {
+    text: '解除时间',
+    value: 'cancelTime',
+    align: 'center',
+  },
+  {
+    text: '处置时长',
+    value: 'processDuration',
+    align: 'center',
+  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
+])
+// 报警动态
+const alarmDynamics = ref<any[]>([])
+// 页面loading
+const loading = ref(false)
+const loadingDynamics = ref(false)
+// 获取闸井详情数据
+const fetchDetail = async () => {
+  loading.value = true
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  getAlarmDetail($route.query.id as string).then((res) => {
+    detailInfo.value = res.data
+    detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
+    detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
+    detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
+    detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    console.log(detailInfo.value, 'detailInfo.value')
+    // detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+
+  // 获取报警动态
+  loadingDynamics.value = true
+  const info = JSON.parse($route.query.row as string)
+  alarmProcessNode($route.query.id as string).then((res) => {
+    alarmDynamics.value = res.data.map((item: any) => ({ ...toHumpObject(item) }))
+    alarmDynamics.value.unshift({
+      approvalTime: info.ts, // 报警生成时间
+      process_name: '',
+      approvalPerson: '报警生成',
+      dept_name: '',
+    })
+    loadingDynamics.value = false
+  }).catch(() => {
+    loadingDynamics.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  console.log(data, 'data')
+  // if (data.text === '位置') {
+  //   if (detailInfo.value.watchObject && detailInfo.value.devcode && detailInfo.value.ledgerId) {
+  //     const watchObject = {
+  //       1: 'WellMonitorDetail',
+  //       2: 'StationMonitorDetail',
+  //       3: 'PipelineMonitorDetail',
+  //     } as { [key: string]: string }
+  //     $router.push({
+  //       name: watchObject[detailInfo.value.watchObject],
+  //       query: {
+  //         id: detailInfo.value.ledgerId,
+  //         deviceCode: detailInfo.value.devcode,
+  //         typeName: detailInfo.value.devTypeName,
+  //         row: JSON.stringify({
+  //           id: detailInfo.value.ledgerId,
+  //           typeName: detailInfo.value.devTypeName,
+  //           deviceCode: detailInfo.value.devcode,
+  //         }),
+  //       },
+  //     })
+  //     // $router
+  //   }
+  //   return
+  // }
+  if (data.text !== '详细地址' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <detail-page title="报警详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span
+            :class="`${item.text === '详细地址' ? 'pointer' : item.text === '位置' ? 'pointer link' : ''}`"
+            @click="showMap(item)"
+          >
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-loading="loadingDynamics" align="left" label-align="center">
+          <template #label>
+            <span class="label">
+              报警动态
+            </span>
+          </template>
+          <div style="padding: 25px;">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+::v-deep(.el-descriptions__content) {
+  width: 35%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// .link {
+//   color: #3d7eff;
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+.bottom {
+  --el-descriptions-table-border-top: none;
+
+  ::v-deep(.el-descriptions) {
+    --el-descriptions-table-border-top: none;
+  }
+}
+</style>
diff --git a/src/views/home/operation/history/index.vue b/src/views/home/operation/history/index.vue
index b01f27c..5c04ff7 100644
--- a/src/views/home/operation/history/index.vue
+++ b/src/views/home/operation/history/index.vue
@@ -5,13 +5,15 @@
  -->
 <script lang="ts" setup name="HistoryAlarm">
 import dayjs from 'dayjs'
+import { ElLoading } from 'element-plus'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { getDeviceHistoryListPage } from '@/api/home/operation/history'
+import { exportDeviceHistory, getDeviceHistoryListPage } from '@/api/home/operation/history'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -108,9 +110,23 @@
     query: {
       id: row.id,
       type: 'history',
+      row: JSON.stringify(row),
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceHistory(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -202,7 +218,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index a975599..90baef0 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -396,7 +396,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
index 927cb73..bb494ec 100644
--- a/src/views/home/rule/special/components/editDialog.vue
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -296,7 +296,7 @@
         <el-col :span="12">
           <el-form-item label="详细地址" prop="position">
             <el-input
-              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              v-model.trim="dataForm.position" type="text" placeholder="详细地址" style="width: 100%;" disabled
               clearable
             />
           </el-form-item>

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/operation/history/detail.vue b/src/views/home/operation/history/detail.vue
new file mode 100644
index 0000000..337d4b7
--- /dev/null
+++ b/src/views/home/operation/history/detail.vue
@@ -0,0 +1,273 @@
+<!--
+  Description: 设备报警-详情
+  Author: 李亚光
+  Date: 2023-09-14
+ -->
+<script lang="ts" setup name="WellDetail">
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { alarmProcessNode } from '@/api/home/alarm/current'
+import { toHumpObject } from '@/utils/String'
+import { getAlarmDetail } from '@/api/home/operation/history'
+import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { getDateDiff } from '@/utils/dayjs'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '报警编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '报警类别',
+    value: 'alarmCategory',
+    align: 'center',
+  },
+  {
+    text: '报警类型',
+    value: 'alarmType',
+    align: 'center',
+  },
+  {
+    text: '报警原因',
+    value: 'alarmContent',
+    align: 'center',
+  },
+  {
+    text: '报警等级',
+    value: 'alarmLevelName',
+    align: 'center',
+  },
+  {
+    text: '报警时间',
+    value: 'alarmTime',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devCode',
+    align: 'center',
+  },
+
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '位置',
+    value: 'address',
+    align: 'center',
+  },
+  {
+    text: '详细地址',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
+  {
+    text: '解除时间',
+    value: 'cancelTime',
+    align: 'center',
+  },
+  {
+    text: '处置时长',
+    value: 'processDuration',
+    align: 'center',
+  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
+])
+// 报警动态
+const alarmDynamics = ref<any[]>([])
+// 页面loading
+const loading = ref(false)
+const loadingDynamics = ref(false)
+// 获取闸井详情数据
+const fetchDetail = async () => {
+  loading.value = true
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  getAlarmDetail($route.query.id as string).then((res) => {
+    detailInfo.value = res.data
+    detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
+    detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
+    detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
+    detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    console.log(detailInfo.value, 'detailInfo.value')
+    // detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+
+  // 获取报警动态
+  loadingDynamics.value = true
+  const info = JSON.parse($route.query.row as string)
+  alarmProcessNode($route.query.id as string).then((res) => {
+    alarmDynamics.value = res.data.map((item: any) => ({ ...toHumpObject(item) }))
+    alarmDynamics.value.unshift({
+      approvalTime: info.ts, // 报警生成时间
+      process_name: '',
+      approvalPerson: '报警生成',
+      dept_name: '',
+    })
+    loadingDynamics.value = false
+  }).catch(() => {
+    loadingDynamics.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  console.log(data, 'data')
+  // if (data.text === '位置') {
+  //   if (detailInfo.value.watchObject && detailInfo.value.devcode && detailInfo.value.ledgerId) {
+  //     const watchObject = {
+  //       1: 'WellMonitorDetail',
+  //       2: 'StationMonitorDetail',
+  //       3: 'PipelineMonitorDetail',
+  //     } as { [key: string]: string }
+  //     $router.push({
+  //       name: watchObject[detailInfo.value.watchObject],
+  //       query: {
+  //         id: detailInfo.value.ledgerId,
+  //         deviceCode: detailInfo.value.devcode,
+  //         typeName: detailInfo.value.devTypeName,
+  //         row: JSON.stringify({
+  //           id: detailInfo.value.ledgerId,
+  //           typeName: detailInfo.value.devTypeName,
+  //           deviceCode: detailInfo.value.devcode,
+  //         }),
+  //       },
+  //     })
+  //     // $router
+  //   }
+  //   return
+  // }
+  if (data.text !== '详细地址' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <detail-page title="报警详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span
+            :class="`${item.text === '详细地址' ? 'pointer' : item.text === '位置' ? 'pointer link' : ''}`"
+            @click="showMap(item)"
+          >
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-loading="loadingDynamics" align="left" label-align="center">
+          <template #label>
+            <span class="label">
+              报警动态
+            </span>
+          </template>
+          <div style="padding: 25px;">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+::v-deep(.el-descriptions__content) {
+  width: 35%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// .link {
+//   color: #3d7eff;
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+.bottom {
+  --el-descriptions-table-border-top: none;
+
+  ::v-deep(.el-descriptions) {
+    --el-descriptions-table-border-top: none;
+  }
+}
+</style>
diff --git a/src/views/home/operation/history/index.vue b/src/views/home/operation/history/index.vue
index b01f27c..5c04ff7 100644
--- a/src/views/home/operation/history/index.vue
+++ b/src/views/home/operation/history/index.vue
@@ -5,13 +5,15 @@
  -->
 <script lang="ts" setup name="HistoryAlarm">
 import dayjs from 'dayjs'
+import { ElLoading } from 'element-plus'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { getDeviceHistoryListPage } from '@/api/home/operation/history'
+import { exportDeviceHistory, getDeviceHistoryListPage } from '@/api/home/operation/history'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -108,9 +110,23 @@
     query: {
       id: row.id,
       type: 'history',
+      row: JSON.stringify(row),
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceHistory(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -202,7 +218,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index a975599..90baef0 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -396,7 +396,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
index 927cb73..bb494ec 100644
--- a/src/views/home/rule/special/components/editDialog.vue
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -296,7 +296,7 @@
         <el-col :span="12">
           <el-form-item label="详细地址" prop="position">
             <el-input
-              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              v-model.trim="dataForm.position" type="text" placeholder="详细地址" style="width: 100%;" disabled
               clearable
             />
           </el-form-item>
diff --git a/src/views/home/station/operation/index.vue b/src/views/home/station/operation/index.vue
index 4cb86b5..02a5e44 100644
--- a/src/views/home/station/operation/index.vue
+++ b/src/views/home/station/operation/index.vue
@@ -100,12 +100,12 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  // exportOperationList(listQuery.value).then((res) => {
-  //   exportFile(res.data, '厂商运维记录.xlsx')
-  //   loading.close()
-  // }).catch(() => {
-  //   loading.close()
-  // })
+  exportOperationList(listQuery.value).then((res) => {
+    exportFile(res.data, '运维记录.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 // 获取字典
 const fetchDict = async () => {

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/operation/history/detail.vue b/src/views/home/operation/history/detail.vue
new file mode 100644
index 0000000..337d4b7
--- /dev/null
+++ b/src/views/home/operation/history/detail.vue
@@ -0,0 +1,273 @@
+<!--
+  Description: 设备报警-详情
+  Author: 李亚光
+  Date: 2023-09-14
+ -->
+<script lang="ts" setup name="WellDetail">
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { alarmProcessNode } from '@/api/home/alarm/current'
+import { toHumpObject } from '@/utils/String'
+import { getAlarmDetail } from '@/api/home/operation/history'
+import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { getDateDiff } from '@/utils/dayjs'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '报警编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '报警类别',
+    value: 'alarmCategory',
+    align: 'center',
+  },
+  {
+    text: '报警类型',
+    value: 'alarmType',
+    align: 'center',
+  },
+  {
+    text: '报警原因',
+    value: 'alarmContent',
+    align: 'center',
+  },
+  {
+    text: '报警等级',
+    value: 'alarmLevelName',
+    align: 'center',
+  },
+  {
+    text: '报警时间',
+    value: 'alarmTime',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devCode',
+    align: 'center',
+  },
+
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '位置',
+    value: 'address',
+    align: 'center',
+  },
+  {
+    text: '详细地址',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
+  {
+    text: '解除时间',
+    value: 'cancelTime',
+    align: 'center',
+  },
+  {
+    text: '处置时长',
+    value: 'processDuration',
+    align: 'center',
+  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
+])
+// 报警动态
+const alarmDynamics = ref<any[]>([])
+// 页面loading
+const loading = ref(false)
+const loadingDynamics = ref(false)
+// 获取闸井详情数据
+const fetchDetail = async () => {
+  loading.value = true
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  getAlarmDetail($route.query.id as string).then((res) => {
+    detailInfo.value = res.data
+    detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
+    detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
+    detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
+    detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    console.log(detailInfo.value, 'detailInfo.value')
+    // detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+
+  // 获取报警动态
+  loadingDynamics.value = true
+  const info = JSON.parse($route.query.row as string)
+  alarmProcessNode($route.query.id as string).then((res) => {
+    alarmDynamics.value = res.data.map((item: any) => ({ ...toHumpObject(item) }))
+    alarmDynamics.value.unshift({
+      approvalTime: info.ts, // 报警生成时间
+      process_name: '',
+      approvalPerson: '报警生成',
+      dept_name: '',
+    })
+    loadingDynamics.value = false
+  }).catch(() => {
+    loadingDynamics.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  console.log(data, 'data')
+  // if (data.text === '位置') {
+  //   if (detailInfo.value.watchObject && detailInfo.value.devcode && detailInfo.value.ledgerId) {
+  //     const watchObject = {
+  //       1: 'WellMonitorDetail',
+  //       2: 'StationMonitorDetail',
+  //       3: 'PipelineMonitorDetail',
+  //     } as { [key: string]: string }
+  //     $router.push({
+  //       name: watchObject[detailInfo.value.watchObject],
+  //       query: {
+  //         id: detailInfo.value.ledgerId,
+  //         deviceCode: detailInfo.value.devcode,
+  //         typeName: detailInfo.value.devTypeName,
+  //         row: JSON.stringify({
+  //           id: detailInfo.value.ledgerId,
+  //           typeName: detailInfo.value.devTypeName,
+  //           deviceCode: detailInfo.value.devcode,
+  //         }),
+  //       },
+  //     })
+  //     // $router
+  //   }
+  //   return
+  // }
+  if (data.text !== '详细地址' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <detail-page title="报警详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span
+            :class="`${item.text === '详细地址' ? 'pointer' : item.text === '位置' ? 'pointer link' : ''}`"
+            @click="showMap(item)"
+          >
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-loading="loadingDynamics" align="left" label-align="center">
+          <template #label>
+            <span class="label">
+              报警动态
+            </span>
+          </template>
+          <div style="padding: 25px;">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+::v-deep(.el-descriptions__content) {
+  width: 35%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// .link {
+//   color: #3d7eff;
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+.bottom {
+  --el-descriptions-table-border-top: none;
+
+  ::v-deep(.el-descriptions) {
+    --el-descriptions-table-border-top: none;
+  }
+}
+</style>
diff --git a/src/views/home/operation/history/index.vue b/src/views/home/operation/history/index.vue
index b01f27c..5c04ff7 100644
--- a/src/views/home/operation/history/index.vue
+++ b/src/views/home/operation/history/index.vue
@@ -5,13 +5,15 @@
  -->
 <script lang="ts" setup name="HistoryAlarm">
 import dayjs from 'dayjs'
+import { ElLoading } from 'element-plus'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { getDeviceHistoryListPage } from '@/api/home/operation/history'
+import { exportDeviceHistory, getDeviceHistoryListPage } from '@/api/home/operation/history'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -108,9 +110,23 @@
     query: {
       id: row.id,
       type: 'history',
+      row: JSON.stringify(row),
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceHistory(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -202,7 +218,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index a975599..90baef0 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -396,7 +396,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
index 927cb73..bb494ec 100644
--- a/src/views/home/rule/special/components/editDialog.vue
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -296,7 +296,7 @@
         <el-col :span="12">
           <el-form-item label="详细地址" prop="position">
             <el-input
-              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              v-model.trim="dataForm.position" type="text" placeholder="详细地址" style="width: 100%;" disabled
               clearable
             />
           </el-form-item>
diff --git a/src/views/home/station/operation/index.vue b/src/views/home/station/operation/index.vue
index 4cb86b5..02a5e44 100644
--- a/src/views/home/station/operation/index.vue
+++ b/src/views/home/station/operation/index.vue
@@ -100,12 +100,12 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  // exportOperationList(listQuery.value).then((res) => {
-  //   exportFile(res.data, '厂商运维记录.xlsx')
-  //   loading.close()
-  // }).catch(() => {
-  //   loading.close()
-  // })
+  exportOperationList(listQuery.value).then((res) => {
+    exportFile(res.data, '运维记录.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 // 获取字典
 const fetchDict = async () => {
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index bcc5039..32eb20c 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -26,7 +26,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
@@ -50,7 +50,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -106,7 +106,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -130,7 +130,7 @@
 const fetchDict = () => {
   // 场站类型
   getDictByCode('wellType').then((res) => {
-    wellTypeList.value = res.data
+    wellTypeList.value = res.data.filter((item: any) => item.name.includes('压'))
   })
   // 使用状态
   getDictByCode('onState').then((res) => {
@@ -208,10 +208,7 @@
       </el-icon>
     </div>
     <!-- 筛选条件 -->
-    <search-area
-      :need-clear="true" @search="fetchData"
-      @clear="reset"
-    >
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
         <el-input v-model.trim="listQuery.tagNumber" placeholder="场站位号" clearable />
       </search-item>
@@ -222,7 +219,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
 
       <search-item>
@@ -264,8 +261,8 @@
       </template>
       <!-- 查询结果Table显示 -->
       <normal-table
-        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable" :height="tableHeight"
-        @change="changePage" @rowDbClick="rowClick"
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        :height="tableHeight" @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -305,7 +302,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;

diff --git a/src/App.vue b/src/App.vue
index a9268fb..cde81b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -126,5 +126,6 @@
       }"
     />
     <system-info v-if="browserType !== 'mobile'" />
+    <audio id="eventAudio" src="" autoplay />
   </el-config-provider>
 </template>
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ac3387f..040c4bf 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -67,3 +67,21 @@
     },
   })
 }
+export function exportCurrentAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExport',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
+// 获取责任人
+export function getPrincipals(id: any) {
+  return request({
+    url: '/system/alarmRecords/getPrincipals',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 44cf851..5634f7c 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -21,3 +21,12 @@
     },
   })
 }
+
+export function exportHistoryAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index 25e1e4a..0748eef 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -33,3 +33,11 @@
     data,
   })
 }
+// 报警消息通知
+export function getAlarmList(data: any) {
+  return request({
+    url: '/homePage/apis/pop',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/device/device.ts b/src/api/home/device/device.ts
index 64d3b96..e4052fe 100644
--- a/src/api/home/device/device.ts
+++ b/src/api/home/device/device.ts
@@ -103,3 +103,18 @@
     data,
   })
 }
+// 批量导入
+export function importDevice(data: any) {
+  return request({
+    url: '/system/busDevice/batchImport',
+    method: 'post',
+    data,
+  })
+}
+// 模板下载
+export function templateDevice() {
+  return request({
+    url: '/template/download?filename=device_template.xlsx',
+    method: 'get',
+  })
+}
diff --git a/src/api/home/ledger/pipeline.ts b/src/api/home/ledger/pipeline.ts
index 1823500..8f48de2 100644
--- a/src/api/home/ledger/pipeline.ts
+++ b/src/api/home/ledger/pipeline.ts
@@ -40,3 +40,12 @@
     data,
   })
 }
+export function exportPipelineList(data: any) {
+  return request({
+    url: '/system/busPipeline/batchExport',
+    method: 'get',
+    data,
+    responseType: 'blob',
+  })
+}
+
diff --git a/src/api/home/operation/alarm.ts b/src/api/home/operation/alarm.ts
index 2723ec8..c82febf 100644
--- a/src/api/home/operation/alarm.ts
+++ b/src/api/home/operation/alarm.ts
@@ -39,3 +39,19 @@
     },
   })
 }
+// 处置报警
+export function handlerDeviceAlarm(data: any) {
+  return request({
+    url: '/maintenance/alarmRecords/handle',
+    method: 'post',
+    data,
+  })
+}
+export function exportDeviceAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
diff --git a/src/api/home/operation/history.ts b/src/api/home/operation/history.ts
index a26ad3f..3db1a66 100644
--- a/src/api/home/operation/history.ts
+++ b/src/api/home/operation/history.ts
@@ -11,4 +11,21 @@
     data,
   })
 }
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/maintenance/alarmRecords/deviceAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+export function exportDeviceHistory(data: any) {
+  return request({
+    url: '/system/alarmRecords/batchExportHistory',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  })
+}
 
diff --git a/src/api/index.ts b/src/api/index.ts
index 2d9ecf2..c0774af 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -86,14 +86,17 @@
   (error) => {
     // 处理文件下载的错误提示
     if (error.response && error.response.data instanceof Blob) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let errMsg = '发生错误！'
-        if (e && e.target!.result) {
-          errMsg = JSON.parse(e.target!.result as string)
-        }
-        ElMessage.error(errMsg)
-      }
+      error.response.data.text().then((res: any) => {
+        ElMessage.error(JSON.parse(res || '').message || error.message)
+      })
+      // const reader = new FileReader()
+      // reader.onload = (e) => {
+      //   let errMsg = '发生错误！'
+      //   if (e && e.target!.result) {
+      //     errMsg = JSON.parse(e.target!.result as string)
+      //   }
+      //   ElMessage.error(errMsg)
+      // }
     }
     else if (error.response && error.response.data) {
       // 如果是发生错误必须回到登录页的api
diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3
new file mode 100644
index 0000000..f376e89
--- /dev/null
+++ b/src/assets/audio/alarm.mp3
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
new file mode 100644
index 0000000..ee677f8
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\200\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
new file mode 100644
index 0000000..f6ab028
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\270\211\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png" "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
new file mode 100644
index 0000000..698eb5e
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\344\272\214\347\272\247.png"
Binary files differ
diff --git "a/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png" "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
new file mode 100644
index 0000000..092b230
--- /dev/null
+++ "b/src/assets/global_images/warningDialog_\345\205\266\345\256\203.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png" "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
new file mode 100644
index 0000000..ec461ba
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\210\227\350\241\250\351\246\226\350\241\214.png"
Binary files differ
diff --git "a/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png" "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
new file mode 100644
index 0000000..a6b416f
--- /dev/null
+++ "b/src/assets/images/dashboard/\345\260\217\346\240\207\351\242\230.png"
Binary files differ
diff --git a/src/assets/images/map/gx.png b/src/assets/images/map/gx.png
new file mode 100644
index 0000000..cc55eb8
--- /dev/null
+++ b/src/assets/images/map/gx.png
Binary files differ
diff --git a/src/assets/images/map/tyx.png b/src/assets/images/map/tyx.png
new file mode 100644
index 0000000..4f8a0e6
--- /dev/null
+++ b/src/assets/images/map/tyx.png
Binary files differ
diff --git a/src/assets/images/map/tyz.png b/src/assets/images/map/tyz.png
new file mode 100644
index 0000000..7981c1f
--- /dev/null
+++ b/src/assets/images/map/tyz.png
Binary files differ
diff --git a/src/assets/images/map/zj.png b/src/assets/images/map/zj.png
new file mode 100644
index 0000000..baa1979
--- /dev/null
+++ b/src/assets/images/map/zj.png
Binary files differ
diff --git a/src/layouts/components/Tools/alarmDialog.vue b/src/layouts/components/Tools/alarmDialog.vue
new file mode 100644
index 0000000..1828375
--- /dev/null
+++ b/src/layouts/components/Tools/alarmDialog.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup name="EditArea">
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+}) // 表单
+
+// 重置表单
+
+const className = ref('')
+const info = ref<any>({})
+const resetForm = () => {
+  info.value = {
+  }
+}
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+  const grade = `grade-${row.alarmLevel === '一级' ? '1' : row.alarmLevel === '二级' ? '2' : row.alarmLevel === '三级' ? '3' : 'other'}`
+  className.value = grade
+  resetForm()
+  info.value = row
+  // const row = {
+  //   alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+  //   isSound: '1', // 报警音效，1:开，0:关
+  //   isSend: '1', // 报警推送，1:开，0:关
+  //   isText: '1', // 报警短息，1:开，0:关
+  //   alarmType: '浓度超限',
+  //   tagNumber: 'NX5702',
+  //   alarmTime: '2024-09-09',
+  //   value: '20',
+  //   typeName: '燃气智能终端',
+  //   alarmLevel: '一级',
+  // }
+}
+// 关闭
+const close = () => {
+  dialogFormVisible.value = false
+}
+// 关闭声音
+const { proxy } = getCurrentInstance() as any
+const closeSound = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+// 查看
+const $router = useRouter()
+const detail = () => {
+  dialogFormVisible.value = false
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify({ ...info.value, id: info.value.alarmIds }),
+    },
+  })
+}
+defineExpose({
+  initDialog,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogFormVisible" title="" append-to-body class="warning-dialog" :show-close="false"
+    width="400px"
+    :class="`${className.includes('2') ? 'grade-2' : className.includes('3') ? 'grade-3' : className.includes('1') ? 'grade-1' : 'grade-other'}`"
+    :close-on-click-modal="false"
+  >
+    <div class="container-dialog">
+      <div class="content">
+        <div class="name">
+          报警类型:
+        </div>
+        <div class="value">
+          {{ info.alarmType }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警等级:
+        </div>
+        <div class="value">
+          {{ info.alarmLevel }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          设备类型:
+        </div>
+        <div class="value">
+          {{ info.typeName }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          安装位号:
+        </div>
+        <div class="value">
+          {{ info.tagNumber }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警值:
+        </div>
+        <div class="value">
+          {{ info.value }}
+          {{ info.typeName.includes('燃气') ? '%vol' : '' }}
+        </div>
+      </div>
+      <div class="content">
+        <div class="name">
+          报警时间:
+        </div>
+        <div class="value">
+          {{ info.alarmTime }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn" @click="detail">
+          查看
+        </div>
+        <div v-if="info.isSound === '1'" class="btn" @click="closeSound">
+          关闭声音
+        </div>
+        <div class="btn" @click="close">
+          关闭
+        </div>
+        <!-- <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button> -->
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->
+
+<style>
+.warning-dialog {
+  background-color: #0000;
+  background-image: url("@/assets/global_images/warningDialog_一级.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+
+.grade-2 {
+  background-image: url("@/assets/global_images/warningDialog_二级.png");
+}
+
+.grade-3 {
+  background-image: url("@/assets/global_images/warningDialog_三级.png");
+}
+
+.grade-other {
+  background-image: url("@/assets/global_images/warningDialog_其它.png");
+}
+</style>
+
+<style lang="scss" scoped>
+.container-dialog {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  // margin: 0 auto;
+  // padding-left: 30px;
+  color: #f1eded;
+  font-size: 18px;
+  font-weight: 700;
+
+  .content {
+    display: flex;
+    margin: 10px 0;
+
+    .value {
+      padding-left: 10px;
+    }
+  }
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .btn {
+    width: 24%;
+    border: 1px solid #f1eded;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    color: #faf5f5;
+
+    &:hover {
+      cursor: pointer;
+      color: rgb(115 184 240);
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tools/alarmList.vue b/src/layouts/components/Tools/alarmList.vue
index c9ad1a2..c3a9d2a 100644
--- a/src/layouts/components/Tools/alarmList.vue
+++ b/src/layouts/components/Tools/alarmList.vue
@@ -1,45 +1,156 @@
 <script lang="ts" setup name="AlarmList">
+import alarmDialog from './alarmDialog.vue'
+import useSocket from '@/store/modules/websocket'
+import { getAlarmList } from '@/api/home/dashboard/index'
+import { getAlarmLevelListPage } from '@/api/home/rule/alarm'
+const { proxy } = getCurrentInstance() as any
 const messageList = ref<any[]>([])
+const alarmLevelList = ref<any[]>([])
+const socket = useSocket()
+const loading = ref(true)
 
-setTimeout(() => {
-  messageList.value = [
-    {
-      id: '1',
-      title: '燃气浓度超限',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-06-29 12:05:00',
-      grade: '1',
-    },
-    {
-      id: '2',
-      title: '桩倾斜报警',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '2',
-      time: '2024-03-21 13:03:01',
-      grade: '2',
-    },
-    {
-      id: '3',
-      title: '设备故障',
-      device: '燃气智能监测终端',
-      code: 'N57G215',
-      alarmValue: '浓度12%vol',
-      readStatus: '1',
-      time: '2024-02-29 02:05:40',
-      grade: '3',
-    },
-  ]
-})
+// setTimeout(() => {
+//   messageList.value = [
+//     {
+//       id: '1',
+//       title: '燃气浓度超限',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-06-29 12:05:00',
+//       grade: '1',
+//     },
+//     {
+//       id: '2',
+//       title: '桩倾斜报警',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '2',
+//       time: '2024-03-21 13:03:01',
+//       grade: '2',
+//     },
+//     {
+//       id: '3',
+//       title: '设备故障',
+//       device: '燃气智能监测终端',
+//       code: 'N57G215',
+//       alarmValue: '浓度12%vol',
+//       readStatus: '1',
+//       time: '2024-02-29 02:05:40',
+//       grade: '3',
+//     },
+//   ]
+// })
 defineExpose({ messageList })
+
+// 查看更多
+const $router = useRouter()
+const moreList = () => {
+  $router.push({
+    name: 'AlarmCurrent',
+  })
+}
+// 查看当前行
+const detailRow = (row: any) => {
+  $router.push({
+    name: 'AlarmCurrent',
+    query: {
+      row: JSON.stringify(row),
+    },
+  })
+}
+const play = () => {
+  if (!localStorage.getItem('eventAudio')) {
+    if (messageList.value.length > 0 && messageList.value.some((item: any) => item.isSound === '1')) {
+      proxy.playAudio()
+    }
+  }
+  else {
+    proxy.pauseAudio()
+    localStorage.setItem('eventAudio', 'pause')
+  }
+}
+const pause = () => {
+  proxy.pauseAudio()
+  localStorage.setItem('eventAudio', 'pause')
+}
+const dialogRef = ref()
+// const dialog = () => {
+//   const row = {
+//     alarmNoteMethod: '1', // 消息提醒 1:弹窗，2:消息提醒
+//     isSound: '1', // 报警音效，1:开，0:关
+//     isSend: '1', // 报警推送，1:开，0:关
+//     isText: '1', // 报警短息，1:开，0:关
+//     alarmType: '浓度超限',
+//     tagNumber: 'NX5702',
+//     alarmTime: '2024-09-09',
+//     value: '20',
+//     typeName: '燃气智能终端',
+//     alarmLevel: '一级',
+//   }
+//   dialogRef.value.initDialog(row)
+// }
+const fetchData = (isLoading = false) => {
+  loading.value = true
+  if (isLoading) {
+    loading.value = false
+  }
+  getAlarmList({ offset: 1, limit: 3 }).then((res) => {
+    messageList.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmLevelName: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.alarmLevel || '',
+      isSound: alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevel)[0]?.isSound || '',
+    }))
+    loading.value = false
+    play()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+watch(() => socket.data, (newVal: any) => {
+  if (newVal && newVal.alarmNoteMethod) {
+    if (newVal.alarmNoteMethod === '1') {
+      dialogRef.value.initDialog(newVal)
+    }
+    if (newVal.isSound === '1') {
+      play()
+    }
+    fetchData(false)
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+onMounted(() => {
+  getAlarmLevelListPage({ offset: 1, limit: 999 }).then((res) => {
+    alarmLevelList.value = res.data.rows
+    fetchData()
+    socket.initWebSocket()
+  })
+})
+onUnmounted(() => {
+  socket.destroyWebSocket()
+})
+// 页面关闭删除token 为的是先登录(页面产生交互)
+// window.onbeforeunload = function (event: any) {
+//   // eslint-disable-next-line no-mixed-operators
+//   if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
+//     // alert("你关闭了浏览器");
+//     console.log('关闭')
+//   }
+//   else {
+//     // alert("你正在刷新页面");
+//     console.log('刷新')
+//     window.localStorage.removeItem('token')
+//   }
+// }
 </script>
 
 <template>
   <div class="message-container">
+    <alarm-dialog ref="dialogRef" />
     <div v-show="messageList.length" class="message-title">
       报警({{ messageList.length }})
     </div>
@@ -49,23 +160,25 @@
       </div>
       <template v-else>
         <div v-for="message of messageList" :key="message.id" class="message-item">
-          <div class="message-content">
+          <div class="message-content" @click="detailRow(message)">
             <div class="title">
               <div class="container">
-                <div :class="`mar circle circle-${message.grade}`">
+                <div
+                  :class="`mar circle circle-${message.alarmLevelName === '一级' ? '1' : message.alarmLevelName === '二级' ? '2' : message.alarmLevelName === '三级' ? '3' : 'other'}`"
+                >
                   1
                 </div>
                 <div class="mar">
-                  {{ message.title }}
+                  {{ message.alarmMsg }}
                 </div>
                 <div class="mar">
-                  {{ message.time }}
+                  {{ message.alarmTime }}
                 </div>
               </div>
               <div>
-                <el-tag :type="message.readStatus === '1' ? 'success' : 'warning'" size="small">
-                  {{ message.readStatus
-                    === '1' ? '已读' : '未读' }}
+                <el-tag :type="message.processStatus !== '未读' ? 'success' : 'warning'" size="small">
+                  {{ message.processStatus
+                    === '未读' ? '未读' : '已读' }}
                 </el-tag>
                 <el-tag type="info" size="small" style="margin-left: 5px;">
                   查看
@@ -74,7 +187,20 @@
             </div>
             <div class="time">
               <div>
-                {{ message.code }} | {{ message.device }} | {{ message.alarmValue }}
+                {{ message.ledgerNumber }}
+                <span v-if="message.ledgerNumber">
+                  |
+                </span>
+
+                {{ message.devTypeName }}
+                <span v-if="message.devTypeName">
+                  |
+                </span>
+                {{ message.alarmValue }}
+                <!-- 单位 -->
+                <span v-if="message.alarmValue">
+                  {{ (message?.alarmContent || '').includes('燃气') ? '%vol' : '' }}
+                </span>
               </div>
             </div>
           </div>
@@ -82,10 +208,13 @@
       </template>
     </el-scrollbar>
     <div v-if="messageList.length" class="message-footer">
-      <div class="close">
+      <div class="close" @click="pause">
         关闭声音
       </div>
-      <div class="more">
+      <!-- <div class="close" @click="dialog">
+        弹窗
+      </div> -->
+      <div class="more" @click="moreList">
         查看更多
       </div>
     </div>
@@ -162,6 +291,10 @@
       background-color: #ffd700;
     }
 
+    .circle-other {
+      background-color: #8dc6ea;
+    }
+
     .icon {
       width: 26px;
       height: 26px;
diff --git a/src/main.ts b/src/main.ts
index 80ad79e..e4327d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
 import useSettingsStore from './store/modules/settings'
 import request from '@/api/index'
 import '@/utils/getLocation'
+// 引入音频文件
+import alarmAudio from '@/assets/audio/alarm.mp3'
 // 自定义指令
 import directive from '@/utils/directive'
 // 加载 svg 图标
@@ -41,6 +43,37 @@
   app.config.globalProperties.hasPerm = hasPermission
   app.config.globalProperties.buttonPerm = buttonPerm
   app.config.globalProperties.dayjs = dayjs
+  // 方法1：注册播放音频事件到Vue实例上
+  app.config.globalProperties.playAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    audio.setAttribute('src', alarmAudio)
+    audio.loop = true
+    if (audio.paused === true) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.load()
+    }
+    else { // 否则
+      // audio.pause()
+      setTimeout(() => {
+        // audio.play()
+        const playPromise = audio.load()
+        if (playPromise) {
+          playPromise.then(() => {
+            // 音频加载成功
+            console.log('音频加载成功')
+          }).catch((e) => {
+            // 音频加载失败
+            console.error(e.message)
+          })
+        }
+      }, 10)
+    }
+  }
+  app.config.globalProperties.pauseAudio = () => {
+    const audio = document.getElementById('eventAudio') as HTMLAudioElement
+    if (!audio.paused) { // 判断音频是否暂停,暂停重新加载音频元素
+      audio.pause()
+    }
+  }
   // app.use(print)
   app.use(ElementPlus)
   app.use(pinia)
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 6f58857..aacd6fa 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -382,7 +382,7 @@
       },
       {
         path: 'history/detail',
-        component: () => import('@/views/home/operation/alarm/components/detail.vue'),
+        component: () => import('@/views/home/operation/history/detail.vue'),
         name: 'operationHistoryDetail',
         meta: {
           title: '历史设备报警',
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 9ac4510..09f025f 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -5,7 +5,8 @@
   'websocket',
   {
     state: () => ({
-      wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      // wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
+      wsUrl: `ws://${window.localStorage.getItem('url-bj-well')?.split('http://')[1]}/websocket/${useUserStore().id}`,
       websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
@@ -13,6 +14,7 @@
       wsReconnectCount: 0, // 重连次数
       wsReconnectTimer: null, // 重连定时器
       wsIsReconnect: true, // 是否重连
+      data: {}, // 接收到的数据
     }),
     getters: {},
     actions: {
@@ -62,10 +64,12 @@
             console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
+            this.data = data
             console.log(data, 'websocket 返回消息')
           }
           // 监听socket错误
-          socket.onerror = function () {
+          socket.onerror = function (err) {
+            console.log(err)
             ElMessage({
               message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
               type: 'error',
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 787bb07..dd3b31a 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -45,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
+    value: 'alarmTime',
     align: 'center',
   },
   {
@@ -60,7 +60,7 @@
   },
   {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -75,7 +75,7 @@
   },
   {
     text: '负责人',
-    value: '',
+    value: 'principal',
     align: 'center',
   },
   {
@@ -90,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
+    value: 'cancelDuration',
     align: 'center',
   },
   {
@@ -109,7 +109,7 @@
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
   const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
-  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
+  ($route.query.type === 'history' ? getAlarmDetail : getAlarmDetail)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,7 +183,7 @@
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
-    <detail-page title="报警详情">
+    <detail-page :title="`${$route.path.includes('current') ? '当前' : '历史'}报警详情`">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
index 30aa05e..c089449 100644
--- a/src/views/home/alarm/current/components/detailInfoDialog.vue
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -8,13 +8,15 @@
 import remindDialog from './remindDialog.vue'
 import monitorDataDialog from './monitorDataDialog.vue'
 import processDialog from './processDialog.vue'
-import { detailAlarm } from '@/api/home/alarm/current'
+import handlerDialog from './handlerDialog.vue'
+import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
+const emits = defineEmits(['refresh'])
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-const info = ref({
+const info = ref<any>({
   alarmContent: '',
   alarmMsg: '',
   alarmCategoryName: '',
@@ -47,6 +49,10 @@
   (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
     info.value = toHumpObject(res.data) as any
     console.log(info.value, 'info.value')
+    // 获取责任人
+    // getPrincipals(info.value.deptid).then((res) => {
+    //   console.log(res.data, '责任人')
+    // })
   })
 }
 
@@ -99,19 +105,29 @@
 const handler = () => {
   handlerRef.value.initDialog(info.value)
 }
+
+const refresh = () => {
+  emits('refresh');
+  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
+    info.value = toHumpObject(res.data) as any
+    console.log(info.value, 'info.value')
+  })
+}
 defineExpose({ initDialog, close })
 </script>
 
 <template>
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <!-- 挂起 -->
-    <pending-dialog ref="pendingRef" />
+    <pending-dialog ref="pendingRef" @refresh="refresh" />
     <!-- 提醒责任人 -->
-    <remind-dialog ref="remindRef" />
+    <remind-dialog ref="remindRef" @refresh="refresh" />
     <!-- 查看数据 -->
-    <monitor-data-dialog ref="dataRef" />
+    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
     <!-- 流程图 -->
-    <process-dialog ref="processRef" />
+    <process-dialog ref="processRef" @refresh="refresh" />
+    <!-- 是否误报 -->
+    <handler-dialog ref="handlerRef" @refresh="refresh" />
     <!-- 头部 -->
     <div class="header">
       <span>{{ info.alarmContent }}</span>
@@ -158,6 +174,18 @@
           {{ info.ts }}
         </span>
       </div>
+      <div v-if="type === 'device'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
+      <div v-if="type === 'data'" class="item">
+        位置:
+        <span style="padding-left: 6px;">
+          {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }}
+        </span>
+      </div>
       <div class="item">
         详细地址:
         <span style="padding-left: 6px;">
@@ -183,12 +211,12 @@
           {{ info.manageType }}
         </span>
       </div>
-      <!-- <div class="item">
+      <div class="item">
         负责人:
         <span style="padding-left: 6px;">
-          {{ info.propertyOwner }}
+          {{ info.principal }}
         </span>
-      </div> -->
+      </div>
       <div class="item">
         状态:
         <span style="padding-left: 6px;">
@@ -207,7 +235,13 @@
       <div class="item">
         处置情况:
         <span style="padding-left: 6px;">
-          {{ info.processContent }}
+          {{ type === 'data' ? info.processContent : info.processStatusName }}
+        </span>
+      </div>
+      <div v-if="type === 'device'" class="item">
+        处置时间:
+        <span style="padding-left: 6px;">
+          {{ info.processTime }}
         </span>
       </div>
     </div>
@@ -215,10 +249,16 @@
       <el-button v-if="Number(info.processStatus) < 4 && type === 'data'" size="small" @click="remind">
         提醒责任人
       </el-button>
-      <el-button v-if="Number(info.processStatus) < 4 && type === 'device'" size="small" @click="handler">
+      <el-button
+        v-if="type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起')"
+        size="small" @click="handler"
+      >
         报警处置
       </el-button>
-      <el-button v-if="Number(info.processStatus) <= 3" type="primary" size="small" @click="pending">
+      <el-button
+        v-if="Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起'"
+        type="primary" size="small" @click="pending"
+      >
         挂起
       </el-button>
     </div>
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
new file mode 100644
index 0000000..e0e9746
--- /dev/null
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -0,0 +1,119 @@
+<!--
+  Description: 报警管理-挂起
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="PendingDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { pendingAlarm } from '@/api/home/alarm/current'
+import { handlerDeviceAlarm } from '@/api/home/operation/alarm'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  realAlarm: '0',
+  handleContent: '',
+  alarmId: '',
+  handlePerson: '',
+  handlePersonId: '',
+}) // 表单
+const rules: FormRules = {
+  // suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    realAlarm: '0',
+    handleContent: '',
+    alarmId: '',
+    handlePerson: '',
+    handlePersonId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+
+  dataForm.value.handlePerson = user.name
+  dataForm.value.handlePersonId = user.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      handlerDeviceAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        emits('refresh')
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="挂起" append-to-body width="30%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="是否误报" prop="">
+            <el-radio-group v-model="dataForm.realAlarm">
+              <el-radio value="1" size="large">
+                否
+              </el-radio>
+              <el-radio value="0" size="large">
+                是
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="处置情况" prop="">
+            <el-input
+              v-model.trim="dataForm.handleContent" type="text" placeholder="处置情况" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index a8b44a6..dee88d7 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -16,6 +16,7 @@
     default: () => ({}),
   },
 })
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +88,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +101,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index dcac82c..43b6957 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -52,6 +52,7 @@
         dialogFormVisible.value = false
         data.value.processStatus = 3
         data.value.processStatusName = '挂起'
+        emits('refresh')
       }).catch(() => {
         // ElMessage.success('操作成功')
       })
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 76fb612..d5daeb7 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -34,7 +34,10 @@
   dataForm.value = {
     alarmId: '',
     remindContent: '',
+    remindPersonId: '',
     remindPerson: '',
+    remindPersonOtherId: '',
+    remindPersonOther: '',
     telephone: '',
   }
 }
@@ -72,6 +75,7 @@
       remindAlarm(data).then((res) => {
         ElMessage.success('操作成功')
         dialogFormVisible.value = false
+        emits('refresh')
         data.value.processStatus = 4
         data.value.processStatusName = '待现场确认'
       }).catch(() => {
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index b6fcb2d..d019bbf 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,16 +4,17 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { batchDelete, detailAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
+import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -22,6 +23,8 @@
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
+const $route = useRoute()
+const $router = useRouter()
 // 初始展示列
 const columns = ref<any>([
   { text: '报警类型', value: 'alarmType', align: 'center', width: '160' },
@@ -69,8 +72,16 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getCurrentAlarmListPage(listQuery.value).then((res) => {
     total.value = res.data.total
     list1.value = res.data.rows.map((item: any) => ({
@@ -84,6 +95,11 @@
 }
 // 重置查询条件f
 const reset = () => {
+  if ($route.query.row) {
+    $router.push({
+      path: '/alarm/current',
+    })
+  }
   listQuery.value = {
     limit: 20,
     offset: 1,
@@ -112,6 +128,31 @@
 }
 
 onMounted(() => {
+  if ($route.query.row) {
+    loadingTable.value = true
+    const row = JSON.parse($route.query.row as string)
+    getCurrentAlarmListPage({ offset: 1, limit: 99999 }).then((res) => {
+      const data = res.data.rows.filter((item: any) => item.id === row.id)
+      if (data.length) {
+        list1.value = data.map((item: any) => ({
+          ...item,
+          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+        }))
+        setTimeout(() => {
+          detail(data[0])
+        })
+      }
+      else {
+        list1.value = []
+        ElMessage.warning('未找到该报警数据')
+      }
+      total.value = data.length
+      loadingTable.value = false
+    }).catch(() => {
+      loadingTable.value = false
+    })
+    return
+  }
   fetchData()
 })
 // 表格标识  地图或普通
@@ -139,7 +180,7 @@
 // 查看报警
 const mapRef = ref()
 const mapData = ref({})
-const detail = async (row: any) => {
+async function detail(row: any) {
   const res = await detailAlarm(row.id)
   const data = toHumpObject(res.data)
   mapData.value = row
@@ -218,6 +259,19 @@
   console.log(val, '多选数据')
   multipleTable.value = val
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportCurrentAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 批量删除
 const batchDeleteRow = () => {
   if (!multipleTable.value.length) {
@@ -308,7 +362,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -356,7 +410,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index fee7e7f..eeb49fc 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -4,13 +4,15 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="HistoryAlarm">
+import { ElLoading } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDictByCode } from '@/api/system/dict'
-import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
+import { exportHistoryAlarm, getHistoryAlarmListPage } from '@/api/home/alarm/history'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { uniqueMultiArray } from '@/utils/Array'
 import { shortcuts } from '@/utils/common'
+import { exportFile } from '@/utils/exportUtils'
 const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
@@ -136,6 +138,19 @@
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportHistoryAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(数据).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 onMounted(() => {
   datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   setTimeout(() => {
@@ -234,7 +249,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
index 91a16fa..33c7050 100644
--- a/src/views/home/dashboard/components/controlMap.vue
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -4,10 +4,10 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup>
+import baseOverView from '../fullScreen-components/baseOverView.vue'
 import { mapData } from './mapData'
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
-
 // 地图实例
 const mapRef = ref()
 const zoomStatus = ref('') // 当前缩放状态
@@ -265,6 +265,11 @@
 
 <template>
   <div class="full-container">
+    <!-- 左侧 -->
+    <div>
+      <!-- 基本概况 -->
+      <base-over-view />
+    </div>
     <!-- 设备信息窗体 -->
     <detail-info ref="detailRef" />
     <!-- 地图 -->
diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
new file mode 100644
index 0000000..e9ea9ff
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue
@@ -0,0 +1,87 @@
+<!--
+  Description: 综合大屏 - 数据展示- 基本概况
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicOverView">
+import layout from './layout.vue'
+// 宽高
+const height = ref((window.innerHeight - 100 - 60) / 3)
+const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
+window.addEventListener('resize', () => {
+  height.value = (window.innerHeight - 100 - 60) / 3
+  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
+})
+const img = {
+  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
+  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
+  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
+  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
+}
+const dataList = ref([
+  {
+    name: '管线',
+    id: '1',
+    unit: 'KM',
+    value: '57.9',
+    img: img.gx,
+  },
+  {
+    name: '调压站',
+    id: '2',
+    unit: '个',
+    value: '9',
+    img: img.tyz,
+  },
+  {
+    name: '闸井',
+    id: '3',
+    unit: '个',
+    value: '47',
+    img: img.zj,
+  },
+  {
+    name: '调压箱',
+    id: '4',
+    unit: '个',
+    value: '39',
+    img: img.tyx,
+  },
+])
+</script>
+
+<template>
+  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
+    <template #content>
+      <div class="content">
+        <div v-for="item in dataList" :key="item.id" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="data">
+            <div class="value">
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+
+  .item {
+    width: 46%;
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue
new file mode 100644
index 0000000..cbe37c4
--- /dev/null
+++ b/src/views/home/dashboard/fullScreen-components/layout.vue
@@ -0,0 +1,93 @@
+<!--
+  Description: 综合大屏 - 数据展示-基础组件
+  Author: 李亚光
+  Date: 2024-09-18
+ -->
+<script lang="ts" setup name="FullScreenBasicLayout">
+const $props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="base" :style="{ height: `${$props.height}px`, width: `${$props.width}px` }">
+    <div class="header-container">
+      <div class="header">
+        <div class="title">
+          {{ $props.title }}
+        </div>
+        <div class="english">
+          {{ $props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base {
+  width: 345px;
+  height: 250px;
+  // background-color: aliceblue;
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 15px;
+
+  .header-container {
+    background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .header {
+    background: url("@/assets/images/dashboard/小标题.png") no-repeat center / cover;
+    height: 16px;
+    width: 100%;
+    // padding-left: 20px;
+    line-height: 16px;
+    box-sizing: border-box;
+    margin-left: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      padding-left: 20px;
+      box-sizing: border-box;
+    }
+
+    .english {
+      color: #83b7df;
+      font-size: 10px;
+      font-weight: 700;
+      padding-left: 30px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index e866787..d2f7e3c 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -230,7 +230,7 @@
           <div class="search">
             <div />
             <div class="more">
-              >>更多
+              <!-- >>更多 -->
             </div>
           </div>
         </template>
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 1abcb64..0f12157 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -79,7 +79,7 @@
   loading.value = true
   getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
     try {
-      const row = await getDeviceListPage({ devCode: JSON.parse($route.query.row as string).devcode })
+      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
       detailInfo.value = row.data.rows[0] || {}
       detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
       detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
diff --git a/src/views/home/device/device/components/electricityAnalyse.vue b/src/views/home/device/device/components/electricityAnalyse.vue
index 06d6a5a..9dc03d3 100644
--- a/src/views/home/device/device/components/electricityAnalyse.vue
+++ b/src/views/home/device/device/components/electricityAnalyse.vue
@@ -52,18 +52,19 @@
     loadingTable.value = false
 
     xAxisData.value = [
-      '2024-07-01 12:11:12',
-      '2024-07-02 12:11:12',
-      '2024-07-03 12:11:12',
-      '2024-07-04 12:11:12',
-      '2024-07-05 12:11:12',
-      '2024-07-06 12:11:12',
-      '2024-07-07 12:11:12',
+      // '2024-07-01 12:11:12',
+      // '2024-07-02 12:11:12',
+      // '2024-07-03 12:11:12',
+      // '2024-07-04 12:11:12',
+      // '2024-07-05 12:11:12',
+      // '2024-07-06 12:11:12',
+      // '2024-07-07 12:11:12',
     ]
     data.value = [
       {
         name: '电量',
-        data: ['100', '87', '73', '53', '41', '32', '17'],
+        // data: ['100', '87', '73', '53', '41', '32', '17'],
+        data: [],
         symbol: 'none',
       },
     ]
diff --git a/src/views/home/device/device/components/localtionForStation.vue b/src/views/home/device/device/components/localtionForStation.vue
index 53fca20..1a6187c 100644
--- a/src/views/home/device/device/components/localtionForStation.vue
+++ b/src/views/home/device/device/components/localtionForStation.vue
@@ -19,7 +19,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center', width: '90' },
@@ -32,7 +32,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -56,7 +56,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -117,7 +117,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.wellType" placeholder="场站类型" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/device/device/components/localtionForWell.vue b/src/views/home/device/device/components/localtionForWell.vue
index a9180bc..86cc125 100644
--- a/src/views/home/device/device/components/localtionForWell.vue
+++ b/src/views/home/device/device/components/localtionForWell.vue
@@ -20,7 +20,7 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', align: 'center' },
   { text: '管理方式', value: 'manageTypeName', align: 'center', width: '90' },
   { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
@@ -35,7 +35,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -63,7 +63,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -157,7 +157,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 0b75fd4..c3970b9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -6,12 +6,13 @@
 <script lang="ts" setup name="DeviceManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import addDialog from './components/addDialog.vue'
-import { exportDevice, getDeviceListPage, removeDevice } from '@/api/home/device/device'
+import { exportDevice, getDeviceListPage, importDevice, removeDevice, templateDevice } from '@/api/home/device/device'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 import { shortcuts } from '@/utils/common'
+import { download } from '@/utils/download'
 const $router = useRouter()
 const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -176,9 +177,64 @@
     loading.close()
   })
 }
-// 批量导入
+const fileRef = ref() // 文件上传input，获取input的引用
+const onFileChange = (event: any) => {
+  // 原生上传
+  // console.log(event.target.files)
+  if (event.target.files?.length !== 0) {
+    // 创建formdata对象
+    const fd = new FormData()
+    fd.append('file', event.target.files[0])
+    // fd.append('equipmentType', $props.equipmentType)
+    const loading = ElLoading.service({
+      lock: true,
+      background: 'rgba(255, 255, 255, 0.8)',
+    })
+    // export function importDevice(data: object, deviceType: string) {
+    //   return request({
+    //     url: `/equipment/info/import?equipmentType=${deviceType}`,
+    //     method: 'post',
+    //     data,
+    //   })
+    // }
+    importDevice(fd).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success('上传成功')
+        fileRef.value.value = ''
+        loading.close()
+        fetchData()
+      }
+      else {
+        fileRef.value.value = ''
+        // ElMessage.error(res.message)
+        loading.close()
+      }
+    }).catch(() => {
+      fileRef.value.value = ''
+      // ElMessage.error(err.message)
+      loading.close()
+    })
+  }
+}
+// 导入
 const importList = () => {
-  ElMessage.warning('敬请期待')
+  fileRef.value.click()
+}
+// 模板下载
+const downloadTemplate = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  templateDevice().then((res) => {
+    if (res.data) {
+      download(res.data, '设备导入模板.xlsx')
+    }
+
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 const isUsed = ref<{ id: string; name: string; value: string }[]>([]) // 是否启用
 
@@ -319,12 +375,16 @@
           <el-button type="primary" @click="editRow('add', {})">
             新建
           </el-button>
+          <el-button type="primary" @click="downloadTemplate">
+            模板下载
+          </el-button>
           <el-button type="primary" @click="importList">
             批量导入
           </el-button>
           <el-button type="primary" @click="exportList">
             导出列表
           </el-button>
+          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
         </div>
       </template>
       <!-- 查询结果Table显示 -->
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 6e40ede..9eb1f43 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -24,7 +24,7 @@
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
   { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
   { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 91ad1ca..e0d2512 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -4,11 +4,11 @@
   Date: 2024-09-02
  -->
 <script lang="ts" setup name="SyncRecordList">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import editDialog from './components/editDialog.vue'
 import { getDictByCode } from '@/api/system/dict'
-import { getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
-
+import { exportPipelineList, getPiePleListPage, removePieple } from '@/api/home/ledger/pipeline'
+import { exportFile } from '@/utils/exportUtils'
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -114,6 +114,23 @@
 const editRow = (type: string, row: any) => {
   editRef.value.initDialog(type, row)
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportPipelineList(listQuery.value).then((res) => {
+    exportFile(res.data, '管线列表.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
+// 导入列表
+const importList = () => {
+
+}
 // 获取字典
 const pressTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 压力级制
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
@@ -208,10 +225,10 @@
           <el-button type="primary" @click="editRow('add', {})">
             新增
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="importList">
             批量导入
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             批量导出
           </el-button>
         </div>
diff --git a/src/views/home/operation/alarm/components/detail.vue b/src/views/home/operation/alarm/components/detail.vue
index 849f2ee..8194cbd 100644
--- a/src/views/home/operation/alarm/components/detail.vue
+++ b/src/views/home/operation/alarm/components/detail.vue
@@ -7,7 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode } from '@/api/home/alarm/current'
-import { getAlarmDetail } from '@/api/home/alarm/history'
+import { getAlarmDetail } from '@/api/home/operation/history'
 import { deviceAlarmView } from '@/api/home/operation/alarm'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
@@ -20,19 +20,8 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '设备编号',
-    value: 'devcode',
-    align: 'center',
-  },
-  {
-    text: '设备类型',
-    value: 'devTypeName',
-    align: 'center',
-  },
-
-  {
     text: '报警编号',
-    value: 'devcode',
+    value: '',
     align: 'center',
   },
   {
@@ -61,8 +50,28 @@
     align: 'center',
   },
   {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: '',
+    align: 'center',
+  },
+  {
     text: '位置',
-    value: 'ledgerNumber',
+    value: 'address',
     align: 'center',
   },
   {
@@ -80,11 +89,11 @@
     value: '',
     align: 'center',
   },
-  {
-    text: '是否误报',
-    value: 'realAlarmName',
-    align: 'center',
-  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
   {
     text: '解除时间',
     value: 'cancelTime',
@@ -95,11 +104,11 @@
     value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
-  {
-    text: '',
-    value: '',
-    align: '',
-  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
 ])
 // 报警动态
 const alarmDynamics = ref<any[]>([])
@@ -117,6 +126,7 @@
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
     detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
     detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
     console.log(detailInfo.value, 'detailInfo.value')
     loading.value = false
   }).catch(() => {
diff --git a/src/views/home/operation/alarm/components/map.vue b/src/views/home/operation/alarm/components/map.vue
index 0d10efa..f3cbbbe 100644
--- a/src/views/home/operation/alarm/components/map.vue
+++ b/src/views/home/operation/alarm/components/map.vue
@@ -16,7 +16,7 @@
     default: () => ({}),
   },
 })
-
+const emits = defineEmits(['refresh'])
 // 地图实例
 const mapRef = ref()
 // 地图加载状态
@@ -87,7 +87,9 @@
     // mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+const refresh = () => {
+  emits('refresh', true)
+}
 defineExpose({
   mapRef,
   completeFlag,
@@ -98,7 +100,7 @@
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
     <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
+    <detail-info ref="detailRef" @refresh="refresh" />
     <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index 1688e59..ac0f31b 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -4,17 +4,18 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { batchRemoveRow, deviceAlarmView, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
+import { batchRemoveRow, deviceAlarmView, exportDeviceAlarm, getDeviceCurrentListPage } from '@/api/home/operation/alarm'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { toHumpObject } from '@/utils/String'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -66,8 +67,11 @@
   }
 })
 // 查询数据
-const fetchData = () => {
+const fetchData = (isLoaidng = false) => {
   loadingTable.value = true
+  if (isLoaidng) {
+    loadingTable.value = false
+  }
   getDeviceCurrentListPage(listQuery.value).then((res) => {
     list1.value = res.data.rows
     total.value = res.data.total
@@ -200,6 +204,19 @@
     })
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceAlarm(listQuery.value).then((res) => {
+    exportFile(res.data, '当前报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -298,7 +315,7 @@
               <el-button v-if="proxy.hasPerm('/alarm/device/delete')" type="primary" @click="batchDeleteRow">
                 批量删除
               </el-button>
-              <el-button type="primary">
+              <el-button type="primary" @click="exportList">
                 导出
               </el-button>
             </div>
@@ -346,7 +363,7 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" />
+        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
       </div>
     </div>
   </app-container>
diff --git a/src/views/home/operation/history/detail.vue b/src/views/home/operation/history/detail.vue
new file mode 100644
index 0000000..337d4b7
--- /dev/null
+++ b/src/views/home/operation/history/detail.vue
@@ -0,0 +1,273 @@
+<!--
+  Description: 设备报警-详情
+  Author: 李亚光
+  Date: 2023-09-14
+ -->
+<script lang="ts" setup name="WellDetail">
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { alarmProcessNode } from '@/api/home/alarm/current'
+import { toHumpObject } from '@/utils/String'
+import { getAlarmDetail } from '@/api/home/operation/history'
+import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { getDateDiff } from '@/utils/dayjs'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '报警编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '报警类别',
+    value: 'alarmCategory',
+    align: 'center',
+  },
+  {
+    text: '报警类型',
+    value: 'alarmType',
+    align: 'center',
+  },
+  {
+    text: '报警原因',
+    value: 'alarmContent',
+    align: 'center',
+  },
+  {
+    text: '报警等级',
+    value: 'alarmLevelName',
+    align: 'center',
+  },
+  {
+    text: '报警时间',
+    value: 'alarmTime',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'devTypeName',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devCode',
+    align: 'center',
+  },
+
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '安装时间',
+    value: 'installDate',
+    align: 'center',
+  },
+  {
+    text: '位置',
+    value: 'address',
+    align: 'center',
+  },
+  {
+    text: '详细地址',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  // {
+  //   text: '是否误报',
+  //   value: 'realAlarmName',
+  //   align: 'center',
+  // },
+  {
+    text: '解除时间',
+    value: 'cancelTime',
+    align: 'center',
+  },
+  {
+    text: '处置时长',
+    value: 'processDuration',
+    align: 'center',
+  },
+  // {
+  //   text: '',
+  //   value: '',
+  //   align: '',
+  // },
+])
+// 报警动态
+const alarmDynamics = ref<any[]>([])
+// 页面loading
+const loading = ref(false)
+const loadingDynamics = ref(false)
+// 获取闸井详情数据
+const fetchDetail = async () => {
+  loading.value = true
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  getAlarmDetail($route.query.id as string).then((res) => {
+    detailInfo.value = res.data
+    detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
+    detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
+    detailInfo.value.alarmLevelName = res1.data.rows.filter((item: any) => item.id === detailInfo.value.alarmLevel)[0]?.alarmLevel || ''
+    detailInfo.value.duration = detailInfo.value.ts && detailInfo.value.cancelTime ? getDateDiff(detailInfo.value.ts, detailInfo.value.cancelTime) : ''
+    console.log(detailInfo.value, 'detailInfo.value')
+    // detailInfo.value.address = `${detailInfo.value.ledgerCode} ${detailInfo.value.ledgerCode ? '|' : ''}${res.data.ledgerName}`
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+
+  // 获取报警动态
+  loadingDynamics.value = true
+  const info = JSON.parse($route.query.row as string)
+  alarmProcessNode($route.query.id as string).then((res) => {
+    alarmDynamics.value = res.data.map((item: any) => ({ ...toHumpObject(item) }))
+    alarmDynamics.value.unshift({
+      approvalTime: info.ts, // 报警生成时间
+      process_name: '',
+      approvalPerson: '报警生成',
+      dept_name: '',
+    })
+    loadingDynamics.value = false
+  }).catch(() => {
+    loadingDynamics.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  console.log(data, 'data')
+  // if (data.text === '位置') {
+  //   if (detailInfo.value.watchObject && detailInfo.value.devcode && detailInfo.value.ledgerId) {
+  //     const watchObject = {
+  //       1: 'WellMonitorDetail',
+  //       2: 'StationMonitorDetail',
+  //       3: 'PipelineMonitorDetail',
+  //     } as { [key: string]: string }
+  //     $router.push({
+  //       name: watchObject[detailInfo.value.watchObject],
+  //       query: {
+  //         id: detailInfo.value.ledgerId,
+  //         deviceCode: detailInfo.value.devcode,
+  //         typeName: detailInfo.value.devTypeName,
+  //         row: JSON.stringify({
+  //           id: detailInfo.value.ledgerId,
+  //           typeName: detailInfo.value.devTypeName,
+  //           deviceCode: detailInfo.value.devcode,
+  //         }),
+  //       },
+  //     })
+  //     // $router
+  //   }
+  //   return
+  // }
+  if (data.text !== '详细地址' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <detail-page title="报警详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          <span
+            :class="`${item.text === '详细地址' ? 'pointer' : item.text === '位置' ? 'pointer link' : ''}`"
+            @click="showMap(item)"
+          >
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-loading="loadingDynamics" align="left" label-align="center">
+          <template #label>
+            <span class="label">
+              报警动态
+            </span>
+          </template>
+          <div style="padding: 25px;">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+
+::v-deep(.el-descriptions__content) {
+  width: 35%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// .link {
+//   color: #3d7eff;
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+.bottom {
+  --el-descriptions-table-border-top: none;
+
+  ::v-deep(.el-descriptions) {
+    --el-descriptions-table-border-top: none;
+  }
+}
+</style>
diff --git a/src/views/home/operation/history/index.vue b/src/views/home/operation/history/index.vue
index b01f27c..5c04ff7 100644
--- a/src/views/home/operation/history/index.vue
+++ b/src/views/home/operation/history/index.vue
@@ -5,13 +5,15 @@
  -->
 <script lang="ts" setup name="HistoryAlarm">
 import dayjs from 'dayjs'
+import { ElLoading } from 'element-plus'
 import { shortcuts } from '@/utils/common'
 import { getDictByCode } from '@/api/system/dict'
-import { getDeviceHistoryListPage } from '@/api/home/operation/history'
+import { exportDeviceHistory, getDeviceHistoryListPage } from '@/api/home/operation/history'
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { uniqueMultiArray } from '@/utils/Array'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getAlarmTypeListPage } from '@/api/home/rule/alarm'
+import { exportFile } from '@/utils/exportUtils'
 const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
@@ -108,9 +110,23 @@
     query: {
       id: row.id,
       type: 'history',
+      row: JSON.stringify(row),
     },
   })
 }
+// 导出列表
+const exportList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  exportDeviceHistory(listQuery.value).then((res) => {
+    exportFile(res.data, '历史报警列表(设备).xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
+}
 // 字典
 const fetchDict = () => {
   // 报警类型
@@ -202,7 +218,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="exportList">
             导出
           </el-button>
         </div>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index a975599..90baef0 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -396,7 +396,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
index 927cb73..bb494ec 100644
--- a/src/views/home/rule/special/components/editDialog.vue
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -296,7 +296,7 @@
         <el-col :span="12">
           <el-form-item label="详细地址" prop="position">
             <el-input
-              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              v-model.trim="dataForm.position" type="text" placeholder="详细地址" style="width: 100%;" disabled
               clearable
             />
           </el-form-item>
diff --git a/src/views/home/station/operation/index.vue b/src/views/home/station/operation/index.vue
index 4cb86b5..02a5e44 100644
--- a/src/views/home/station/operation/index.vue
+++ b/src/views/home/station/operation/index.vue
@@ -100,12 +100,12 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  // exportOperationList(listQuery.value).then((res) => {
-  //   exportFile(res.data, '厂商运维记录.xlsx')
-  //   loading.close()
-  // }).catch(() => {
-  //   loading.close()
-  // })
+  exportOperationList(listQuery.value).then((res) => {
+    exportFile(res.data, '运维记录.xlsx')
+    loading.close()
+  }).catch(() => {
+    loading.close()
+  })
 }
 // 获取字典
 const fetchDict = async () => {
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index bcc5039..32eb20c 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -26,7 +26,7 @@
   { text: '场站位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '场站编号', value: 'ledgerCode', isRequired: true, align: 'center' },
   { text: '场站名称', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
@@ -50,7 +50,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   onState: '', // 使用状态
   monitorState: '', // 监控状态
 } as { [key: string]: string | number })
@@ -106,7 +106,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     onState: '', // 使用状态态
     monitorState: '', // 监控状态
   }
@@ -130,7 +130,7 @@
 const fetchDict = () => {
   // 场站类型
   getDictByCode('wellType').then((res) => {
-    wellTypeList.value = res.data
+    wellTypeList.value = res.data.filter((item: any) => item.name.includes('压'))
   })
   // 使用状态
   getDictByCode('onState').then((res) => {
@@ -208,10 +208,7 @@
       </el-icon>
     </div>
     <!-- 筛选条件 -->
-    <search-area
-      :need-clear="true" @search="fetchData"
-      @clear="reset"
-    >
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
         <el-input v-model.trim="listQuery.tagNumber" placeholder="场站位号" clearable />
       </search-item>
@@ -222,7 +219,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
 
       <search-item>
@@ -264,8 +261,8 @@
       </template>
       <!-- 查询结果Table显示 -->
       <normal-table
-        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable" :height="tableHeight"
-        @change="changePage" @rowDbClick="rowClick"
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        :height="tableHeight" @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -305,7 +302,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index fca97d7..8cfd253 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -356,7 +356,7 @@
     top: 345px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9;
+    z-index: 999;
 
     &:hover {
       cursor: pointer;