diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ

diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
new file mode 100644
index 0000000..a0d693f
--- /dev/null
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -0,0 +1,229 @@
+<!--
+  Description: 报警管理-信息窗体
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import pendingDialog from './pendingDialog.vue'
+import remindDialog from './remindDialog.vue'
+import { detailAlarm } from '@/api/home/alarm/current'
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+const info = ref({
+  alarmContent: '',
+  alarmMsg: '',
+  alarmCategoryName: '',
+  devcode: '',
+  ts: '',
+  position: '',
+  deptName: '',
+  responsibleDeptName: '',
+  manageType: '',
+})
+const initDialog = (e: any) => {
+  console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  dialogFormVisible.value = true
+  info.value = e.info
+  detailAlarm(e.info.id).then((res) => {
+    console.log(res.data, '123123123')
+  })
+}
+
+// 查看数据
+const viewData = () => {
+
+}
+// 更多
+const moreData = () => {
+
+}
+// 提醒责任人
+const remindRef = ref()
+const remind = () => {
+  remindRef.value.initDialog(info.value)
+}
+// 挂起
+const pendingRef = ref()
+const pending = () => {
+  pendingRef.value.initDialog(info.value)
+}
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
+    <!-- 挂起 -->
+    <pending-dialog ref="pendingRef" />
+    <!-- 提醒责任人 -->
+    <remind-dialog ref="remindRef" />
+    <!-- 头部 -->
+    <div class="header">
+      <span>{{ info.alarmContent }}</span>
+      <span class="more" @click="moreData">>>更多</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        报警类别:
+        <span style="padding-left: 6px;">
+          {{ info.alarmCategoryName }}
+        </span>
+      </div>
+      <div class="item">
+        报警原因:
+        <span style="padding-left: 6px;">
+          {{ info.alarmMsg }}
+        </span>
+      </div>
+      <div class="item" style="display: flex;justify-content: space-between;">
+        报警设备:
+        <span style="padding-left: 6px;">{{ info.devcode }} </span>
+        <el-button size="small" style="padding-left: 6px;" @click="viewData">
+          查看数据
+        </el-button>
+      </div>
+      <div class="item">
+        报警时间:
+        <span style="padding-left: 6px;">
+          {{ info.ts }}
+        </span>
+      </div>
+      <div class="item">
+        详细地址:
+        <span style="padding-left: 6px;">
+          {{ info.position }}
+        </span>
+      </div>
+      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
+      <div class="item">
+        管理单位:
+        <span style="padding-left: 6px;">
+          {{ info.deptName }}
+        </span>
+      </div>
+      <div class="item">
+        产权单位:
+        <span style="padding-left: 6px;">
+          {{ info.responsibleDeptName }}
+        </span>
+      </div>
+      <div class="item">
+        管理方式:
+        <span style="padding-left: 6px;">
+          {{ info.manageType }}
+        </span>
+      </div>
+      <div class="item">
+        负责人:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+      </div>
+      <div class="item">
+        状态:
+        <span style="padding-left: 6px;">
+          {{ info.status === '0' ? '已取消' : '正在报警' }}
+        </span>
+      </div>
+      <div class="item">
+        现场确认情况:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+        <el-button size="small" style="padding-left: 6px;">
+          流程图
+        </el-button>
+      </div>
+      <div class="item">
+        处置情况:
+        <span style="padding-left: 6px;">
+          {{ info.processStatusName }}
+        </span>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="remind">
+        提醒责任人
+      </el-button>
+      <el-button type="primary" size="small" @click="pending">
+        挂起
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
+}
+
+.container {
+  width: 270px;
+  padding: 10px;
+  background: rgba($color: #feffff, $alpha: 100%);
+  position: relative;
+  color: #464444;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .more {
+      color: #3d7eff;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .item {
+    margin: 5px 0;
+  }
+
+  .footer {
+    margin-top: 10px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>

diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
new file mode 100644
index 0000000..a0d693f
--- /dev/null
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -0,0 +1,229 @@
+<!--
+  Description: 报警管理-信息窗体
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import pendingDialog from './pendingDialog.vue'
+import remindDialog from './remindDialog.vue'
+import { detailAlarm } from '@/api/home/alarm/current'
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+const info = ref({
+  alarmContent: '',
+  alarmMsg: '',
+  alarmCategoryName: '',
+  devcode: '',
+  ts: '',
+  position: '',
+  deptName: '',
+  responsibleDeptName: '',
+  manageType: '',
+})
+const initDialog = (e: any) => {
+  console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  dialogFormVisible.value = true
+  info.value = e.info
+  detailAlarm(e.info.id).then((res) => {
+    console.log(res.data, '123123123')
+  })
+}
+
+// 查看数据
+const viewData = () => {
+
+}
+// 更多
+const moreData = () => {
+
+}
+// 提醒责任人
+const remindRef = ref()
+const remind = () => {
+  remindRef.value.initDialog(info.value)
+}
+// 挂起
+const pendingRef = ref()
+const pending = () => {
+  pendingRef.value.initDialog(info.value)
+}
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
+    <!-- 挂起 -->
+    <pending-dialog ref="pendingRef" />
+    <!-- 提醒责任人 -->
+    <remind-dialog ref="remindRef" />
+    <!-- 头部 -->
+    <div class="header">
+      <span>{{ info.alarmContent }}</span>
+      <span class="more" @click="moreData">>>更多</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        报警类别:
+        <span style="padding-left: 6px;">
+          {{ info.alarmCategoryName }}
+        </span>
+      </div>
+      <div class="item">
+        报警原因:
+        <span style="padding-left: 6px;">
+          {{ info.alarmMsg }}
+        </span>
+      </div>
+      <div class="item" style="display: flex;justify-content: space-between;">
+        报警设备:
+        <span style="padding-left: 6px;">{{ info.devcode }} </span>
+        <el-button size="small" style="padding-left: 6px;" @click="viewData">
+          查看数据
+        </el-button>
+      </div>
+      <div class="item">
+        报警时间:
+        <span style="padding-left: 6px;">
+          {{ info.ts }}
+        </span>
+      </div>
+      <div class="item">
+        详细地址:
+        <span style="padding-left: 6px;">
+          {{ info.position }}
+        </span>
+      </div>
+      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
+      <div class="item">
+        管理单位:
+        <span style="padding-left: 6px;">
+          {{ info.deptName }}
+        </span>
+      </div>
+      <div class="item">
+        产权单位:
+        <span style="padding-left: 6px;">
+          {{ info.responsibleDeptName }}
+        </span>
+      </div>
+      <div class="item">
+        管理方式:
+        <span style="padding-left: 6px;">
+          {{ info.manageType }}
+        </span>
+      </div>
+      <div class="item">
+        负责人:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+      </div>
+      <div class="item">
+        状态:
+        <span style="padding-left: 6px;">
+          {{ info.status === '0' ? '已取消' : '正在报警' }}
+        </span>
+      </div>
+      <div class="item">
+        现场确认情况:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+        <el-button size="small" style="padding-left: 6px;">
+          流程图
+        </el-button>
+      </div>
+      <div class="item">
+        处置情况:
+        <span style="padding-left: 6px;">
+          {{ info.processStatusName }}
+        </span>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="remind">
+        提醒责任人
+      </el-button>
+      <el-button type="primary" size="small" @click="pending">
+        挂起
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
+}
+
+.container {
+  width: 270px;
+  padding: 10px;
+  background: rgba($color: #feffff, $alpha: 100%);
+  position: relative;
+  color: #464444;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .more {
+      color: #3d7eff;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .item {
+    margin: 5px 0;
+  }
+
+  .footer {
+    margin-top: 10px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index 30f312e..53fd910 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -4,12 +4,17 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 // 地图实例
 const mapRef = ref()
@@ -20,15 +25,73 @@
   completeFlag.value = true
   console.log('地图加载完成')
 }
+
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const markerClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.data.position)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: $props.data,
+    map: mapRef.value.map,
+  })
+  // setTimeout(() => {
+  //   mapRef.value.map.setFitView()
+  //   mapRef.value.map.setCenter(data.data.position)
+  // })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  // mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    // setTimeout(() => {
+    //   mapRef.value.map.setFitView()
+    // })
+    // mapRef.value.map.setCenter(data.lnglat)
+  })
+}
+
 defineExpose({
   mapRef,
   completeFlag,
+  openInfoDetail,
 })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
 

diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
new file mode 100644
index 0000000..a0d693f
--- /dev/null
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -0,0 +1,229 @@
+<!--
+  Description: 报警管理-信息窗体
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import pendingDialog from './pendingDialog.vue'
+import remindDialog from './remindDialog.vue'
+import { detailAlarm } from '@/api/home/alarm/current'
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+const info = ref({
+  alarmContent: '',
+  alarmMsg: '',
+  alarmCategoryName: '',
+  devcode: '',
+  ts: '',
+  position: '',
+  deptName: '',
+  responsibleDeptName: '',
+  manageType: '',
+})
+const initDialog = (e: any) => {
+  console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  dialogFormVisible.value = true
+  info.value = e.info
+  detailAlarm(e.info.id).then((res) => {
+    console.log(res.data, '123123123')
+  })
+}
+
+// 查看数据
+const viewData = () => {
+
+}
+// 更多
+const moreData = () => {
+
+}
+// 提醒责任人
+const remindRef = ref()
+const remind = () => {
+  remindRef.value.initDialog(info.value)
+}
+// 挂起
+const pendingRef = ref()
+const pending = () => {
+  pendingRef.value.initDialog(info.value)
+}
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
+    <!-- 挂起 -->
+    <pending-dialog ref="pendingRef" />
+    <!-- 提醒责任人 -->
+    <remind-dialog ref="remindRef" />
+    <!-- 头部 -->
+    <div class="header">
+      <span>{{ info.alarmContent }}</span>
+      <span class="more" @click="moreData">>>更多</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        报警类别:
+        <span style="padding-left: 6px;">
+          {{ info.alarmCategoryName }}
+        </span>
+      </div>
+      <div class="item">
+        报警原因:
+        <span style="padding-left: 6px;">
+          {{ info.alarmMsg }}
+        </span>
+      </div>
+      <div class="item" style="display: flex;justify-content: space-between;">
+        报警设备:
+        <span style="padding-left: 6px;">{{ info.devcode }} </span>
+        <el-button size="small" style="padding-left: 6px;" @click="viewData">
+          查看数据
+        </el-button>
+      </div>
+      <div class="item">
+        报警时间:
+        <span style="padding-left: 6px;">
+          {{ info.ts }}
+        </span>
+      </div>
+      <div class="item">
+        详细地址:
+        <span style="padding-left: 6px;">
+          {{ info.position }}
+        </span>
+      </div>
+      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
+      <div class="item">
+        管理单位:
+        <span style="padding-left: 6px;">
+          {{ info.deptName }}
+        </span>
+      </div>
+      <div class="item">
+        产权单位:
+        <span style="padding-left: 6px;">
+          {{ info.responsibleDeptName }}
+        </span>
+      </div>
+      <div class="item">
+        管理方式:
+        <span style="padding-left: 6px;">
+          {{ info.manageType }}
+        </span>
+      </div>
+      <div class="item">
+        负责人:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+      </div>
+      <div class="item">
+        状态:
+        <span style="padding-left: 6px;">
+          {{ info.status === '0' ? '已取消' : '正在报警' }}
+        </span>
+      </div>
+      <div class="item">
+        现场确认情况:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+        <el-button size="small" style="padding-left: 6px;">
+          流程图
+        </el-button>
+      </div>
+      <div class="item">
+        处置情况:
+        <span style="padding-left: 6px;">
+          {{ info.processStatusName }}
+        </span>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="remind">
+        提醒责任人
+      </el-button>
+      <el-button type="primary" size="small" @click="pending">
+        挂起
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
+}
+
+.container {
+  width: 270px;
+  padding: 10px;
+  background: rgba($color: #feffff, $alpha: 100%);
+  position: relative;
+  color: #464444;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .more {
+      color: #3d7eff;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .item {
+    margin: 5px 0;
+  }
+
+  .footer {
+    margin-top: 10px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index 30f312e..53fd910 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -4,12 +4,17 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 // 地图实例
 const mapRef = ref()
@@ -20,15 +25,73 @@
   completeFlag.value = true
   console.log('地图加载完成')
 }
+
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const markerClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.data.position)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: $props.data,
+    map: mapRef.value.map,
+  })
+  // setTimeout(() => {
+  //   mapRef.value.map.setFitView()
+  //   mapRef.value.map.setCenter(data.data.position)
+  // })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  // mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    // setTimeout(() => {
+    //   mapRef.value.map.setFitView()
+    // })
+    // mapRef.value.map.setCenter(data.lnglat)
+  })
+}
+
 defineExpose({
   mapRef,
   completeFlag,
+  openInfoDetail,
 })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
 
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
new file mode 100644
index 0000000..3199aed
--- /dev/null
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -0,0 +1,43 @@
+<!--
+  Description: 报警管理-查看数据(监控数据)
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="MonitorDataDialog">
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="查看数据" append-to-body>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @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/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
new file mode 100644
index 0000000..a0d693f
--- /dev/null
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -0,0 +1,229 @@
+<!--
+  Description: 报警管理-信息窗体
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import pendingDialog from './pendingDialog.vue'
+import remindDialog from './remindDialog.vue'
+import { detailAlarm } from '@/api/home/alarm/current'
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+const info = ref({
+  alarmContent: '',
+  alarmMsg: '',
+  alarmCategoryName: '',
+  devcode: '',
+  ts: '',
+  position: '',
+  deptName: '',
+  responsibleDeptName: '',
+  manageType: '',
+})
+const initDialog = (e: any) => {
+  console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  dialogFormVisible.value = true
+  info.value = e.info
+  detailAlarm(e.info.id).then((res) => {
+    console.log(res.data, '123123123')
+  })
+}
+
+// 查看数据
+const viewData = () => {
+
+}
+// 更多
+const moreData = () => {
+
+}
+// 提醒责任人
+const remindRef = ref()
+const remind = () => {
+  remindRef.value.initDialog(info.value)
+}
+// 挂起
+const pendingRef = ref()
+const pending = () => {
+  pendingRef.value.initDialog(info.value)
+}
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
+    <!-- 挂起 -->
+    <pending-dialog ref="pendingRef" />
+    <!-- 提醒责任人 -->
+    <remind-dialog ref="remindRef" />
+    <!-- 头部 -->
+    <div class="header">
+      <span>{{ info.alarmContent }}</span>
+      <span class="more" @click="moreData">>>更多</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        报警类别:
+        <span style="padding-left: 6px;">
+          {{ info.alarmCategoryName }}
+        </span>
+      </div>
+      <div class="item">
+        报警原因:
+        <span style="padding-left: 6px;">
+          {{ info.alarmMsg }}
+        </span>
+      </div>
+      <div class="item" style="display: flex;justify-content: space-between;">
+        报警设备:
+        <span style="padding-left: 6px;">{{ info.devcode }} </span>
+        <el-button size="small" style="padding-left: 6px;" @click="viewData">
+          查看数据
+        </el-button>
+      </div>
+      <div class="item">
+        报警时间:
+        <span style="padding-left: 6px;">
+          {{ info.ts }}
+        </span>
+      </div>
+      <div class="item">
+        详细地址:
+        <span style="padding-left: 6px;">
+          {{ info.position }}
+        </span>
+      </div>
+      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
+      <div class="item">
+        管理单位:
+        <span style="padding-left: 6px;">
+          {{ info.deptName }}
+        </span>
+      </div>
+      <div class="item">
+        产权单位:
+        <span style="padding-left: 6px;">
+          {{ info.responsibleDeptName }}
+        </span>
+      </div>
+      <div class="item">
+        管理方式:
+        <span style="padding-left: 6px;">
+          {{ info.manageType }}
+        </span>
+      </div>
+      <div class="item">
+        负责人:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+      </div>
+      <div class="item">
+        状态:
+        <span style="padding-left: 6px;">
+          {{ info.status === '0' ? '已取消' : '正在报警' }}
+        </span>
+      </div>
+      <div class="item">
+        现场确认情况:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+        <el-button size="small" style="padding-left: 6px;">
+          流程图
+        </el-button>
+      </div>
+      <div class="item">
+        处置情况:
+        <span style="padding-left: 6px;">
+          {{ info.processStatusName }}
+        </span>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="remind">
+        提醒责任人
+      </el-button>
+      <el-button type="primary" size="small" @click="pending">
+        挂起
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
+}
+
+.container {
+  width: 270px;
+  padding: 10px;
+  background: rgba($color: #feffff, $alpha: 100%);
+  position: relative;
+  color: #464444;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .more {
+      color: #3d7eff;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .item {
+    margin: 5px 0;
+  }
+
+  .footer {
+    margin-top: 10px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index 30f312e..53fd910 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -4,12 +4,17 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 // 地图实例
 const mapRef = ref()
@@ -20,15 +25,73 @@
   completeFlag.value = true
   console.log('地图加载完成')
 }
+
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const markerClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.data.position)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: $props.data,
+    map: mapRef.value.map,
+  })
+  // setTimeout(() => {
+  //   mapRef.value.map.setFitView()
+  //   mapRef.value.map.setCenter(data.data.position)
+  // })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  // mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    // setTimeout(() => {
+    //   mapRef.value.map.setFitView()
+    // })
+    // mapRef.value.map.setCenter(data.lnglat)
+  })
+}
+
 defineExpose({
   mapRef,
   completeFlag,
+  openInfoDetail,
 })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
 
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
new file mode 100644
index 0000000..3199aed
--- /dev/null
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -0,0 +1,43 @@
+<!--
+  Description: 报警管理-查看数据(监控数据)
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="MonitorDataDialog">
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="查看数据" append-to-body>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @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/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
new file mode 100644
index 0000000..df1cd85
--- /dev/null
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -0,0 +1,103 @@
+<!--
+  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'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  suspendTime: '1',
+  suspendReason: '',
+  alarmId: '',
+}) // 表单
+const rules: FormRules = {
+  suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    suspendTime: '1',
+    suspendReason: '',
+    alarmId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      pendingAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        data.value.processStatus = 3
+        data.value.processStatusName = '挂起'
+      }).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="suspendReason">
+            <el-input
+              v-model.trim="dataForm.suspendReason" type="text" placeholder="挂起原因" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="挂起时间" prop="suspendTime">
+            <el-input-number v-model="dataForm.suspendTime" :min="1" :max="99" :step="1" step-strictly />
+          </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/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
new file mode 100644
index 0000000..a0d693f
--- /dev/null
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -0,0 +1,229 @@
+<!--
+  Description: 报警管理-信息窗体
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import pendingDialog from './pendingDialog.vue'
+import remindDialog from './remindDialog.vue'
+import { detailAlarm } from '@/api/home/alarm/current'
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+const info = ref({
+  alarmContent: '',
+  alarmMsg: '',
+  alarmCategoryName: '',
+  devcode: '',
+  ts: '',
+  position: '',
+  deptName: '',
+  responsibleDeptName: '',
+  manageType: '',
+})
+const initDialog = (e: any) => {
+  console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  dialogFormVisible.value = true
+  info.value = e.info
+  detailAlarm(e.info.id).then((res) => {
+    console.log(res.data, '123123123')
+  })
+}
+
+// 查看数据
+const viewData = () => {
+
+}
+// 更多
+const moreData = () => {
+
+}
+// 提醒责任人
+const remindRef = ref()
+const remind = () => {
+  remindRef.value.initDialog(info.value)
+}
+// 挂起
+const pendingRef = ref()
+const pending = () => {
+  pendingRef.value.initDialog(info.value)
+}
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
+    <!-- 挂起 -->
+    <pending-dialog ref="pendingRef" />
+    <!-- 提醒责任人 -->
+    <remind-dialog ref="remindRef" />
+    <!-- 头部 -->
+    <div class="header">
+      <span>{{ info.alarmContent }}</span>
+      <span class="more" @click="moreData">>>更多</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        报警类别:
+        <span style="padding-left: 6px;">
+          {{ info.alarmCategoryName }}
+        </span>
+      </div>
+      <div class="item">
+        报警原因:
+        <span style="padding-left: 6px;">
+          {{ info.alarmMsg }}
+        </span>
+      </div>
+      <div class="item" style="display: flex;justify-content: space-between;">
+        报警设备:
+        <span style="padding-left: 6px;">{{ info.devcode }} </span>
+        <el-button size="small" style="padding-left: 6px;" @click="viewData">
+          查看数据
+        </el-button>
+      </div>
+      <div class="item">
+        报警时间:
+        <span style="padding-left: 6px;">
+          {{ info.ts }}
+        </span>
+      </div>
+      <div class="item">
+        详细地址:
+        <span style="padding-left: 6px;">
+          {{ info.position }}
+        </span>
+      </div>
+      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
+      <div class="item">
+        管理单位:
+        <span style="padding-left: 6px;">
+          {{ info.deptName }}
+        </span>
+      </div>
+      <div class="item">
+        产权单位:
+        <span style="padding-left: 6px;">
+          {{ info.responsibleDeptName }}
+        </span>
+      </div>
+      <div class="item">
+        管理方式:
+        <span style="padding-left: 6px;">
+          {{ info.manageType }}
+        </span>
+      </div>
+      <div class="item">
+        负责人:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+      </div>
+      <div class="item">
+        状态:
+        <span style="padding-left: 6px;">
+          {{ info.status === '0' ? '已取消' : '正在报警' }}
+        </span>
+      </div>
+      <div class="item">
+        现场确认情况:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+        <el-button size="small" style="padding-left: 6px;">
+          流程图
+        </el-button>
+      </div>
+      <div class="item">
+        处置情况:
+        <span style="padding-left: 6px;">
+          {{ info.processStatusName }}
+        </span>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="remind">
+        提醒责任人
+      </el-button>
+      <el-button type="primary" size="small" @click="pending">
+        挂起
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
+}
+
+.container {
+  width: 270px;
+  padding: 10px;
+  background: rgba($color: #feffff, $alpha: 100%);
+  position: relative;
+  color: #464444;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .more {
+      color: #3d7eff;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .item {
+    margin: 5px 0;
+  }
+
+  .footer {
+    margin-top: 10px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index 30f312e..53fd910 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -4,12 +4,17 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 // 地图实例
 const mapRef = ref()
@@ -20,15 +25,73 @@
   completeFlag.value = true
   console.log('地图加载完成')
 }
+
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const markerClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.data.position)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: $props.data,
+    map: mapRef.value.map,
+  })
+  // setTimeout(() => {
+  //   mapRef.value.map.setFitView()
+  //   mapRef.value.map.setCenter(data.data.position)
+  // })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  // mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    // setTimeout(() => {
+    //   mapRef.value.map.setFitView()
+    // })
+    // mapRef.value.map.setCenter(data.lnglat)
+  })
+}
+
 defineExpose({
   mapRef,
   completeFlag,
+  openInfoDetail,
 })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
 
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
new file mode 100644
index 0000000..3199aed
--- /dev/null
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -0,0 +1,43 @@
+<!--
+  Description: 报警管理-查看数据(监控数据)
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="MonitorDataDialog">
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="查看数据" append-to-body>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @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/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
new file mode 100644
index 0000000..df1cd85
--- /dev/null
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -0,0 +1,103 @@
+<!--
+  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'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  suspendTime: '1',
+  suspendReason: '',
+  alarmId: '',
+}) // 表单
+const rules: FormRules = {
+  suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    suspendTime: '1',
+    suspendReason: '',
+    alarmId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      pendingAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        data.value.processStatus = 3
+        data.value.processStatusName = '挂起'
+      }).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="suspendReason">
+            <el-input
+              v-model.trim="dataForm.suspendReason" type="text" placeholder="挂起原因" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="挂起时间" prop="suspendTime">
+            <el-input-number v-model="dataForm.suspendTime" :min="1" :max="99" :step="1" step-strictly />
+          </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/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
new file mode 100644
index 0000000..76fb612
--- /dev/null
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  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 { remindAlarm } from '@/api/home/alarm/current'
+import { getUserList } from '@/api/system/user'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const isOtherUser = ref(false)
+const dataForm = ref({
+  alarmId: '',
+  remindContent: '',
+  remindPersonId: '',
+  remindPerson: '',
+  remindPersonOtherId: '',
+  remindPersonOther: '',
+  telephone: '',
+}) // 表单
+const rules: FormRules = {
+  remindContent: [{ required: true, message: '提醒内容不能为空', trigger: ['blur', 'change'] }],
+  remindPersonOtherId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
+  remindPersonId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmId: '',
+    remindContent: '',
+    remindPerson: '',
+    telephone: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+  isOtherUser.value = false
+  console.log(row, 'row')
+  dataForm.value.remindContent = `${row.ledgerNumber}${row.position}疑似发现${row.alarmMsg},请尽快去现场确认`
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        ...JSON.parse(JSON.stringify(dataForm.value)),
+      }
+      if (isOtherUser.value) {
+        data.remindPerson = ''
+        data.remindPersonId = ''
+      }
+      else {
+        data.remindPersonOther = ''
+        data.remindPersonOtherId = ''
+      }
+      remindAlarm(data).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        data.value.processStatus = 4
+        data.value.processStatusName = '待现场确认'
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+// 字典
+const wellUserList = ref([
+  {
+    name: '其他',
+    id: 'other',
+  },
+]) // 闸井负责人
+const userList = ref<any[]>([]) // 用户列表
+const fetchDict = () => {
+  getUserList({ offset: 1, limit: 9999, deptId: user.deptId }).then((res) => {
+    userList.value = res.data.rows.map((item: any) => ({
+      label: `${item.name}(${item.deptName})`,
+      value: item.id,
+      id: item.id,
+      phone: item.phone,
+      name: item.name,
+    }))
+  })
+}
+fetchDict()
+
+// 监视提醒人员 是否选择的其他
+const selectWellUser = (data: any) => {
+  if (data === 'other') {
+    isOtherUser.value = true
+    // dataForm.value.remindPersonId = ''
+    dataForm.value.remindPerson = ''
+  }
+  else {
+    isOtherUser.value = false
+  }
+}
+// 填充手机号等信息
+watch([
+  () => dataForm.value.remindPersonId,
+  () => dataForm.value.remindPersonOtherId,
+], (newVal) => {
+  if (!newVal[0] && !newVal[1]) {
+    return
+  }
+  // 负责人
+  if (newVal[0] && newVal[0] !== 'other') {
+    console.log(newVal)
+    // TODO
+    // 暂未开发，未提供负责人列表数据
+  }
+  // 其他人员
+  if (newVal[0] === 'other' && newVal[1]) {
+    // 填充
+    const person = userList.value.filter((item: any) => item.id === newVal[1])
+    if (person.length) {
+      dataForm.value.remindPersonOther = person[0].name
+      dataForm.value.telephone = person[0].phone
+    }
+  }
+}, {
+  deep: true,
+})
+</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="remindPersonId">
+            <el-select
+              v-model.trim="dataForm.remindPersonId" placeholder="提醒人员"
+              :style="`width:${isOtherUser ? '50' : '100'}%`" filterable @change="selectWellUser"
+            >
+              <el-option v-for="item in wellUserList" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select>
+            <el-select
+              v-if="isOtherUser" v-model.trim="dataForm.remindPersonOtherId" placeholder="提醒人员"
+              style="width: 50%;" filterable
+            >
+              <el-option v-for="item in userList" :key="item.id" :value="item.id" :label="item.label" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="联系方式" prop="telephone">
+            <el-input v-model.trim="dataForm.telephone" type="text" style="width: 100%;" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="提醒内容" prop="remindContent">
+            <el-input v-model.trim="dataForm.remindContent" type="textarea" :rows="3" style="width: 100%;" />
+          </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/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
new file mode 100644
index 0000000..a0d693f
--- /dev/null
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -0,0 +1,229 @@
+<!--
+  Description: 报警管理-信息窗体
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import pendingDialog from './pendingDialog.vue'
+import remindDialog from './remindDialog.vue'
+import { detailAlarm } from '@/api/home/alarm/current'
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+const info = ref({
+  alarmContent: '',
+  alarmMsg: '',
+  alarmCategoryName: '',
+  devcode: '',
+  ts: '',
+  position: '',
+  deptName: '',
+  responsibleDeptName: '',
+  manageType: '',
+})
+const initDialog = (e: any) => {
+  console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  dialogFormVisible.value = true
+  info.value = e.info
+  detailAlarm(e.info.id).then((res) => {
+    console.log(res.data, '123123123')
+  })
+}
+
+// 查看数据
+const viewData = () => {
+
+}
+// 更多
+const moreData = () => {
+
+}
+// 提醒责任人
+const remindRef = ref()
+const remind = () => {
+  remindRef.value.initDialog(info.value)
+}
+// 挂起
+const pendingRef = ref()
+const pending = () => {
+  pendingRef.value.initDialog(info.value)
+}
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
+    <!-- 挂起 -->
+    <pending-dialog ref="pendingRef" />
+    <!-- 提醒责任人 -->
+    <remind-dialog ref="remindRef" />
+    <!-- 头部 -->
+    <div class="header">
+      <span>{{ info.alarmContent }}</span>
+      <span class="more" @click="moreData">>>更多</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        报警类别:
+        <span style="padding-left: 6px;">
+          {{ info.alarmCategoryName }}
+        </span>
+      </div>
+      <div class="item">
+        报警原因:
+        <span style="padding-left: 6px;">
+          {{ info.alarmMsg }}
+        </span>
+      </div>
+      <div class="item" style="display: flex;justify-content: space-between;">
+        报警设备:
+        <span style="padding-left: 6px;">{{ info.devcode }} </span>
+        <el-button size="small" style="padding-left: 6px;" @click="viewData">
+          查看数据
+        </el-button>
+      </div>
+      <div class="item">
+        报警时间:
+        <span style="padding-left: 6px;">
+          {{ info.ts }}
+        </span>
+      </div>
+      <div class="item">
+        详细地址:
+        <span style="padding-left: 6px;">
+          {{ info.position }}
+        </span>
+      </div>
+      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
+      <div class="item">
+        管理单位:
+        <span style="padding-left: 6px;">
+          {{ info.deptName }}
+        </span>
+      </div>
+      <div class="item">
+        产权单位:
+        <span style="padding-left: 6px;">
+          {{ info.responsibleDeptName }}
+        </span>
+      </div>
+      <div class="item">
+        管理方式:
+        <span style="padding-left: 6px;">
+          {{ info.manageType }}
+        </span>
+      </div>
+      <div class="item">
+        负责人:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+      </div>
+      <div class="item">
+        状态:
+        <span style="padding-left: 6px;">
+          {{ info.status === '0' ? '已取消' : '正在报警' }}
+        </span>
+      </div>
+      <div class="item">
+        现场确认情况:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+        <el-button size="small" style="padding-left: 6px;">
+          流程图
+        </el-button>
+      </div>
+      <div class="item">
+        处置情况:
+        <span style="padding-left: 6px;">
+          {{ info.processStatusName }}
+        </span>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="remind">
+        提醒责任人
+      </el-button>
+      <el-button type="primary" size="small" @click="pending">
+        挂起
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
+}
+
+.container {
+  width: 270px;
+  padding: 10px;
+  background: rgba($color: #feffff, $alpha: 100%);
+  position: relative;
+  color: #464444;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .more {
+      color: #3d7eff;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .item {
+    margin: 5px 0;
+  }
+
+  .footer {
+    margin-top: 10px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index 30f312e..53fd910 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -4,12 +4,17 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 // 地图实例
 const mapRef = ref()
@@ -20,15 +25,73 @@
   completeFlag.value = true
   console.log('地图加载完成')
 }
+
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const markerClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.data.position)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: $props.data,
+    map: mapRef.value.map,
+  })
+  // setTimeout(() => {
+  //   mapRef.value.map.setFitView()
+  //   mapRef.value.map.setCenter(data.data.position)
+  // })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  // mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    // setTimeout(() => {
+    //   mapRef.value.map.setFitView()
+    // })
+    // mapRef.value.map.setCenter(data.lnglat)
+  })
+}
+
 defineExpose({
   mapRef,
   completeFlag,
+  openInfoDetail,
 })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
 
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
new file mode 100644
index 0000000..3199aed
--- /dev/null
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -0,0 +1,43 @@
+<!--
+  Description: 报警管理-查看数据(监控数据)
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="MonitorDataDialog">
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="查看数据" append-to-body>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @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/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
new file mode 100644
index 0000000..df1cd85
--- /dev/null
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -0,0 +1,103 @@
+<!--
+  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'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  suspendTime: '1',
+  suspendReason: '',
+  alarmId: '',
+}) // 表单
+const rules: FormRules = {
+  suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    suspendTime: '1',
+    suspendReason: '',
+    alarmId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      pendingAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        data.value.processStatus = 3
+        data.value.processStatusName = '挂起'
+      }).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="suspendReason">
+            <el-input
+              v-model.trim="dataForm.suspendReason" type="text" placeholder="挂起原因" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="挂起时间" prop="suspendTime">
+            <el-input-number v-model="dataForm.suspendTime" :min="1" :max="99" :step="1" step-strictly />
+          </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/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
new file mode 100644
index 0000000..76fb612
--- /dev/null
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  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 { remindAlarm } from '@/api/home/alarm/current'
+import { getUserList } from '@/api/system/user'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const isOtherUser = ref(false)
+const dataForm = ref({
+  alarmId: '',
+  remindContent: '',
+  remindPersonId: '',
+  remindPerson: '',
+  remindPersonOtherId: '',
+  remindPersonOther: '',
+  telephone: '',
+}) // 表单
+const rules: FormRules = {
+  remindContent: [{ required: true, message: '提醒内容不能为空', trigger: ['blur', 'change'] }],
+  remindPersonOtherId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
+  remindPersonId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmId: '',
+    remindContent: '',
+    remindPerson: '',
+    telephone: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+  isOtherUser.value = false
+  console.log(row, 'row')
+  dataForm.value.remindContent = `${row.ledgerNumber}${row.position}疑似发现${row.alarmMsg},请尽快去现场确认`
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        ...JSON.parse(JSON.stringify(dataForm.value)),
+      }
+      if (isOtherUser.value) {
+        data.remindPerson = ''
+        data.remindPersonId = ''
+      }
+      else {
+        data.remindPersonOther = ''
+        data.remindPersonOtherId = ''
+      }
+      remindAlarm(data).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        data.value.processStatus = 4
+        data.value.processStatusName = '待现场确认'
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+// 字典
+const wellUserList = ref([
+  {
+    name: '其他',
+    id: 'other',
+  },
+]) // 闸井负责人
+const userList = ref<any[]>([]) // 用户列表
+const fetchDict = () => {
+  getUserList({ offset: 1, limit: 9999, deptId: user.deptId }).then((res) => {
+    userList.value = res.data.rows.map((item: any) => ({
+      label: `${item.name}(${item.deptName})`,
+      value: item.id,
+      id: item.id,
+      phone: item.phone,
+      name: item.name,
+    }))
+  })
+}
+fetchDict()
+
+// 监视提醒人员 是否选择的其他
+const selectWellUser = (data: any) => {
+  if (data === 'other') {
+    isOtherUser.value = true
+    // dataForm.value.remindPersonId = ''
+    dataForm.value.remindPerson = ''
+  }
+  else {
+    isOtherUser.value = false
+  }
+}
+// 填充手机号等信息
+watch([
+  () => dataForm.value.remindPersonId,
+  () => dataForm.value.remindPersonOtherId,
+], (newVal) => {
+  if (!newVal[0] && !newVal[1]) {
+    return
+  }
+  // 负责人
+  if (newVal[0] && newVal[0] !== 'other') {
+    console.log(newVal)
+    // TODO
+    // 暂未开发，未提供负责人列表数据
+  }
+  // 其他人员
+  if (newVal[0] === 'other' && newVal[1]) {
+    // 填充
+    const person = userList.value.filter((item: any) => item.id === newVal[1])
+    if (person.length) {
+      dataForm.value.remindPersonOther = person[0].name
+      dataForm.value.telephone = person[0].phone
+    }
+  }
+}, {
+  deep: true,
+})
+</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="remindPersonId">
+            <el-select
+              v-model.trim="dataForm.remindPersonId" placeholder="提醒人员"
+              :style="`width:${isOtherUser ? '50' : '100'}%`" filterable @change="selectWellUser"
+            >
+              <el-option v-for="item in wellUserList" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select>
+            <el-select
+              v-if="isOtherUser" v-model.trim="dataForm.remindPersonOtherId" placeholder="提醒人员"
+              style="width: 50%;" filterable
+            >
+              <el-option v-for="item in userList" :key="item.id" :value="item.id" :label="item.label" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="联系方式" prop="telephone">
+            <el-input v-model.trim="dataForm.telephone" type="text" style="width: 100%;" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="提醒内容" prop="remindContent">
+            <el-input v-model.trim="dataForm.remindContent" type="textarea" :rows="3" style="width: 100%;" />
+          </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/index.vue b/src/views/home/alarm/current/index.vue
index 0c937fe..4bcec98 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -7,21 +7,29 @@
 import { ElMessage } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-
