diff --git a/src/icons/svg/toolbox.svg b/src/icons/svg/toolbox.svg
new file mode 100644
index 0000000..8b06d0f
--- /dev/null
+++ b/src/icons/svg/toolbox.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567133891408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4517" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M171.5 511.7L59.5 383l331.7-167.3 106.2 133-325.9 163z m0 0M503 348.7l110.6-133L938 385.9 831.8 511.7 503 348.7z m0 0M152 705.7l293.5 145.9 49.1-125.8v291.7L150.9 860.8l1.1-155.1z m0 0M849.3 706.7L552.2 851.8l-45.5-126.1v291.7l342.6-156.6V706.7z m0 0" fill="#1296DB" p-id="4518"></path><path d="M746.5 400.3l18.6 17.8M859.1 292.1L728 418.1c-5.1 4.9-13.4 4.9-18.5 0l-27.8-26.7s-27.8 26.7-55.6 53.5c-27.8 26.7-16.8 90.8-9.3 98 7.5 7.2 74.2 17.8 102-8.9 27.8-26.7 55.7-53.5 55.7-53.5l-27.8-26.7c-5.1-4.9-5.1-12.9 0-17.8l131.1-126" fill="#1296DB" p-id="4519"></path><path d="M964.5 271.1l-18.6 17.8c-15.4 14.8-51 40.1-78.8 13.4-27.8-26.7-1.5-61 13.9-75.7l18.6-17.8 64.9 62.3zM881 226.5l64.9 62.4M728 418.1l-27.8 26.7-9.3 26.7 27.8-8.9 27.8-26.7" fill="#1296DB" p-id="4520"></path><path d="M480.6 374.9c-0.4 16.5-14.4 172.8-14.9 195.9-0.2 7.3 5.8 13.3 13.4 13.5l24 0.5c3.8 0.1 6.8 3.1 6.7 6.7l-0.6 26.4-109.9-2.4 0.6-26.4c0.1-3.6 3.2-6.5 7-6.4l24 0.5c7.6 0.2 13.9-5.6 14-12.9 0.6-23.1-6-179.9-5.7-196.4 0.3-10.9 9.7-19.6 21.1-19.3 11.5 0.3 20.5 9.3 20.3 20.3zM399.3 615.5l-1.4 59.4c-0.1 3.6 2.9 6.7 6.7 6.7l96.2 2.1c3.8 0.1 6.9-2.8 7-6.4l1.4-59.4" fill="#1296DB" p-id="4521"></path><path d="M455.2 369.9c-2.8 2.5-2.9 6.8-0.2 9.4s7.1 2.8 9.8 0.2 2.9-6.8 0.2-9.4c-2.7-2.6-7.1-2.7-9.8-0.2zM487.6 661.5l-0.5 22M470.8 644.6l-0.9 38.5M443.2 665.3l-0.4 17.2M424 646l-0.8 36.1" fill="#1296DB" p-id="4522"></path><path d="M173.7 205.3s51.8 22.6 68.7 77.7c8.5 27.6 54.9 179.2 54.9 179.2 5.8 19 26.6 29.9 46.4 24.3 19.8-5.6 31.1-25.6 25.3-44.6 0 0-42.3-137.8-54.9-179.2-16.9-55.1 13.9-101 13.9-101" fill="#1296DB" p-id="4523"></path><path d="M331.3 115.5c-12.8-41.9-40.7-78.4-68.4-70.5l16.9 55.1c4.7 15.2-14 33.9-41.8 41.8-27.7 7.8-54 1.9-58.7-13.4l-16.9-55.1c-27.7 7.8-30.5 53-17.7 94.9 12.8 41.9 58.9 58.2 114.4 42.5s85.1-53.4 72.2-95.3z" fill="#1296DB" p-id="4524"></path><path d="M611 229c-7.4-7.5-10.9-19.2-8.1-31.2 2.8-12 11.1-21.2 21.1-24.9l29.2-126.2c5.4-23.2-13.1-32.2-37.3-37.4S571 4.7 565.6 28l-29.2 126.2c7.4 7.5 10.9 19.2 8.1 31.2-2.8 12-11.1 21.2-21.1 24.9l-3.3 14 87.6 18.7 3.3-14z" fill="#1296DB" p-id="4525"></path><path d="M578.6 236.8l-48.7 210.3-29.2-6.2 48.7-210.4M510.4 398.8l29.2 6.3" fill="#1296DB" p-id="4526"></path><path d="M171.3 512.2l-58.2 153L439 826.9l58.2-161.6-325.9-153.1z m0 0M559.8 825.4l-55.3-160.2 327.3-153 65.5 151.6-337.5 161.6z m0 0" fill="#1296DB" p-id="4527"></path></svg>
\ No newline at end of file

