diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+

diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
new file mode 100644
index 0000000..df323f8
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
Binary files differ

diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
new file mode 100644
index 0000000..df323f8
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
new file mode 100644
index 0000000..1b317a6
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
Binary files differ

diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
new file mode 100644
index 0000000..df323f8
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
new file mode 100644
index 0000000..1b317a6
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
new file mode 100644
index 0000000..a5517bf
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
Binary files differ

diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
new file mode 100644
index 0000000..df323f8
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
new file mode 100644
index 0000000..1b317a6
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
new file mode 100644
index 0000000..a5517bf
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
Binary files differ
diff --git a/src/pages/ywts/cszl/gw/alarmPop.vue b/src/pages/ywts/cszl/gw/alarmPop.vue
index 5c8660a..439fc5a 100644
--- a/src/pages/ywts/cszl/gw/alarmPop.vue
+++ b/src/pages/ywts/cszl/gw/alarmPop.vue
@@ -1,16 +1,33 @@
 <template>
-  <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gwAlarmInfo.showType]  }">
-    <i class="el-icon-close close-pop" @click="$emit('close')" />
-    <div class="list-down" style="width: 100%;margin: 0 auto;">
-      <div class="list-item">
-        <div style="width:100%;">
-          <div style="width: 100%">
-            <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
-            <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
-            <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
-            <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+  <div>
+    <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`  }">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
+              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
+              <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;" :title="gwAlarmInfo.alarmcontent"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="video-area" style="position: fixed; top: 12%;right: 1%;">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <i class="el-icon-camera-solid item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频编号: {{ gwAlarmInfo.videoNo }}</span></i>
+              <i class="el-icon-s-platform item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频名称: {{ gwAlarmInfo.videoName }}</span></i>
+              <i class="el-icon-refrigerator item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">是否赋能: {{ gwAlarmInfo.empowerment }}</span></i>
+              <video :src="gwAlarmInfo.historyVideo" width="100%" height="200px" controls muted autoplay style="margin-top: 10px;"></video>
+            </div>
           </div>
         </div>
       </div>
@@ -20,12 +37,13 @@
 
 <script>
 import { showPositin } from '@/utils/freedo/index'
+import { getAlarmDetail } from "../../../../api/ywts/cszl/gw";
 export default {
-  name: 'videoPop',
+  name: 'alarmPop',
   data() {
     return {
-      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
       list: ['', '', '', ''],
       gwAlarmInfo: {},
       windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
@@ -69,6 +87,19 @@
         }
       }
       this.gwAlarmInfo = item
+      this.fetchAlarmDetail(item.lotid)
+      console.log('打开告警弹窗', this.windowPostion)
+    },
+    // // 获取报警视频
+    fetchAlarmDetail(lotId) {
+      getAlarmDetail({ lotId: lotId }).then(response => {
+        if(response.code === 200 && response.data && response.data.value && response.data.value.length) {
+          this.gwAlarmInfo = {
+            ...this.gwAlarmInfo,
+            ...response.data.value[0],
+          }
+        }
+      })
     }
   },
 }
@@ -86,6 +117,14 @@
 
 }
 
+.video-area {
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+}
+
 .bottom {
   z-index: 111111111111;
   width: 100%;

diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
new file mode 100644
index 0000000..df323f8
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
new file mode 100644
index 0000000..1b317a6
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
new file mode 100644
index 0000000..a5517bf
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
Binary files differ
diff --git a/src/pages/ywts/cszl/gw/alarmPop.vue b/src/pages/ywts/cszl/gw/alarmPop.vue
index 5c8660a..439fc5a 100644
--- a/src/pages/ywts/cszl/gw/alarmPop.vue
+++ b/src/pages/ywts/cszl/gw/alarmPop.vue
@@ -1,16 +1,33 @@
 <template>
-  <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gwAlarmInfo.showType]  }">
-    <i class="el-icon-close close-pop" @click="$emit('close')" />
-    <div class="list-down" style="width: 100%;margin: 0 auto;">
-      <div class="list-item">
-        <div style="width:100%;">
-          <div style="width: 100%">
-            <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
-            <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
-            <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
-            <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+  <div>
+    <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`  }">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
+              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
+              <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;" :title="gwAlarmInfo.alarmcontent"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="video-area" style="position: fixed; top: 12%;right: 1%;">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <i class="el-icon-camera-solid item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频编号: {{ gwAlarmInfo.videoNo }}</span></i>
+              <i class="el-icon-s-platform item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频名称: {{ gwAlarmInfo.videoName }}</span></i>
+              <i class="el-icon-refrigerator item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">是否赋能: {{ gwAlarmInfo.empowerment }}</span></i>
+              <video :src="gwAlarmInfo.historyVideo" width="100%" height="200px" controls muted autoplay style="margin-top: 10px;"></video>
+            </div>
           </div>
         </div>
       </div>
@@ -20,12 +37,13 @@
 
 <script>
 import { showPositin } from '@/utils/freedo/index'
+import { getAlarmDetail } from "../../../../api/ywts/cszl/gw";
 export default {
-  name: 'videoPop',
+  name: 'alarmPop',
   data() {
     return {
-      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
       list: ['', '', '', ''],
       gwAlarmInfo: {},
       windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
@@ -69,6 +87,19 @@
         }
       }
       this.gwAlarmInfo = item
+      this.fetchAlarmDetail(item.lotid)
+      console.log('打开告警弹窗', this.windowPostion)
+    },
+    // // 获取报警视频
+    fetchAlarmDetail(lotId) {
+      getAlarmDetail({ lotId: lotId }).then(response => {
+        if(response.code === 200 && response.data && response.data.value && response.data.value.length) {
+          this.gwAlarmInfo = {
+            ...this.gwAlarmInfo,
+            ...response.data.value[0],
+          }
+        }
+      })
     }
   },
 }
@@ -86,6 +117,14 @@
 
 }
 
