diff --git a/src/views/overview/overview_cmap.vue b/src/views/overview/overview_cmap.vue
new file mode 100644
index 0000000..d6f3ef4
--- /dev/null
+++ b/src/views/overview/overview_cmap.vue
@@ -0,0 +1,659 @@
+<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-button v-show="showClearBtn" class="filter-item" @click="clearSearch">清除查询</el-button>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部窨井</el-checkbox>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <!--倒计时刷新-->
+    <div v-if="refreshType=='clock'" class="refresh-div">
+      <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="clickRefreshIcon"/>
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="changeAlarm"/>
+    </div>
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm && alarmWells.length>0" 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>
+      </div>
+      <transition name="el-collapse-transition">
+        <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
+            @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">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div v-loading="loading" class="overview-map-container">
+      <!--地图-->
+      <!-- <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/> -->
+      <leaflet-map
+        id="map"
+        ref="map"
+        :show-all="showAll"
+        :show-larm="showAlarm"
+        :alarm-markers="alarmWells"
+        :normal-markers="normalWells"
+        :center="leftLetForm.center"
+        :zooms="leftLetForm.zooms"
+        :zoom="leftLetForm.zoom"
+        :basemaps="leftLetForm.basemaps"
+        @onload="readyMap"
+        @popupCenter="popupCenter"
+      >
+        <!-- <graphic-layer id="lamp" :data="lampList"> -->
+        <!-- <simple-popup slot="popup"/> -->
+        <!-- </graphic-layer> -->
+        <!--      <polyline-layer :routes="routes" color="#5EA279" weight="3"/>-->
+        <!-- <animate-routes-layer ref="routeLayer" :routes="routes" :weight="3" :icon="truckIcon" :icon-size="truckSize" :popup-anchor="truckPopupAnchor" :icon-anchor="truckAnchor" color="#5EA279"/> -->
+      </leaflet-map>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectTree from '@/components/SelectTree/singleSelect'
+import { getWellType } from '@/api/well'
+import { getWellList } from '@/api/overview'
+import { getAlarmsNow } from '@/api/overview'
+import DeptSelect from '../../components/DeptSelect/index'
+import Cmap from '../../components/CMap/components/cmap'
+import CmapMarker from '../../components/CMap/components/cmapMarker'
+import LeafletMap from '../../components/leaftletMap/leafletMap.vue'
+import { deepCopy } from '../../utils/index'
+
+export default {
+  name: 'Overview',
+  components: { CmapMarker, Cmap, DeptSelect, SelectTree, LeafletMap },
+  data() {
+    return {
+      leftLetForm: {
+        center: [39.9, 116.4], // 地图中心-北京
+        zooms: [8, 18], // 缩放范围
+        zoom: 12, // 缩放
+        basemaps: [
+          // ------------------------------亦庄----------------------------
+          // { name: 'tdtMap', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=map&x={x}&y={y}&z={z}&srs=EPSG%3A3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] },
+          // { name: 'tdtLabel', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=maplabel&x={x}&y={y}&z={z}&srs=EPSG:3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] }
+          // -----------------------------天地图---------------------------
+          { name: 'tdtMap', group: '矢量地图', show: true, url: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          { name: 'tdtLabel', group: '矢量地图', show: true, url: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] }
+          // { name: 'satellite', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satelliteLabel', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] }
+        ]
+      },
+      refreshType: 'clock', // 刷新数据方式：clock或websocket
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      columns: [
+        {
+          text: '窨井编号',
+          value: 'wellCode',
+          width: 100,
+          align: 'center'
+        },
+        {
+          text: '设备编号',
+          value: 'devcode',
+          width: 120,
+          align: 'center'
+        },
+        {
+          text: '告警原因',
+          value: 'alarmContent',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '时间',
+          value: 'alarmTime',
+          width: 180,
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      showWellType: this.showWellType(), // 是否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      deptProps: {
+        parent: 'pid',
+        value: 'id',
+        label: 'name',
+        children: 'children'
+      }, // 权属单位树形下拉菜单
+      deptTreeList: null, // 组织树列表数据
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: { lng: this.$store.getters.lng, lat: this.$store.getters.lat }, // 地图中心
+      zoom: 12, // 地图缩放比例
+      markers: [], // 井列表标注marker
+      alarmList: [], // 报警列表
+      alarmListOri: [], // 报警列表
+      alarmWells: [], // 显示报警井列表
+      normalWells: [], // 正常井列表
+      normalAllWells: [], // 全部正常井
+      alarmWellsOri: [], // 原始报警井列表
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      wellInfo: {
+        wellCode: '',
+        position: '',
+        wellTypeName: '',
+        deptName: '',
+        bfztName: '',
+        deep: ''
+      }, // 显示井详细信息气泡内容
+      alarmInfo: {
+        wellCode: '',
+        deptName: '',
+        position: '',
+        deep: '',
+        alarms: []
+      }, // 显示报警详情气泡内容
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: { lng: this.$store.getters.lng, lat: this.$store.getters.lat },
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      infoWindowClass: 'nomal-info-window',
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      count: 30, // 倒计时
+      refreshTimes: 30, // 多少s数据
+      showAlarm: true, // 是否显示报警
+      hasAlarm: false, // 是否有报警,
+      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      // showAll: true, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      firstAmount: true, // 是否第一次加载井数据
+      loading: false, // 加载图标是否显示
+      massMarks: null, // 海量点
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  watch: {
+    tableShow(val) {
+      console.log('报警列表的显示', val)
+    },
+    showAll(val) {
+      if (val) { // 显示全部井（包含报警和不报警，为false时只显示报警）
+        this.$refs.map.closePopup() // 关闭已打开的弹窗
+        this.listQuery.isAlarm = '0' // 是否报警
+        // 先清空查询条件
+        this.listQuery.deptid = '' // 组织机构
+        this.listQuery.keywords = '' // 关键字
+        this.listQuery.wellType = '' // 井类型
+        // 加载海量点
+        // this.$refs.map.renderPoi()
+        if (this.normalAllWells && this.normalAllWells.length) {
+          this.normalWells = deepCopy(this.normalAllWells)
+        } else {
+          this.fetchWellList() // 获取井信息
+        }
+        this.refreshAlarm()
+        // }
+      } else { // 仅显示报警
+        this.listQuery.isAlarm = '1'
+        // 清除海量点
+        // this.$refs.map.cleanPoi()
+      }
+    },
+    showAlarm(val) {
+      if (val) {
+        // this.alarmWells = this.alarmWellsOri
+        // this.alarmList = this.alarmListOri
+      } else {
+        this.alarmWells = []
+        this.alarmList = []
+      }
+    },
+    alarmWells: {
+      handler: function(newV, oldV) {
+        const tempArr = []
+        newV.forEach(element => {
+          this.alarmListOri.forEach(item => {
+            if (element.wellId === item.wellId) {
+              tempArr.push(item)
+            }
+          })
+        })
+        this.alarmList = tempArr
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    const that = this
+    that.fetchWellType()
+  },
+  activated() {
+    this.refreshAlarm()
+  },
+  methods: {
+    changeTableShow() {
+      this.tableShow = !this.tableShow
+      console.log('changeTableShow', this.tabltableShoweI)
+    },
+    popupCenter(val) {
+      this.leftLetForm.center = val
+    },
+    // 地图准备好后的操作
+    readyMap() {
+      console.log('readyMap')
+      const that = this
+      // that.fetchWellList() // 获取井信息
+      that.refreshAlarm() // 刷新报警内容
+      if (this.showAll) {
+        this.$refs.map.renderPoi() // 加载海量点
+      }
+      if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+        setTimeout(function() {
+          that.countDown()
+        }, 1000)
+      }
+    },
+    // 获取井类型，显示井类型下拉
+    fetchWellType() {
+      getWellType().then(response => {
+        this.wellTypeList = []
+        // 如果该用户支持的井类型只有一个，则不显示该筛选框
+        const wellTypes = this.$store.getters.wellTypes
+        for (const wellType of response.data) {
+          if (wellTypes.indexOf(wellType.value) !== -1) {
+            this.wellTypeList.push(wellType)
+          }
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    // 点击查询-数据查询
+    search(showMessage = true) {
+      this.$refs.map.closePopup() // 关闭已打开的弹窗
+      const keywords = this.listQuery.keywords
+      const deptid = this.listQuery.deptid
+      const wellType = this.listQuery.wellType
+      if (keywords === '' && deptid === '' && wellType === '') {
+        this.$message.warning('查询条件不能为空')
+      } else {
+        this.showClearBtn = true
+        // this.filterIcon(showMessage)
+        this.fetchWellList() // 获取井列表
+        this.fetchWellList('1') // 刷新报警列表
+      }
+    },
+    // 清除查询
+    clearSearch() {
+      this.$refs.map.closePopup() // 关闭已打开的弹窗
+      this.listQuery.wellType = ''
+      this.listQuery.deptid = ''
+      this.listQuery.keywords = ''
+      // this.fetchWellList() // 获取井列表
+      // if (this.normalAllWells.length) {
+      //   this.normalWells = deepCopy(this.normalAllWells) // 全部正常井信息
+      // } else {
+      if (this.showAll) {
+        this.fetchWellList()
+      }
+      // }
+      this.refreshAlarm() // 刷新报警列表
+      this.showClearBtn = false
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refresh Alarm')
+      this.count = this.refreshTimes
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          this.alarmListOri = response.data
+          if (this.alarmList.length > 0) {
+            this.hasAlarm = true
+          }
+          if (this.showAlarm) {
+            this.alarmList = this.alarmListOri
+          }
+          const alarmWellSets = []
+          for (const alarm of response.data) {
+            const index = alarmWellSets.findIndex(item => {
+              return item.wellCode === alarm.wellCode
+            })
+            if (index === -1) {
+              alarmWellSets.push({
+                wellCode: alarm.wellCode,
+                wellId: alarm.wellId,
+                position: { lng: parseFloat(alarm.coordinateX), lat: parseFloat(alarm.coordinateY) },
+                wellType: alarm.wellType,
+                deptid: alarm.deptid,
+                positionInfo: alarm.position,
+                visible: true
+              })
+            }
+          }
+          this.alarmWellsOri = alarmWellSets
+          // 如果当前页面关闭了显示报警，则不更新alarmWells
+          if (this.showAlarm) {
+            this.alarmWells = alarmWellSets
+          }
+        }
+      })
+    },
+    // 点击报警列表项
+    alarmRowClick(row, column, event) {
+      const wellId = row.wellId
+      this.$refs.map.openAlarmInfoWindow(wellId)
+    },
+    // 点击刷新icon
+    clickRefreshIcon() {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '') {
+        this.refreshAlarm()
+      } else {
+        this.fetchWellList('1')
+      }
+      this.$refs.map.closePopup()
+    },
+    changeAlarm() {
+      this.showAlarm = !this.showAlarm
+      if (this.showAlarm) {
+        this.clickRefreshIcon()
+      }
+    },
+    // 倒计时函数
+    countDown() {
+      if (this.clock == null) {
+        this.clock = window.setInterval(() => {
+          this.count--
+          if (this.count < 0) { // 当倒计时小于0时清除定时器
+            if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '') {
+              this.refreshAlarm()
+            } else {
+              this.fetchWellList('1')
+            }
+            this.count = this.refreshTimes
+          }
+        }, 1000)
+      }
+    },
+    // 获取井列表
+    fetchWellList(isAlarm = '0') {
+      console.log('获取正常井的列表')
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '') {
+        this.loading = true
+      }
+      const listQuery = {
+        keywords: this.listQuery.keywords, // 关键字
+        wellType: this.listQuery.wellType, // 井类型
+        deptid: this.listQuery.deptid, // 组织机构
+        isAlarm: isAlarm // 没报警
+      }
+      getWellList(listQuery).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          if (isAlarm === '0') {
+            this.normalWells = response.data
+            const keywords = this.listQuery.keywords
+            const deptid = this.listQuery.deptid
+            const wellType = this.listQuery.wellType
+            if (keywords === '' && deptid === '' && wellType === '') {
+              this.normalAllWells = response.data
+            }
+          } else { // 显示告警列表
+            console.log('是否显示告警列表', this.showAlarm)
+            if (!this.showAlarm) return
+            this.alarmWells = response.data.map(item => {
+              return {
+                ...item,
+                wellCode: item.wellCode,
+                wellId: item.id,
+                position: { lng: parseFloat(item.coordinateX), lat: parseFloat(item.coordinateY) }
+              }
+            })
+            if (!this.alarmWells.length) {
+              this.$refs.map.closePopup()
+            }
+          }
+          console.log('----------------------------------------')
+          console.log(this.normalWells.length, this.alarmWells.length)
+          if (this.showAll && this.showAlarm && !this.normalWells.length && !this.alarmWells.length) { // 显示全部井且显示告警井
+            this.$message.warning('查无结果')
+          }
+          // 显示正常井，不显示告警
+          if (this.showAll && !this.showAlarm && !this.normalWells.length) {
+            this.$message.warning('查无结果')
+          }
+          // 不显示正常井，显示告警
+          if (!this.showAll && this.showAlarm && !this.alarmWells.length) {
+            this.$message.warning('查无结果')
+          }
+          if (!this.showAll && !this.showAlarm) {
+            this.$message.warning('正常井和告警井均设置的未显示，请检查')
+          }
+          this.loading = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 500;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+// 报警列表
+.map-alarm-div{
+  position: absolute;
+  z-index: 500;
+  background-color: rgba(255, 234, 241,0.8);
+  top: 60px;
+  left: 10px;
+  .map-alarm-div-header{
+    line-height: 40px;
+    width: 504px;
+    padding-left: 10px;
+    .icon-right{
+      position: absolute;
+      right: 15px;
+    }
+    .icon-right:hover{
+      color: #409EFF;
+      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);*/
+    padding: 7px 0px;
+  }
+  .el-table td{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+    padding: 5px 0px;
+    /*line-height: 1;*/
+  }
+  .el-table td:hover{
+    /*background-color: rgba(255, 234, 241, 0.8);*/
+  }
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+}
+// 刷新框
+.function-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 1100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  /*background-color: rgba(244, 233, 230, 1.0);*/
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 1100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  background-color: rgba(244, 233, 230, 1.0);
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 144px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width: 29px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        line-height: 30px;
+        font-weight: bold;
+        font-size: 16px;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 0px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 0px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        font-size: 16px;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 0px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+        .divider{
+          width:100%;
+          height:5px;
+          margin-bottom: 5px;
+          border-bottom:solid rgb(184, 184, 184) 1px
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>