diff --git a/src/icons/svg/toolbox.svg b/src/icons/svg/toolbox.svg
new file mode 100644
index 0000000..8b06d0f
--- /dev/null
+++ b/src/icons/svg/toolbox.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567133891408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4517" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M171.5 511.7L59.5 383l331.7-167.3 106.2 133-325.9 163z m0 0M503 348.7l110.6-133L938 385.9 831.8 511.7 503 348.7z m0 0M152 705.7l293.5 145.9 49.1-125.8v291.7L150.9 860.8l1.1-155.1z m0 0M849.3 706.7L552.2 851.8l-45.5-126.1v291.7l342.6-156.6V706.7z m0 0" fill="#1296DB" p-id="4518"></path><path d="M746.5 400.3l18.6 17.8M859.1 292.1L728 418.1c-5.1 4.9-13.4 4.9-18.5 0l-27.8-26.7s-27.8 26.7-55.6 53.5c-27.8 26.7-16.8 90.8-9.3 98 7.5 7.2 74.2 17.8 102-8.9 27.8-26.7 55.7-53.5 55.7-53.5l-27.8-26.7c-5.1-4.9-5.1-12.9 0-17.8l131.1-126" fill="#1296DB" p-id="4519"></path><path d="M964.5 271.1l-18.6 17.8c-15.4 14.8-51 40.1-78.8 13.4-27.8-26.7-1.5-61 13.9-75.7l18.6-17.8 64.9 62.3zM881 226.5l64.9 62.4M728 418.1l-27.8 26.7-9.3 26.7 27.8-8.9 27.8-26.7" fill="#1296DB" p-id="4520"></path><path d="M480.6 374.9c-0.4 16.5-14.4 172.8-14.9 195.9-0.2 7.3 5.8 13.3 13.4 13.5l24 0.5c3.8 0.1 6.8 3.1 6.7 6.7l-0.6 26.4-109.9-2.4 0.6-26.4c0.1-3.6 3.2-6.5 7-6.4l24 0.5c7.6 0.2 13.9-5.6 14-12.9 0.6-23.1-6-179.9-5.7-196.4 0.3-10.9 9.7-19.6 21.1-19.3 11.5 0.3 20.5 9.3 20.3 20.3zM399.3 615.5l-1.4 59.4c-0.1 3.6 2.9 6.7 6.7 6.7l96.2 2.1c3.8 0.1 6.9-2.8 7-6.4l1.4-59.4" fill="#1296DB" p-id="4521"></path><path d="M455.2 369.9c-2.8 2.5-2.9 6.8-0.2 9.4s7.1 2.8 9.8 0.2 2.9-6.8 0.2-9.4c-2.7-2.6-7.1-2.7-9.8-0.2zM487.6 661.5l-0.5 22M470.8 644.6l-0.9 38.5M443.2 665.3l-0.4 17.2M424 646l-0.8 36.1" fill="#1296DB" p-id="4522"></path><path d="M173.7 205.3s51.8 22.6 68.7 77.7c8.5 27.6 54.9 179.2 54.9 179.2 5.8 19 26.6 29.9 46.4 24.3 19.8-5.6 31.1-25.6 25.3-44.6 0 0-42.3-137.8-54.9-179.2-16.9-55.1 13.9-101 13.9-101" fill="#1296DB" p-id="4523"></path><path d="M331.3 115.5c-12.8-41.9-40.7-78.4-68.4-70.5l16.9 55.1c4.7 15.2-14 33.9-41.8 41.8-27.7 7.8-54 1.9-58.7-13.4l-16.9-55.1c-27.7 7.8-30.5 53-17.7 94.9 12.8 41.9 58.9 58.2 114.4 42.5s85.1-53.4 72.2-95.3z" fill="#1296DB" p-id="4524"></path><path d="M611 229c-7.4-7.5-10.9-19.2-8.1-31.2 2.8-12 11.1-21.2 21.1-24.9l29.2-126.2c5.4-23.2-13.1-32.2-37.3-37.4S571 4.7 565.6 28l-29.2 126.2c7.4 7.5 10.9 19.2 8.1 31.2-2.8 12-11.1 21.2-21.1 24.9l-3.3 14 87.6 18.7 3.3-14z" fill="#1296DB" p-id="4525"></path><path d="M578.6 236.8l-48.7 210.3-29.2-6.2 48.7-210.4M510.4 398.8l29.2 6.3" fill="#1296DB" p-id="4526"></path><path d="M171.3 512.2l-58.2 153L439 826.9l58.2-161.6-325.9-153.1z m0 0M559.8 825.4l-55.3-160.2 327.3-153 65.5 151.6-337.5 161.6z m0 0" fill="#1296DB" p-id="4527"></path></svg>
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..175ecb3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -91,3 +91,6 @@
   max-width:700px !important;
   margin: 0px auto;
 }
+.search-div{
+  margin-bottom: 10px;
+}

diff --git a/src/icons/svg/toolbox.svg b/src/icons/svg/toolbox.svg
new file mode 100644
index 0000000..8b06d0f
--- /dev/null
+++ b/src/icons/svg/toolbox.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567133891408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4517" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M171.5 511.7L59.5 383l331.7-167.3 106.2 133-325.9 163z m0 0M503 348.7l110.6-133L938 385.9 831.8 511.7 503 348.7z m0 0M152 705.7l293.5 145.9 49.1-125.8v291.7L150.9 860.8l1.1-155.1z m0 0M849.3 706.7L552.2 851.8l-45.5-126.1v291.7l342.6-156.6V706.7z m0 0" fill="#1296DB" p-id="4518"></path><path d="M746.5 400.3l18.6 17.8M859.1 292.1L728 418.1c-5.1 4.9-13.4 4.9-18.5 0l-27.8-26.7s-27.8 26.7-55.6 53.5c-27.8 26.7-16.8 90.8-9.3 98 7.5 7.2 74.2 17.8 102-8.9 27.8-26.7 55.7-53.5 55.7-53.5l-27.8-26.7c-5.1-4.9-5.1-12.9 0-17.8l131.1-126" fill="#1296DB" p-id="4519"></path><path d="M964.5 271.1l-18.6 17.8c-15.4 14.8-51 40.1-78.8 13.4-27.8-26.7-1.5-61 13.9-75.7l18.6-17.8 64.9 62.3zM881 226.5l64.9 62.4M728 418.1l-27.8 26.7-9.3 26.7 27.8-8.9 27.8-26.7" fill="#1296DB" p-id="4520"></path><path d="M480.6 374.9c-0.4 16.5-14.4 172.8-14.9 195.9-0.2 7.3 5.8 13.3 13.4 13.5l24 0.5c3.8 0.1 6.8 3.1 6.7 6.7l-0.6 26.4-109.9-2.4 0.6-26.4c0.1-3.6 3.2-6.5 7-6.4l24 0.5c7.6 0.2 13.9-5.6 14-12.9 0.6-23.1-6-179.9-5.7-196.4 0.3-10.9 9.7-19.6 21.1-19.3 11.5 0.3 20.5 9.3 20.3 20.3zM399.3 615.5l-1.4 59.4c-0.1 3.6 2.9 6.7 6.7 6.7l96.2 2.1c3.8 0.1 6.9-2.8 7-6.4l1.4-59.4" fill="#1296DB" p-id="4521"></path><path d="M455.2 369.9c-2.8 2.5-2.9 6.8-0.2 9.4s7.1 2.8 9.8 0.2 2.9-6.8 0.2-9.4c-2.7-2.6-7.1-2.7-9.8-0.2zM487.6 661.5l-0.5 22M470.8 644.6l-0.9 38.5M443.2 665.3l-0.4 17.2M424 646l-0.8 36.1" fill="#1296DB" p-id="4522"></path><path d="M173.7 205.3s51.8 22.6 68.7 77.7c8.5 27.6 54.9 179.2 54.9 179.2 5.8 19 26.6 29.9 46.4 24.3 19.8-5.6 31.1-25.6 25.3-44.6 0 0-42.3-137.8-54.9-179.2-16.9-55.1 13.9-101 13.9-101" fill="#1296DB" p-id="4523"></path><path d="M331.3 115.5c-12.8-41.9-40.7-78.4-68.4-70.5l16.9 55.1c4.7 15.2-14 33.9-41.8 41.8-27.7 7.8-54 1.9-58.7-13.4l-16.9-55.1c-27.7 7.8-30.5 53-17.7 94.9 12.8 41.9 58.9 58.2 114.4 42.5s85.1-53.4 72.2-95.3z" fill="#1296DB" p-id="4524"></path><path d="M611 229c-7.4-7.5-10.9-19.2-8.1-31.2 2.8-12 11.1-21.2 21.1-24.9l29.2-126.2c5.4-23.2-13.1-32.2-37.3-37.4S571 4.7 565.6 28l-29.2 126.2c7.4 7.5 10.9 19.2 8.1 31.2-2.8 12-11.1 21.2-21.1 24.9l-3.3 14 87.6 18.7 3.3-14z" fill="#1296DB" p-id="4525"></path><path d="M578.6 236.8l-48.7 210.3-29.2-6.2 48.7-210.4M510.4 398.8l29.2 6.3" fill="#1296DB" p-id="4526"></path><path d="M171.3 512.2l-58.2 153L439 826.9l58.2-161.6-325.9-153.1z m0 0M559.8 825.4l-55.3-160.2 327.3-153 65.5 151.6-337.5 161.6z m0 0" fill="#1296DB" p-id="4527"></path></svg>
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..175ecb3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -91,3 +91,6 @@
   max-width:700px !important;
   margin: 0px auto;
 }
+.search-div{
+  margin-bottom: 10px;
+}
diff --git a/src/views/overview/overviewBdOffline.vue b/src/views/overview/overviewBdOffline.vue
index 0a4d0aa..f8adb36 100644
--- a/src/views/overview/overviewBdOffline.vue
+++ b/src/views/overview/overviewBdOffline.vue
@@ -1,52 +1,64 @@
 <template>
   <div>
-    <!--筛选条件-->
+    <!--搜索条件-->
     <div class="map-search-div">
       <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
         <el-row>
-          <el-form-item label="搜索：">
-            <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号/地址" clearable/>
-          </el-form-item>
-          <el-form-item v-if="wellTypeList.length>1">
-            <el-select v-model="listQuery.wellType" placeholder="选择闸井类型" clearable>
-              <el-option
-                v-for="item in wellTypeList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <dept-select v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" placeholder="选择派出所"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-form-item style="margin-left:10px">
-            <el-checkbox v-model="showAll">显示全部闸井</el-checkbox>
-          </el-form-item>
+          <el-input v-model.trim="keywords" placeholder="闸井编号/地址" clearable>
+            <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+          </el-input>
         </el-row>
       </el-form>
     </div>
-    <div class="refresh-div">
-      <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
-    </div>
-    <div v-show="hasAlarm" class="map-alarm-div">
-      <div class="map-alarm-div-header">
-        告警列表
-        <span class="icon-right" @click="tableShow=!tableShow">
-          <i v-if="tableShow" class="el-icon-arrow-up"/>
-          <i v-else class="el-icon-arrow-down"/>
-        </span>
+    <!--搜索结果弹出框-->
+    <el-popover
+      v-show="searchWells.length>0"
+      v-model="showSelectList"
+      placement="bottom-end"
+      width="290"
+      trigger="click">
+      <el-card slot="reference" shadow="always" class="selectAnswer">共找到 {{ searchWells.length }} 个符合条件的井</el-card>
+      <div>
+        <div v-for="(well,index) in searchPageWells" :key="well.wellCode" class="search-card" @click="clickSearchItem(well)">
+          <div class="card-left">{{ index+1 }}</div>
+          <div class="card-right"><div class="card-title">{{ well.wellCode }}</div>
+            <div>
+              <span class="card-welltype">{{ well.positionInfo }}</span>
+            </div>
+          </div>
+        </div>
       </div>
-      <transition name="el-collapse-transition">
+      <div class="clear"/>
+      <el-pagination
+        :total="searchWells.length"
+        :current-page="page"
+        :page-size="pagesize"
+        :hide-on-single-page="true"
+        small
+        layout="prev, pager, next"
+        @current-change="handleCurrentChange"/>
+    </el-popover>
+    <!--倒计时和刷新按钮-->
+    <!--<div class="refresh-div">-->
+    <!--<span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>-->
+    <!--</div>-->
+    <!--告警列表弹框-->
+    <el-popover
+      v-show="alarmShowList.length>0"
+      v-model="alarmShow"
+      :visible-arrow="false"
+      :title="alarmtitle"
+      placement="left-start"
+      popper-class="alarm-list-popper"
+      trigger="manual">
+      <el-button slot="reference" type="danger" icon="el-icon-message-solid" class="alarmButton" circle @click="alarmShow = !alarmShow"/>
+      <div class="map-alarm-content">
         <el-scrollbar
-          v-show="tableShow"
-          :style="{visibility: tableShow?'visible':'hidden'}"
           :class="{moredatascollor:alarmList.length>6}"
           :native="false">
           <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