+.video-area {
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+}
+
 .bottom {
   z-index: 111111111111;
   width: 100%;
diff --git a/src/pages/ywts/cszl/gw/eventPop.vue b/src/pages/ywts/cszl/gw/eventPop.vue
new file mode 100644
index 0000000..9a45ce9
--- /dev/null
+++ b/src/pages/ywts/cszl/gw/eventPop.vue
@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div class="video-area" style="position: fixed; top: 12%;right: 1%;">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 360px">
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件名称: {{ gwEventInfo.eventname }}</span></i>
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件类型: {{ gwEventInfo.eventypename }}</span></i>
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件来源: {{ gwEventInfo.eventsource }}</span></i>
+              <i class="el-icon-open item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件状态: {{ gwEventInfo.eventstatusname }}</span></i>
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">责任部门: {{ gwEventInfo.dutydeptname }}</span></i>
+              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">点位设备名称: {{ gwEventInfo.devicename }}</span></i>
+              <i class="el-icon-warning-outline item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">紧急程度: {{ gwEventInfo.urgencyname }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">发送人: {{ gwEventInfo.sender }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">接收人: {{ gwEventInfo.receiver }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">上报人: {{ gwEventInfo.report }}</span></i>
+              <i class="el-icon-time item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">上报时间: {{ gwEventInfo.createtime }}</span></i>
+              <i class="el-icon-location item-line one-line" style="width: 100%;" :title="gwEventInfo.location" ><span style="margin-left: 5px">位置: {{ gwEventInfo.location }}</span></i>
+              <i class="el-icon-crop item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">覆盖范围: {{ gwEventInfo.cover }}</span></i>
+              <i class="el-icon-document item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">处置详情: {{ gwEventInfo.details }}</span></i>
+              <i class="el-icon-picture item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">图片: <el-image :src="gwEventInfo.imgurl" style="width: 200px;height: 120px;" mode="fill" /></span></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+// import { getAlarmDetail } from "../../../../api/ywts/cszl/gw";
+export default {
+  name: 'alarmPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
+      list: ['', '', '', ''],
+      gwEventInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '135px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gwEventInfo = item
+      console.log('-----this.gwEventInfo ------', this.gwEventInfo);
+    },
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.video-area {
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>

diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
new file mode 100644
index 0000000..df323f8
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
new file mode 100644
index 0000000..1b317a6
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
new file mode 100644
index 0000000..a5517bf
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
Binary files differ
diff --git a/src/pages/ywts/cszl/gw/alarmPop.vue b/src/pages/ywts/cszl/gw/alarmPop.vue
index 5c8660a..439fc5a 100644
--- a/src/pages/ywts/cszl/gw/alarmPop.vue
+++ b/src/pages/ywts/cszl/gw/alarmPop.vue
@@ -1,16 +1,33 @@
 <template>
-  <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gwAlarmInfo.showType]  }">
-    <i class="el-icon-close close-pop" @click="$emit('close')" />
-    <div class="list-down" style="width: 100%;margin: 0 auto;">
-      <div class="list-item">
-        <div style="width:100%;">
-          <div style="width: 100%">
-            <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
-            <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
-            <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
-            <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+  <div>
+    <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`  }">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
+              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
+              <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;" :title="gwAlarmInfo.alarmcontent"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="video-area" style="position: fixed; top: 12%;right: 1%;">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <i class="el-icon-camera-solid item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频编号: {{ gwAlarmInfo.videoNo }}</span></i>
+              <i class="el-icon-s-platform item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频名称: {{ gwAlarmInfo.videoName }}</span></i>
+              <i class="el-icon-refrigerator item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">是否赋能: {{ gwAlarmInfo.empowerment }}</span></i>
+              <video :src="gwAlarmInfo.historyVideo" width="100%" height="200px" controls muted autoplay style="margin-top: 10px;"></video>
+            </div>
           </div>
         </div>
       </div>
@@ -20,12 +37,13 @@
 
 <script>
 import { showPositin } from '@/utils/freedo/index'
+import { getAlarmDetail } from "../../../../api/ywts/cszl/gw";
 export default {
-  name: 'videoPop',
+  name: 'alarmPop',
   data() {
     return {
-      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
       list: ['', '', '', ''],
       gwAlarmInfo: {},
       windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
@@ -69,6 +87,19 @@
         }
       }
       this.gwAlarmInfo = item
+      this.fetchAlarmDetail(item.lotid)
+      console.log('打开告警弹窗', this.windowPostion)
+    },
+    // // 获取报警视频
+    fetchAlarmDetail(lotId) {
+      getAlarmDetail({ lotId: lotId }).then(response => {
+        if(response.code === 200 && response.data && response.data.value && response.data.value.length) {
+          this.gwAlarmInfo = {
+            ...this.gwAlarmInfo,
+            ...response.data.value[0],
+          }
+        }
+      })
     }
   },
 }
@@ -86,6 +117,14 @@
 
 }
 
+.video-area {
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+}
+
 .bottom {
   z-index: 111111111111;
   width: 100%;
diff --git a/src/pages/ywts/cszl/gw/eventPop.vue b/src/pages/ywts/cszl/gw/eventPop.vue
new file mode 100644
index 0000000..9a45ce9
--- /dev/null
+++ b/src/pages/ywts/cszl/gw/eventPop.vue
@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div class="video-area" style="position: fixed; top: 12%;right: 1%;">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 360px">
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件名称: {{ gwEventInfo.eventname }}</span></i>
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件类型: {{ gwEventInfo.eventypename }}</span></i>
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件来源: {{ gwEventInfo.eventsource }}</span></i>
+              <i class="el-icon-open item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件状态: {{ gwEventInfo.eventstatusname }}</span></i>
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">责任部门: {{ gwEventInfo.dutydeptname }}</span></i>
+              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">点位设备名称: {{ gwEventInfo.devicename }}</span></i>
+              <i class="el-icon-warning-outline item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">紧急程度: {{ gwEventInfo.urgencyname }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">发送人: {{ gwEventInfo.sender }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">接收人: {{ gwEventInfo.receiver }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">上报人: {{ gwEventInfo.report }}</span></i>
+              <i class="el-icon-time item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">上报时间: {{ gwEventInfo.createtime }}</span></i>
+              <i class="el-icon-location item-line one-line" style="width: 100%;" :title="gwEventInfo.location" ><span style="margin-left: 5px">位置: {{ gwEventInfo.location }}</span></i>
+              <i class="el-icon-crop item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">覆盖范围: {{ gwEventInfo.cover }}</span></i>
+              <i class="el-icon-document item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">处置详情: {{ gwEventInfo.details }}</span></i>
+              <i class="el-icon-picture item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">图片: <el-image :src="gwEventInfo.imgurl" style="width: 200px;height: 120px;" mode="fill" /></span></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+// import { getAlarmDetail } from "../../../../api/ywts/cszl/gw";
+export default {
+  name: 'alarmPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
+      list: ['', '', '', ''],
+      gwEventInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '135px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gwEventInfo = item
+      console.log('-----this.gwEventInfo ------', this.gwEventInfo);
+    },
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.video-area {
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/cszl/gw/index.vue b/src/pages/ywts/cszl/gw/index.vue
index fff91c7..2b07682 100644
--- a/src/pages/ywts/cszl/gw/index.vue
+++ b/src/pages/ywts/cszl/gw/index.vue
@@ -6,12 +6,14 @@
       <common-btn id="scoreBtn" :select="selectIndex==='scoreBtn'" :bg="health" :bg-hover="healthHover" width="5" height="5" text-hover="健康评分" @click="btnClick('scoreBtn')" />
       <common-btn id="alarmBtn" :select="selectIndex==='alarmBtn'" :bg="alarmBg" :bg-hover="alarmHover" width="5" height="5" text-hover="管网告警" @click="btnClick('alarmBtn')" />
       <common-btn id="eventBtn" :select="selectIndex==='eventBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5" text-hover="管网事件" @click="btnClick('eventBtn')" />
+      <time-manager v-show="selectIndex === 'eventBtn'" @handleTimeRange="handleTimeRange" />
     </div>
     <!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage" v-show="isListPage"  @close="isListPage=false"/> -->
     <!-- 信息窗体 -->
     <Pop ref="pop" v-if="showPop" @close="showPop = false" />
     <AlarmPop ref="alarmPopRef" v-if="showAlarmPop" @close="showAlarmPop = false" />
     <ScorePop ref="scorePopRef" v-if="showScorePop" @close="showScorePop = false" />
+    <EventPop ref="eventPopRef" v-if="showEventPop" @close="showEventPop = false" />
   </div>
 </template>
 
@@ -20,30 +22,31 @@
 import LayerManagerMix from "@/components/LayerManagerMix";
 import TimeManager from "@/components/TimeManager";
 import { heat } from '@/utils/freedo/heat'
-import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
+import { clearResetMap, AddLabelPoint } from '@/utils/freedo'
 import {
   getStatistics,
   getArea,
   getAlarmList,
-  getScoreList
+  getScoreList,
+  getEventList
 } from "../../../../api/ywts/cszl/gw";
 import {AddDivPointHighlight, AddLabel} from "../../../../utils/freedo";
 import ListPage from "@/components/ListPage";
 import Pop from "./popup.vue";
 import AlarmPop from "./alarmPop.vue";
 import ScorePop from "./scorePop.vue";
-
+import EventPop from "./eventPop.vue";
 export default {
   name: 'Gw',
-  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, ScorePop, AlarmPop},
-  // components: { TimeManager, LayerManagerMix, ListPage, CommonBtn },
+  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, ScorePop, AlarmPop, EventPop},
   data() {
     return {
       isListPage: false,
       isShow: false,
-      showPop: false,
+      showPop: false, // 是否显示物联设备的popup
       showAlarmPop: false, // 是否显示报警点位的popup
       showScorePop: false, // 是否显示健康路评分的popup
+      showEventPop: false, // 是否显示事件的popup
       listQuery: {
         deviceType: '',
         startTime: '',
@@ -102,7 +105,15 @@
     }
   },
   mounted() {
-    clearResetMap()
+    clearResetMap() // 清空并重置
+    //  清除弹窗展示
+    this.$bus.$on('clear', () => {
+      this.isListPage = false
+      this.showAlarmPop = false, // 是否显示报警点位的popup
+      this.showPop = false, // 是否显示设备点位的popup
+      this.showScorePop = false // 是否显示评分点位的popup
+      this.showEventPop = false // 是否显示事件的popup
+    })
     // 获取概况统计
     getStatistics().then(response => {
       if(response.code === 200) {
@@ -115,80 +126,92 @@
   },
   methods: {
     async btnClick(e) {
-      clearUpMap()
+      clearResetMap()
       console.log('--------', e);
       this.isListPage = false
       this.showAlarmPop = false, // 是否显示报警点位的popup
+      this.showPop = false, // 是否显示报警点位的popup
       this.showScorePop = false, // 是否显示报警点位的popup
+      this.showEventPop = false, // 是否显示事件的popup
       this.selectIndex = typeof e === 'string' ? e : e.target.id
       switch (this.selectIndex) {
-        case "layerBtn": // 点击健康路评分
+        case "layerBtn": // 点击物联设备
           this.search()
           break
-          case "alarmBtn": // 点击管网告警
+        case "alarmBtn": // 点击管网告警
           this.fetchAlarmList()
           break
         case "scoreBtn": // 点击健康路评分
           this.fetchScoreList()
           break
-          case "eventBtn": // 事件
+        case "eventBtn": // 点击事件
+          this.fetchEventList()
           break
       }
     },
     // 查询管网物联设备点位
     search(type = '') {
-      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
-      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
-      // getArea({
-      //   deviceType: type,
-      //   startTime: '',
-      //   endTime: '',
-      //   isAlarm: '',
-      //   hasOrder: '',
-      //   keywords: '',
-      // }).then(response => {
-      //   if(response.code === 200) {
-      //     clearUpMap()
-      //     response.data.value.forEach(item => {
-      //       // console.log(item.areaboundary)
-      //       // todo : 画范围
-      //       AddLabelPoint(
-      //         item.id,
-      //         item.name,
-      //         item.deviceStatus === '2' ? iconDoing: iconDone,
-      //         [item.lon, item.lat, 0], 'gw', item,
-      //         this.clickGw)
-      //     })
-      //   }
-      // })
-        const res = {
-        data: {
-          value: [
-            {
-              id: '1',
-              name: '111',
-              deviceStatus: '2',
-              lon: '114.87665',
-              lat: '25.76418',
-            },
-            {
-              id: '2',
-              name: '122211',
-              deviceStatus: '1',
-              lon: '114.87365',
-              lat: '25.76118',
-            }
-          ]
-        }}
-        const tempData = res.data.value
-        tempData.forEach(item => {
-          AddLabelPoint(
-            item.id,
-            item.name,
-            item.deviceStatus === '2' ? iconDoing : iconDone,
-            [item.lon, item.lat, 0], 'gw', item,
-            this.clickMarker)
-        })
+      const iconOnline = require('@/assets/images/icon/智慧管网/device-online.png')
+      const iconOffline = require('@/assets/images/icon/智慧管网/device-offline.png')
+      const iconAlarm = require('@/assets/images/icon/智慧管网/device-alarm.png')
+      getArea({
+        deviceType: type,
+        startTime: '',
+        endTime: '',
+        isAlarm: '',
+        hasOrder: '',
+        keywords: '',
+      }).then(response => {
+        if(response.code === 200) {
+          clearResetMap()
+          response.data.value.forEach(item => {
+            // console.log(item.areaboundary)
+            // todo : 画范围
+            AddLabelPoint(
+              item.id,
+              item.name,
+              item.deviceStatus === '2' ? iconDoing: iconDone,
+              [item.lon, item.lat, 0], 'gw', item,
+              this.clickGw)
+          })
+        }
+      })
+      // --------------------------假数据-------------------------------------
+        // const res = {
+        // data: {
+        //   value: [
+        //     {
+        //       id: '1',
+        //       name: '在线设备',
+        //       deviceStatus: '2',
+        //       lon: '114.87665',
+        //       lat: '25.76418',
+        //     },
+        //     {
+        //       id: '2',
+        //       name: '离线设备',
+        //       deviceStatus: '1',
+        //       lon: '114.87365',
+        //       lat: '25.76118',
+        //     },
+        //     {
+        //       id: '3',
+        //       name: '告警设备',
+        //       deviceStatus: '3',
+        //       lon: '114.87365',
+        //       lat: '25.76818',
+        //     }
+        //   ]
+        // }}
+        // const tempData = res.data.value
+        // tempData.forEach(item => {
+        //   AddLabelPoint(
+        //     item.id,
+        //     item.name,
+        //     item.deviceStatus === '1' ? iconOnline : item.deviceStatus === '3' ? iconAlarm : iconOffline,
+        //     [item.lon, item.lat, 0], 'gw', item,
+        //     this.clickMarker)
+        // })
     },
     // 点击icon事件
     clickGw(eventArg) {
@@ -231,67 +254,68 @@
       const icon = require('@/assets/images/icon/智慧管网/alarm.png')
       const params = {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 99999,
         startTime: '',
         endTime: '',
         keywords: '',
       }
-      // getAlarmList(params).then(response => {
-      //   if(response.code === 200) {
-      //     clearUpMap()
-      //     response.data.value.forEach(item => {
-      //       AddLabelPoint(
-      //         item.id,
-      //         item.devicetypename,
-      //         icon,
-      //         [item.lon, item.lat, 0], 'gw', item,
-      //         this.clickAlarmMarker)
-      //     })
-      //   }
-      // })
-      const temp = [
-        {
-          createtime:"2023-04-18 06:01:42",
-          code:null,
-          orderid:null,
-          alarmstatusname:"历史告警",
-          alarmcontent:null,
-          lotid:"112021020027",
-          lon:"114.87665",
-          devicetype:"5",
-          alarmstatus:"0",
-          imgurl:null,
-          location:"刺桐路",
-          id:"1353824",
-          devicetypename:"液位监测仪",
-          lat:"25.76418",
-        },
-        {
-          createtime:"2023-04-18 06:01:38",
-          code:null,
-          orderid:null,
-          alarmstatusname:"历史告警",
-          alarmcontent:null,
-          lotid:"112019020098",
-          lon:"114.899962",
-          devicetype:"5",
-          alarmstatus:"0",
-          imgurl:null,
-          location:"佳辰路",
-          id:"1353818",
-          devicetypename:"液位监测仪",
-          lat:"25.807828",
-        }
-      ]
-      clearUpMap()
-      temp.forEach(item => {
+      getAlarmList(params).then(response => {
+        if(response.code === 200) {
+          clearResetMap()
+          response.data.value.forEach(item => {
             AddLabelPoint(
               item.id,
               item.devicetypename,
               icon,
               [item.lon, item.lat, 0], 'gw', item,
               this.clickAlarmMarker)
-        })
+          })
+        }
+      })
+      // --------------------------假数据------------------------------------
+      // const temp = [
+      //   {
+      //     createtime:"2023-04-18 06:01:42",
+      //     code:null,
+      //     orderid:null,
+      //     alarmstatusname:"历史告警",
+      //     alarmcontent:null,
+      //     lotid:"112021020027",
+      //     lon:"114.87665",
+      //     devicetype:"5",
+      //     alarmstatus:"0",
+      //     imgurl:null,
+      //     location:"刺桐路",
+      //     id:"1353824",
+      //     devicetypename:"液位监测仪",
+      //     lat:"25.76418",
+      //   },
+      //   {
+      //     createtime:"2023-04-18 06:01:38",
+      //     code:null,
+      //     orderid:null,
+      //     alarmstatusname:"历史告警",
+      //     alarmcontent:null,
+      //     lotid:"112019020098",
+      //     lon:"114.899962",
+      //     devicetype:"5",
+      //     alarmstatus:"0",
+      //     imgurl:null,
+      //     location:"佳辰路",
+      //     id:"1353818",
+      //     devicetypename:"液位监测仪",
+      //     lat:"25.807828",
+      //   }
+      // ]
+      // clearResetMap()
+      // temp.forEach(item => {
+      //       AddLabelPoint(
+      //         item.id,
+      //         item.devicetypename,
+      //         icon,
+      //         [item.lon, item.lat, 0], 'gw', item,
+      //         this.clickAlarmMarker)
+      //   })
     },
     // 点击告警点位
     clickAlarmMarker(eventArg) {
@@ -299,7 +323,7 @@
         const item = e._data.data
         this.showAlarmPop = true
         this.$nextTick(() => {
-          console.log('ppp[p]', item);
+          console.log('告警弹窗内容', item, this.showAlarmPop);
           this.$refs.alarmPopRef.initData(item)
         })
       }
@@ -323,7 +347,7 @@
       }
       getScoreList(params).then(response => {
         if(response.code === 200) {
-          clearUpMap()
+          clearResetMap()
           response.data.value.forEach(item => {
             AddLabelPoint(
               item.id,
@@ -334,6 +358,7 @@
           })
         }
       })
+      // --------------------------假数据------------------------------------
       // const temp = [
       //   {
       //     score:"1",
@@ -385,6 +410,144 @@
         showScorePop(eventArg)
       }
     },
+    // ----------------------------------------事件------------------------------------------
+    handleTimeRange(time) {
+      this.isListPage = false
+      console.log('时间改变：', time);
+      this.time = time
+      this.fetchEventList()
+    },
+    // 获取管网事件列表
+    fetchEventList() {
+      const params = {
+        pageNo: 1,
+        pageSize: 99999,
+        startTime: this.time.startTime, // 开始时间
+        endTime: this.time.endTime, // 结束时间
+        keywords: '', // 事件的 名称/位置/关键字搜索
+        orderId: '', // 工单id
+      }
+      getEventList(params).then(response => {
+        if(response.code === 200) {
+          clearResetMap()
+          response.data.value.forEach(item => {
+            AddLabelPoint(
+              item.lotid,
+              item.eventName,
+              this.caseIcon[item.eventstatus.trim()],
+              [item.lon, item.lat, 0], 'gw', item,
+              this.clickEventMarker)
+          })
+        }
+      })
+
+      // --------------------------假数据------------------------------------
+      // const temp = [
+      //   {
+      //     eventypename:"消防设施",
+      //     createtime:"2021-11-30",
+      //     code:"36070220105420211130093018281023",
+      //     dutydept:"999999",
+      //     orderid:"0",
+      //     urgencyname:"高",
+      //     lotid:"11490367625790499",
+      //     lon:"114.903676",
+      //     eventsource:"智慧城市专项",
+      //     eventname:"消防栓异常",
+      //     dutydeptname:"专项系统对接",
+      //     eventstatusname:"已结案",
+      //     cover:"智慧管网",
+      //     imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
+      //     event_id:"36070220105420211130093018281023",
+      //     urgency:"A",
+      //     person:"区运行调度指挥中心",
+      //     alarmid:"1",
+      //     devicename:null,
+      //     eventtype:"RJ010408",
+      //     eventstatus:"5 ",
+      //     location:"蓉江新区高校园区管理处启迪科技城高校园区小区08网格黄金岭办事处新路村村民委员会西北507米",
+      //     lat:"25.790499",
+      //   },
+      //   {
+      //     eventypename:"排水设施",
+      //     createtime:"2022-01-21",
+      //     code:"36070220105420220121144603710830",
+      //     dutydept:null,
+      //     orderid:"0",
+      //     urgencyname:"高",
+      //     lotid:"11489512925815389",
+      //     lon:"114.895129",
+      //     eventsource:"智慧城市专项",
+      //     eventname:"井盖开盖报警",
+      //     dutydeptname:null,
+      //     eventstatusname:"处置中",
+      //     cover:"智慧管网",
+      //     imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
+      //     event_id:"36070220105420220121144603710830",
+      //     urgency:"A",
+      //     person:"区运行调度指挥中心",
+      //     alarmid:"1",
+      //     devicename:null,
+      //     eventtype:"RJ010402",
+      //     eventstatus:"3 ",
+      //     location:"蓉江新区高校园区管理处联泰、碧桂园、正荣悦玺高校园区小区01网格武陵小学(建设中)东北253米",
+      //     lat:"25.815389",
+      //   },
+      //   {
+      //     eventypename:"燃气管道破裂",
+      //     createtime:"2021-11-29",
+      //     code:"36070220105420211129182458175343",
+      //     dutydept:"360783",
+      //     orderid:"0",
+      //     urgencyname:"高",
+      //     lotid:"11490327925789969",
+      //     lon:"114.903279",
+      //     eventsource:"智慧城市专项",
+      //     eventname:"浓度超限",
+      //     dutydeptname:"蓉江新区",
+      //     eventstatusname:"已结案",
+      //     cover:"智慧管网",
+      //     imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
+      //     event_id:"36070220105420211129182458175343",
+      //     urgency:"A",
+      //     person:"区运行调度指挥中心",
+      //     alarmid:"1",
+      //     devicename:null,
+      //     eventtype:"RJ010419",
+      //     eventstatus:"5 ",
+      //     location:"蓉江新区道路城管一中队玫瑰路网格黄金岭办事处新路村村民委员会西北525米",
+      //     lat:"25.789969",
+      //   }
+      // ]
+      // temp.forEach(item => {
+      //       AddLabelPoint(
+      //         item.lotid,
+      //         item.eventname,
+      //         this.caseIcon[item.eventstatus.trim()],
+      //         [item.lon, item.lat, 0], 'gw', item,
+      //         this.clickEventMarker)
+      //   })
+    },
+    // 点击事件点位
+    clickEventMarker(eventArg) {
+      const showEventPop = (e) => {
+        const item = e._data.data
+        this.showEventPop = true
+        this.$nextTick(() => {
+          this.$refs.eventPopRef.initData(item)
+        })
+      }
+      if (this.showEventPop) {
+        this.showEventPop = false
+        setTimeout(() => {
+          showEventPop(eventArg)
+        }, 100);
+      }
+      else {
+        showEventPop(eventArg)
+      }
+    },
+
   }
 }
 </script>

diff --git a/src/api/ywts/cszl/gw.js b/src/api/ywts/cszl/gw.js
index a766ad3..8187718 100644
--- a/src/api/ywts/cszl/gw.js
+++ b/src/api/ywts/cszl/gw.js
@@ -20,7 +20,7 @@
   });
 }
 
-// 智慧管网-管网物联设备点位列表
+// 智慧管网-管网告警列表
 export function getAlarmList(data) {
   return request({
     url: "zhgw-gktj/zhgw/wlgjlbfy",
@@ -49,3 +49,24 @@
     params: data
   });
 }
+
+// 智慧管网-管网物联告警研判
+export function getAlarmDetail(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/gwwlgjyp",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
+// 智慧管网-物联事件列表
+export function getEventList(data) {
+  return request({
+    url: "zhgw-gktj/zhgw/wlsjlb",
+    method: "post",
+    data,
+    params: data
+  });
+}
+
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
new file mode 100644
index 0000000..df323f8
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-alarm.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
new file mode 100644
index 0000000..1b317a6
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-offline.png"
Binary files differ
diff --git "a/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png" "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
new file mode 100644
index 0000000..a5517bf
--- /dev/null
+++ "b/src/assets/images/icon/\346\231\272\346\205\247\347\256\241\347\275\221/device-online.png"
Binary files differ
diff --git a/src/pages/ywts/cszl/gw/alarmPop.vue b/src/pages/ywts/cszl/gw/alarmPop.vue
index 5c8660a..439fc5a 100644
--- a/src/pages/ywts/cszl/gw/alarmPop.vue
+++ b/src/pages/ywts/cszl/gw/alarmPop.vue
@@ -1,16 +1,33 @@
 <template>
-  <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gwAlarmInfo.showType]  }">
-    <i class="el-icon-close close-pop" @click="$emit('close')" />
-    <div class="list-down" style="width: 100%;margin: 0 auto;">
-      <div class="list-item">
-        <div style="width:100%;">
-          <div style="width: 100%">
-            <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
-            <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
-            <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
-            <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
-            <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+  <div>
+    <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`  }">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">编号: {{ gwAlarmInfo.code || '--' }}</span></i> -->
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.devicetypename }}</span></i>
+              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">状态: {{ gwAlarmInfo.alarmstatusname }}</span></i>
+              <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">告警时间: {{ gwAlarmInfo.createtime || '--' }}</span></i>
+              <i class="el-icon-news item-line one-line" style="width: 100%;" :title="gwAlarmInfo.alarmcontent"><span style="margin-left: 5px">告警内容: {{ gwAlarmInfo.alarmcontent || '--' }}</span></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="video-area" style="position: fixed; top: 12%;right: 1%;">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 100%">
+              <i class="el-icon-camera-solid item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频编号: {{ gwAlarmInfo.videoNo }}</span></i>
+              <i class="el-icon-s-platform item-line one-line" style="width: 100%;"><span style="margin-left: 5px">视频名称: {{ gwAlarmInfo.videoName }}</span></i>
+              <i class="el-icon-refrigerator item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">是否赋能: {{ gwAlarmInfo.empowerment }}</span></i>
+              <video :src="gwAlarmInfo.historyVideo" width="100%" height="200px" controls muted autoplay style="margin-top: 10px;"></video>
+            </div>
           </div>
         </div>
       </div>
