diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
new file mode 100644
index 0000000..8146911
--- /dev/null
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <div id="map" ref="map" class="mapDiv"/>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import bindEvents from './../base/bindEvents'
+import { createIcon } from '../base/factory.js'
+
+export default {
+  name: 'Cmap',
+  props: {
+    center: { // 地图中心
+      type: Object,
+      default: function() {
+        return { lat: 39.9, lng: 116.4 }
+      }
+    },
+    wellObj: { // 井对象
+      type: Object,
+      default: function() {
+        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+      }
+    },
+    valves: { // 阀门
+      type: Array,
+      default: () => []
+    },
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    minZoom: { // 最小缩放层级
+      type: Number,
+      default: 9
+    },
+    maxZoom: { // 最大缩放层级
+      type: Number,
+      default: 21
+    },
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: function() {
+        return [15, 30]
+      }
+    }, // 图标位移
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -15]
+      }
+    }
+  },
+  data() {
+    return {
+      // wellObj: null,
+      affectCicle: null, // 影响区域
+      affectPipes: null, // 影响管线
+      closeCircle: null, // 关阀影响区域
+      closePipes: null, // 影响管线
+      mapLayers: null, // 地图图层
+      wellOverlay: null, // 井overlay
+      affectAreaOverlay: null, // 影响区域overlay
+      affectLineOverlays: [], // 影响管线overlay
+      valvesOverlays: [], // 阀门overlay列表
+      closeAreaOverlay: null, // 关阀影响区域overlay
+      closeLineOverlays: [] // 关阀影响区域overlay
+    }
+  },
+  watch: {
+    center(val, oldVal) {
+      const { mapLayers, zoom } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val.lat, val.lng))
+      }
+    },
+    'center.lng'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(center.lat, val))
+      }
+    },
+    'center.lat'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val, center.lng))
+      }
+    },
+    zoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setZoom(val)
+    },
+    minZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMinZoom(val)
+    },
+    maxZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMaxZoom(val)
+    },
+    alarmMarkers(val) {
+      console.log('alarmMarkers')
+      this.renderMarkers()
+    }
+  },
+  mounted() {
+    console.log('map mounted')
+    this.reset()
+  },
+  activated() {
+    console.log('map activated')
+    this.init()
+  },
+  methods: {
+    // 初始化地图
+    init() {
+      if (this.mapLayers) {
+        return
+      }
+      const $el = this.$refs.map
+      // 影像和矢量地图
+      // const sateLayer = new CTileLayer(2, 18, 'sate', null, null)// 影像
+      // const sateLabelLayer = new CTileLayer(2, 18, 'satelabel', null, null)// 影像注记
+      // const mapLayer = new CTileLayer(2, 18, 'map', null, null)// 矢量
+      // const mapLabelLayer = new CTileLayer(2, 18, 'maplabel', null, null)// 矢量注记
+
+      var tianditusateLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'sate',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditusateLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'satelabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditumapLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'map',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const tianditumapLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'maplabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const TianDiTuBASEMAP = new CMapType([tianditumapLayer], '矢量')
+      const TianDiTuVECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const TianDiTuSATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+
+      const VECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const SATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+      // const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')
+      // const SATEMAP = new CMapType([sateLayer, sateLabelLayer], '影像')
+
+      const { getCenterPoint, zoom } = this
+      // 初始化配置
+      const opts = {
+        mapTypes: [VECTORMAP],
+        center: getCenterPoint(),
+        zoom: zoom
+      }
+      // 加载图层
+      this.mapLayers = new CMapLayers($el, opts)
+      this.mapLayers.addMapTypeControl()
+
+      bindEvents.call(this, this.mapLayers)
+
+      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
+      // this.mapLayers.reset()
+      this.reset()
+      this.mapLayers.setCenter(getCenterPoint(), zoom)
+      this.$emit('ready', { mapLayers: this.mapLayers })
+      // this.renderMarkers()
+    },
+    renderAffectAP(wellObj) {
+      // this.wellObj = wellObj
+      const { mapLayers } = this
+      if (!mapLayers) {
+        return
+      }
+      this.removeOverlays() // 清除所有overlay
+      // 渲染井
+      if (this.wellObj != null) {
+        this.affectCircle = {
+          lat: this.wellObj.lat,
+          lng: this.wellObj.lng,
+          radius: this.wellObj.radius
+        }
+        if (this.wellObj.affectPipes) {
+          this.affectPipes = this.wellObj.affectPipes
+        }
+        this.renderWell()
+      }
+      // 当影响区域不为空的时候显示影响区域
+      if (this.affectCircle != null) {
+        this.renderAffectArea()
+      }
+      // 渲染管线
+      if (this.affectPipes && this.affectPipes.length > 0) {
+        this.renderAffectPipes()
+      }
+    },
+    removeAffectAP() {
+      // 移除井
+      // if (this.wellObj != null) {
+      //   this.removeWell()
+      // }
+      // 移除影响区域
+      if (this.affectArea != null) {
+        this.removeAffectArea()
+      }
+      // 移除管线
+      if (this.affectPipes.length > 0) {
+        this.removeAffectPipes()
+      }
+    },
+    // 渲染影响区域
+    renderAffectArea() {
+      const { mapLayers, affectCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
+    },
+    // 移除影响区域
+    removeAffectArea() {
+      const { mapLayers } = this
+      if (this.affectAreaOverlay) {
+        mapLayers.removeOverlay(this.affectAreaOverlay)
+        this.affectAreaOverlay = null
+      }
+    },
+    // 渲染井
+    renderWell() {
+      const { mapLayers, size, anchor, wellObj } = this
+      const options = {
+        url: './static/images/map_images/alarm-well1.png',
+        size: size,
+        anchor: anchor
+      }
+      const cmapIcon = createIcon(options)
+      const opts = {
+        icon: cmapIcon,
+        title: wellObj.wellCode,
+        draggable: false
+      }
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      mapLayers.addOverlay(this.wellOverlay)
+      mapLayers.setZoom(17)
+      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+    },
+    // 移除井
+    removeWell() {
+      const { mapLayers } = this
+      if (!this.wellOverlay) {
+        mapLayers.removeOverlay(this.wellOverlay)
+        this.wellOverlay = null
+      }
+    },
+    // 渲染问题影响管线
+    renderAffectPipes() {
+      // TODO: 渲染管线
+    },
+    // 移除影响管线
+    removeAffectPipes() {
+      const { mapLayers } = this
+      for (const overlay of this.affectLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.affectLineOverlays = []
+    },
+    // 渲染关阀影响区域
+    renderCloseArea() {
+      const { mapLayers, closeCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+    },
+    // 移除关阀影响区域
+    removeCloseArea() {
+      const { mapLayers } = this
+      if (this.closeAreaOverlay) {
+        mapLayers.removeOverlay(this.closeAreaOverlay)
+        this.closeAreaOverlay = null
+      }
+    },
+    // 渲染关阀影响管线
+    renderClosePipes() {
+      // TODO: 渲染管线
+    },
+    // 移除关阀影响管线
+    removeClosePipes() {
+      const { mapLayers } = this
+      for (const overlay of this.closeLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.closeLineOverlays = []
+    },
+    // 清除所有overlay
+    removeOverlays() {
+      const { mapLayers } = this
+      mapLayers.clearOverlays()
+    },
+    // 获取中点
+    getCenterPoint() {
+      const { center } = this
+      console.log('getCenterPoint:' + center.lat + ',' + center.lng)
+      return new CLatLng(center.lat, center.lng)
+    },
+    initMap(CMapLayers) {
+      this.CMapLayers = CMapLayers
+      this.init(CMapLayers)
+    },
+    getMapScript() {
+      // 动态获取cmap的脚本
+      // const TMapURL = 'http://satellite.casm.ac.cn:8020/geowinmap/api?version=tapi&map=map&utils=mapcase'
+      const TMapURL = 'http://119.3.228.125:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
+      return new Promise((resolve, reject) => {
+        console.log(window.CMapLayers)
+        // 如果已加载直接返回
+        if (typeof window.CMapLayers !== 'undefined') {
+          console.log('地图脚本初始化成功1111...')
+          resolve(window.CMapLayers)
+          // return true
+        } else {
+          // 插入script脚本
+          const scriptNode = document.createElement('script')
+          scriptNode.setAttribute('type', 'text/javascript')
+          scriptNode.setAttribute('src', TMapURL)
+
+          if (scriptNode.readyState) { // IE
+            scriptNode.onreadystatechange = function() {
+              if (scriptNode.readyState === 'loaded' || scriptNode.readyState === 'complete') {
+                scriptNode.onreadystatechange = null
+                console.log('地图脚本初始化成功2...')
+                // eslint-disable-next-line
+                resolve(window.CMapLayers)
+              }
+            }
+          } else { // 其他浏览器
+            scriptNode.onload = function() {
+              console.log('地图脚本初始化成功3...')
+              resolve(window.CMapLayers)
+            }
+          }
+          document.body.appendChild(scriptNode)
+          console.log(scriptNode)
+        }
+      })
+    },
+    reset() {
+      console.log('map reset')
+      const { initMap, getMapScript } = this
+      getMapScript()
+        .then(initMap)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .mapDiv{
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  /*.alarm-window{*/
+    /*max-width: 250px;*/
+  /*!*background-color: #ffeaf1;*!*/
+    /*.alarm-header {*/
+      /*padding: 10px 10px 5px 10px;*/
+      /*line-height: 30px;*/
+      /*color: red;*/
+      /*font-weight: bold;*/
+      /*!*background-color: #ffecec;*!*/
+    /*}*/
+    /*.alarm-body{*/
+      /*padding: 5px 10px 10px 10px;*/
+      /*line-height: 23px;*/
+      /*font-size: 14px;*/
+    /*.alarm-red{*/
+      /*color: #ff0000;*/
+    /*}*/
+  /*}*/
+  /*}*/
+</style>

diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
new file mode 100644
index 0000000..8146911
--- /dev/null
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <div id="map" ref="map" class="mapDiv"/>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import bindEvents from './../base/bindEvents'
+import { createIcon } from '../base/factory.js'
+
+export default {
+  name: 'Cmap',
+  props: {
+    center: { // 地图中心
+      type: Object,
+      default: function() {
+        return { lat: 39.9, lng: 116.4 }
+      }
+    },
+    wellObj: { // 井对象
+      type: Object,
+      default: function() {
+        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+      }
+    },
+    valves: { // 阀门
+      type: Array,
+      default: () => []
+    },
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    minZoom: { // 最小缩放层级
+      type: Number,
+      default: 9
+    },
+    maxZoom: { // 最大缩放层级
+      type: Number,
+      default: 21
+    },
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: function() {
+        return [15, 30]
+      }
+    }, // 图标位移
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -15]
+      }
+    }
+  },
+  data() {
+    return {
+      // wellObj: null,
+      affectCicle: null, // 影响区域
+      affectPipes: null, // 影响管线
+      closeCircle: null, // 关阀影响区域
+      closePipes: null, // 影响管线
+      mapLayers: null, // 地图图层
+      wellOverlay: null, // 井overlay
+      affectAreaOverlay: null, // 影响区域overlay
+      affectLineOverlays: [], // 影响管线overlay
+      valvesOverlays: [], // 阀门overlay列表
+      closeAreaOverlay: null, // 关阀影响区域overlay
+      closeLineOverlays: [] // 关阀影响区域overlay
+    }
+  },
+  watch: {
+    center(val, oldVal) {
+      const { mapLayers, zoom } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val.lat, val.lng))
+      }
+    },
+    'center.lng'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(center.lat, val))
+      }
+    },
+    'center.lat'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val, center.lng))
+      }
+    },
+    zoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setZoom(val)
+    },
+    minZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMinZoom(val)
+    },
+    maxZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMaxZoom(val)
+    },
+    alarmMarkers(val) {
+      console.log('alarmMarkers')
+      this.renderMarkers()
+    }
+  },
+  mounted() {
+    console.log('map mounted')
+    this.reset()
+  },
+  activated() {
+    console.log('map activated')
+    this.init()
+  },
+  methods: {
+    // 初始化地图
+    init() {
+      if (this.mapLayers) {
+        return
+      }
+      const $el = this.$refs.map
+      // 影像和矢量地图
+      // const sateLayer = new CTileLayer(2, 18, 'sate', null, null)// 影像
+      // const sateLabelLayer = new CTileLayer(2, 18, 'satelabel', null, null)// 影像注记
+      // const mapLayer = new CTileLayer(2, 18, 'map', null, null)// 矢量
+      // const mapLabelLayer = new CTileLayer(2, 18, 'maplabel', null, null)// 矢量注记
+
+      var tianditusateLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'sate',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditusateLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'satelabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditumapLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'map',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const tianditumapLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'maplabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const TianDiTuBASEMAP = new CMapType([tianditumapLayer], '矢量')
+      const TianDiTuVECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const TianDiTuSATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+
+      const VECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const SATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+      // const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')
+      // const SATEMAP = new CMapType([sateLayer, sateLabelLayer], '影像')
+
+      const { getCenterPoint, zoom } = this
+      // 初始化配置
+      const opts = {
+        mapTypes: [VECTORMAP],
+        center: getCenterPoint(),
+        zoom: zoom
+      }
+      // 加载图层
+      this.mapLayers = new CMapLayers($el, opts)
+      this.mapLayers.addMapTypeControl()
+
+      bindEvents.call(this, this.mapLayers)
+
+      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
+      // this.mapLayers.reset()
+      this.reset()
+      this.mapLayers.setCenter(getCenterPoint(), zoom)
+      this.$emit('ready', { mapLayers: this.mapLayers })
+      // this.renderMarkers()
+    },
+    renderAffectAP(wellObj) {
+      // this.wellObj = wellObj
+      const { mapLayers } = this
+      if (!mapLayers) {
+        return
+      }
+      this.removeOverlays() // 清除所有overlay
+      // 渲染井
+      if (this.wellObj != null) {
+        this.affectCircle = {
+          lat: this.wellObj.lat,
+          lng: this.wellObj.lng,
+          radius: this.wellObj.radius
+        }
+        if (this.wellObj.affectPipes) {
+          this.affectPipes = this.wellObj.affectPipes
+        }
+        this.renderWell()
+      }
+      // 当影响区域不为空的时候显示影响区域
+      if (this.affectCircle != null) {
+        this.renderAffectArea()
+      }
+      // 渲染管线
+      if (this.affectPipes && this.affectPipes.length > 0) {
+        this.renderAffectPipes()
+      }
+    },
+    removeAffectAP() {
+      // 移除井
+      // if (this.wellObj != null) {
+      //   this.removeWell()
+      // }
+      // 移除影响区域
+      if (this.affectArea != null) {
+        this.removeAffectArea()
+      }
+      // 移除管线
+      if (this.affectPipes.length > 0) {
+        this.removeAffectPipes()
+      }
+    },
+    // 渲染影响区域
+    renderAffectArea() {
+      const { mapLayers, affectCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
+    },
+    // 移除影响区域
+    removeAffectArea() {
+      const { mapLayers } = this
+      if (this.affectAreaOverlay) {
+        mapLayers.removeOverlay(this.affectAreaOverlay)
+        this.affectAreaOverlay = null
+      }
+    },
+    // 渲染井
+    renderWell() {
+      const { mapLayers, size, anchor, wellObj } = this
+      const options = {
+        url: './static/images/map_images/alarm-well1.png',
+        size: size,
+        anchor: anchor
+      }
+      const cmapIcon = createIcon(options)
+      const opts = {
+        icon: cmapIcon,
+        title: wellObj.wellCode,
+        draggable: false
+      }
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      mapLayers.addOverlay(this.wellOverlay)
+      mapLayers.setZoom(17)
+      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+    },
+    // 移除井
+    removeWell() {
+      const { mapLayers } = this
+      if (!this.wellOverlay) {
+        mapLayers.removeOverlay(this.wellOverlay)
+        this.wellOverlay = null
+      }
+    },
+    // 渲染问题影响管线
+    renderAffectPipes() {
+      // TODO: 渲染管线
+    },
+    // 移除影响管线
+    removeAffectPipes() {
+      const { mapLayers } = this
+      for (const overlay of this.affectLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.affectLineOverlays = []
+    },
+    // 渲染关阀影响区域
+    renderCloseArea() {
+      const { mapLayers, closeCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+    },
+    // 移除关阀影响区域
+    removeCloseArea() {
+      const { mapLayers } = this
+      if (this.closeAreaOverlay) {
+        mapLayers.removeOverlay(this.closeAreaOverlay)
+        this.closeAreaOverlay = null
+      }
+    },
+    // 渲染关阀影响管线
+    renderClosePipes() {
+      // TODO: 渲染管线
+    },
+    // 移除关阀影响管线
+    removeClosePipes() {
+      const { mapLayers } = this
+      for (const overlay of this.closeLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.closeLineOverlays = []
+    },
+    // 清除所有overlay
+    removeOverlays() {
+      const { mapLayers } = this
+      mapLayers.clearOverlays()
+    },
+    // 获取中点
+    getCenterPoint() {
+      const { center } = this
+      console.log('getCenterPoint:' + center.lat + ',' + center.lng)
+      return new CLatLng(center.lat, center.lng)
+    },
+    initMap(CMapLayers) {
+      this.CMapLayers = CMapLayers
+      this.init(CMapLayers)
+    },
+    getMapScript() {
+      // 动态获取cmap的脚本
+      // const TMapURL = 'http://satellite.casm.ac.cn:8020/geowinmap/api?version=tapi&map=map&utils=mapcase'
+      const TMapURL = 'http://119.3.228.125:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
+      return new Promise((resolve, reject) => {
+        console.log(window.CMapLayers)
+        // 如果已加载直接返回
+        if (typeof window.CMapLayers !== 'undefined') {
+          console.log('地图脚本初始化成功1111...')
+          resolve(window.CMapLayers)
+          // return true
+        } else {
+          // 插入script脚本
+          const scriptNode = document.createElement('script')
+          scriptNode.setAttribute('type', 'text/javascript')
+          scriptNode.setAttribute('src', TMapURL)
+
+          if (scriptNode.readyState) { // IE
+            scriptNode.onreadystatechange = function() {
+              if (scriptNode.readyState === 'loaded' || scriptNode.readyState === 'complete') {
+                scriptNode.onreadystatechange = null
+                console.log('地图脚本初始化成功2...')
+                // eslint-disable-next-line
+                resolve(window.CMapLayers)
+              }
+            }
+          } else { // 其他浏览器
+            scriptNode.onload = function() {
+              console.log('地图脚本初始化成功3...')
+              resolve(window.CMapLayers)
+            }
+          }
+          document.body.appendChild(scriptNode)
+          console.log(scriptNode)
+        }
+      })
+    },
+    reset() {
+      console.log('map reset')
+      const { initMap, getMapScript } = this
+      getMapScript()
+        .then(initMap)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .mapDiv{
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  /*.alarm-window{*/
+    /*max-width: 250px;*/
+  /*!*background-color: #ffeaf1;*!*/
+    /*.alarm-header {*/
+      /*padding: 10px 10px 5px 10px;*/
+      /*line-height: 30px;*/
+      /*color: red;*/
+      /*font-weight: bold;*/
+      /*!*background-color: #ffecec;*!*/
+    /*}*/
+    /*.alarm-body{*/
+      /*padding: 5px 10px 10px 10px;*/
+      /*line-height: 23px;*/
+      /*font-size: 14px;*/
+    /*.alarm-red{*/
+      /*color: #ff0000;*/
+    /*}*/
+  /*}*/
+  /*}*/
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index ea8e099..6ac852b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -265,6 +265,12 @@
         name: 'SmartDataList',
         component: () => import('@/views/smartAnalysis/dataManage'),
         meta: { title: '数据列表', icon: 'icon-config', permission: ['/smartDataList'] }
+      },
+      {
+        path: '/smartDataOverview',
+        name: 'SmartDataOverview',
+        component: () => import('@/views/smartAnalysis/smartOverview'),
+        meta: { title: '可视化', icon: 'icon-config', permission: ['/smartOverview'] }
       }
     ]
   },

diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
new file mode 100644
index 0000000..8146911
--- /dev/null
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <div id="map" ref="map" class="mapDiv"/>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import bindEvents from './../base/bindEvents'
+import { createIcon } from '../base/factory.js'
+
+export default {
+  name: 'Cmap',
+  props: {
+    center: { // 地图中心
+      type: Object,
+      default: function() {
+        return { lat: 39.9, lng: 116.4 }
+      }
+    },
+    wellObj: { // 井对象
+      type: Object,
+      default: function() {
+        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+      }
+    },
+    valves: { // 阀门
+      type: Array,
+      default: () => []
+    },
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    minZoom: { // 最小缩放层级
+      type: Number,
+      default: 9
+    },
+    maxZoom: { // 最大缩放层级
+      type: Number,
+      default: 21
+    },
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: function() {
+        return [15, 30]
+      }
+    }, // 图标位移
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -15]
+      }
+    }
+  },
+  data() {
+    return {
+      // wellObj: null,
+      affectCicle: null, // 影响区域
+      affectPipes: null, // 影响管线
+      closeCircle: null, // 关阀影响区域
+      closePipes: null, // 影响管线
+      mapLayers: null, // 地图图层
+      wellOverlay: null, // 井overlay
+      affectAreaOverlay: null, // 影响区域overlay
+      affectLineOverlays: [], // 影响管线overlay
+      valvesOverlays: [], // 阀门overlay列表
+      closeAreaOverlay: null, // 关阀影响区域overlay
+      closeLineOverlays: [] // 关阀影响区域overlay
+    }
+  },
+  watch: {
+    center(val, oldVal) {
+      const { mapLayers, zoom } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val.lat, val.lng))
+      }
+    },
+    'center.lng'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(center.lat, val))
+      }
+    },
+    'center.lat'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val, center.lng))
+      }
+    },
+    zoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setZoom(val)
+    },
+    minZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMinZoom(val)
+    },
+    maxZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMaxZoom(val)
+    },
+    alarmMarkers(val) {
+      console.log('alarmMarkers')
+      this.renderMarkers()
+    }
+  },
+  mounted() {
+    console.log('map mounted')
+    this.reset()
+  },
+  activated() {
+    console.log('map activated')
+    this.init()
+  },
+  methods: {
+    // 初始化地图
+    init() {
+      if (this.mapLayers) {
+        return
+      }
+      const $el = this.$refs.map
+      // 影像和矢量地图
+      // const sateLayer = new CTileLayer(2, 18, 'sate', null, null)// 影像
+      // const sateLabelLayer = new CTileLayer(2, 18, 'satelabel', null, null)// 影像注记
+      // const mapLayer = new CTileLayer(2, 18, 'map', null, null)// 矢量
+      // const mapLabelLayer = new CTileLayer(2, 18, 'maplabel', null, null)// 矢量注记
+
+      var tianditusateLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'sate',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditusateLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'satelabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditumapLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'map',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const tianditumapLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'maplabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const TianDiTuBASEMAP = new CMapType([tianditumapLayer], '矢量')
+      const TianDiTuVECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const TianDiTuSATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+
+      const VECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const SATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+      // const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')
+      // const SATEMAP = new CMapType([sateLayer, sateLabelLayer], '影像')
+
+      const { getCenterPoint, zoom } = this
+      // 初始化配置
+      const opts = {
+        mapTypes: [VECTORMAP],
+        center: getCenterPoint(),
+        zoom: zoom
+      }
+      // 加载图层
+      this.mapLayers = new CMapLayers($el, opts)
+      this.mapLayers.addMapTypeControl()
+
+      bindEvents.call(this, this.mapLayers)
+
+      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
+      // this.mapLayers.reset()
+      this.reset()
+      this.mapLayers.setCenter(getCenterPoint(), zoom)
+      this.$emit('ready', { mapLayers: this.mapLayers })
+      // this.renderMarkers()
+    },
+    renderAffectAP(wellObj) {
+      // this.wellObj = wellObj
+      const { mapLayers } = this
+      if (!mapLayers) {
+        return
+      }
+      this.removeOverlays() // 清除所有overlay
+      // 渲染井
+      if (this.wellObj != null) {
+        this.affectCircle = {
+          lat: this.wellObj.lat,
+          lng: this.wellObj.lng,
+          radius: this.wellObj.radius
+        }
+        if (this.wellObj.affectPipes) {
+          this.affectPipes = this.wellObj.affectPipes
+        }
+        this.renderWell()
+      }
+      // 当影响区域不为空的时候显示影响区域
+      if (this.affectCircle != null) {
+        this.renderAffectArea()
+      }
+      // 渲染管线
+      if (this.affectPipes && this.affectPipes.length > 0) {
+        this.renderAffectPipes()
+      }
+    },
+    removeAffectAP() {
+      // 移除井
+      // if (this.wellObj != null) {
+      //   this.removeWell()
+      // }
+      // 移除影响区域
+      if (this.affectArea != null) {
+        this.removeAffectArea()
+      }
+      // 移除管线
+      if (this.affectPipes.length > 0) {
+        this.removeAffectPipes()
+      }
+    },
+    // 渲染影响区域
+    renderAffectArea() {
+      const { mapLayers, affectCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
+    },
+    // 移除影响区域
+    removeAffectArea() {
+      const { mapLayers } = this
+      if (this.affectAreaOverlay) {
+        mapLayers.removeOverlay(this.affectAreaOverlay)
+        this.affectAreaOverlay = null
+      }
+    },
+    // 渲染井
+    renderWell() {
+      const { mapLayers, size, anchor, wellObj } = this
+      const options = {
+        url: './static/images/map_images/alarm-well1.png',
+        size: size,
+        anchor: anchor
+      }
+      const cmapIcon = createIcon(options)
+      const opts = {
+        icon: cmapIcon,
+        title: wellObj.wellCode,
+        draggable: false
+      }
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      mapLayers.addOverlay(this.wellOverlay)
+      mapLayers.setZoom(17)
+      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+    },
+    // 移除井
+    removeWell() {
+      const { mapLayers } = this
+      if (!this.wellOverlay) {
+        mapLayers.removeOverlay(this.wellOverlay)
+        this.wellOverlay = null
+      }
+    },
+    // 渲染问题影响管线
+    renderAffectPipes() {
+      // TODO: 渲染管线
+    },
+    // 移除影响管线
+    removeAffectPipes() {
+      const { mapLayers } = this
+      for (const overlay of this.affectLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.affectLineOverlays = []
+    },
+    // 渲染关阀影响区域
+    renderCloseArea() {
+      const { mapLayers, closeCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+    },
+    // 移除关阀影响区域
+    removeCloseArea() {
+      const { mapLayers } = this
+      if (this.closeAreaOverlay) {
+        mapLayers.removeOverlay(this.closeAreaOverlay)
+        this.closeAreaOverlay = null
+      }
+    },
+    // 渲染关阀影响管线
+    renderClosePipes() {
+      // TODO: 渲染管线
+    },
+    // 移除关阀影响管线
+    removeClosePipes() {
+      const { mapLayers } = this
+      for (const overlay of this.closeLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.closeLineOverlays = []
+    },
+    // 清除所有overlay
+    removeOverlays() {
+      const { mapLayers } = this
+      mapLayers.clearOverlays()
+    },
+    // 获取中点
+    getCenterPoint() {
+      const { center } = this
+      console.log('getCenterPoint:' + center.lat + ',' + center.lng)
+      return new CLatLng(center.lat, center.lng)
+    },
+    initMap(CMapLayers) {
+      this.CMapLayers = CMapLayers
+      this.init(CMapLayers)
+    },
+    getMapScript() {
+      // 动态获取cmap的脚本
+      // const TMapURL = 'http://satellite.casm.ac.cn:8020/geowinmap/api?version=tapi&map=map&utils=mapcase'
+      const TMapURL = 'http://119.3.228.125:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
+      return new Promise((resolve, reject) => {
+        console.log(window.CMapLayers)
+        // 如果已加载直接返回
+        if (typeof window.CMapLayers !== 'undefined') {
+          console.log('地图脚本初始化成功1111...')
+          resolve(window.CMapLayers)
+          // return true
+        } else {
+          // 插入script脚本
+          const scriptNode = document.createElement('script')
+          scriptNode.setAttribute('type', 'text/javascript')
+          scriptNode.setAttribute('src', TMapURL)
+
+          if (scriptNode.readyState) { // IE
+            scriptNode.onreadystatechange = function() {
+              if (scriptNode.readyState === 'loaded' || scriptNode.readyState === 'complete') {
+                scriptNode.onreadystatechange = null
+                console.log('地图脚本初始化成功2...')
+                // eslint-disable-next-line
+                resolve(window.CMapLayers)
+              }
+            }
+          } else { // 其他浏览器
+            scriptNode.onload = function() {
+              console.log('地图脚本初始化成功3...')
+              resolve(window.CMapLayers)
+            }
+          }
+          document.body.appendChild(scriptNode)
+          console.log(scriptNode)
+        }
+      })
+    },
+    reset() {
+      console.log('map reset')
+      const { initMap, getMapScript } = this
+      getMapScript()
+        .then(initMap)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .mapDiv{
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  /*.alarm-window{*/
+    /*max-width: 250px;*/
+  /*!*background-color: #ffeaf1;*!*/
+    /*.alarm-header {*/
+      /*padding: 10px 10px 5px 10px;*/
+      /*line-height: 30px;*/
+      /*color: red;*/
+      /*font-weight: bold;*/
+      /*!*background-color: #ffecec;*!*/
+    /*}*/
+    /*.alarm-body{*/
+      /*padding: 5px 10px 10px 10px;*/
+      /*line-height: 23px;*/
+      /*font-size: 14px;*/
+    /*.alarm-red{*/
+      /*color: #ff0000;*/
+    /*}*/
+  /*}*/
+  /*}*/
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index ea8e099..6ac852b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -265,6 +265,12 @@
         name: 'SmartDataList',
         component: () => import('@/views/smartAnalysis/dataManage'),
         meta: { title: '数据列表', icon: 'icon-config', permission: ['/smartDataList'] }
+      },
+      {
+        path: '/smartDataOverview',
+        name: 'SmartDataOverview',
+        component: () => import('@/views/smartAnalysis/smartOverview'),
+        meta: { title: '可视化', icon: 'icon-config', permission: ['/smartOverview'] }
       }
     ]
   },
diff --git a/src/views/smartAnalysis/smartOverview.vue b/src/views/smartAnalysis/smartOverview.vue
new file mode 100644
index 0000000..06d30b0
--- /dev/null
+++ b/src/views/smartAnalysis/smartOverview.vue
@@ -0,0 +1,447 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="17">
+        <div v-loading="loading" class="overview-map-container">
+          <!--地图-->
+          <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" class="map-demo" @ready="readyMap"/>
+        </div>
+      </el-col>
+      <el-col :span="7">
+        <div class="smart-div">
+          <div class="smart-tab">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="内涝分析" name="first">
+                <el-table
+                  :data="waterList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="waterRowClick()">
+                  <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-tab-pane>
+              <el-tab-pane label="燃气管线泄漏点" name="second">
+                <el-table
+                  :data="gasList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="gasRowClick()">
+                  <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-tab-pane>
+              <el-tab-pane label="热力管线泄漏点" name="third">
+                <el-table
+                  :data="hotList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="hotRowClick()">
+                  <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-tab-pane>
+            </el-tabs>
+          </div>
+          <div v-if="wellObj!=null" class="smart-detail">
+            <div class="detail-header">详情</div>
+            <el-form ref="form" :model="wellObj" label-width="90px">
+              <el-form-item label="井编号">
+                <span class="detail-item">{{ wellObj.wellCode }}</span>
+              </el-form-item>
+              <el-form-item label="位置">
+                <span class="detail-item">{{ wellObj.position }}</span>
+              </el-form-item>
+              <el-form-item v-if="wellObj.liquidData" label="液位值">
+                <span class="detail-item">{{ wellObj.liquidData }}</span>
+              </el-form-item>
+              <el-form-item v-if="wellObj.strength" label="燃气浓度">
+                <span class="detail-item">{{ wellObj.strength }} %LEL </span>
+              </el-form-item>
+              <el-form-item label="影响面积">
+                <span class="detail-item">{{ wellObj.affectArea }} 平方公里</span>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <span class="detail-item">{{ wellObj.createTime }}</span>
+              </el-form-item>
+            </el-form>
+            <div v-show="activeName!=='first'" class="btn-group">
+              <el-button>查看阀门</el-button>
+              <el-button>查看关阀影响区域</el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Cmap from '../../components/CMap/components/cmapSmart'
+import { getAlarmsNow } from '@/api/overview'
+export default {
+  name: 'SmartOverview',
+  components: { Cmap },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      columns: [
+        {
+          text: '井编号',
+          value: 'wellCode',
+          align: 'center'
+        },
+        {
+          text: '位置',
+          value: 'position',
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      count: 30,
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: { lng: this.$store.getters.lng, lat: this.$store.getters.lat }, // 地图中心
+      zoom: 12, // 地图缩放比例
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      waterList: [], // 内涝预警列表
+      gasList: [], // 燃气管线泄漏点列表
+      hotList: [], // 热力管线泄漏点列表
+      activeName: 'first', // 当前智能分析内容:内涝first，燃气管线泄漏second，热力管线泄漏third
+      wellObj: null,
+      loading: false // 加载图标是否显示
+    }
+  },
+  activated() {
+    this.refreshData()
+  },
+  methods: {
+    // 地图准备好后的操作
+    readyMap() {
+      console.log('readyMap')
+      const that = this
+      that.refreshData() // 刷新报警内容
+    },
+    // 刷新报警列表
+    refreshData() {
+      this.getWaterData()
+    },
+    handleClick(tab, event) {
+      debugger
+      if (tab.name === 'first') {
+        this.getWaterData()
+      } else if (tab.name === 'second') {
+        this.getGasData()
+      } else if (tab.name === 'third') {
+        this.getHotData()
+      }
+    },
+    getWaterData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.waterList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    getGasData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.gasList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    getHotData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.hotList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    // 点击内涝列表项
+    waterRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: 116.4,
+        lat: 39.9,
+        radius: 100,
+        liquidData: '13',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 点击燃气泄漏点列表项
+    gasRowClick(row, column, event) {
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: '126.4',
+        lat: '39.9',
+        radius: '24',
+        strength: '3',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 点击热力泄漏点列表项
+    hotRowClick(row, column, event) {
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: '116.4',
+        lat: '39.9',
+        radius: '24',
+        liquidData: '13',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 查看阀门
+    showValves(){
+
+    },
+    // 关阀影响区域
+    showCloseArea(){
+
+    }
+  }
+}
+</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;
+  }
+}
+.smart-div{
+  .smart-tab{
+    .el-tabs__content{
+      max-height: calc(100vh - 295px - 144px - 60px);
+      overflow-y: scroll;
+    }
+  }
+  .smart-detail{
+    /*margin-top: 20px;*/
+    font-size:14px;
+    min-height:295px;
+    .detail-header{
+      height: 40px;
+      padding-left: 5px;
+      font-size:14px;
+      line-height: 40px;
+      background-color: #f0f0f0;
+    }
+    .el-form{
+      .el-form-item{
+        margin-bottom: 0px;
+        border-bottom: 1px solid #f0f0f0;
+        .el-form-item__label{
+          background-color: #ededed;
+        }
+        .el-form-item__content{
+          /*background-color: #edf9f0;*/
+          padding-left:10px;
+        }
+      }
+    }
+    .btn-group{
+      margin: 10px;
+      text-align: center;
+    }
+  }
+}
+// 报警列表
+.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;
+  }
+}
+// 地图
+.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{
+        padding: 10px 10px 5px 10px;
+        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>

diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
new file mode 100644
index 0000000..8146911
--- /dev/null
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <div id="map" ref="map" class="mapDiv"/>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import bindEvents from './../base/bindEvents'
+import { createIcon } from '../base/factory.js'
+
+export default {
+  name: 'Cmap',
+  props: {
+    center: { // 地图中心
+      type: Object,
+      default: function() {
+        return { lat: 39.9, lng: 116.4 }
+      }
+    },
+    wellObj: { // 井对象
+      type: Object,
+      default: function() {
+        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+      }
+    },
+    valves: { // 阀门
+      type: Array,
+      default: () => []
+    },
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    minZoom: { // 最小缩放层级
+      type: Number,
+      default: 9
+    },
+    maxZoom: { // 最大缩放层级
+      type: Number,
+      default: 21
+    },
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: function() {
+        return [15, 30]
+      }
+    }, // 图标位移
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -15]
+      }
+    }
+  },
+  data() {
+    return {
+      // wellObj: null,
+      affectCicle: null, // 影响区域
+      affectPipes: null, // 影响管线
+      closeCircle: null, // 关阀影响区域
+      closePipes: null, // 影响管线
+      mapLayers: null, // 地图图层
+      wellOverlay: null, // 井overlay
+      affectAreaOverlay: null, // 影响区域overlay
+      affectLineOverlays: [], // 影响管线overlay
+      valvesOverlays: [], // 阀门overlay列表
+      closeAreaOverlay: null, // 关阀影响区域overlay
+      closeLineOverlays: [] // 关阀影响区域overlay
+    }
+  },
+  watch: {
+    center(val, oldVal) {
+      const { mapLayers, zoom } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val.lat, val.lng))
+      }
+    },
+    'center.lng'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(center.lat, val))
+      }
+    },
+    'center.lat'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val, center.lng))
+      }
+    },
+    zoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setZoom(val)
+    },
+    minZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMinZoom(val)
+    },
+    maxZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMaxZoom(val)
+    },
+    alarmMarkers(val) {
+      console.log('alarmMarkers')
+      this.renderMarkers()
+    }
+  },
+  mounted() {
+    console.log('map mounted')
+    this.reset()
+  },
+  activated() {
+    console.log('map activated')
+    this.init()
+  },
+  methods: {
+    // 初始化地图
+    init() {
+      if (this.mapLayers) {
+        return
+      }
+      const $el = this.$refs.map
+      // 影像和矢量地图
+      // const sateLayer = new CTileLayer(2, 18, 'sate', null, null)// 影像
+      // const sateLabelLayer = new CTileLayer(2, 18, 'satelabel', null, null)// 影像注记
+      // const mapLayer = new CTileLayer(2, 18, 'map', null, null)// 矢量
+      // const mapLabelLayer = new CTileLayer(2, 18, 'maplabel', null, null)// 矢量注记
+
+      var tianditusateLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'sate',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditusateLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'satelabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditumapLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'map',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const tianditumapLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'maplabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const TianDiTuBASEMAP = new CMapType([tianditumapLayer], '矢量')
+      const TianDiTuVECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const TianDiTuSATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+
+      const VECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const SATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+      // const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')
+      // const SATEMAP = new CMapType([sateLayer, sateLabelLayer], '影像')
+
+      const { getCenterPoint, zoom } = this
+      // 初始化配置
+      const opts = {
+        mapTypes: [VECTORMAP],
+        center: getCenterPoint(),
+        zoom: zoom
+      }
+      // 加载图层
+      this.mapLayers = new CMapLayers($el, opts)
+      this.mapLayers.addMapTypeControl()
+
+      bindEvents.call(this, this.mapLayers)
+
+      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
+      // this.mapLayers.reset()
+      this.reset()
+      this.mapLayers.setCenter(getCenterPoint(), zoom)
+      this.$emit('ready', { mapLayers: this.mapLayers })
+      // this.renderMarkers()
+    },
+    renderAffectAP(wellObj) {
+      // this.wellObj = wellObj
+      const { mapLayers } = this
+      if (!mapLayers) {
+        return
+      }
+      this.removeOverlays() // 清除所有overlay
+      // 渲染井
+      if (this.wellObj != null) {
+        this.affectCircle = {
+          lat: this.wellObj.lat,
+          lng: this.wellObj.lng,
+          radius: this.wellObj.radius
+        }
+        if (this.wellObj.affectPipes) {
+          this.affectPipes = this.wellObj.affectPipes
+        }
+        this.renderWell()
+      }
+      // 当影响区域不为空的时候显示影响区域
+      if (this.affectCircle != null) {
+        this.renderAffectArea()
+      }
+      // 渲染管线
+      if (this.affectPipes && this.affectPipes.length > 0) {
+        this.renderAffectPipes()
+      }
+    },
+    removeAffectAP() {
+      // 移除井
+      // if (this.wellObj != null) {
+      //   this.removeWell()
+      // }
+      // 移除影响区域
+      if (this.affectArea != null) {
+        this.removeAffectArea()
+      }
+      // 移除管线
+      if (this.affectPipes.length > 0) {
+        this.removeAffectPipes()
+      }
+    },
+    // 渲染影响区域
+    renderAffectArea() {
+      const { mapLayers, affectCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
+    },
+    // 移除影响区域
+    removeAffectArea() {
+      const { mapLayers } = this
+      if (this.affectAreaOverlay) {
+        mapLayers.removeOverlay(this.affectAreaOverlay)
+        this.affectAreaOverlay = null
+      }
+    },
+    // 渲染井
+    renderWell() {
+      const { mapLayers, size, anchor, wellObj } = this
+      const options = {
+        url: './static/images/map_images/alarm-well1.png',
+        size: size,
+        anchor: anchor
+      }
+      const cmapIcon = createIcon(options)
+      const opts = {
+        icon: cmapIcon,
+        title: wellObj.wellCode,
+        draggable: false
+      }
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      mapLayers.addOverlay(this.wellOverlay)
+      mapLayers.setZoom(17)
+      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+    },
+    // 移除井
+    removeWell() {
+      const { mapLayers } = this
+      if (!this.wellOverlay) {
+        mapLayers.removeOverlay(this.wellOverlay)
+        this.wellOverlay = null
+      }
+    },
+    // 渲染问题影响管线
+    renderAffectPipes() {
+      // TODO: 渲染管线
+    },
+    // 移除影响管线
+    removeAffectPipes() {
+      const { mapLayers } = this
+      for (const overlay of this.affectLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.affectLineOverlays = []
+    },
+    // 渲染关阀影响区域
+    renderCloseArea() {
+      const { mapLayers, closeCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+    },
+    // 移除关阀影响区域
+    removeCloseArea() {
+      const { mapLayers } = this
+      if (this.closeAreaOverlay) {
+        mapLayers.removeOverlay(this.closeAreaOverlay)
+        this.closeAreaOverlay = null
+      }
+    },
+    // 渲染关阀影响管线
+    renderClosePipes() {
+      // TODO: 渲染管线
+    },
+    // 移除关阀影响管线
+    removeClosePipes() {
+      const { mapLayers } = this
+      for (const overlay of this.closeLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.closeLineOverlays = []
+    },
+    // 清除所有overlay
+    removeOverlays() {
+      const { mapLayers } = this
+      mapLayers.clearOverlays()
+    },
+    // 获取中点
+    getCenterPoint() {
+      const { center } = this
+      console.log('getCenterPoint:' + center.lat + ',' + center.lng)
+      return new CLatLng(center.lat, center.lng)
+    },
+    initMap(CMapLayers) {
+      this.CMapLayers = CMapLayers
+      this.init(CMapLayers)
+    },
+    getMapScript() {
+      // 动态获取cmap的脚本
+      // const TMapURL = 'http://satellite.casm.ac.cn:8020/geowinmap/api?version=tapi&map=map&utils=mapcase'
+      const TMapURL = 'http://119.3.228.125:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
+      return new Promise((resolve, reject) => {
+        console.log(window.CMapLayers)
+        // 如果已加载直接返回
+        if (typeof window.CMapLayers !== 'undefined') {
+          console.log('地图脚本初始化成功1111...')
+          resolve(window.CMapLayers)
+          // return true
+        } else {
+          // 插入script脚本
+          const scriptNode = document.createElement('script')
+          scriptNode.setAttribute('type', 'text/javascript')
+          scriptNode.setAttribute('src', TMapURL)
+
+          if (scriptNode.readyState) { // IE
+            scriptNode.onreadystatechange = function() {
+              if (scriptNode.readyState === 'loaded' || scriptNode.readyState === 'complete') {
+                scriptNode.onreadystatechange = null
+                console.log('地图脚本初始化成功2...')
+                // eslint-disable-next-line
+                resolve(window.CMapLayers)
+              }
+            }
+          } else { // 其他浏览器
+            scriptNode.onload = function() {
+              console.log('地图脚本初始化成功3...')
+              resolve(window.CMapLayers)
+            }
+          }
+          document.body.appendChild(scriptNode)
+          console.log(scriptNode)
+        }
+      })
+    },
+    reset() {
+      console.log('map reset')
+      const { initMap, getMapScript } = this
+      getMapScript()
+        .then(initMap)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .mapDiv{
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  /*.alarm-window{*/
+    /*max-width: 250px;*/
+  /*!*background-color: #ffeaf1;*!*/
+    /*.alarm-header {*/
+      /*padding: 10px 10px 5px 10px;*/
+      /*line-height: 30px;*/
+      /*color: red;*/
+      /*font-weight: bold;*/
+      /*!*background-color: #ffecec;*!*/
+    /*}*/
+    /*.alarm-body{*/
+      /*padding: 5px 10px 10px 10px;*/
+      /*line-height: 23px;*/
+      /*font-size: 14px;*/
+    /*.alarm-red{*/
+      /*color: #ff0000;*/
+    /*}*/
+  /*}*/
+  /*}*/
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index ea8e099..6ac852b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -265,6 +265,12 @@
         name: 'SmartDataList',
         component: () => import('@/views/smartAnalysis/dataManage'),
         meta: { title: '数据列表', icon: 'icon-config', permission: ['/smartDataList'] }
+      },
+      {
+        path: '/smartDataOverview',
+        name: 'SmartDataOverview',
+        component: () => import('@/views/smartAnalysis/smartOverview'),
+        meta: { title: '可视化', icon: 'icon-config', permission: ['/smartOverview'] }
       }
     ]
   },
diff --git a/src/views/smartAnalysis/smartOverview.vue b/src/views/smartAnalysis/smartOverview.vue
new file mode 100644
index 0000000..06d30b0
--- /dev/null
+++ b/src/views/smartAnalysis/smartOverview.vue
@@ -0,0 +1,447 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="17">
+        <div v-loading="loading" class="overview-map-container">
+          <!--地图-->
+          <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" class="map-demo" @ready="readyMap"/>
+        </div>
+      </el-col>
+      <el-col :span="7">
+        <div class="smart-div">
+          <div class="smart-tab">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="内涝分析" name="first">
+                <el-table
+                  :data="waterList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="waterRowClick()">
+                  <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-tab-pane>
+              <el-tab-pane label="燃气管线泄漏点" name="second">
+                <el-table
+                  :data="gasList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="gasRowClick()">
+                  <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-tab-pane>
+              <el-tab-pane label="热力管线泄漏点" name="third">
+                <el-table
+                  :data="hotList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="hotRowClick()">
+                  <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-tab-pane>
+            </el-tabs>
+          </div>
+          <div v-if="wellObj!=null" class="smart-detail">
+            <div class="detail-header">详情</div>
+            <el-form ref="form" :model="wellObj" label-width="90px">
+              <el-form-item label="井编号">
+                <span class="detail-item">{{ wellObj.wellCode }}</span>
+              </el-form-item>
+              <el-form-item label="位置">
+                <span class="detail-item">{{ wellObj.position }}</span>
+              </el-form-item>
+              <el-form-item v-if="wellObj.liquidData" label="液位值">
+                <span class="detail-item">{{ wellObj.liquidData }}</span>
+              </el-form-item>
+              <el-form-item v-if="wellObj.strength" label="燃气浓度">
+                <span class="detail-item">{{ wellObj.strength }} %LEL </span>
+              </el-form-item>
+              <el-form-item label="影响面积">
+                <span class="detail-item">{{ wellObj.affectArea }} 平方公里</span>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <span class="detail-item">{{ wellObj.createTime }}</span>
+              </el-form-item>
+            </el-form>
+            <div v-show="activeName!=='first'" class="btn-group">
+              <el-button>查看阀门</el-button>
+              <el-button>查看关阀影响区域</el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Cmap from '../../components/CMap/components/cmapSmart'
+import { getAlarmsNow } from '@/api/overview'
+export default {
+  name: 'SmartOverview',
+  components: { Cmap },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      columns: [
+        {
+          text: '井编号',
+          value: 'wellCode',
+          align: 'center'
+        },
+        {
+          text: '位置',
+          value: 'position',
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      count: 30,
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: { lng: this.$store.getters.lng, lat: this.$store.getters.lat }, // 地图中心
+      zoom: 12, // 地图缩放比例
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      waterList: [], // 内涝预警列表
+      gasList: [], // 燃气管线泄漏点列表
+      hotList: [], // 热力管线泄漏点列表
+      activeName: 'first', // 当前智能分析内容:内涝first，燃气管线泄漏second，热力管线泄漏third
+      wellObj: null,
+      loading: false // 加载图标是否显示
+    }
+  },
+  activated() {
+    this.refreshData()
+  },
+  methods: {
+    // 地图准备好后的操作
+    readyMap() {
+      console.log('readyMap')
+      const that = this
+      that.refreshData() // 刷新报警内容
+    },
+    // 刷新报警列表
+    refreshData() {
+      this.getWaterData()
+    },
+    handleClick(tab, event) {
+      debugger
+      if (tab.name === 'first') {
+        this.getWaterData()
+      } else if (tab.name === 'second') {
+        this.getGasData()
+      } else if (tab.name === 'third') {
+        this.getHotData()
+      }
+    },
+    getWaterData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.waterList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    getGasData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.gasList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    getHotData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.hotList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    // 点击内涝列表项
+    waterRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: 116.4,
+        lat: 39.9,
+        radius: 100,
+        liquidData: '13',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 点击燃气泄漏点列表项
+    gasRowClick(row, column, event) {
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: '126.4',
+        lat: '39.9',
+        radius: '24',
+        strength: '3',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 点击热力泄漏点列表项
+    hotRowClick(row, column, event) {
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: '116.4',
+        lat: '39.9',
+        radius: '24',
+        liquidData: '13',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 查看阀门
+    showValves(){
+
+    },
+    // 关阀影响区域
+    showCloseArea(){
+
+    }
+  }
+}
+</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;
+  }
+}
+.smart-div{
+  .smart-tab{
+    .el-tabs__content{
+      max-height: calc(100vh - 295px - 144px - 60px);
+      overflow-y: scroll;
+    }
+  }
+  .smart-detail{
+    /*margin-top: 20px;*/
+    font-size:14px;
+    min-height:295px;
+    .detail-header{
+      height: 40px;
+      padding-left: 5px;
+      font-size:14px;
+      line-height: 40px;
+      background-color: #f0f0f0;
+    }
+    .el-form{
+      .el-form-item{
+        margin-bottom: 0px;
+        border-bottom: 1px solid #f0f0f0;
+        .el-form-item__label{
+          background-color: #ededed;
+        }
+        .el-form-item__content{
+          /*background-color: #edf9f0;*/
+          padding-left:10px;
+        }
+      }
+    }
+    .btn-group{
+      margin: 10px;
+      text-align: center;
+    }
+  }
+}
+// 报警列表
+.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;
+  }
+}
+// 地图
+.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{
+        padding: 10px 10px 5px 10px;
+        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>
diff --git a/static/images/map_images/alarm-well.png b/static/images/map_images/alarm-well.png
new file mode 100644
index 0000000..97b89e0
--- /dev/null
+++ b/static/images/map_images/alarm-well.png
Binary files differ

diff --git a/src/components/CMap/components/cmapSmart.vue b/src/components/CMap/components/cmapSmart.vue
new file mode 100644
index 0000000..8146911
--- /dev/null
+++ b/src/components/CMap/components/cmapSmart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <div id="map" ref="map" class="mapDiv"/>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import bindEvents from './../base/bindEvents'
+import { createIcon } from '../base/factory.js'
+
+export default {
+  name: 'Cmap',
+  props: {
+    center: { // 地图中心
+      type: Object,
+      default: function() {
+        return { lat: 39.9, lng: 116.4 }
+      }
+    },
+    wellObj: { // 井对象
+      type: Object,
+      default: function() {
+        return { wellCode: '', id: '', lat: 39.9, lng: 116.4, radius: 10 }
+      }
+    },
+    valves: { // 阀门
+      type: Array,
+      default: () => []
+    },
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    minZoom: { // 最小缩放层级
+      type: Number,
+      default: 9
+    },
+    maxZoom: { // 最大缩放层级
+      type: Number,
+      default: 21
+    },
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: function() {
+        return [15, 30]
+      }
+    }, // 图标位移
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -15]
+      }
+    }
+  },
+  data() {
+    return {
+      // wellObj: null,
+      affectCicle: null, // 影响区域
+      affectPipes: null, // 影响管线
+      closeCircle: null, // 关阀影响区域
+      closePipes: null, // 影响管线
+      mapLayers: null, // 地图图层
+      wellOverlay: null, // 井overlay
+      affectAreaOverlay: null, // 影响区域overlay
+      affectLineOverlays: [], // 影响管线overlay
+      valvesOverlays: [], // 阀门overlay列表
+      closeAreaOverlay: null, // 关阀影响区域overlay
+      closeLineOverlays: [] // 关阀影响区域overlay
+    }
+  },
+  watch: {
+    center(val, oldVal) {
+      const { mapLayers, zoom } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val.lat, val.lng))
+      }
+    },
+    'center.lng'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(center.lat, val))
+      }
+    },
+    'center.lat'(val, oldVal) {
+      const { mapLayers, zoom, center } = this
+      if (mapLayers != null && val !== oldVal) {
+        mapLayers.setCenter(new CLatLng(val, center.lng))
+      }
+    },
+    zoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setZoom(val)
+    },
+    minZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMinZoom(val)
+    },
+    maxZoom(val, oldVal) {
+      const { mapLayers } = this
+      mapLayers.setMaxZoom(val)
+    },
+    alarmMarkers(val) {
+      console.log('alarmMarkers')
+      this.renderMarkers()
+    }
+  },
+  mounted() {
+    console.log('map mounted')
+    this.reset()
+  },
+  activated() {
+    console.log('map activated')
+    this.init()
+  },
+  methods: {
+    // 初始化地图
+    init() {
+      if (this.mapLayers) {
+        return
+      }
+      const $el = this.$refs.map
+      // 影像和矢量地图
+      // const sateLayer = new CTileLayer(2, 18, 'sate', null, null)// 影像
+      // const sateLabelLayer = new CTileLayer(2, 18, 'satelabel', null, null)// 影像注记
+      // const mapLayer = new CTileLayer(2, 18, 'map', null, null)// 矢量
+      // const mapLabelLayer = new CTileLayer(2, 18, 'maplabel', null, null)// 矢量注记
+
+      var tianditusateLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'sate',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditusateLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'satelabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      var tianditumapLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'map',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const tianditumapLabelLayer = new CTileLayer({
+        zbound: [2, 18],
+        tileName: 'maplabel',
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        url: 'http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
+      })
+
+      const TianDiTuBASEMAP = new CMapType([tianditumapLayer], '矢量')
+      const TianDiTuVECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const TianDiTuSATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+
+      const VECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
+      const SATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
+      // const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')
+      // const SATEMAP = new CMapType([sateLayer, sateLabelLayer], '影像')
+
+      const { getCenterPoint, zoom } = this
+      // 初始化配置
+      const opts = {
+        mapTypes: [VECTORMAP],
+        center: getCenterPoint(),
+        zoom: zoom
+      }
+      // 加载图层
+      this.mapLayers = new CMapLayers($el, opts)
+      this.mapLayers.addMapTypeControl()
+
+      bindEvents.call(this, this.mapLayers)
+
+      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
+      // this.mapLayers.reset()
+      this.reset()
+      this.mapLayers.setCenter(getCenterPoint(), zoom)
+      this.$emit('ready', { mapLayers: this.mapLayers })
+      // this.renderMarkers()
+    },
+    renderAffectAP(wellObj) {
+      // this.wellObj = wellObj
+      const { mapLayers } = this
+      if (!mapLayers) {
+        return
+      }
+      this.removeOverlays() // 清除所有overlay
+      // 渲染井
+      if (this.wellObj != null) {
+        this.affectCircle = {
+          lat: this.wellObj.lat,
+          lng: this.wellObj.lng,
+          radius: this.wellObj.radius
+        }
+        if (this.wellObj.affectPipes) {
+          this.affectPipes = this.wellObj.affectPipes
+        }
+        this.renderWell()
+      }
+      // 当影响区域不为空的时候显示影响区域
+      if (this.affectCircle != null) {
+        this.renderAffectArea()
+      }
+      // 渲染管线
+      if (this.affectPipes && this.affectPipes.length > 0) {
+        this.renderAffectPipes()
+      }
+    },
+    removeAffectAP() {
+      // 移除井
+      // if (this.wellObj != null) {
+      //   this.removeWell()
+      // }
+      // 移除影响区域
+      if (this.affectArea != null) {
+        this.removeAffectArea()
+      }
+      // 移除管线
+      if (this.affectPipes.length > 0) {
+        this.removeAffectPipes()
+      }
+    },
+    // 渲染影响区域
+    renderAffectArea() {
+      const { mapLayers, affectCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.affectAreaOverlay = mapLayers.drawCircle(new CLatLng(affectCircle.lat, affectCircle.lng), affectCircle.radius, opts)
+    },
+    // 移除影响区域
+    removeAffectArea() {
+      const { mapLayers } = this
+      if (this.affectAreaOverlay) {
+        mapLayers.removeOverlay(this.affectAreaOverlay)
+        this.affectAreaOverlay = null
+      }
+    },
+    // 渲染井
+    renderWell() {
+      const { mapLayers, size, anchor, wellObj } = this
+      const options = {
+        url: './static/images/map_images/alarm-well1.png',
+        size: size,
+        anchor: anchor
+      }
+      const cmapIcon = createIcon(options)
+      const opts = {
+        icon: cmapIcon,
+        title: wellObj.wellCode,
+        draggable: false
+      }
+      this.wellOverlay = new CMarker(new CLatLng(wellObj.lat, wellObj.lng), opts)
+      mapLayers.addOverlay(this.wellOverlay)
+      mapLayers.setZoom(17)
+      mapLayers.setCenter(new CLatLng(wellObj.lat, wellObj.lng))
+    },
+    // 移除井
+    removeWell() {
+      const { mapLayers } = this
+      if (!this.wellOverlay) {
+        mapLayers.removeOverlay(this.wellOverlay)
+        this.wellOverlay = null
+      }
+    },
+    // 渲染问题影响管线
+    renderAffectPipes() {
+      // TODO: 渲染管线
+    },
+    // 移除影响管线
+    removeAffectPipes() {
+      const { mapLayers } = this
+      for (const overlay of this.affectLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.affectLineOverlays = []
+    },
+    // 渲染关阀影响区域
+    renderCloseArea() {
+      const { mapLayers, closeCircle } = this
+      // 绘制影响区域
+      const opts = { color: '#c45366', weight: 2, opacity: 0.9, fill: true, fillColor: '#009900', fillOpacity: 0.4 }
+      this.closeAreaOverlay = mapLayers.drawCircle(new CLatLng(closeCircle.lat, closeCircle.lng), closeCircle.radius, opts)
+    },
+    // 移除关阀影响区域
+    removeCloseArea() {
+      const { mapLayers } = this
+      if (this.closeAreaOverlay) {
+        mapLayers.removeOverlay(this.closeAreaOverlay)
+        this.closeAreaOverlay = null
+      }
+    },
+    // 渲染关阀影响管线
+    renderClosePipes() {
+      // TODO: 渲染管线
+    },
+    // 移除关阀影响管线
+    removeClosePipes() {
+      const { mapLayers } = this
+      for (const overlay of this.closeLineOverlays) {
+        mapLayers.removeOverlay(overlay)
+      }
+      this.closeLineOverlays = []
+    },
+    // 清除所有overlay
+    removeOverlays() {
+      const { mapLayers } = this
+      mapLayers.clearOverlays()
+    },
+    // 获取中点
+    getCenterPoint() {
+      const { center } = this
+      console.log('getCenterPoint:' + center.lat + ',' + center.lng)
+      return new CLatLng(center.lat, center.lng)
+    },
+    initMap(CMapLayers) {
+      this.CMapLayers = CMapLayers
+      this.init(CMapLayers)
+    },
+    getMapScript() {
+      // 动态获取cmap的脚本
+      // const TMapURL = 'http://satellite.casm.ac.cn:8020/geowinmap/api?version=tapi&map=map&utils=mapcase'
+      const TMapURL = 'http://119.3.228.125:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
+      return new Promise((resolve, reject) => {
+        console.log(window.CMapLayers)
+        // 如果已加载直接返回
+        if (typeof window.CMapLayers !== 'undefined') {
+          console.log('地图脚本初始化成功1111...')
+          resolve(window.CMapLayers)
+          // return true
+        } else {
+          // 插入script脚本
+          const scriptNode = document.createElement('script')
+          scriptNode.setAttribute('type', 'text/javascript')
+          scriptNode.setAttribute('src', TMapURL)
+
+          if (scriptNode.readyState) { // IE
+            scriptNode.onreadystatechange = function() {
+              if (scriptNode.readyState === 'loaded' || scriptNode.readyState === 'complete') {
+                scriptNode.onreadystatechange = null
+                console.log('地图脚本初始化成功2...')
+                // eslint-disable-next-line
+                resolve(window.CMapLayers)
+              }
+            }
+          } else { // 其他浏览器
+            scriptNode.onload = function() {
+              console.log('地图脚本初始化成功3...')
+              resolve(window.CMapLayers)
+            }
+          }
+          document.body.appendChild(scriptNode)
+          console.log(scriptNode)
+        }
+      })
+    },
+    reset() {
+      console.log('map reset')
+      const { initMap, getMapScript } = this
+      getMapScript()
+        .then(initMap)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .mapDiv{
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  /*.alarm-window{*/
+    /*max-width: 250px;*/
+  /*!*background-color: #ffeaf1;*!*/
+    /*.alarm-header {*/
+      /*padding: 10px 10px 5px 10px;*/
+      /*line-height: 30px;*/
+      /*color: red;*/
+      /*font-weight: bold;*/
+      /*!*background-color: #ffecec;*!*/
+    /*}*/
+    /*.alarm-body{*/
+      /*padding: 5px 10px 10px 10px;*/
+      /*line-height: 23px;*/
+      /*font-size: 14px;*/
+    /*.alarm-red{*/
+      /*color: #ff0000;*/
+    /*}*/
+  /*}*/
+  /*}*/
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index ea8e099..6ac852b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -265,6 +265,12 @@
         name: 'SmartDataList',
         component: () => import('@/views/smartAnalysis/dataManage'),
         meta: { title: '数据列表', icon: 'icon-config', permission: ['/smartDataList'] }
+      },
+      {
+        path: '/smartDataOverview',
+        name: 'SmartDataOverview',
+        component: () => import('@/views/smartAnalysis/smartOverview'),
+        meta: { title: '可视化', icon: 'icon-config', permission: ['/smartOverview'] }
       }
     ]
   },
diff --git a/src/views/smartAnalysis/smartOverview.vue b/src/views/smartAnalysis/smartOverview.vue
new file mode 100644
index 0000000..06d30b0
--- /dev/null
+++ b/src/views/smartAnalysis/smartOverview.vue
@@ -0,0 +1,447 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="17">
+        <div v-loading="loading" class="overview-map-container">
+          <!--地图-->
+          <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" class="map-demo" @ready="readyMap"/>
+        </div>
+      </el-col>
+      <el-col :span="7">
+        <div class="smart-div">
+          <div class="smart-tab">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="内涝分析" name="first">
+                <el-table
+                  :data="waterList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="waterRowClick()">
+                  <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-tab-pane>
+              <el-tab-pane label="燃气管线泄漏点" name="second">
+                <el-table
+                  :data="gasList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="gasRowClick()">
+                  <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-tab-pane>
+              <el-tab-pane label="热力管线泄漏点" name="third">
+                <el-table
+                  :data="hotList"
+                  class="alarm-list-table"
+                  border
+                  @row-click="hotRowClick()">
+                  <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-tab-pane>
+            </el-tabs>
+          </div>
+          <div v-if="wellObj!=null" class="smart-detail">
+            <div class="detail-header">详情</div>
+            <el-form ref="form" :model="wellObj" label-width="90px">
+              <el-form-item label="井编号">
+                <span class="detail-item">{{ wellObj.wellCode }}</span>
+              </el-form-item>
+              <el-form-item label="位置">
+                <span class="detail-item">{{ wellObj.position }}</span>
+              </el-form-item>
+              <el-form-item v-if="wellObj.liquidData" label="液位值">
+                <span class="detail-item">{{ wellObj.liquidData }}</span>
+              </el-form-item>
+              <el-form-item v-if="wellObj.strength" label="燃气浓度">
+                <span class="detail-item">{{ wellObj.strength }} %LEL </span>
+              </el-form-item>
+              <el-form-item label="影响面积">
+                <span class="detail-item">{{ wellObj.affectArea }} 平方公里</span>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <span class="detail-item">{{ wellObj.createTime }}</span>
+              </el-form-item>
+            </el-form>
+            <div v-show="activeName!=='first'" class="btn-group">
+              <el-button>查看阀门</el-button>
+              <el-button>查看关阀影响区域</el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Cmap from '../../components/CMap/components/cmapSmart'
+import { getAlarmsNow } from '@/api/overview'
+export default {
+  name: 'SmartOverview',
+  components: { Cmap },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      columns: [
+        {
+          text: '井编号',
+          value: 'wellCode',
+          align: 'center'
+        },
+        {
+          text: '位置',
+          value: 'position',
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      count: 30,
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: { lng: this.$store.getters.lng, lat: this.$store.getters.lat }, // 地图中心
+      zoom: 12, // 地图缩放比例
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      waterList: [], // 内涝预警列表
+      gasList: [], // 燃气管线泄漏点列表
+      hotList: [], // 热力管线泄漏点列表
+      activeName: 'first', // 当前智能分析内容:内涝first，燃气管线泄漏second，热力管线泄漏third
+      wellObj: null,
+      loading: false // 加载图标是否显示
+    }
+  },
+  activated() {
+    this.refreshData()
+  },
+  methods: {
+    // 地图准备好后的操作
+    readyMap() {
+      console.log('readyMap')
+      const that = this
+      that.refreshData() // 刷新报警内容
+    },
+    // 刷新报警列表
+    refreshData() {
+      this.getWaterData()
+    },
+    handleClick(tab, event) {
+      debugger
+      if (tab.name === 'first') {
+        this.getWaterData()
+      } else if (tab.name === 'second') {
+        this.getGasData()
+      } else if (tab.name === 'third') {
+        this.getHotData()
+      }
+    },
+    getWaterData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.waterList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    getGasData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.gasList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    getHotData() {
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          // this.waterList = response.data
+          // 模拟数据
+          this.hotList = [
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 },
+            { wellCode: '11234', position: '永定路52号院门口', lng: '126.4', lat: '39.9', liquidData: '1', radius: 10 }
+          ]
+        }
+      })
+    },
+    // 点击内涝列表项
+    waterRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: 116.4,
+        lat: 39.9,
+        radius: 100,
+        liquidData: '13',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 点击燃气泄漏点列表项
+    gasRowClick(row, column, event) {
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: '126.4',
+        lat: '39.9',
+        radius: '24',
+        strength: '3',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 点击热力泄漏点列表项
+    hotRowClick(row, column, event) {
+      this.wellObj = {
+        wellCode: '11201231',
+        position: '永定路52号院',
+        lng: '116.4',
+        lat: '39.9',
+        radius: '24',
+        liquidData: '13',
+        affectArea: '23',
+        createTime: '2019-11-27 00:00:00'
+      }
+      this.$refs.map.renderAffectAP(this.wellObj)
+    },
+    // 查看阀门
+    showValves(){
+
+    },
+    // 关阀影响区域
+    showCloseArea(){
+
+    }
+  }
+}
+</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;
+  }
+}
+.smart-div{
+  .smart-tab{
+    .el-tabs__content{
+      max-height: calc(100vh - 295px - 144px - 60px);
+      overflow-y: scroll;
+    }
+  }
+  .smart-detail{
+    /*margin-top: 20px;*/
+    font-size:14px;
+    min-height:295px;
+    .detail-header{
+      height: 40px;
+      padding-left: 5px;
+      font-size:14px;
+      line-height: 40px;
+      background-color: #f0f0f0;
+    }
+    .el-form{
+      .el-form-item{
+        margin-bottom: 0px;
+        border-bottom: 1px solid #f0f0f0;
+        .el-form-item__label{
+          background-color: #ededed;
+        }
+        .el-form-item__content{
+          /*background-color: #edf9f0;*/
+          padding-left:10px;
+        }
+      }
+    }
+    .btn-group{
+      margin: 10px;
+      text-align: center;
+    }
+  }
+}
+// 报警列表
+.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;
+  }
+}
+// 地图
+.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{
+        padding: 10px 10px 5px 10px;
+        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>
diff --git a/static/images/map_images/alarm-well.png b/static/images/map_images/alarm-well.png
new file mode 100644
index 0000000..97b89e0
--- /dev/null
+++ b/static/images/map_images/alarm-well.png
Binary files differ
diff --git a/static/images/map_images/alarm-well1.png b/static/images/map_images/alarm-well1.png
new file mode 100644
index 0000000..95bec70
--- /dev/null
+++ b/static/images/map_images/alarm-well1.png
Binary files differ