+            :data="alarmShowList"
+            :header-row-style="{background:'#F3F4F7'}"
             @row-click="alarmRowClick">
             <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
               <template slot-scope="scope">
@@ -55,22 +67,14 @@
             </el-table-column>
           </el-table>
         </el-scrollbar>
-      </transition>
-    </div>
+      </div>
+    </el-popover>
+    <!--加载框和弹窗-->
     <div v-loading="loading" class="overview-map-container">
       <!--地图-->
       <baidu-map ref="map" :center="center" :zoom="zoom" class="map-demo">
-        <!--闸井marker-->
-        <baidu-map-marker
-          v-for="marker in markers"
-          v-show="marker.visible"
-          :key="'well'+marker.wellId"
-          :position="marker.position"
-          :offset="offset"
-          :visible="marker.visible"
-          :icon="marker.icon"
-          @click="openInfoWindow(marker.wellId)"
-        />
+        <baidu-point-collection :points="showMarkers" shape="BMAP_POINT_SHAPE_CIRCLE" color="#66CDAA" size="BMAP_POINT_SIZE_SMALL" @click="openInfoWindow"/>
+        <!--报警的图标-->
         <baidu-map-marker
           v-for="alarm in alarmWells"
           v-show="alarm.visible"
@@ -79,8 +83,26 @@
           :offset="offset"
           :z-index="320"
           :visible="alarm.visible"
+          :icon="alarm.icon"
           @click="openAlarmWindow(alarm.wellId,alarm.position)"
         />
+        <!--符合筛选条件闸井marker-->
+        <baidu-map-marker
+          v-for="(marker, index) in searchPageWells"
+          v-show="marker.visible"
+          :key="'well'+marker.wellId"
+          :position="marker.position"
+          :offset="selectOffset"
+          :top="true"
+          :visible="marker.visible"
+          @click="openInfoWindow(marker)"
+        >
+          <baidu-label
+            :label-style="{color:'white',background:'rgba(0,0,0,0.0)', border:'none', fontSize : '12px'}"
+            :offset="{width: 5, height: 4}"
+            :content="index+1"/>
+        </baidu-map-marker>
+        <!--marker的弹出框窗口-->
         <baidu-map-info-window
           :position="currentWindow.position"
           :show="currentWindow.visible"
@@ -91,8 +113,8 @@
             <!--<div class="info-header">{{ wellInfo.wellCode }}</div>-->
             <div class="info-body">
               <div>闸井类型：{{ wellInfo.wellTypeName }}</div>
-              <div>井深：{{ wellInfo.deep }}(m)</div>
-              <div>派出所：{{ wellInfo.deptName }}</div>
+              <div>所属派出所：{{ wellInfo.deptName }}</div>
+              <div>权属单位：{{ wellInfo.owner }}</div>
               <div>详细地址：{{ wellInfo.position }}</div>
             </div>
           </div>
@@ -105,17 +127,63 @@
               <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
                 <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
                 <div>设备编号：<span>{{ alarm.devcode }}</span></div>
+                <div>告警时间：<span>{{ alarm.alarmTime }}</span></div>
               </div>
               <el-divider/>
-              <div>井深：{{ alarmInfo.deep }}(m)</div>
-              <div>派出所：{{ alarmInfo.deptName }}</div>
+              <div>所属分局：{{ alarmInfo.pidName }}</div>
+              <div>所属派出所：{{ alarmInfo.deptName }}</div>
+              <div>权属单位：{{ alarmInfo.owner }}</div>
               <div>详细地址：{{ alarmInfo.position }}</div>
             </div>
           </div>
         </baidu-map-info-window>
-
+        <!--新报警的固定弹出框-->
+        <!--<baidu-map-info-window-->
+        <!--v-for="window in alarmFixedWindows"-->
+        <!--:key="'window'+window.wellId"-->
+        <!--:position="window.position"-->
+        <!--:show="true"-->
+        <!--:title="wellInfo.wellCode"-->
+        <!--:class="smallalarmwindow"-->
+        <!--/>-->
       </baidu-map>
     </div>
+    <!--数据筛选弹框-->
+    <el-popover
+      placement="bottom-end"
+      title="数据筛选"
+      width="250"
+      trigger="click">
+      <el-button slot="reference" type="primary" icon="el-icon-menu" class="toolbox" circle/>
+      <div class="">
+        <el-form ref="selectForm" :model="listQuery" label-position="top">
+          <el-form-item label="派出所">
+            <el-cascader
+              v-model="listQuery.deptid"
+              :options="deptTreeList"
+              :props="deptProps"
+              :show-all-levels="false"
+              style="width:100%"
+              collapse-tags
+              clearable/>
+          </el-form-item>
+          <el-form-item v-if="wellTypeList.length>1" label="闸井类型">
+            <el-select v-model="listQuery.wellType" placeholder="选择闸井类型" style="width:100%" clearable>
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="filter">筛选</el-button>
+          <el-button class="filter-item" type="default" icon="el-icon-delete" @click="clearSelected">清除</el-button>
+          <el-form-item style="margin-top:10px">
+            <el-checkbox v-model="showAll">显示全部闸井</el-checkbox>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
   </div>
 </template>
 
@@ -123,61 +191,67 @@
 import SelectTree from '@/components/SelectTree/singleSelect'
 import { getWellType } from '@/api/well'
 import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview'
+import { judgeTree, toTreeList } from '@/utils/structure'
+import { getDeptTreeList } from '@/api/dept'
 import DeptSelect from '../../components/DeptSelect/index'
 import BaiduMap from '../../components/BMap/baiduMap'
 import BaiduMapMarker from '../../components/BMap/baiduMapMarker'
+import BaiduPointCollection from '../../components/BMap/baiduPointCollection'
 import BaiduMapInfoWindow from '../../components/BMap/baiduInfoWindow'