+import { getCurrentAlarmListPage, viewAlarm } 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'
+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 }[]>([]) // 报警等级
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const alarmStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 报警状态
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
-  { text: '报警等级', value: 'alarmRank', align: 'center' },
-  { text: '报警原因', value: 'alarmReason', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevelName', align: 'center' },
+  { text: '报警原因', value: 'alarmMsg', align: 'center' },
   { text: '位置', value: 'position', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
-  { text: '设备编号', value: 'deviceNo', align: 'center' },
-  { text: '管理单位', value: 'dept', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
+  { text: '状态', value: 'processStatusName', align: 'center' },
+  { text: '报警时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -34,126 +42,59 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  begTime: '',
+  endTime: '',
+  alarmCategory: '', // 报警类别
+  alarmLevel: '', // 报警等级
+  alarmTypeId: '', // 报警类型
+  deptId: '', // 管理单位
+  devCode: '', // 设备编号
+  devTypeId: '', // 设备类型
+  position: '', // 位置
+  processStatus: '', // 报警状态
 })
 // 开始结束时间
 const datetimerange = ref()
 watch(() => datetimerange.value, (newVal) => {
-  // listQuery.createTimeStart = ''
-  // listQuery.createTimeEnd = ''
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
   if (Array.isArray(newVal)) {
     if (newVal.length) {
-      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
-      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
     }
   }
 })
 // 查询数据
 const fetchData = () => {
-  setTimeout(() => {
+  loadingTable.value = true
+  getCurrentAlarmListPage(listQuery.value).then((res) => {
+    total.value = res.data.total
+    list1.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+    }))
     loadingTable.value = false
-    list1.value = [
-      {
-        alarmTypeName: '闸井浓度超限',
-        alarmRank: '一级',
-        alarmReason: '燃气浓度23%vol',
-        position: 'N121422南小街中压',
-        deviceType: '燃气智能监测终端',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '未读',
-        alarmTime: '2024-07-01 12:45:50',
-        lat: '39.91081620470105',
-        lng: '116.2590451793805',
-      },
-      {
-        alarmTypeName: '闸井浓度超限',
-        alarmRank: '二级',
-        alarmReason: '燃气浓度23%vol',
-        position: 'N121422南小街中压',
-        deviceType: '燃气智能监测终端',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '未读',
-        alarmTime: '',
-        lat: '39.911268',
-        lng: '116.343489',
-      },
-      {
-        alarmTypeName: '疑似第三方破坏',
-        alarmRank: '一级',
-        alarmReason: '桩倾斜报警',
-        position: 'N121422南小街中压',
-        deviceType: '智能监测桩',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '已确认',
-        alarmTime: '',
-        lat: '39.943322',
-        lng: '116.403976',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-        lat: '39.901552',
-        lng: '116.398043',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-    ] as any[]
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
-
+  listQuery.value = {
+    limit: 20,
+    offset: 1,
+    begTime: '',
+    endTime: '',
+    alarmCategory: '', // 报警类别
+    alarmLevel: '', // 报警等级
+    alarmTypeId: '', // 报警类型
+    deptId: '', // 管理单位
+    devCode: '', // 设备编号
+    devTypeId: '', // 设备类型
+    position: '', // 位置
+    processStatus: '', // 报警状态
+  }
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size: number; page: number }) => {
@@ -172,7 +113,7 @@
 // 表格标识  地图或普通
 const tableFlag = ref('normal')
 const tableHeight = ref(0)
-const switchMode = (type: string) => {
+const switchMode = async (type: string) => {
   if (!list1.value.length) {
     ElMessage.warning('暂无数据')
     return
@@ -190,36 +131,95 @@
 })
 // 查看报警
 const mapRef = ref()
+const mapData = ref({})
 const detail = (row: any) => {
+  mapData.value = row
   switchMode('map')
+  row.lngGaode = '116.398043'
+  row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
-    mapRef.value.mapRef.map.setCenter([row.lng, row.lat])
     mapRef.value.mapRef.removeMarker()
     mapRef.value.mapRef.addMarker({
-      position: [row.lng, row.lat],
-      content: '',
+      position: [row.lngGaode, row.latGaode],
+      content: '<div class="spread-circle"></div>',
       label: '',
     })
+    mapRef.value.mapRef.map.setFitView()
+    mapRef.value.mapRef.map.setZoom(15)
+    mapRef.value.openInfoDetail({
+      ...row,
+      lnglat: [row.lngGaode, row.latGaode],
+    })
   }
   setTimeout(() => {
-    if (!row.lng || !row.lat) {
+    if (!row.lngGaode || !row.latGaode) {
       ElMessage.warning('该数据缺少坐标信息')
       return
     }
-    if (mapRef.value.completeFlag) {
-      draw()
+    // 已读
+    if (row.processStatus === '0') {
+      viewAlarm(row.id).then(() => {
+        row.processStatus = 2
+        row.processStatusName = '已读'
+        if (mapRef.value.completeFlag) {
+          draw()
+        }
+        else {
+          setTimeout(() => {
+            draw()
+          }, 1000)
+        }
+      })
     }
     else {
-      setTimeout(() => {
+      if (mapRef.value.completeFlag) {
         draw()
-      }, 1000)
+      }
+      else {
+        setTimeout(() => {
+          draw()
+        }, 1000)
+      }
     }
-    // console.log(mapRef.value)
-    // lat: '39.901552',
-    // lng: '116.398043',
   })
 }
+// 字典
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 99999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 报警状态
+  getDictByCode('alarmStatus').then((res) => {
+    alarmStatusList.value = res.data
+  })
+}
+fetchDict()
 </script>
 
 <template>
@@ -228,28 +228,41 @@
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警类别" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.alarmCategory" placeholder="报警类别" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmCategoryList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警类型" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.alarmTypeId" placeholder="报警类型" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmTypeList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警等级" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.alarmLevel" placeholder="报警等级" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmLevelList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in deviceTypeList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警状态" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.processStatus" placeholder="报警状态" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmStatusList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="位置" clearable />
+        <el-input v-model.trim="listQuery.position" placeholder="位置" clearable />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
+        <el-input v-model.trim="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" class="select" style="width: 192px;" />
+        <dept-select
+          v-model="listQuery.deptId" placeholder="管理单位" :clearable="true" class="select"
+          style="width: 192px;"
+        />
       </search-item>
       <search-item>
         <el-date-picker
@@ -300,7 +313,7 @@
             </template>
           </normal-table>
           <!-- 打开关闭地图模式 -->
-          <div v-if="tableFlag !== 'normal'" class="mapMode" :style="`height: ${tableHeight}px`">
+          <div v-if="tableFlag !== 'normal'" id="mapMode" class="mapMode" :style="`height: ${tableHeight}px`">
             <!-- 打开 -->
             <div v-if="tableFlag === 'normal'" class="open" @click="switchMode('map')">
               <el-icon :size="30">
@@ -317,12 +330,22 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight" />
+        <map-com ref="mapRef" :height="tableHeight < 600 ? 600 : tableHeight" :data="mapData" />
       </div>
     </div>
   </app-container>
 </template>
 
+<style lang="scss">
+.spread-circle {
+  width: 25px;
+  height: 25px;
+  // background-color: #EE9611;
+  border-radius: 50%;
+  background: url("@/assets/images/spread.gif") no-repeat center center / cover;
+}
+</style>
+
 <style lang="scss" scoped>
 .table {
   width: 100% !important;
@@ -351,6 +374,8 @@
     transform: translateY(-50%);
 
     &:hover {
+      // cursor: col-resize;
+
       .open,
       .close {
         display: block;

diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
new file mode 100644
index 0000000..c78804a
--- /dev/null
+++ b/src/api/home/alarm/current.ts
@@ -0,0 +1,49 @@
+/**
+ * 当前报警接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getCurrentAlarmListPage(data: any) {
+  return request({
+    url: `/system/alarmRecords/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 已读
+export function viewAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/read',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 查看
+export function detailAlarm(id: any) {
+  return request({
+    url: '/system/alarmRecords/view',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+// 挂起
+export function pendingAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/suspend',
+    method: 'post',
+    data,
+  })
+}
+// 提醒责任人
+export function remindAlarm(data: any) {
+  return request({
+    url: '/system/alarmRecords/remind',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/spread.gif b/src/assets/images/spread.gif
new file mode 100644
index 0000000..bad5c84
--- /dev/null
+++ b/src/assets/images/spread.gif
Binary files differ
diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue
new file mode 100644
index 0000000..a0d693f
--- /dev/null
+++ b/src/views/home/alarm/current/components/detailInfoDialog.vue
@@ -0,0 +1,229 @@
+<!--
+  Description: 报警管理-信息窗体
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="infoWindow">
+import pendingDialog from './pendingDialog.vue'
+import remindDialog from './remindDialog.vue'
+import { detailAlarm } from '@/api/home/alarm/current'
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+const info = ref({
+  alarmContent: '',
+  alarmMsg: '',
+  alarmCategoryName: '',
+  devcode: '',
+  ts: '',
+  position: '',
+  deptName: '',
+  responsibleDeptName: '',
+  manageType: '',
+})
+const initDialog = (e: any) => {
+  console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  dialogFormVisible.value = true
+  info.value = e.info
+  detailAlarm(e.info.id).then((res) => {
+    console.log(res.data, '123123123')
+  })
+}
+
+// 查看数据
+const viewData = () => {
+
+}
+// 更多
+const moreData = () => {
+
+}
+// 提醒责任人
+const remindRef = ref()
+const remind = () => {
+  remindRef.value.initDialog(info.value)
+}
+// 挂起
+const pendingRef = ref()
+const pending = () => {
+  pendingRef.value.initDialog(info.value)
+}
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
+    <!-- 挂起 -->
+    <pending-dialog ref="pendingRef" />
+    <!-- 提醒责任人 -->
+    <remind-dialog ref="remindRef" />
+    <!-- 头部 -->
+    <div class="header">
+      <span>{{ info.alarmContent }}</span>
+      <span class="more" @click="moreData">>>更多</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        报警类别:
+        <span style="padding-left: 6px;">
+          {{ info.alarmCategoryName }}
+        </span>
+      </div>
+      <div class="item">
+        报警原因:
+        <span style="padding-left: 6px;">
+          {{ info.alarmMsg }}
+        </span>
+      </div>
+      <div class="item" style="display: flex;justify-content: space-between;">
+        报警设备:
+        <span style="padding-left: 6px;">{{ info.devcode }} </span>
+        <el-button size="small" style="padding-left: 6px;" @click="viewData">
+          查看数据
+        </el-button>
+      </div>
+      <div class="item">
+        报警时间:
+        <span style="padding-left: 6px;">
+          {{ info.ts }}
+        </span>
+      </div>
+      <div class="item">
+        详细地址:
+        <span style="padding-left: 6px;">
+          {{ info.position }}
+        </span>
+      </div>
+      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
+      <div class="item">
+        管理单位:
+        <span style="padding-left: 6px;">
+          {{ info.deptName }}
+        </span>
+      </div>
+      <div class="item">
+        产权单位:
+        <span style="padding-left: 6px;">
+          {{ info.responsibleDeptName }}
+        </span>
+      </div>
+      <div class="item">
+        管理方式:
+        <span style="padding-left: 6px;">
+          {{ info.manageType }}
+        </span>
+      </div>
+      <div class="item">
+        负责人:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+      </div>
+      <div class="item">
+        状态:
+        <span style="padding-left: 6px;">
+          {{ info.status === '0' ? '已取消' : '正在报警' }}
+        </span>
+      </div>
+      <div class="item">
+        现场确认情况:
+        <span style="padding-left: 6px;">
+          {{ }}
+        </span>
+        <el-button size="small" style="padding-left: 6px;">
+          流程图
+        </el-button>
+      </div>
+      <div class="item">
+        处置情况:
+        <span style="padding-left: 6px;">
+          {{ info.processStatusName }}
+        </span>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="small" @click="remind">
+        提醒责任人
+      </el-button>
+      <el-button type="primary" size="small" @click="pending">
+        挂起
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
+}
+
+.container {
+  width: 270px;
+  padding: 10px;
+  background: rgba($color: #feffff, $alpha: 100%);
+  position: relative;
+  color: #464444;
+  font-size: 14px;
+  border-radius: 4px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .more {
+      color: #3d7eff;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .item {
+    margin: 5px 0;
+  }
+
+  .footer {
+    margin-top: 10px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>
diff --git a/src/views/home/alarm/current/components/map.vue b/src/views/home/alarm/current/components/map.vue
index 30f312e..53fd910 100644
--- a/src/views/home/alarm/current/components/map.vue
+++ b/src/views/home/alarm/current/components/map.vue
@@ -4,12 +4,17 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 // 地图实例
 const mapRef = ref()
@@ -20,15 +25,73 @@
   completeFlag.value = true
   console.log('地图加载完成')
 }
+
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const markerClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.data.position)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: $props.data,
+    map: mapRef.value.map,
+  })
+  // setTimeout(() => {
+  //   mapRef.value.map.setFitView()
+  //   mapRef.value.map.setCenter(data.data.position)
+  // })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  // mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    // setTimeout(() => {
+    //   mapRef.value.map.setFitView()
+    // })
+    // mapRef.value.map.setCenter(data.lnglat)
+  })
+}
+
 defineExpose({
   mapRef,
   completeFlag,
+  openInfoDetail,
 })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map ref="mapRef" :zoom="14" @complete="completeMap" />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <a-map ref="mapRef" :zoom="14" @complete="completeMap" @markerClick="markerClick" />
   </div>
 </template>
 
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
new file mode 100644
index 0000000..3199aed
--- /dev/null
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -0,0 +1,43 @@
+<!--
+  Description: 报警管理-查看数据(监控数据)
+  Author: 李亚光
+  Date: 2024-09-10
+ -->
+<script lang="ts" setup name="MonitorDataDialog">
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+
+// 初始化对话框
+const initDialog = (row: any) => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="查看数据" append-to-body>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @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/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
new file mode 100644
index 0000000..df1cd85
--- /dev/null
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -0,0 +1,103 @@
+<!--
+  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'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dataForm = ref({
+  suspendTime: '1',
+  suspendReason: '',
+  alarmId: '',
+}) // 表单
+const rules: FormRules = {
+  suspendReason: [{ required: true, message: '挂起原因不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    suspendTime: '1',
+    suspendReason: '',
+    alarmId: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      pendingAlarm(dataForm.value).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        data.value.processStatus = 3
+        data.value.processStatusName = '挂起'
+      }).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="suspendReason">
+            <el-input
+              v-model.trim="dataForm.suspendReason" type="text" placeholder="挂起原因" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="挂起时间" prop="suspendTime">
+            <el-input-number v-model="dataForm.suspendTime" :min="1" :max="99" :step="1" step-strictly />
+          </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/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
new file mode 100644
index 0000000..76fb612
--- /dev/null
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  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 { remindAlarm } from '@/api/home/alarm/current'
+import { getUserList } from '@/api/system/user'
+import useUserStore from '@/store/modules/user'
+const emits = defineEmits(['refresh'])
+const user = useUserStore()
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const isOtherUser = ref(false)
+const dataForm = ref({
+  alarmId: '',
+  remindContent: '',
+  remindPersonId: '',
+  remindPerson: '',
+  remindPersonOtherId: '',
+  remindPersonOther: '',
+  telephone: '',
+}) // 表单
+const rules: FormRules = {
+  remindContent: [{ required: true, message: '提醒内容不能为空', trigger: ['blur', 'change'] }],
+  remindPersonOtherId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
+  remindPersonId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmId: '',
+    remindContent: '',
+    remindPerson: '',
+    telephone: '',
+  }
+}
+
+// 初始化对话框
+const data = ref()
+const initDialog = (row: any) => {
+  data.value = row
+  dialogFormVisible.value = true
+  resetForm()
+  dataForm.value.alarmId = row.id
+  isOtherUser.value = false
+  console.log(row, 'row')
+  dataForm.value.remindContent = `${row.ledgerNumber}${row.position}疑似发现${row.alarmMsg},请尽快去现场确认`
+}
+defineExpose({
+  initDialog,
+})
+
+// 保存数据
+const saveData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        ...JSON.parse(JSON.stringify(dataForm.value)),
+      }
+      if (isOtherUser.value) {
+        data.remindPerson = ''
+        data.remindPersonId = ''
+      }
+      else {
+        data.remindPersonOther = ''
+        data.remindPersonOtherId = ''
+      }
+      remindAlarm(data).then((res) => {
+        ElMessage.success('操作成功')
+        dialogFormVisible.value = false
+        data.value.processStatus = 4
+        data.value.processStatusName = '待现场确认'
+      }).catch(() => {
+        // ElMessage.success('操作成功')
+      })
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+// 字典
+const wellUserList = ref([
+  {
+    name: '其他',
+    id: 'other',
+  },
+]) // 闸井负责人
+const userList = ref<any[]>([]) // 用户列表
+const fetchDict = () => {
+  getUserList({ offset: 1, limit: 9999, deptId: user.deptId }).then((res) => {
+    userList.value = res.data.rows.map((item: any) => ({
+      label: `${item.name}(${item.deptName})`,
+      value: item.id,
+      id: item.id,
+      phone: item.phone,
+      name: item.name,
+    }))
+  })
+}
+fetchDict()
+
+// 监视提醒人员 是否选择的其他
+const selectWellUser = (data: any) => {
+  if (data === 'other') {
+    isOtherUser.value = true
+    // dataForm.value.remindPersonId = ''
+    dataForm.value.remindPerson = ''
+  }
+  else {
+    isOtherUser.value = false
+  }
+}
+// 填充手机号等信息
+watch([
+  () => dataForm.value.remindPersonId,
+  () => dataForm.value.remindPersonOtherId,
+], (newVal) => {
+  if (!newVal[0] && !newVal[1]) {
+    return
+  }
+  // 负责人
+  if (newVal[0] && newVal[0] !== 'other') {
+    console.log(newVal)
+    // TODO
+    // 暂未开发，未提供负责人列表数据
+  }
+  // 其他人员
+  if (newVal[0] === 'other' && newVal[1]) {
+    // 填充
+    const person = userList.value.filter((item: any) => item.id === newVal[1])
+    if (person.length) {
+      dataForm.value.remindPersonOther = person[0].name
+      dataForm.value.telephone = person[0].phone
+    }
+  }
+}, {
+  deep: true,
+})
+</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="remindPersonId">
+            <el-select
+              v-model.trim="dataForm.remindPersonId" placeholder="提醒人员"
+              :style="`width:${isOtherUser ? '50' : '100'}%`" filterable @change="selectWellUser"
+            >
+              <el-option v-for="item in wellUserList" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select>
+            <el-select
+              v-if="isOtherUser" v-model.trim="dataForm.remindPersonOtherId" placeholder="提醒人员"
+              style="width: 50%;" filterable
+            >
+              <el-option v-for="item in userList" :key="item.id" :value="item.id" :label="item.label" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="联系方式" prop="telephone">
+            <el-input v-model.trim="dataForm.telephone" type="text" style="width: 100%;" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="提醒内容" prop="remindContent">
+            <el-input v-model.trim="dataForm.remindContent" type="textarea" :rows="3" style="width: 100%;" />
+          </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/index.vue b/src/views/home/alarm/current/index.vue
index 0c937fe..4bcec98 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -7,21 +7,29 @@
 import { ElMessage } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-
+import { getCurrentAlarmListPage, viewAlarm } 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'
+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 }[]>([]) // 报警等级
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const alarmStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 报警状态
 // 表格数据
 const list1 = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
-  { text: '报警等级', value: 'alarmRank', align: 'center' },
-  { text: '报警原因', value: 'alarmReason', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevelName', align: 'center' },
+  { text: '报警原因', value: 'alarmMsg', align: 'center' },
   { text: '位置', value: 'position', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
-  { text: '设备编号', value: 'deviceNo', align: 'center' },
-  { text: '管理单位', value: 'dept', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
+  { text: '状态', value: 'processStatusName', align: 'center' },
+  { text: '报警时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -34,126 +42,59 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  begTime: '',
+  endTime: '',
+  alarmCategory: '', // 报警类别
+  alarmLevel: '', // 报警等级
+  alarmTypeId: '', // 报警类型
+  deptId: '', // 管理单位
+  devCode: '', // 设备编号
+  devTypeId: '', // 设备类型
+  position: '', // 位置
+  processStatus: '', // 报警状态
 })
 // 开始结束时间
 const datetimerange = ref()
 watch(() => datetimerange.value, (newVal) => {
-  // listQuery.createTimeStart = ''
-  // listQuery.createTimeEnd = ''
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
   if (Array.isArray(newVal)) {
     if (newVal.length) {
-      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
-      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+      listQuery.value.begTime = `${newVal[0]} 00:00:00`
+      listQuery.value.endTime = `${newVal[1]} 23:59:59`
     }
   }
 })
 // 查询数据
 const fetchData = () => {
-  setTimeout(() => {
+  loadingTable.value = true
+  getCurrentAlarmListPage(listQuery.value).then((res) => {
+    total.value = res.data.total
+    list1.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
+    }))
     loadingTable.value = false
-    list1.value = [
-      {
-        alarmTypeName: '闸井浓度超限',
-        alarmRank: '一级',
-        alarmReason: '燃气浓度23%vol',
-        position: 'N121422南小街中压',
-        deviceType: '燃气智能监测终端',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '未读',
-        alarmTime: '2024-07-01 12:45:50',
-        lat: '39.91081620470105',
-        lng: '116.2590451793805',
-      },
-      {
-        alarmTypeName: '闸井浓度超限',
-        alarmRank: '二级',
-        alarmReason: '燃气浓度23%vol',
-        position: 'N121422南小街中压',
-        deviceType: '燃气智能监测终端',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '未读',
-        alarmTime: '',
-        lat: '39.911268',
-        lng: '116.343489',
-      },
-      {
-        alarmTypeName: '疑似第三方破坏',
-        alarmRank: '一级',
-        alarmReason: '桩倾斜报警',
-        position: 'N121422南小街中压',
-        deviceType: '智能监测桩',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '已确认',
-        alarmTime: '',
-        lat: '39.943322',
-        lng: '116.403976',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-        lat: '39.901552',
-        lng: '116.398043',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-      {
-        alarmTypeName: '设备故障',
-        alarmRank: '三级',
-        alarmReason: '传感器异常',
-        position: '422南小街中压',
-        deviceType: '管线哨兵',
-        deviceNo: '342022010027',
-        dept: '第一分公司/运维1所/1班',
-        status: '挂起',
-        alarmTime: '',
-      },
-    ] as any[]
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
-
+  listQuery.value = {
+    limit: 20,
+    offset: 1,
+    begTime: '',
+    endTime: '',
+    alarmCategory: '', // 报警类别
+    alarmLevel: '', // 报警等级
+    alarmTypeId: '', // 报警类型
+    deptId: '', // 管理单位
+    devCode: '', // 设备编号
+    devTypeId: '', // 设备类型
+    position: '', // 位置
+    processStatus: '', // 报警状态
+  }
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size: number; page: number }) => {
@@ -172,7 +113,7 @@
 // 表格标识  地图或普通
 const tableFlag = ref('normal')
 const tableHeight = ref(0)
-const switchMode = (type: string) => {
+const switchMode = async (type: string) => {
   if (!list1.value.length) {
     ElMessage.warning('暂无数据')
     return
@@ -190,36 +131,95 @@
 })
 // 查看报警
 const mapRef = ref()
+const mapData = ref({})
 const detail = (row: any) => {
+  mapData.value = row
   switchMode('map')
+  row.lngGaode = '116.398043'
+  row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
-    mapRef.value.mapRef.map.setCenter([row.lng, row.lat])
     mapRef.value.mapRef.removeMarker()
     mapRef.value.mapRef.addMarker({
-      position: [row.lng, row.lat],
-      content: '',
+      position: [row.lngGaode, row.latGaode],
+      content: '<div class="spread-circle"></div>',
       label: '',
     })
+    mapRef.value.mapRef.map.setFitView()
+    mapRef.value.mapRef.map.setZoom(15)
+    mapRef.value.openInfoDetail({
+      ...row,
+      lnglat: [row.lngGaode, row.latGaode],
+    })
   }
   setTimeout(() => {
-    if (!row.lng || !row.lat) {
+    if (!row.lngGaode || !row.latGaode) {
       ElMessage.warning('该数据缺少坐标信息')
       return
     }
-    if (mapRef.value.completeFlag) {
-      draw()
+    // 已读
+    if (row.processStatus === '0') {
+      viewAlarm(row.id).then(() => {
+        row.processStatus = 2
+        row.processStatusName = '已读'
+        if (mapRef.value.completeFlag) {
+          draw()
+        }
+        else {
+          setTimeout(() => {
+            draw()
+          }, 1000)
+        }
+      })
     }
     else {
-      setTimeout(() => {
+      if (mapRef.value.completeFlag) {
         draw()
-      }, 1000)
+      }
+      else {
+        setTimeout(() => {
+          draw()
+        }, 1000)
+      }
     }
-    // console.log(mapRef.value)
-    // lat: '39.901552',
-    // lng: '116.398043',
   })
 }
+// 字典
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 99999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 报警状态
+  getDictByCode('alarmStatus').then((res) => {
+    alarmStatusList.value = res.data
+  })
+}
+fetchDict()
 </script>
 
 <template>
@@ -228,28 +228,41 @@
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警类别" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.alarmCategory" placeholder="报警类别" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmCategoryList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警类型" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.alarmTypeId" placeholder="报警类型" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmTypeList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警等级" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.alarmLevel" placeholder="报警等级" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmLevelList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in deviceTypeList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="报警状态" clearable class="select" style="width: 192px;" />
+        <el-select v-model="listQuery.processStatus" placeholder="报警状态" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in alarmStatusList" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="位置" clearable />
+        <el-input v-model.trim="listQuery.position" placeholder="位置" clearable />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
+        <el-input v-model.trim="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" class="select" style="width: 192px;" />
+        <dept-select
+          v-model="listQuery.deptId" placeholder="管理单位" :clearable="true" class="select"
+          style="width: 192px;"
+        />
       </search-item>
       <search-item>
         <el-date-picker
@@ -300,7 +313,7 @@
             </template>
           </normal-table>
           <!-- 打开关闭地图模式 -->
-          <div v-if="tableFlag !== 'normal'" class="mapMode" :style="`height: ${tableHeight}px`">
+          <div v-if="tableFlag !== 'normal'" id="mapMode" class="mapMode" :style="`height: ${tableHeight}px`">
             <!-- 打开 -->
             <div v-if="tableFlag === 'normal'" class="open" @click="switchMode('map')">
               <el-icon :size="30">
@@ -317,12 +330,22 @@
       </div>
       <!-- 地图 -->
       <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
-        <map-com ref="mapRef" :height="tableHeight" />
+        <map-com ref="mapRef" :height="tableHeight < 600 ? 600 : tableHeight" :data="mapData" />
       </div>
     </div>
   </app-container>
 </template>
 
+<style lang="scss">
+.spread-circle {
+  width: 25px;
+  height: 25px;
+  // background-color: #EE9611;
+  border-radius: 50%;
+  background: url("@/assets/images/spread.gif") no-repeat center center / cover;
+}
+</style>
+
 <style lang="scss" scoped>
 .table {
   width: 100% !important;
@@ -351,6 +374,8 @@
     transform: translateY(-50%);
 
     &:hover {
+      // cursor: col-resize;
+
       .open,
       .close {
         display: block;
diff --git a/src/views/home/rule/special/index.vue b/src/views/home/rule/special/index.vue
index 65f2650..5c7b67c 100644
--- a/src/views/home/rule/special/index.vue
+++ b/src/views/home/rule/special/index.vue
@@ -40,11 +40,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getSpecialAlarmRuleListPage(listQuery.value).then((res) => {
-    console.log(res.data.rows, '123321')
-    list.value = res.data.rows.map((item: any) => ({
-      ...item,
-      // deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-    }))
+    list.value = res.data.rows
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {