diff --git a/src/api/ywts/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}

diff --git a/src/api/ywts/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
diff --git a/src/api/ywts/zyhj/yl.js b/src/api/ywts/zyhj/yl.js
index 63d7ad2..643e3d4 100644
--- a/src/api/ywts/zyhj/yl.js
+++ b/src/api/ywts/zyhj/yl.js
@@ -88,6 +88,9 @@
     url: 'zhyl-gktjljk/zhyl/sjxq',
     method: 'post',
     data,
+    params: {
+      ...data,
+    }
   })
 }
 // 苗木点位列表

diff --git a/src/api/ywts/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
diff --git a/src/api/ywts/zyhj/yl.js b/src/api/ywts/zyhj/yl.js
index 63d7ad2..643e3d4 100644
--- a/src/api/ywts/zyhj/yl.js
+++ b/src/api/ywts/zyhj/yl.js
@@ -88,6 +88,9 @@
     url: 'zhyl-gktjljk/zhyl/sjxq',
     method: 'post',
     data,
+    params: {
+      ...data,
+    }
   })
 }
 // 苗木点位列表
diff --git a/src/pages/ywts/cszl/hw/index.vue b/src/pages/ywts/cszl/hw/index.vue
index e773b7d..87e65b1 100644
--- a/src/pages/ywts/cszl/hw/index.vue
+++ b/src/pages/ywts/cszl/hw/index.vue
@@ -94,6 +94,7 @@
   },
   mounted() {
     clearResetMap()
+    this.selectInde = 'deviceBtn'
     this.fetchPoint()
   },
   methods: {
@@ -263,17 +264,17 @@
         // this.caseList = res.data.value || []
         //   this.caseTotal = this.caseList.length
         res.data.value.forEach(item => {
-            AddLabelPoint(
-              item.id.replaceAll('.', ''),
-              '',
-              this.caseIcon[item.status],
-              [item.lon, item.lat, 0], 'gd-case', item,
-              this.clickCase)
-          })
+          AddLabelPoint(
+            item.id.replaceAll('.', ''),
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'gd-case', item,
+            this.clickCase)
+        })
       })
     },
-        // 点击事件icon
-        clickCase(eventArg) {
+    // 点击事件icon
+    clickCase(eventArg) {
       const item = eventArg._data.data
       // 恢复上一个marker
       if (this.preCase !== null) {
@@ -306,11 +307,11 @@
       getCaseInfo(this.caseListQuery).then(res => {
         console.log(res.data, '事件详情')
         this.caseList = res.data.value || []
-          this.caseTotal = this.caseList.length
+        this.caseTotal = this.caseList.length
       })
     },
-        // 事件换页
-        changePage(val) {
+    // 事件换页
+    changePage(val) {
       if (val && val.page) {
         this.caseListQuery.pageNo = val.page
       }

diff --git a/src/api/ywts/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
diff --git a/src/api/ywts/zyhj/yl.js b/src/api/ywts/zyhj/yl.js
index 63d7ad2..643e3d4 100644
--- a/src/api/ywts/zyhj/yl.js
+++ b/src/api/ywts/zyhj/yl.js
@@ -88,6 +88,9 @@
     url: 'zhyl-gktjljk/zhyl/sjxq',
     method: 'post',
     data,
+    params: {
+      ...data,
+    }
   })
 }
 // 苗木点位列表
diff --git a/src/pages/ywts/cszl/hw/index.vue b/src/pages/ywts/cszl/hw/index.vue
index e773b7d..87e65b1 100644
--- a/src/pages/ywts/cszl/hw/index.vue
+++ b/src/pages/ywts/cszl/hw/index.vue
@@ -94,6 +94,7 @@
   },
   mounted() {
     clearResetMap()
+    this.selectInde = 'deviceBtn'
     this.fetchPoint()
   },
   methods: {
@@ -263,17 +264,17 @@
         // this.caseList = res.data.value || []
         //   this.caseTotal = this.caseList.length
         res.data.value.forEach(item => {
-            AddLabelPoint(
-              item.id.replaceAll('.', ''),
-              '',
-              this.caseIcon[item.status],
-              [item.lon, item.lat, 0], 'gd-case', item,
-              this.clickCase)
-          })
+          AddLabelPoint(
+            item.id.replaceAll('.', ''),
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'gd-case', item,
+            this.clickCase)
+        })
       })
     },
-        // 点击事件icon
-        clickCase(eventArg) {
+    // 点击事件icon
+    clickCase(eventArg) {
       const item = eventArg._data.data
       // 恢复上一个marker
       if (this.preCase !== null) {
@@ -306,11 +307,11 @@
       getCaseInfo(this.caseListQuery).then(res => {
         console.log(res.data, '事件详情')
         this.caseList = res.data.value || []
-          this.caseTotal = this.caseList.length
+        this.caseTotal = this.caseList.length
       })
     },
-        // 事件换页
-        changePage(val) {
+    // 事件换页
+    changePage(val) {
       if (val && val.page) {
         this.caseListQuery.pageNo = val.page
       }
diff --git a/src/pages/ywts/zyhj/hb/alarmPop.vue b/src/pages/ywts/zyhj/hb/alarmPop.vue
new file mode 100644
index 0000000..3f4ac5a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/alarmPop.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>告警设备: {{
+              gdInfo.devicetypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警内容: {{
+              gdInfo.alarmcontent }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警状态: {{
+              gdInfo.alarmstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警时间: {{ gdInfo.createtime
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span :title="gdInfo.location"
+                >告警位置: {{ gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '155px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
diff --git a/src/api/ywts/zyhj/yl.js b/src/api/ywts/zyhj/yl.js
index 63d7ad2..643e3d4 100644
--- a/src/api/ywts/zyhj/yl.js
+++ b/src/api/ywts/zyhj/yl.js
@@ -88,6 +88,9 @@
     url: 'zhyl-gktjljk/zhyl/sjxq',
     method: 'post',
     data,
+    params: {
+      ...data,
+    }
   })
 }
 // 苗木点位列表
diff --git a/src/pages/ywts/cszl/hw/index.vue b/src/pages/ywts/cszl/hw/index.vue
index e773b7d..87e65b1 100644
--- a/src/pages/ywts/cszl/hw/index.vue
+++ b/src/pages/ywts/cszl/hw/index.vue
@@ -94,6 +94,7 @@
   },
   mounted() {
     clearResetMap()
+    this.selectInde = 'deviceBtn'
     this.fetchPoint()
   },
   methods: {
@@ -263,17 +264,17 @@
         // this.caseList = res.data.value || []
         //   this.caseTotal = this.caseList.length
         res.data.value.forEach(item => {
-            AddLabelPoint(
-              item.id.replaceAll('.', ''),
-              '',
-              this.caseIcon[item.status],
-              [item.lon, item.lat, 0], 'gd-case', item,
-              this.clickCase)
-          })
+          AddLabelPoint(
+            item.id.replaceAll('.', ''),
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'gd-case', item,
+            this.clickCase)
+        })
       })
     },
-        // 点击事件icon
-        clickCase(eventArg) {
+    // 点击事件icon
+    clickCase(eventArg) {
       const item = eventArg._data.data
       // 恢复上一个marker
       if (this.preCase !== null) {
@@ -306,11 +307,11 @@
       getCaseInfo(this.caseListQuery).then(res => {
         console.log(res.data, '事件详情')
         this.caseList = res.data.value || []
-          this.caseTotal = this.caseList.length
+        this.caseTotal = this.caseList.length
       })
     },
-        // 事件换页
-        changePage(val) {
+    // 事件换页
+    changePage(val) {
       if (val && val.page) {
         this.caseListQuery.pageNo = val.page
       }
diff --git a/src/pages/ywts/zyhj/hb/alarmPop.vue b/src/pages/ywts/zyhj/hb/alarmPop.vue
new file mode 100644
index 0000000..3f4ac5a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/alarmPop.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>告警设备: {{
+              gdInfo.devicetypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警内容: {{
+              gdInfo.alarmcontent }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警状态: {{
+              gdInfo.alarmstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警时间: {{ gdInfo.createtime
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span :title="gdInfo.location"
+                >告警位置: {{ gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '155px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb/casePop.vue b/src/pages/ywts/zyhj/hb/casePop.vue
new file mode 100644
index 0000000..0c07a1a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/casePop.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>统一编码: {{
+              gdInfo.code }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件名称: {{
+              gdInfo.eventname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件类型: {{
+              gdInfo.eventypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件状态: {{
+              gdInfo.eventstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报时间: {{
+              gdInfo.createtime }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报人: {{
+              gdInfo.report }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>责任部门: {{
+              gdInfo.dutydeptname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>紧急程度: {{
+              gdInfo.urgencyname }}</span></i>
+              <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '250px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
diff --git a/src/api/ywts/zyhj/yl.js b/src/api/ywts/zyhj/yl.js
index 63d7ad2..643e3d4 100644
--- a/src/api/ywts/zyhj/yl.js
+++ b/src/api/ywts/zyhj/yl.js
@@ -88,6 +88,9 @@
     url: 'zhyl-gktjljk/zhyl/sjxq',
     method: 'post',
     data,
+    params: {
+      ...data,
+    }
   })
 }
 // 苗木点位列表
diff --git a/src/pages/ywts/cszl/hw/index.vue b/src/pages/ywts/cszl/hw/index.vue
index e773b7d..87e65b1 100644
--- a/src/pages/ywts/cszl/hw/index.vue
+++ b/src/pages/ywts/cszl/hw/index.vue
@@ -94,6 +94,7 @@
   },
   mounted() {
     clearResetMap()
+    this.selectInde = 'deviceBtn'
     this.fetchPoint()
   },
   methods: {
@@ -263,17 +264,17 @@
         // this.caseList = res.data.value || []
         //   this.caseTotal = this.caseList.length
         res.data.value.forEach(item => {
-            AddLabelPoint(
-              item.id.replaceAll('.', ''),
-              '',
-              this.caseIcon[item.status],
-              [item.lon, item.lat, 0], 'gd-case', item,
-              this.clickCase)
-          })
+          AddLabelPoint(
+            item.id.replaceAll('.', ''),
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'gd-case', item,
+            this.clickCase)
+        })
       })
     },
-        // 点击事件icon
-        clickCase(eventArg) {
+    // 点击事件icon
+    clickCase(eventArg) {
       const item = eventArg._data.data
       // 恢复上一个marker
       if (this.preCase !== null) {
@@ -306,11 +307,11 @@
       getCaseInfo(this.caseListQuery).then(res => {
         console.log(res.data, '事件详情')
         this.caseList = res.data.value || []
-          this.caseTotal = this.caseList.length
+        this.caseTotal = this.caseList.length
       })
     },
-        // 事件换页
-        changePage(val) {
+    // 事件换页
+    changePage(val) {
       if (val && val.page) {
         this.caseListQuery.pageNo = val.page
       }
diff --git a/src/pages/ywts/zyhj/hb/alarmPop.vue b/src/pages/ywts/zyhj/hb/alarmPop.vue
new file mode 100644
index 0000000..3f4ac5a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/alarmPop.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>告警设备: {{
+              gdInfo.devicetypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警内容: {{
+              gdInfo.alarmcontent }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警状态: {{
+              gdInfo.alarmstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警时间: {{ gdInfo.createtime
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span :title="gdInfo.location"
+                >告警位置: {{ gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '155px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb/casePop.vue b/src/pages/ywts/zyhj/hb/casePop.vue
new file mode 100644
index 0000000..0c07a1a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/casePop.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>统一编码: {{
+              gdInfo.code }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件名称: {{
+              gdInfo.eventname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件类型: {{
+              gdInfo.eventypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件状态: {{
+              gdInfo.eventstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报时间: {{
+              gdInfo.createtime }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报人: {{
+              gdInfo.report }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>责任部门: {{
+              gdInfo.dutydeptname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>紧急程度: {{
+              gdInfo.urgencyname }}</span></i>
+              <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '250px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb/data.js b/src/pages/ywts/zyhj/hb/data.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/data.js

diff --git a/src/api/ywts/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
diff --git a/src/api/ywts/zyhj/yl.js b/src/api/ywts/zyhj/yl.js
index 63d7ad2..643e3d4 100644
--- a/src/api/ywts/zyhj/yl.js
+++ b/src/api/ywts/zyhj/yl.js
@@ -88,6 +88,9 @@
     url: 'zhyl-gktjljk/zhyl/sjxq',
     method: 'post',
     data,
+    params: {
+      ...data,
+    }
   })
 }
 // 苗木点位列表
diff --git a/src/pages/ywts/cszl/hw/index.vue b/src/pages/ywts/cszl/hw/index.vue
index e773b7d..87e65b1 100644
--- a/src/pages/ywts/cszl/hw/index.vue
+++ b/src/pages/ywts/cszl/hw/index.vue
@@ -94,6 +94,7 @@
   },
   mounted() {
     clearResetMap()
+    this.selectInde = 'deviceBtn'
     this.fetchPoint()
   },
   methods: {
@@ -263,17 +264,17 @@
         // this.caseList = res.data.value || []
         //   this.caseTotal = this.caseList.length
         res.data.value.forEach(item => {
-            AddLabelPoint(
-              item.id.replaceAll('.', ''),
-              '',
-              this.caseIcon[item.status],
-              [item.lon, item.lat, 0], 'gd-case', item,
-              this.clickCase)
-          })
+          AddLabelPoint(
+            item.id.replaceAll('.', ''),
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'gd-case', item,
+            this.clickCase)
+        })
       })
     },
-        // 点击事件icon
-        clickCase(eventArg) {
+    // 点击事件icon
+    clickCase(eventArg) {
       const item = eventArg._data.data
       // 恢复上一个marker
       if (this.preCase !== null) {
@@ -306,11 +307,11 @@
       getCaseInfo(this.caseListQuery).then(res => {
         console.log(res.data, '事件详情')
         this.caseList = res.data.value || []
-          this.caseTotal = this.caseList.length
+        this.caseTotal = this.caseList.length
       })
     },
-        // 事件换页
-        changePage(val) {
+    // 事件换页
+    changePage(val) {
       if (val && val.page) {
         this.caseListQuery.pageNo = val.page
       }
diff --git a/src/pages/ywts/zyhj/hb/alarmPop.vue b/src/pages/ywts/zyhj/hb/alarmPop.vue
new file mode 100644
index 0000000..3f4ac5a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/alarmPop.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>告警设备: {{
+              gdInfo.devicetypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警内容: {{
+              gdInfo.alarmcontent }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警状态: {{
+              gdInfo.alarmstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警时间: {{ gdInfo.createtime
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span :title="gdInfo.location"
+                >告警位置: {{ gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '155px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb/casePop.vue b/src/pages/ywts/zyhj/hb/casePop.vue
new file mode 100644
index 0000000..0c07a1a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/casePop.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>统一编码: {{
+              gdInfo.code }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件名称: {{
+              gdInfo.eventname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件类型: {{
+              gdInfo.eventypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件状态: {{
+              gdInfo.eventstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报时间: {{
+              gdInfo.createtime }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报人: {{
+              gdInfo.report }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>责任部门: {{
+              gdInfo.dutydeptname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>紧急程度: {{
+              gdInfo.urgencyname }}</span></i>
+              <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '250px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb/data.js b/src/pages/ywts/zyhj/hb/data.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/data.js
diff --git a/src/pages/ywts/zyhj/hb/index.vue b/src/pages/ywts/zyhj/hb/index.vue
index 84ae2d5..974bbf1 100644
--- a/src/pages/ywts/zyhj/hb/index.vue
+++ b/src/pages/ywts/zyhj/hb/index.vue
@@ -3,16 +3,20 @@
     <div class="video-menu">
       <!-- <common-btn id="ylBtn" :select="selectIndex === 'ylBtn'" :bg="offline" :bg-hover="offlineHover" width="5" height="5"
         text-hover="监测站点" @click="btnClick" /> -->
-        <layer-manager-mix title="监测站点" :isNeedIcon="false" :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'"
-        @btnClick="btnClick" @menuClick="menuClick" />
-        <common-btn id="alarmBtn" :select="selectIndex === 'alarmBtn'" :bg="alarm" :bg-hover="alarmHover" width="5" height="5"
-        text-hover="环保告警" @click="btnClick" />
-      <common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5"
-        text-hover="环保事件" @click="btnClick" />
-      <time-manager v-show="selectIndex === 'caseBtn'" />
+      <layer-manager-mix title="监测站点" :isNeedIcon="false" :menu-tab="menuTab" :menus="menus"
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
+      <common-btn id="alarmBtn" :select="selectIndex === 'alarmBtn'" :bg="alarm" :bg-hover="alarmHover" width="5"
+        height="5" text-hover="环保告警" @click="btnClick" />
+      <common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
+        height="5" text-hover="环保事件" @click="btnClick" />
+      <time-manager v-show="selectIndex === 'caseBtn'" @handleTimeRange="handleTimeRange" />
     </div>
     <!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
       v-show="isListPage" @close="isListPage = false" /> -->
+    <!-- 信息窗体 -->
+    <pointPop ref="popRef" v-if="showPop" @close="showPop = false" />
+    <alarmPop ref="alarmRef" v-show="showAlarm" @close="showAlarm = false" />
+    <casePop ref="caseRef" v-show="showCase" @close="showCase = false" />
   </div>
 </template>
 
@@ -24,13 +28,18 @@
 import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
 import { AddDivPointHighlight, AddLabel } from "../../../../utils/freedo";
 import ListPage from "@/components/ListPage";
-import { getOverviewStatistics, getPointList } from '@/api/ywts/zyhj/hb'
-
+import { getOverviewStatistics, getPointList, getAlarmList, getCaseList } from '@/api/ywts/zyhj/hb'
+import pointPop from './ponitPop.vue'
+import alarmPop from './alarmPop.vue'
+import casePop from './casePop.vue'
 export default {
   name: 'Hb',
-  components: {  TimeManager, LayerManagerMix, ListPage, CommonBtn },
+  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, pointPop, alarmPop, casePop },
   data() {
     return {
+      showPop: false,
+      showAlarm: false,
+      showCase: false,
       isListPage: false,
       ktSelect: '',
       isShow: false,
@@ -46,7 +55,6 @@
         pageSize: 5
       },
       caseTotal: 0,
-      showPop: false,
       caseIcon: {
         1: require('@/assets/images/icon/事件/已撤案.png'),
         2: require('@/assets/images/icon/事件/指派中.png'),
@@ -76,6 +84,7 @@
       ylHover: require('@/assets/images/function/园林/园林选中.png'),
       caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
       caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
+      alarmIcon: require('@/assets/images/icon/视频云/坐标.png'),
       menuTab: [{
         name: '监测站点',
         value: 'device'
@@ -89,19 +98,202 @@
   },
   mounted() {
     clearResetMap()
+    this.selectIndex = 'layerBtn'
     this.fetchData()
   },
   methods: {
     async btnClick(e) {
+      clearResetMap()
       this.selectIndex = e.target.id
-      console.log(this.selectIndex, 'this.selectIndex')
+      switch (this.selectIndex) {
+        case "layerBtn":
+          this.fetchData()
+          break
+        case "alarmBtn":
+          this.fetchAlarm()
+          break
+        case "caseBtn":
+          this.fetchCase()
+          break
+
+      }
+    },
+    menuClick(e) {
+      console.log(e, 'e')
     },
     // 获取概括统计
     fetchData() {
-      getPointList({}).then(res => {
+      this.menuTab = [
+        {
+          name: '基础设施',
+          value: 'device'
+        }
+      ]
+      this.menus = {
+        device: [
+          {
+            type: '1', typename: '大气环境', total: 0,
+          },
+          {
+            type: '2', typename: '噪声环境', total: 0,
+          },
+          {
+            type: '3', typename: '污染源', total: 0,
+          },
+          {
+            type: '4', typename: '工地扬尘', total: 0,
+          },
+        ]
+      }
+      // getPointList({}).then(res => {
+      //   console.log(res.data, '概括统计')
+      // })
+      getOverviewStatistics({}).then(res => {
         console.log(res.data, '概括统计')
+        this.menus.device = res.data.value.map(item => ({
+          typename: item.typename,
+          type: item.type,
+          total: item.total,
+        }))
+        // 获取点位列表
+        getPointList({ pageNo: 1, pageSize: 5 }).then(res => {
+          this.markerList = [
+            {
+              "name": "大气环境",
+              "lon": "114.859995",
+              "location": "江西省赣州市南康区三江乡",
+              "id": "1676397864375291905",
+              "lat": "25.802129",
+              "typename": "1"
+            },
+            {
+              "name": "噪声环境",
+              "lon": "114.861027",
+              "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
+              "id": "1676398916763914241",
+              "lat": "25.757553",
+              "typename": "2"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.880246",
+              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+              "id": "1676414593390350337",
+              "lat": "25.753119",
+              "typename": "3"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.879855",
+              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+              "id": "1676414955455254529",
+              "lat": "25.752771",
+              "typename": "3"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.875438",
+              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+              "id": "1676418661630349312",
+              "lat": "25.748733",
+              "typename": "3"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.867371",
+              "location": "江西省赣州市章贡区105国道135号靠近松岭上",
+              "id": "1676422908220542977",
+              "lat": "25.750388",
+              "typename": "1"
+            },
+            {
+              "name": "工地扬尘",
+              "lon": "114.878448",
+              "location": "江西省赣州市章贡区潭东镇生态大道",
+              "id": "1676434916261236737",
+              "lat": "25.737305",
+              "typename": "4"
+            },
+          ]
+          this.markerListBak = JSON.parse(JSON.stringify(this.markerList))
+          this.markerList.forEach((item) => {
+            AddLabelPoint(
+              item.id,
+              `${item.name}`,
+              undefined,
+              [item.lon, item.lat, 0], 'yl-dev', item,
+              this.clickMarker)
+          })
+        })
       })
-    }
+    },
+    // 点击点位
+    clickMarker(eventArg) {
+      const item = eventArg._data.data
+      this.showPop = true
+      this.$nextTick(() => {
+        this.$refs.popRef.initData(item)
+      })
+    },
+    // 获取告警
+    fetchAlarm() {
+      console.log('获取告警')
+      getAlarmList({ pageNo: '1', pageSize: '99' }).then(res => {
+        console.log(res.data, '告警列表')
+        res.data.value.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.devicetypename}`,
+            this.alarmIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickAlarmIcon)
+        })
+      })
+    },
+    // 点击告警点位
+    clickAlarmIcon(eventArg) {
+      const item = eventArg._data.data
+      this.showAlarm = true
+      this.$nextTick(() => {
+        this.$refs.alarmRef.initData(item)
+      })
+    },
+    // 获取事件
+    fetchCase() {
+      console.log('获取事件')
+      getCaseList({ pageNo: '1', pageSize: '99', ...this.time }).then(res => {
+        console.log(res.data, '事件列表')
+        res.data.value.forEach((item) => {
+          console.log(this.caseIcon[item.eventstatus.trim()])
+          const icon = this.caseIcon[item.eventstatus.trim()] || ''
+          AddLabelPoint(
+            item.id,
+            `${item.eventypename}`,
+            icon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickCase)
+        })
+      })
+    },
+    // 事件图标点击
+    clickCase(eventArg) {
+      const item = eventArg._data.data
+      this.showCase = true
+      this.$nextTick(() => {
+        this.$refs.caseRef.initData(item)
+      })
+    },
+    // 事件时间查询条件
+    handleTimeRange(time) {
+      // this.isListPage = false
+      if (this.time.startTime !== '') {
+        this.time = time
+        clearResetMap()
+        this.fetchCase()
+      } else {
+        this.time = time
+      }
+    },
   }
 }
 </script>

diff --git a/src/api/ywts/zyhj/hb.js b/src/api/ywts/zyhj/hb.js
index 5e598d1..07625d1 100644
--- a/src/api/ywts/zyhj/hb.js
+++ b/src/api/ywts/zyhj/hb.js
@@ -8,7 +8,10 @@
   return request({
     url: 'zhhb-gktj/zhhb/gktj',
     method: 'post',
-    data
+    data,
+    params: {
+      ...data,
+    }
   })
 }
 // 环保点位列表
@@ -19,3 +22,26 @@
     data
   })
 }
+// 环保告警列表
+export function getAlarmList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbgjlb',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
+
+// 环保事件列表
+export function getCaseList(data) {
+  return request({
+    url: 'zhhb-gktj/zhhb/hbsjlbfy',
+    method: 'post',
+    // data
+    params: {
+      ...data
+    }
+  })
+}
diff --git a/src/api/ywts/zyhj/yl.js b/src/api/ywts/zyhj/yl.js
index 63d7ad2..643e3d4 100644
--- a/src/api/ywts/zyhj/yl.js
+++ b/src/api/ywts/zyhj/yl.js
@@ -88,6 +88,9 @@
     url: 'zhyl-gktjljk/zhyl/sjxq',
     method: 'post',
     data,
+    params: {
+      ...data,
+    }
   })
 }
 // 苗木点位列表
diff --git a/src/pages/ywts/cszl/hw/index.vue b/src/pages/ywts/cszl/hw/index.vue
index e773b7d..87e65b1 100644
--- a/src/pages/ywts/cszl/hw/index.vue
+++ b/src/pages/ywts/cszl/hw/index.vue
@@ -94,6 +94,7 @@
   },
   mounted() {
     clearResetMap()
+    this.selectInde = 'deviceBtn'
     this.fetchPoint()
   },
   methods: {
@@ -263,17 +264,17 @@
         // this.caseList = res.data.value || []
         //   this.caseTotal = this.caseList.length
         res.data.value.forEach(item => {
-            AddLabelPoint(
-              item.id.replaceAll('.', ''),
-              '',
-              this.caseIcon[item.status],
-              [item.lon, item.lat, 0], 'gd-case', item,
-              this.clickCase)
-          })
+          AddLabelPoint(
+            item.id.replaceAll('.', ''),
+            '',
+            this.caseIcon[item.status],
+            [item.lon, item.lat, 0], 'gd-case', item,
+            this.clickCase)
+        })
       })
     },
-        // 点击事件icon
-        clickCase(eventArg) {
+    // 点击事件icon
+    clickCase(eventArg) {
       const item = eventArg._data.data
       // 恢复上一个marker
       if (this.preCase !== null) {
@@ -306,11 +307,11 @@
       getCaseInfo(this.caseListQuery).then(res => {
         console.log(res.data, '事件详情')
         this.caseList = res.data.value || []
-          this.caseTotal = this.caseList.length
+        this.caseTotal = this.caseList.length
       })
     },
-        // 事件换页
-        changePage(val) {
+    // 事件换页
+    changePage(val) {
       if (val && val.page) {
         this.caseListQuery.pageNo = val.page
       }
diff --git a/src/pages/ywts/zyhj/hb/alarmPop.vue b/src/pages/ywts/zyhj/hb/alarmPop.vue
new file mode 100644
index 0000000..3f4ac5a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/alarmPop.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>告警设备: {{
+              gdInfo.devicetypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警内容: {{
+              gdInfo.alarmcontent }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警状态: {{
+              gdInfo.alarmstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>告警时间: {{ gdInfo.createtime
+                }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span :title="gdInfo.location"
+                >告警位置: {{ gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '155px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb/casePop.vue b/src/pages/ywts/zyhj/hb/casePop.vue
new file mode 100644
index 0000000..0c07a1a
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/casePop.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>统一编码: {{
+              gdInfo.code }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件名称: {{
+              gdInfo.eventname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件类型: {{
+              gdInfo.eventypename }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>事件状态: {{
+              gdInfo.eventstatusname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报时间: {{
+              gdInfo.createtime }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>上报人: {{
+              gdInfo.report }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>责任部门: {{
+              gdInfo.dutydeptname }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>紧急程度: {{
+              gdInfo.urgencyname }}</span></i>
+              <i class="item-line one-line" style="width: 100%;" :title="gdInfo.location"><span>位置: {{
+              gdInfo.location }}</span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '250px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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/zyhj/hb/data.js b/src/pages/ywts/zyhj/hb/data.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/data.js
diff --git a/src/pages/ywts/zyhj/hb/index.vue b/src/pages/ywts/zyhj/hb/index.vue
index 84ae2d5..974bbf1 100644
--- a/src/pages/ywts/zyhj/hb/index.vue
+++ b/src/pages/ywts/zyhj/hb/index.vue
@@ -3,16 +3,20 @@
     <div class="video-menu">
       <!-- <common-btn id="ylBtn" :select="selectIndex === 'ylBtn'" :bg="offline" :bg-hover="offlineHover" width="5" height="5"
         text-hover="监测站点" @click="btnClick" /> -->
-        <layer-manager-mix title="监测站点" :isNeedIcon="false" :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'"
-        @btnClick="btnClick" @menuClick="menuClick" />
-        <common-btn id="alarmBtn" :select="selectIndex === 'alarmBtn'" :bg="alarm" :bg-hover="alarmHover" width="5" height="5"
-        text-hover="环保告警" @click="btnClick" />
-      <common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5"
-        text-hover="环保事件" @click="btnClick" />
-      <time-manager v-show="selectIndex === 'caseBtn'" />
+      <layer-manager-mix title="监测站点" :isNeedIcon="false" :menu-tab="menuTab" :menus="menus"
+        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
+      <common-btn id="alarmBtn" :select="selectIndex === 'alarmBtn'" :bg="alarm" :bg-hover="alarmHover" width="5"
+        height="5" text-hover="环保告警" @click="btnClick" />
+      <common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
+        height="5" text-hover="环保事件" @click="btnClick" />
+      <time-manager v-show="selectIndex === 'caseBtn'" @handleTimeRange="handleTimeRange" />
     </div>
     <!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
       v-show="isListPage" @close="isListPage = false" /> -->
+    <!-- 信息窗体 -->
+    <pointPop ref="popRef" v-if="showPop" @close="showPop = false" />
+    <alarmPop ref="alarmRef" v-show="showAlarm" @close="showAlarm = false" />
+    <casePop ref="caseRef" v-show="showCase" @close="showCase = false" />
   </div>
 </template>
 
@@ -24,13 +28,18 @@
 import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
 import { AddDivPointHighlight, AddLabel } from "../../../../utils/freedo";
 import ListPage from "@/components/ListPage";
-import { getOverviewStatistics, getPointList } from '@/api/ywts/zyhj/hb'
-
+import { getOverviewStatistics, getPointList, getAlarmList, getCaseList } from '@/api/ywts/zyhj/hb'
+import pointPop from './ponitPop.vue'
+import alarmPop from './alarmPop.vue'
+import casePop from './casePop.vue'
 export default {
   name: 'Hb',
-  components: {  TimeManager, LayerManagerMix, ListPage, CommonBtn },
+  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, pointPop, alarmPop, casePop },
   data() {
     return {
+      showPop: false,
+      showAlarm: false,
+      showCase: false,
       isListPage: false,
       ktSelect: '',
       isShow: false,
@@ -46,7 +55,6 @@
         pageSize: 5
       },
       caseTotal: 0,
-      showPop: false,
       caseIcon: {
         1: require('@/assets/images/icon/事件/已撤案.png'),
         2: require('@/assets/images/icon/事件/指派中.png'),
@@ -76,6 +84,7 @@
       ylHover: require('@/assets/images/function/园林/园林选中.png'),
       caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
       caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
+      alarmIcon: require('@/assets/images/icon/视频云/坐标.png'),
       menuTab: [{
         name: '监测站点',
         value: 'device'
@@ -89,19 +98,202 @@
   },
   mounted() {
     clearResetMap()
+    this.selectIndex = 'layerBtn'
     this.fetchData()
   },
   methods: {
     async btnClick(e) {
+      clearResetMap()
       this.selectIndex = e.target.id
-      console.log(this.selectIndex, 'this.selectIndex')
+      switch (this.selectIndex) {
+        case "layerBtn":
+          this.fetchData()
+          break
+        case "alarmBtn":
+          this.fetchAlarm()
+          break
+        case "caseBtn":
+          this.fetchCase()
+          break
+
+      }
+    },
+    menuClick(e) {
+      console.log(e, 'e')
     },
     // 获取概括统计
     fetchData() {
-      getPointList({}).then(res => {
+      this.menuTab = [
+        {
+          name: '基础设施',
+          value: 'device'
+        }
+      ]
+      this.menus = {
+        device: [
+          {
+            type: '1', typename: '大气环境', total: 0,
+          },
+          {
+            type: '2', typename: '噪声环境', total: 0,
+          },
+          {
+            type: '3', typename: '污染源', total: 0,
+          },
+          {
+            type: '4', typename: '工地扬尘', total: 0,
+          },
+        ]
+      }
+      // getPointList({}).then(res => {
+      //   console.log(res.data, '概括统计')
+      // })
+      getOverviewStatistics({}).then(res => {
         console.log(res.data, '概括统计')
+        this.menus.device = res.data.value.map(item => ({
+          typename: item.typename,
+          type: item.type,
+          total: item.total,
+        }))
+        // 获取点位列表
+        getPointList({ pageNo: 1, pageSize: 5 }).then(res => {
+          this.markerList = [
+            {
+              "name": "大气环境",
+              "lon": "114.859995",
+              "location": "江西省赣州市南康区三江乡",
+              "id": "1676397864375291905",
+              "lat": "25.802129",
+              "typename": "1"
+            },
+            {
+              "name": "噪声环境",
+              "lon": "114.861027",
+              "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
+              "id": "1676398916763914241",
+              "lat": "25.757553",
+              "typename": "2"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.880246",
+              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+              "id": "1676414593390350337",
+              "lat": "25.753119",
+              "typename": "3"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.879855",
+              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+              "id": "1676414955455254529",
+              "lat": "25.752771",
+              "typename": "3"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.875438",
+              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
+              "id": "1676418661630349312",
+              "lat": "25.748733",
+              "typename": "3"
+            },
+            {
+              "name": "污染源",
+              "lon": "114.867371",
+              "location": "江西省赣州市章贡区105国道135号靠近松岭上",
+              "id": "1676422908220542977",
+              "lat": "25.750388",
+              "typename": "1"
+            },
+            {
+              "name": "工地扬尘",
+              "lon": "114.878448",
+              "location": "江西省赣州市章贡区潭东镇生态大道",
+              "id": "1676434916261236737",
+              "lat": "25.737305",
+              "typename": "4"
+            },
+          ]
+          this.markerListBak = JSON.parse(JSON.stringify(this.markerList))
+          this.markerList.forEach((item) => {
+            AddLabelPoint(
+              item.id,
+              `${item.name}`,
+              undefined,
+              [item.lon, item.lat, 0], 'yl-dev', item,
+              this.clickMarker)
+          })
+        })
       })
-    }
+    },
+    // 点击点位
+    clickMarker(eventArg) {
+      const item = eventArg._data.data
+      this.showPop = true
+      this.$nextTick(() => {
+        this.$refs.popRef.initData(item)
+      })
+    },
+    // 获取告警
+    fetchAlarm() {
+      console.log('获取告警')
+      getAlarmList({ pageNo: '1', pageSize: '99' }).then(res => {
+        console.log(res.data, '告警列表')
+        res.data.value.forEach((item) => {
+          AddLabelPoint(
+            item.id,
+            `${item.devicetypename}`,
+            this.alarmIcon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickAlarmIcon)
+        })
+      })
+    },
+    // 点击告警点位
+    clickAlarmIcon(eventArg) {
+      const item = eventArg._data.data
+      this.showAlarm = true
+      this.$nextTick(() => {
+        this.$refs.alarmRef.initData(item)
+      })
+    },
+    // 获取事件
+    fetchCase() {
+      console.log('获取事件')
+      getCaseList({ pageNo: '1', pageSize: '99', ...this.time }).then(res => {
+        console.log(res.data, '事件列表')
+        res.data.value.forEach((item) => {
+          console.log(this.caseIcon[item.eventstatus.trim()])
+          const icon = this.caseIcon[item.eventstatus.trim()] || ''
+          AddLabelPoint(
+            item.id,
+            `${item.eventypename}`,
+            icon,
+            [item.lon, item.lat, 0], 'yl-dev', item,
+            this.clickCase)
+        })
+      })
+    },
+    // 事件图标点击
+    clickCase(eventArg) {
+      const item = eventArg._data.data
+      this.showCase = true
+      this.$nextTick(() => {
+        this.$refs.caseRef.initData(item)
+      })
+    },
+    // 事件时间查询条件
+    handleTimeRange(time) {
+      // this.isListPage = false
+      if (this.time.startTime !== '') {
+        this.time = time
+        clearResetMap()
+        this.fetchCase()
+      } else {
+        this.time = time
+      }
+    },
   }
 }
 </script>
diff --git a/src/pages/ywts/zyhj/hb/ponitPop.vue b/src/pages/ywts/zyhj/hb/ponitPop.vue
new file mode 100644
index 0000000..a4c64ae
--- /dev/null
+++ b/src/pages/ywts/zyhj/hb/ponitPop.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="bottom"
+    :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height: heightDict[gdInfo.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="item-line one-line" style="width: 100%;"><span>点位类型名称: {{ gdInfo.name
+            }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>点位经纬度: {{ gdInfo.lon
+            }},{{ gdInfo.lat }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span>点位ID: {{ gdInfo.lon
+            }},{{ gdInfo.id }}</span></i>
+            <i class="item-line one-line" style="width: 100%;"><span :title="gdInfo.location">点位位置: {{ gdInfo.location
+                }}
+              </span></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { showPositin } from '@/utils/freedo/index'
+export default {
+  name: 'videoPop',
+  data() {
+    return {
+      titleImg: require('@/assets/images/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
+      list: ['', '', '', ''],
+      gdInfo: {},
+      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: '125px',
+        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.gdInfo = item
+      // window.addEventListener('mousemove', (event) => {
+      //   this.windowPostion = {
+      //     x: event.clientX - 165,
+      //     y: event.clientY - 250
+      //   }
+      // })
+    }
+  },
+  // mounted(){
+
+  // }
+}
+</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;
+
+}
+
+.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>