+import BaiduLabel from '../../components/BMap/baiduLabel'
 
 export default {
   name: 'OverviewBaidu',
-  components: { BaiduMapInfoWindow, BaiduMap, BaiduMapMarker, DeptSelect, SelectTree },
+  components: { BaiduLabel, BaiduMapInfoWindow, BaiduMap, BaiduMapMarker, BaiduPointCollection, DeptSelect, SelectTree },
   data() {
     return {
+      keywords: '', // 关键字
       listQuery: {
-        keywords: '', // 关键字
         wellType: '', // 井类型
-        deptid: '', // 组织机构
+        deptid: [], // 组织机构
         isAlarm: '1' // 是否报警
       }, // 筛选条件
       columns: [
         {
           text: '闸井编号',
           value: 'wellCode',
-          width: 100,
+          width: 80,
           align: 'center'
         },
-        {
-          text: '设备编号',
-          value: 'devcode',
-          width: 120,
-          align: 'center'
-        },
-        {
-          text: '告警原因',
-          value: 'alarmContent',
-          align: 'center',
-          width: 120
-        },
+        // {
+        //   text: '设备编号',
+        //   value: 'devcode',
+        //   width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '告警原因',
+        //   value: 'alarmContent',
+        //   align: 'center',
+        //   width: 100
+        // },
         {
           text: '时间',
           value: 'alarmTime',
-          width: 180,
+          width: 170,
           align: 'center'
         }
       ], // 显示列
       tableShow: true, // 是否显示告警列表
       tableIcon: 'el-icon-arrow-up',
       count: 30,
+      count2: 5,
       showWellType: this.showWellType(), // 是否显示闸井类型下拉
       wellTypeList: [], // 闸井类型列表
       deptProps: {
-        parent: 'pid',
+        multiple: true,
         value: 'id',
         label: 'name',
         children: 'children'
       }, // 权属单位树形下拉菜单
-      deptTreeList: null, // 组织树列表数据
+      deptTreeList: [], // 组织树列表数据
       showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      showDeptSelect: true, // 是否显示权属单位下拉
       icons: {
         '1': 'static/BMap/images/well-rain.svg',
         '2': 'static/BMap/images/well-sewage.svg',
@@ -187,12 +261,18 @@
       }, // 井类型图标字典
       commonIcon: 'static/BMap/images/well-common.svg',
       center: { lng: 116.4, lat: 39.9 }, // 地图中心
-      zoom: 14, // 地图缩放比例
+      zoom: 15, // 地图缩放比例
       markers: [], // 井列表标注marker
+      showMarkers: [], // 要显示的标注marker
+      selectedMarkers: [], // 筛选条件marker
       alarmList: [], // 报警列表
+      alarmShow: false,
+      hideWellCodes: [], // 要隐藏的井编号
       alarmWells: [], // 报警闸井列表
-      offset: { width: 0, height: 0 }, // 偏移量
+      offset: { width: 0, height: -10 }, // 偏移量
       alarmOffset: { width: -15, height: -30 }, // 偏移量
+      selectOffset: { width: 0, height: 0 },
+      // selectSize: { width: 40, height: 40},
       wellInfo: {
         wellCode: '',
         position: '',
@@ -214,27 +294,82 @@
         windowType: 'info' // 窗体类型：详情info或报警alarm
       }, // 当前窗体属性
       infoWindowClass: 'nomal-info-window',
+      smallalarmwindow: 'small-alarm-window',
       deptShowTop: false, // 是否显示顶级
-      clock: null, // 计时器
+      clock: null, // 30s计时器,刷新图标用
+      clock2: null, // 5s定时器，刷新地图中心用
+      timeOut: '', // 3分钟无操作定时器
       hasAlarm: false, // 是否有报警,
       showAll: false, // 是否显示全部闸井（包含报警和不报警，为false时只显示报警）
       firstAmount: false, // 是否第一次加载井数据
-      loading: true,
-      sampleicon: 'static/BMap/images/well-rain.svg'
+      loading: true, // 加载按钮
+      alarmicon: 'static/BMap/images/alarm-well.svg', // 报警按钮
+      alarmgificon: 'static/BMap/images/timgq.gif', // 报警按钮
+      searchWells: [], // 查询结果
+      searchPageWells: [], // 当前页结果
+      showSelectList: false, // 是否显示查询结果列表
+      page: 1, // 查询结果页码
+      pagesize: 5, // 查询结果每页结果数
+      centerIndex: 0, // 地图中心在alarmWells列表中的位置
+      audio: ''
+    }
+  },
+  computed: {
+    // 要显示的markers
+    // showMarkers: function() {
+    //   if (this.listQuery.isAlarm === '1') {
+    //     return this.markers.filter(function(marker) {
+    //       if (marker.wellStatus === 'alarm') {
+    //         return marker
+    //       }
+    //     })
+    //   } else {
+    //     return this.markers
+    //   }
+    // },
+    alarmShowList: function() {
+      const hideWellCodes = this.hideWellCodes
+      return this.alarmList.filter(function(item) {
+        if (hideWellCodes.indexOf(item.wellCode) === -1) {
+          return item
+        }
+      })
+    },
+    alarmFixedWindows: function() {
+      return this.alarmWells.filter(function(item) {
+        var nowTime = new Date().getTime()
+        var alarmTime = new Date(item.alarmTime).getTime()
+        // 临时用 >来看效果
+        if ((nowTime - alarmTime) < 60000) { // 时间差小于一分钟用动画，否则用静态图片
+          return item
+        }
+      })
+    },
+    alarmtitle: function() {
+      return '告警列表(' + this.alarmShowList.length + ')'
     }
   },
   watch: {
+    // 监控是否选择全部选项
     showAll(val) {
       if (val) { // 显示全部
         this.listQuery.isAlarm = '0'
         if (this.firstAmount === false) { // 如果是第一次，从后台加载全部数据
           this.getWellList()
+          this.firstAmount = true
         } else {
-          this.search()
+          this.filter()
         }
       } else { // 仅显示报警
         this.listQuery.isAlarm = '1'
-        this.search()
+        this.filter()
+      }
+    },
+    // 监控关键字，如果置空认为清空查询
+    keywords(val) {
+      if (val === '') {
+        this.searchWells = []
+        this.searchPageWells = []
       }
     }
   },
@@ -243,20 +378,113 @@
     this.getWellList()
     this.refreshAlarm()
     this.countDown()
+    this.fetchPcode()
+    this.webSocket()
+    // this.isTimeOut()
+    // this.refreshCenter()
   },
   mounted() {
   },
   methods: {
-    // 倒计时
+    // 30s倒计时
     countDown() {
       this.clock = window.setInterval(() => {
         this.count--
         if (this.count < 0) { // 当倒计时小于0时清除定时器
-          this.refreshAlarm()
-          this.count = 60
+          this.refreshAlarmIcon()
+          this.count = 30
         }
       }, 1000)
     },
+    // 更换地图中心计时器
+    countDownCenter() {
+      console.log('countDownCenter')
+      this.clock2 = window.setInterval(() => {
+        this.refreshCenter()
+      }, 5000)
+    },
+    // 加载组织列表树形下拉菜单
+    fetchPcode: function() {
+      const listQuery = {
+        deptType: '03'
+      }
+      getDeptTreeList(listQuery).then(response => {
+        const list = response.data.list
+        if (list.length <= 1) {
+          this.showDeptSelect = false
+        } else {
+          // list.push({ id: '0', name: '顶级', open: true, value: '0' })
+          if (list) {
+            // 如果有必要转树
+            if (judgeTree(list)) {
+              this.deptTreeList = toTreeList(response.data.list, '0', this.needTop)
+            } else {
+              this.deptTreeList = list
+            }
+            console.log(this.deptTreeList)
+          }
+        }
+      })
+    },
+    webSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        this.$notify({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
+        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
+        const socketUrl = 'ws://10.9.39.8:8080/army/webSocket/' + this.$store.getters.username
+        // const socketUrl = 'ws://127.0.0.1:8090/ws/' + this.$store.getters.username
+        console.log(socketUrl)
+        this.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        this.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        this.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          that.refreshAlarm(true)
+          that.playAudio()
+          that.$notify({
+            title: '新报警来了',
+            // 这里也可以把返回信息加入到message中显示
+            message: data.message,
+            type: 'warning',
+            onClick: () => {
+              that.$router.push({
+                path: '/overview'
+              })
+            }
+          })
+        }
+        // 监听socket错误
+        this.socket.onerror = function() {
+          that.$notify({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        this.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    },
+    // 清除选择
+    clearSelected() {
+      this.listQuery.deptid = []
+      this.listQuery.wellType = ''
+      this.filter()
+    },
     // 获取闸井类型
     fetchWellType() {
       getWellType().then(response => {
@@ -272,63 +500,103 @@
         }
       })
     },
-    // 数据筛选
+    // 数据查询，返回条符合查询结果的数据
     search() {
+      // 关闭显示的弹框
       this.currentWindow.visible = false
-      const hideWellIds = []// 要隐藏的井编号
-      const keywords = this.listQuery.keywords
-      const deptid = this.listQuery.deptid
-      const wellType = this.listQuery.wellType
-      const isAlarm = this.listQuery.isAlarm
-      let center = {}
+      const keywords = this.keywords // 输入查询条件
+      if (keywords === '') {
+        this.$message.warning('查询条件不能为空')
+        return
+      }
       // 查询全部井，是否匹配
+      this.searchWells = [] // 符合查询结果
       for (const marker of this.markers) {
         let show = true
-        // 关键字不为空，且没有匹配成功，不显示
         if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
           show = false
         }
-        // 部门不为空， 且没有匹配成功
-        if (deptid && deptid !== '' && marker.deptid !== deptid) {
+        if (marker.visible === false) {
           show = false
         }
-        // 井类型不为空，且没有匹配成功
-        if (wellType && wellType !== '' && marker.wellType !== wellType) {
-          show = false
+        if (show) {
+          marker.icon = 'static/BMap/images/well-common.svg'
+          this.searchWells.push(marker)
         }
-        // 如果只显示报警,井的状态不是报警
-        if (isAlarm === '1' && marker.wellStatus !== 'alarm') {
-          show = false
-        }
-        if (show === false) {
-          hideWellIds.push(marker.wellId)
-        } else {
-          center = marker.position
-        }
-        marker.visible = show
       }
       // 如果没有找到符合要求的井
-      if (hideWellIds.length === this.markers.length) {
+      if (this.searchWells.length === 0) {
         this.$message.warning('查无结果')
-        // 将全部查询结果隐藏
-        for (const alarmWell of this.alarmWells) {
-          alarmWell.visible = false
-        }
       } else {
-        // 将报警隐藏
-        for (const alarmWell of this.alarmWells) {
-          if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
-            alarmWell.visible = false
+        this.handleCurrentChange(1)
+        this.center = this.searchWells[0].position
+        this.zoom = 17
+        this.showSelectList = true
+      }
+    },
+    // 数据筛选
+    filter() {
+      // 根据筛选条件部门，井类型，报警状态进行筛选
+      const deptid = []
+      debugger
+      for (const deptList of this.listQuery.deptid) {
+        let lastIndex = deptList.length - 1
+        if (lastIndex >= 3) {
+          lastIndex--
+        }
+        deptid.push(deptList[lastIndex])
+        // deptid.concat(deptList)
+      }
+      debugger
+      console.log(deptid)
+      const wellType = this.listQuery.wellType
+      const isAlarm = this.listQuery.isAlarm
+      const hideWellIds = []
+      const hideWellCodes = []
+      // 如果查询条件为空，直接全部返回
+      if (deptid && deptid.length === 0 && wellType && wellType === '' && isAlarm !== '1') {
+        this.showMarkers = this.marker
+      } else {
+        this.showMarkers = []
+        for (const marker of this.markers) {
+          let show = true
+          // 部门不为空， 且没有匹配成功
+          if (deptid && deptid.length > 0 && deptid.indexOf(marker.deptid) === -1) {
+            show = false
+          }
+          // 井类型不为空，且没有匹配成功
+          if (wellType && wellType !== '' && marker.wellType !== wellType) {
+            show = false
+          }
+          // 如果只显示报警,井的状态不是报警
+          if (isAlarm === '1' && marker.wellStatus !== 'alarm') {
+            show = false
+          }
+          // 如果符合显示的条件
+          if (show) {
+            this.showMarkers.push(marker)
+            marker.visible = true
           } else {
-            alarmWell.visible = true
+            hideWellIds.push(marker.wellId)
+            hideWellCodes.push(marker.wellCode)
+            marker.visible = false
           }
         }
       }
-      if (center.length > 0) {
-        this.center = center
+      console.log(hideWellCodes.length)
+      for (const alarmWell of this.alarmWells) {
+        if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
+          alarmWell.visible = false
+        } else {
+          alarmWell.visible = true
+        }
+      }
+      this.hideWellCodes = hideWellCodes
+      if (this.showMarkers) {
+        this.$message.success('共找到符合筛选条件的闸井 ' + this.showMarkers.length + ' 个')
       }
     },
-    // 获取闸井列表
+    // 获取报警的闸井列表
     getWellList() {
       this.loading = true
       const listQuery = {
@@ -351,12 +619,16 @@
                   wellId: well.id,
                   wellCode: well.wellCode,
                   position: { lng: parseFloat(well.lngBaidu), lat: parseFloat(well.latBaidu) },
+                  lng: parseFloat(well.lngBaidu),
+                  lat: parseFloat(well.latBaidu),
                   positionInfo: well.position,
                   wellType: well.wellType,
+                  wellTypeName: well.wellTypeName,
+                  deptName: well.deptName,
                   deptid: well.deptid,
                   bfzt: well.bfzt,
                   // icon: this.icons[well.wellType],
-                  icon: this.commonIcon,
+                  // icon: this.commonIcon,
                   visible: true,
                   wellStatus: 'alarm'
                 })
@@ -367,8 +639,9 @@
               centerys.sort()
               const index = Math.floor(centerxs.length / 2)
               this.center = { lng: centerxs[index], lat: centerys[index] }
+              this.showMarkers = this.markers
             } else if (listQuery.isAlarm === '0') { // 状态正常的井
-              this.firstAmount = false
+              this.firstAmount = true
               const centerxs = []
               const centerys = []
               for (const well of wells) {
@@ -376,6 +649,8 @@
                   wellId: well.id,
                   wellCode: well.wellCode,
                   position: { lng: parseFloat(well.lngBaidu), lat: parseFloat(well.latBaidu) },
+                  lng: parseFloat(well.lngBaidu),
+                  lat: parseFloat(well.latBaidu),
                   positionInfo: well.position,
                   wellType: well.wellType,
                   deptid: well.deptid,
@@ -392,13 +667,15 @@
               centerys.sort()
               const index = Math.floor(centerxs.length / 2)
               this.center = { lng: centerxs[index], lat: centerys[index] }
+              this.showMarkers = this.markers
             }
           }
         }
       })
     },
     // 点击闸井详情气泡
-    openInfoWindow(wellId) {
+    openInfoWindow(point) {
+      const wellId = point.wellId
       console.log('click well')
 
       this.currentWindow.visible = false
@@ -411,7 +688,9 @@
             wellTypeName: wellInfo.wellTypeName,
             deptName: wellInfo.deptName,
             bfztName: wellInfo.bfztName,
-            deep: wellInfo.deep
+            deep: wellInfo.deep,
+            owner: wellInfo.owner,
+            pidName: wellInfo.pidName
           }
           this.currentWindow.position = { lng: wellInfo.lngBaidu, lat: wellInfo.latBaidu }
           this.$nextTick(() => {
@@ -422,31 +701,70 @@
       })
     },
     // 刷新报警列表
-    refreshAlarm() {
+    refreshAlarm(showWindow = false) {
       console.log('refreshAlarm')
-      this.count = 60
+      this.count = 30
       getAlarmsNow().then(response => {
         if (response.code === 200) {
           this.alarmList = response.data
           if (this.alarmList.length > 0) {
             this.hasAlarm = true
           }
+          const nowTime = new Date().getTime()
+          this.alarmWells = []
           for (const alarm of response.data) {
-            const item = this.alarmWells.findIndex(item => {
-              return item.wellCode === alarm.wellCode
-            })
-            if (item === -1) {
-              this.alarmWells.push({
-                wellCode: alarm.wellCode,
-                wellId: alarm.wellId,
-                position: { lng: alarm.lngBaidu, lat: alarm.latBaidu },
-                positionInfo: alarm.position,
-                visible: true
-              })
+            const alarmTime = new Date(alarm.alarmTime).getTime()
+            let icon = this.alarmicon
+            if ((nowTime - alarmTime) > 60000) { // 时间差小于一分钟用动画，否则用静态图片
+              icon = this.alarmicon
+            } else {
+              icon = this.alarmgificon
             }
+            this.alarmWells.push({
+              wellCode: alarm.wellCode,
+              wellId: alarm.wellId,
+              position: { lng: alarm.lngBaidu, lat: alarm.latBaidu },
+              positionInfo: alarm.position,
+              alarmTime: alarm.alarmTime,
+              icon: icon,
+              visible: true
+            })
+          }
+          if (showWindow) {
+            this.alarmNew()
           }
         }
       })
+      this.centerIndex = 0
+    },
+    // 刷新地图中心，打开报警窗口
+    refreshCenter() {
+      const centerIndex = this.centerIndex
+      if (this.alarmWells.length > 0) {
+        const alarm = this.alarmWells[centerIndex]
+        this.center = alarm.position
+        this.centerIndex = centerIndex >= (this.alarmWells.length - 1) ? 0 : centerIndex + 1
+        this.openAlarmWindow(alarm.wellId, alarm.position)
+      }
+    },
+    alarmNew() {
+      if (this.alarmWells.length > 0) {
+        const alarm = this.alarmWells[0]
+        this.center = alarm.position
+        this.openAlarmWindow(alarm.wellId, alarm.position)
+      }
+    },
+    // 刷新报警图片
+    refreshAlarmIcon() {
+      const nowTime = new Date().getTime()
+      for (const alarmWell of this.alarmWells) {
+        const alarmTime = new Date(alarmWell.alarmTime).getTime()
+        if ((nowTime - alarmTime) > 60000) { // 时间差小于一分钟用动画，否则用静态图片
+          alarmWell.icon = this.alarmicon
+        } else {
+          alarmWell.icon = this.alarmgificon
+        }
+      }
     },
     // 点击报警详情
     openAlarmWindow(wellId, position) {
@@ -454,10 +772,10 @@
       // 旧弹窗不显示
       this.currentWindow.visible = false
       // 清空查询条件
-      this.listQuery.keywords = ''
-      this.listQuery.wellType = ''
-      this.listQuery.deptid = ''
-      this.search()
+      this.keywords = ''
+      // this.listQuery.wellType = ''
+      // this.listQuery.deptid = []
+
       getWellAlarms(wellId).then(response => {
         if (response.code === 200) {
           const wellInfo = response.data
@@ -466,7 +784,9 @@
             position: wellInfo.position,
             deptName: wellInfo.deptName,
             alarms: wellInfo.alarmList,
-            deep: wellInfo.deep
+            deep: wellInfo.deep,
+            owner: wellInfo.owner,
+            pidName: wellInfo.pidName
           }
           this.currentWindow.position = position
           this.$nextTick(() => {
@@ -482,13 +802,48 @@
       const wellId = row.wellId
       for (const alarmWell of this.alarmWells) {
         if (alarmWell.wellId === wellId) {
-          this.center = alarmWell.position
           if (this.zoom < 18) {
             this.zoom = 18
           }
           this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
+          this.center = alarmWell.position
         }
       }
+    },
+    // 页码变化处理函数
+    handleCurrentChange(val) {
+      console.log('handleCurrentChange')
+      const offset = val
+      const start = (offset - 1) * this.pagesize
+      const end = start + this.pagesize
+      this.searchPageWells = this.searchWells.slice(start, end)
+    },
+    // 点击查询结果
+    clickSearchItem(well) {
+      this.center = well.position
+      this.zoom = 18
+    },
+    // 3分钟无操作定时器
+    startTimer() {
+      console.log('instartTimer')
+      window.clearInterval(this.clock2) // 清除循环更换地图中心定时器
+      const that = this
+      window.clearTimeout(that.timeOut)
+      that.timeOut = window.setTimeout(function() {
+        console.log('startTimer')
+        that.countDownCenter()
+      }, 1000 * 60 * 1)
+    },
+    // 判断超时
+    isTimeOut() {
+      console.log('isTimout')
+      const that = this
+      this.startTimer()
+      // document.body.onmouseup = that.startTimer
+      // document.body.onmousemove = that.startTimer
+      document.body.onkeyup = that.startTimer
+      document.body.onclick = that.startTimer
+      // document.body.ontouchend = that.startTimer
     }
   }
 }
@@ -499,9 +854,8 @@
 .map-search-div{
   position: absolute;
   z-index: 100;
-  padding: 5px 20px;
-  background-color: rgba(244, 244, 244, 0.9);
-  /*left: 90px;*/
+  left: 10px;
+  top:10px;
   .el-form-item{
     margin-bottom: 0px;
   }
@@ -526,18 +880,6 @@
       cursor: pointer;
     }
   }
-  .el-scrollbar {
-    /*height: 200px;*/
-    width: 100%;
-  }
-  .moredatascollor{
-    height: 200px;
-  }
-  .el-scrollbar__wrap {
-    overflow-y: auto;
-    overflow-x: hidden;
-    margin-bottom: 0px !important;
-}
 
 .el-table th{
 /*background-color: rgba(255, 229, 230, 0.8);*/
@@ -646,4 +988,101 @@
   .el-divider--horizontal{
     margin: 5px 0;
   }
+  .toolbox{
+    position: absolute;
+    right: 20px;
+    top: 70px;
+    z-index: 100;
+  }
+  .toolbox-content{
+    background-color: #e9eef2;
+    width:350px;
+    top: 60px;
+    z-index: 100;
+    padding:20px 5px 0px 10px;
+  }
+  .alarmButton{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    z-index: 100;
+  }
+  .alarm-list-popper{
+    /*max-height: 200px;*/
+    /*overflow: hidden;*/
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .map-alarm-content{
+      .alarm-list-table{
+        background-color: rgba(244, 233, 230, 1.0);
+      }
+      .alarm-list-header{
+        background-color: red;
+      }
+    }
+
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 250px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+  }
+  .selectAnswer{
+    width:290px;
+    background-color: #ffffff;
+    border: 1px solid #d3dce6;
+    padding-left: 10px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    position: absolute;
+    border-radius: initial;
+    left: 10px;
+    top: 55px;
+    z-index: 100;
+    text-align: left;
+    .el-card__body{
+      padding: 5px;
+      font-size: 14px;
+      color: #409EFF
+    }
+  }
+.search-card{
+  padding:5px 10px;
+  overflow: auto;
+  .card-left,.card-right{
+    float:left
+  }
+  .card-left{
+    width:10%;
+    line-height:25px;
+  }
+  .card-right{
+    width:90%;
+  }
+  .card-title{
+    font-size:16px;
+    font-weight: bold;
+    line-height: 25px;
+  }
+  .card-welltype{
+    line-height:25px;
+  }
+}
+.clear{
+  clear:both
+}
+.search-card:hover{
+  background-color: #f5f5f5;
+  cursor: pointer;
+
+}
+.small-alarm-window {
+
+}
 </style>