@@ -20,12 +37,13 @@
 
 <script>
 import { showPositin } from '@/utils/freedo/index'
+import { getAlarmDetail } from "../../../../api/ywts/cszl/gw";
 export default {
-  name: 'videoPop',
+  name: 'alarmPop',
   data() {
     return {
-      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
       list: ['', '', '', ''],
       gwAlarmInfo: {},
       windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
@@ -69,6 +87,19 @@
         }
       }
       this.gwAlarmInfo = item
+      this.fetchAlarmDetail(item.lotid)
+      console.log('打开告警弹窗', this.windowPostion)
+    },
+    // // 获取报警视频
+    fetchAlarmDetail(lotId) {
+      getAlarmDetail({ lotId: lotId }).then(response => {
+        if(response.code === 200 && response.data && response.data.value && response.data.value.length) {
+          this.gwAlarmInfo = {
+            ...this.gwAlarmInfo,
+            ...response.data.value[0],
+          }
+        }
+      })
     }
   },
 }
@@ -86,6 +117,14 @@
 
 }
 
+.video-area {
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+}
+
 .bottom {
   z-index: 111111111111;
   width: 100%;
diff --git a/src/pages/ywts/cszl/gw/eventPop.vue b/src/pages/ywts/cszl/gw/eventPop.vue
new file mode 100644
index 0000000..9a45ce9
--- /dev/null
+++ b/src/pages/ywts/cszl/gw/eventPop.vue
@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div class="video-area" style="position: fixed; top: 12%;right: 1%;">
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="list-down" style="width: 100%;margin: 0 auto;">
+        <div class="list-item">
+          <div style="width:100%;">
+            <div style="width: 360px">
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件名称: {{ gwEventInfo.eventname }}</span></i>
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件类型: {{ gwEventInfo.eventypename }}</span></i>
+              <i class="el-icon-tickets item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件来源: {{ gwEventInfo.eventsource }}</span></i>
+              <i class="el-icon-open item-line one-line" style="width: 100%;"><span style="margin-left: 5px">事件状态: {{ gwEventInfo.eventstatusname }}</span></i>
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;"><span style="margin-left: 5px">责任部门: {{ gwEventInfo.dutydeptname }}</span></i>
+              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">点位设备名称: {{ gwEventInfo.devicename }}</span></i>
+              <i class="el-icon-warning-outline item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">紧急程度: {{ gwEventInfo.urgencyname }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">发送人: {{ gwEventInfo.sender }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">接收人: {{ gwEventInfo.receiver }}</span></i>
+              <i class="el-icon-user-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">上报人: {{ gwEventInfo.report }}</span></i>
+              <i class="el-icon-time item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">上报时间: {{ gwEventInfo.createtime }}</span></i>
+              <i class="el-icon-location item-line one-line" style="width: 100%;" :title="gwEventInfo.location" ><span style="margin-left: 5px">位置: {{ gwEventInfo.location }}</span></i>
+              <i class="el-icon-crop item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">覆盖范围: {{ gwEventInfo.cover }}</span></i>
+              <i class="el-icon-document item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">处置详情: {{ gwEventInfo.details }}</span></i>
+              <i class="el-icon-picture item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">图片: <el-image :src="gwEventInfo.imgurl" style="width: 200px;height: 120px;" mode="fill" /></span></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+// import { getAlarmDetail } from "../../../../api/ywts/cszl/gw";
+export default {
+  name: 'alarmPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
+      list: ['', '', '', ''],
+      gwEventInfo: {},
+      windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
+      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
+      statusColor: {
+        1: '#a1a1a1',
+        2: '#f8e31a',
+        3: '#5ab1fc',
+        4: '#f89835',
+        5: '#3def83',
+      },
+      urgencyColor: {
+        'C': '#2f8d00',
+        'B': '#c4ad00',
+        'A': '#8d0000'
+      },
+      heightDict: {
+        normal: '135px',
+        video: '300px'
+      }
+    }
+  },
+  methods: {
+    initData(item) {
+      console.log(item, '弹窗内容')
+      if (!item.lon || !item.lat) { return }
+      showPositin(item.lon, item.lat)
+
+      item.showType = 'normal'
+      // 弹窗位置
+      if (window.localStorage.getItem('mousePosition')) {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      else {
+        this.windowPostion = {
+          x: window.innerWidth / 2 - 165,
+          y: window.innerHeight / 2
+        }
+      }
+      this.gwEventInfo = item
+      console.log('-----this.gwEventInfo ------', this.gwEventInfo);
+    },
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.children-item {
+  width: 96% !important;
+  margin: 10px auto !important;
+  color: #fff !important;
+  // border: 1px solid #fff;
+  border-radius: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+
+}
+
+.video-area {
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+}
+
+.bottom {
+  z-index: 111111111111;
+  width: 100%;
+  height: 160px;
+  width: 27rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 10px;
+  padding-right: 20px;
+  background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+
+  .block {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 5px;
+    flex-direction: column;
+  }
+
+  .block1 {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+    border-radius: 5px;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 0px 10px;
+    flex-direction: column;
+  }
+
+  .title {
+    text-shadow: 0 0 5px #d1ffff;
+    height: 35px;
+    float: left;
+    text-align: left;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100% !important;
+    color: white;
+    font-weight: bold;
+    padding-top: 4px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+
+  .item-text {
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .base-map-image {
+    width: 60px;
+    height: 60px;
+  }
+
+  .num {
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  .unit {
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
+
+  .item {
+    width: 25%;
+    height: 32%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+}
+
+.list-down {
+  // margin-top: 10px;
+  // overflow-y: scroll;
+  width: 100%;
+  // height: calc(100% - 6rem);
+  padding: 0px 10px;
+}
+
+.list-item {
+  width: calc(100% - 35px);
+  // height: 12rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  padding: 0.8rem 10px;
+  margin: 0.2rem 0rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  background-size: 100% 100% !important;
+  color: white;
+  border-top: 2px solid #0494f3;
+  border-radius: 10px;
+}
+
+.list-item:hover {
+  background-size: cover !important;
+  background: url('../../../../assets/images/right/选中.png') !important;
+  background-size: 100% 100% !important;
+}
+
+.item-title {
+  width: 90%;
+  text-align: left;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+
+.item-line {
+  display: flex;
+  font-size: 1.2rem;
+  color: #aed2f3;
+  padding-left: 20px;
+  line-height: 1.8rem;
+  width: 95%;
+  word-break: break-all;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 设置最大行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.colorbox-text {
+  background-color: #0a88fc;
+  border-radius: 10px;
+  color: white;
+  font-size: 1rem;
+  padding: 0rem 0.4rem;
+  margin-left: 5px;
+  text-align: center;
+  width: 5rem;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.one-line {
+  display: block !important;
+  white-space: nowrap;
+  /* 防止换行 */
+  overflow: hidden;
+  /* 溢出隐藏 */
+  text-overflow: ellipsis;
+  /* 文本显示为省略号 */
+}
+</style>
diff --git a/src/pages/ywts/cszl/gw/index.vue b/src/pages/ywts/cszl/gw/index.vue
index fff91c7..2b07682 100644
--- a/src/pages/ywts/cszl/gw/index.vue
+++ b/src/pages/ywts/cszl/gw/index.vue
@@ -6,12 +6,14 @@
       <common-btn id="scoreBtn" :select="selectIndex==='scoreBtn'" :bg="health" :bg-hover="healthHover" width="5" height="5" text-hover="健康评分" @click="btnClick('scoreBtn')" />
       <common-btn id="alarmBtn" :select="selectIndex==='alarmBtn'" :bg="alarmBg" :bg-hover="alarmHover" width="5" height="5" text-hover="管网告警" @click="btnClick('alarmBtn')" />
       <common-btn id="eventBtn" :select="selectIndex==='eventBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5" text-hover="管网事件" @click="btnClick('eventBtn')" />
+      <time-manager v-show="selectIndex === 'eventBtn'" @handleTimeRange="handleTimeRange" />
     </div>
     <!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage" v-show="isListPage"  @close="isListPage=false"/> -->
     <!-- 信息窗体 -->
     <Pop ref="pop" v-if="showPop" @close="showPop = false" />
     <AlarmPop ref="alarmPopRef" v-if="showAlarmPop" @close="showAlarmPop = false" />
     <ScorePop ref="scorePopRef" v-if="showScorePop" @close="showScorePop = false" />
+    <EventPop ref="eventPopRef" v-if="showEventPop" @close="showEventPop = false" />
   </div>
 </template>
 
@@ -20,30 +22,31 @@
 import LayerManagerMix from "@/components/LayerManagerMix";
 import TimeManager from "@/components/TimeManager";
 import { heat } from '@/utils/freedo/heat'
-import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
+import { clearResetMap, AddLabelPoint } from '@/utils/freedo'
 import {
   getStatistics,
   getArea,
   getAlarmList,
-  getScoreList
+  getScoreList,
+  getEventList
 } from "../../../../api/ywts/cszl/gw";
 import {AddDivPointHighlight, AddLabel} from "../../../../utils/freedo";
 import ListPage from "@/components/ListPage";
 import Pop from "./popup.vue";
 import AlarmPop from "./alarmPop.vue";
 import ScorePop from "./scorePop.vue";
-
+import EventPop from "./eventPop.vue";
 export default {
   name: 'Gw',
-  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, ScorePop, AlarmPop},
-  // components: { TimeManager, LayerManagerMix, ListPage, CommonBtn },
+  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, ScorePop, AlarmPop, EventPop},
   data() {
     return {
       isListPage: false,
       isShow: false,
-      showPop: false,
+      showPop: false, // 是否显示物联设备的popup
       showAlarmPop: false, // 是否显示报警点位的popup
       showScorePop: false, // 是否显示健康路评分的popup
+      showEventPop: false, // 是否显示事件的popup
       listQuery: {
         deviceType: '',
         startTime: '',
@@ -102,7 +105,15 @@
     }
   },
   mounted() {
-    clearResetMap()
+    clearResetMap() // 清空并重置
+    //  清除弹窗展示
+    this.$bus.$on('clear', () => {
+      this.isListPage = false
+      this.showAlarmPop = false, // 是否显示报警点位的popup
+      this.showPop = false, // 是否显示设备点位的popup
+      this.showScorePop = false // 是否显示评分点位的popup
+      this.showEventPop = false // 是否显示事件的popup
+    })
     // 获取概况统计
     getStatistics().then(response => {
       if(response.code === 200) {
@@ -115,80 +126,92 @@
   },
   methods: {
     async btnClick(e) {
-      clearUpMap()
+      clearResetMap()
       console.log('--------', e);
       this.isListPage = false
       this.showAlarmPop = false, // 是否显示报警点位的popup
+      this.showPop = false, // 是否显示报警点位的popup
       this.showScorePop = false, // 是否显示报警点位的popup
+      this.showEventPop = false, // 是否显示事件的popup
       this.selectIndex = typeof e === 'string' ? e : e.target.id
       switch (this.selectIndex) {
-        case "layerBtn": // 点击健康路评分
+        case "layerBtn": // 点击物联设备
           this.search()
           break
-          case "alarmBtn": // 点击管网告警
+        case "alarmBtn": // 点击管网告警
           this.fetchAlarmList()
           break
         case "scoreBtn": // 点击健康路评分
           this.fetchScoreList()
           break
-          case "eventBtn": // 事件
+        case "eventBtn": // 点击事件
+          this.fetchEventList()
           break
       }
     },
     // 查询管网物联设备点位
     search(type = '') {
-      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
-      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
-      // getArea({
-      //   deviceType: type,
-      //   startTime: '',
-      //   endTime: '',
-      //   isAlarm: '',
-      //   hasOrder: '',
-      //   keywords: '',
-      // }).then(response => {
-      //   if(response.code === 200) {
-      //     clearUpMap()
-      //     response.data.value.forEach(item => {
-      //       // console.log(item.areaboundary)
-      //       // todo : 画范围
-      //       AddLabelPoint(
-      //         item.id,
-      //         item.name,
-      //         item.deviceStatus === '2' ? iconDoing: iconDone,
-      //         [item.lon, item.lat, 0], 'gw', item,
-      //         this.clickGw)
-      //     })
-      //   }
-      // })
-        const res = {
-        data: {
-          value: [
-            {
-              id: '1',
-              name: '111',
-              deviceStatus: '2',
-              lon: '114.87665',
-              lat: '25.76418',
-            },
-            {
-              id: '2',
-              name: '122211',
-              deviceStatus: '1',
-              lon: '114.87365',
-              lat: '25.76118',
-            }
-          ]
-        }}
-        const tempData = res.data.value
-        tempData.forEach(item => {
-          AddLabelPoint(
-            item.id,
-            item.name,
-            item.deviceStatus === '2' ? iconDoing : iconDone,
-            [item.lon, item.lat, 0], 'gw', item,
-            this.clickMarker)
-        })
+      const iconOnline = require('@/assets/images/icon/智慧管网/device-online.png')
+      const iconOffline = require('@/assets/images/icon/智慧管网/device-offline.png')
+      const iconAlarm = require('@/assets/images/icon/智慧管网/device-alarm.png')
+      getArea({
+        deviceType: type,
+        startTime: '',
+        endTime: '',
+        isAlarm: '',
+        hasOrder: '',
+        keywords: '',
+      }).then(response => {
+        if(response.code === 200) {
+          clearResetMap()
+          response.data.value.forEach(item => {
+            // console.log(item.areaboundary)
+            // todo : 画范围
+            AddLabelPoint(
+              item.id,
+              item.name,
+              item.deviceStatus === '2' ? iconDoing: iconDone,
+              [item.lon, item.lat, 0], 'gw', item,
+              this.clickGw)
+          })
+        }
+      })
+      // --------------------------假数据-------------------------------------
+        // const res = {
+        // data: {
+        //   value: [
+        //     {
+        //       id: '1',
+        //       name: '在线设备',
+        //       deviceStatus: '2',
+        //       lon: '114.87665',
+        //       lat: '25.76418',
+        //     },
+        //     {
+        //       id: '2',
+        //       name: '离线设备',
+        //       deviceStatus: '1',
+        //       lon: '114.87365',
+        //       lat: '25.76118',
+        //     },
+        //     {
+        //       id: '3',
+        //       name: '告警设备',
+        //       deviceStatus: '3',
+        //       lon: '114.87365',
+        //       lat: '25.76818',
+        //     }
+        //   ]
+        // }}
+        // const tempData = res.data.value
+        // tempData.forEach(item => {
+        //   AddLabelPoint(
+        //     item.id,
+        //     item.name,
+        //     item.deviceStatus === '1' ? iconOnline : item.deviceStatus === '3' ? iconAlarm : iconOffline,
+        //     [item.lon, item.lat, 0], 'gw', item,
+        //     this.clickMarker)
+        // })
     },
     // 点击icon事件
     clickGw(eventArg) {
@@ -231,67 +254,68 @@
       const icon = require('@/assets/images/icon/智慧管网/alarm.png')
       const params = {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 99999,
         startTime: '',
         endTime: '',
         keywords: '',
       }
-      // getAlarmList(params).then(response => {
-      //   if(response.code === 200) {
-      //     clearUpMap()
-      //     response.data.value.forEach(item => {
-      //       AddLabelPoint(
-      //         item.id,
-      //         item.devicetypename,
-      //         icon,
-      //         [item.lon, item.lat, 0], 'gw', item,
-      //         this.clickAlarmMarker)
-      //     })
-      //   }
-      // })
-      const temp = [
-        {
-          createtime:"2023-04-18 06:01:42",
-          code:null,
-          orderid:null,
-          alarmstatusname:"历史告警",
-          alarmcontent:null,
-          lotid:"112021020027",
-          lon:"114.87665",
-          devicetype:"5",
-          alarmstatus:"0",
-          imgurl:null,
-          location:"刺桐路",
-          id:"1353824",
-          devicetypename:"液位监测仪",
-          lat:"25.76418",
-        },
-        {
-          createtime:"2023-04-18 06:01:38",
-          code:null,
-          orderid:null,
-          alarmstatusname:"历史告警",
-          alarmcontent:null,
-          lotid:"112019020098",
-          lon:"114.899962",
-          devicetype:"5",
-          alarmstatus:"0",
-          imgurl:null,
-          location:"佳辰路",
-          id:"1353818",
-          devicetypename:"液位监测仪",
-          lat:"25.807828",
-        }
-      ]
-      clearUpMap()
-      temp.forEach(item => {
+      getAlarmList(params).then(response => {
+        if(response.code === 200) {
+          clearResetMap()
+          response.data.value.forEach(item => {
             AddLabelPoint(
               item.id,
               item.devicetypename,
               icon,
               [item.lon, item.lat, 0], 'gw', item,
               this.clickAlarmMarker)
-        })
+          })
+        }
+      })
+      // --------------------------假数据------------------------------------
+      // const temp = [
+      //   {
+      //     createtime:"2023-04-18 06:01:42",
+      //     code:null,
+      //     orderid:null,
+      //     alarmstatusname:"历史告警",
+      //     alarmcontent:null,
+      //     lotid:"112021020027",
+      //     lon:"114.87665",
+      //     devicetype:"5",
+      //     alarmstatus:"0",
+      //     imgurl:null,
+      //     location:"刺桐路",
+      //     id:"1353824",
+      //     devicetypename:"液位监测仪",
+      //     lat:"25.76418",
+      //   },
+      //   {
+      //     createtime:"2023-04-18 06:01:38",
+      //     code:null,
+      //     orderid:null,
+      //     alarmstatusname:"历史告警",
+      //     alarmcontent:null,
+      //     lotid:"112019020098",
+      //     lon:"114.899962",
+      //     devicetype:"5",
+      //     alarmstatus:"0",
+      //     imgurl:null,
+      //     location:"佳辰路",
+      //     id:"1353818",
+      //     devicetypename:"液位监测仪",
+      //     lat:"25.807828",
+      //   }
+      // ]
+      // clearResetMap()
+      // temp.forEach(item => {
+      //       AddLabelPoint(
+      //         item.id,
+      //         item.devicetypename,
+      //         icon,
+      //         [item.lon, item.lat, 0], 'gw', item,
+      //         this.clickAlarmMarker)
+      //   })
     },
     // 点击告警点位
     clickAlarmMarker(eventArg) {
@@ -299,7 +323,7 @@
         const item = e._data.data
         this.showAlarmPop = true
         this.$nextTick(() => {
-          console.log('ppp[p]', item);
+          console.log('告警弹窗内容', item, this.showAlarmPop);
           this.$refs.alarmPopRef.initData(item)
         })
       }
@@ -323,7 +347,7 @@
       }
       getScoreList(params).then(response => {
         if(response.code === 200) {
-          clearUpMap()
+          clearResetMap()
           response.data.value.forEach(item => {
             AddLabelPoint(
               item.id,
@@ -334,6 +358,7 @@
           })
         }
       })
+      // --------------------------假数据------------------------------------
       // const temp = [
       //   {
       //     score:"1",
@@ -385,6 +410,144 @@
         showScorePop(eventArg)
       }
     },
+    // ----------------------------------------事件------------------------------------------
+    handleTimeRange(time) {
+      this.isListPage = false
+      console.log('时间改变：', time);
+      this.time = time
+      this.fetchEventList()
+    },
+    // 获取管网事件列表
+    fetchEventList() {
+      const params = {
+        pageNo: 1,
+        pageSize: 99999,
+        startTime: this.time.startTime, // 开始时间
+        endTime: this.time.endTime, // 结束时间
+        keywords: '', // 事件的 名称/位置/关键字搜索
+        orderId: '', // 工单id
+      }
+      getEventList(params).then(response => {
+        if(response.code === 200) {
+          clearResetMap()
+          response.data.value.forEach(item => {
+            AddLabelPoint(
+              item.lotid,
+              item.eventName,
+              this.caseIcon[item.eventstatus.trim()],
+              [item.lon, item.lat, 0], 'gw', item,
+              this.clickEventMarker)
+          })
+        }
+      })
+
+      // --------------------------假数据------------------------------------
+      // const temp = [
+      //   {
+      //     eventypename:"消防设施",
+      //     createtime:"2021-11-30",
+      //     code:"36070220105420211130093018281023",
+      //     dutydept:"999999",
+      //     orderid:"0",
+      //     urgencyname:"高",
+      //     lotid:"11490367625790499",
+      //     lon:"114.903676",
+      //     eventsource:"智慧城市专项",
+      //     eventname:"消防栓异常",
+      //     dutydeptname:"专项系统对接",
+      //     eventstatusname:"已结案",
+      //     cover:"智慧管网",
+      //     imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
+      //     event_id:"36070220105420211130093018281023",
+      //     urgency:"A",
+      //     person:"区运行调度指挥中心",
+      //     alarmid:"1",
+      //     devicename:null,
+      //     eventtype:"RJ010408",
+      //     eventstatus:"5 ",
+      //     location:"蓉江新区高校园区管理处启迪科技城高校园区小区08网格黄金岭办事处新路村村民委员会西北507米",
+      //     lat:"25.790499",
+      //   },
+      //   {
+      //     eventypename:"排水设施",
+      //     createtime:"2022-01-21",
+      //     code:"36070220105420220121144603710830",
+      //     dutydept:null,
+      //     orderid:"0",
+      //     urgencyname:"高",
+      //     lotid:"11489512925815389",
+      //     lon:"114.895129",
+      //     eventsource:"智慧城市专项",
+      //     eventname:"井盖开盖报警",
+      //     dutydeptname:null,
+      //     eventstatusname:"处置中",
+      //     cover:"智慧管网",
+      //     imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
+      //     event_id:"36070220105420220121144603710830",
+      //     urgency:"A",
+      //     person:"区运行调度指挥中心",
+      //     alarmid:"1",
+      //     devicename:null,
+      //     eventtype:"RJ010402",
+      //     eventstatus:"3 ",
+      //     location:"蓉江新区高校园区管理处联泰、碧桂园、正荣悦玺高校园区小区01网格武陵小学(建设中)东北253米",
+      //     lat:"25.815389",
+      //   },
+      //   {
+      //     eventypename:"燃气管道破裂",
+      //     createtime:"2021-11-29",
+      //     code:"36070220105420211129182458175343",
+      //     dutydept:"360783",
+      //     orderid:"0",
+      //     urgencyname:"高",
+      //     lotid:"11490327925789969",
+      //     lon:"114.903279",
+      //     eventsource:"智慧城市专项",
+      //     eventname:"浓度超限",
+      //     dutydeptname:"蓉江新区",
+      //     eventstatusname:"已结案",
+      //     cover:"智慧管网",
+      //     imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
+      //     event_id:"36070220105420211129182458175343",
+      //     urgency:"A",
+      //     person:"区运行调度指挥中心",
+      //     alarmid:"1",
+      //     devicename:null,
+      //     eventtype:"RJ010419",
+      //     eventstatus:"5 ",
+      //     location:"蓉江新区道路城管一中队玫瑰路网格黄金岭办事处新路村村民委员会西北525米",
+      //     lat:"25.789969",
+      //   }
+      // ]
+      // temp.forEach(item => {
+      //       AddLabelPoint(
+      //         item.lotid,
+      //         item.eventname,
+      //         this.caseIcon[item.eventstatus.trim()],
+      //         [item.lon, item.lat, 0], 'gw', item,
+      //         this.clickEventMarker)
+      //   })
+    },
+    // 点击事件点位
+    clickEventMarker(eventArg) {
+      const showEventPop = (e) => {
+        const item = e._data.data
+        this.showEventPop = true
+        this.$nextTick(() => {
+          this.$refs.eventPopRef.initData(item)
+        })
+      }
+      if (this.showEventPop) {
+        this.showEventPop = false
+        setTimeout(() => {
+          showEventPop(eventArg)
+        }, 100);
+      }
+      else {
+        showEventPop(eventArg)
+      }
+    },
+
   }
 }
 </script>
diff --git a/src/pages/ywts/cszl/gw/popup.vue b/src/pages/ywts/cszl/gw/popup.vue
index 1bd9972..ec18fb7 100644
--- a/src/pages/ywts/cszl/gw/popup.vue
+++ b/src/pages/ywts/cszl/gw/popup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: gwDeviceInfo.alarmTime ? '220px' : '160px'  }">
+  <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: gwDeviceInfo.alarmTime ? '200px' : '160px'  }">
     <i class="el-icon-close close-pop" @click="$emit('close')" />
     <div class="list-down" style="width: 100%;margin: 0 auto;">
       <div class="list-item">
@@ -9,7 +9,7 @@
             <i class="el-icon-film   item-line one-line" style="width: 100%;"><span style="margin-left: 5px">设备名称: {{ gwDeviceInfo.deviceName }}</span></i>
             <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">设备类型: {{ gwDeviceInfo.deviceTypeName }}</span></i>
             <i class="el-icon-open item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">状态: {{ gwDeviceInfo.deviceStatusName }}</span></i>
-            <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwDeviceInfo.location }}</span></i>
+            <i class="el-icon-location item-line one-line" :title="gwDeviceInfo.location" style="width: 100%;" ><span style="margin-left: 5px">位置: {{ gwDeviceInfo.location }}</span></i>
             <i v-if="gwDeviceInfo.alarmTime" class="el-icon-time item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">告警时间: {{ gwDeviceInfo.alarmTime }}</span></i>
             <i v-if="gwDeviceInfo.alarmContent" class="el-icon-message-solid item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">告警内容: {{ gwDeviceInfo.alarmContent }}</span></i>
           </div>
@@ -84,7 +84,7 @@
             deviceName : '设备设备1', // 设备名称
             deviceTypeName : '也为检测仪', // 设备类型名称
             deviceStatusName : '在线', // 设备状态名称
-            location : '吉祥路', // 位置
+            location : '吉祥吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路吉祥路路', // 位置
             alarmTime : '2025-10-12', // 告警时间
             alarmContent: '液位过高', // 告警内容
           }
@@ -110,7 +110,7 @@
 .bottom {
   z-index: 111111111111;
   width: 100%;
-  height: 210px;
+  height: 180px;
   width: 27rem;
   position: absolute;
   bottom: 10px;