diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)
diff --git a/src/components/mapWindow/base/mixins/common.js b/src/components/mapWindow/base/mixins/common.js
new file mode 100644
index 0000000..2fd1a28
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/common.js
@@ -0,0 +1,82 @@
+const types = {
+  map: {
+    unload: 'clearMap'
+  },
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeLayer'
+  },
+  features: {
+    unload: 'removeFeatures'
+  },
+  listener: {
+    unload: 'removeListener'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const { unload, renderByParent, $parent } = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const { map, originInstance } = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      console.log('common mounted')
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const { ready } = this
+      console.log(map)
+      map ? ready() : $parent.$on('onload', ready)
+    }
+  }
+}
+
+export default type => new Mixin({ type })

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)
diff --git a/src/components/mapWindow/base/mixins/common.js b/src/components/mapWindow/base/mixins/common.js
new file mode 100644
index 0000000..2fd1a28
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/common.js
@@ -0,0 +1,82 @@
+const types = {
+  map: {
+    unload: 'clearMap'
+  },
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeLayer'
+  },
+  features: {
+    unload: 'removeFeatures'
+  },
+  listener: {
+    unload: 'removeListener'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const { unload, renderByParent, $parent } = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const { map, originInstance } = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      console.log('common mounted')
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const { ready } = this
+      console.log(map)
+      map ? ready() : $parent.$on('onload', ready)
+    }
+  }
+}
+
+export default type => new Mixin({ type })
diff --git a/src/components/mapWindow/leafletMap.vue b/src/components/mapWindow/leafletMap.vue
new file mode 100644
index 0000000..21dcc81
--- /dev/null
+++ b/src/components/mapWindow/leafletMap.vue
@@ -0,0 +1,153 @@
+<template>
+  <div id="map" ref="mapDiv" class="baseMap">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    satellite: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      map: null,
+      baseLayer: [],
+      satelliteLayer: null,
+      markers: [], // 选点
+      pois: [], // 兴趣点结果
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: true,
+      keywords: '', // 查询关键字
+      limit: 100, // 兴趣点查询的最大结果数
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
+  mounted () {
+    this.initMap()
+  },
+  watch: {
+    satellite (val, oldVal) {
+      if (val&&!oldVal) {
+        this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        })
+        this.satelliteLayer.addTo(this.map)
+      } else {
+        this.map.removeLayer(this.satelliteLayer)
+      }
+    }
+  },
+  methods: {
+    initMap () {
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.$emit('onload', map)
+      // 加载图层
+      this.addLayers()
+    },
+    addLayers () {
+      // 加载天地图底图和标注
+      const tdtMap = L.tileLayer(this.baseConfig.mapUrl, {
+        maxZoom: 18
+      })
+      const tdtLabel = L.tileLayer(this.baseConfig.labelUrl,
+        {maxZoom: 18})
+      this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+        maxZoom: 22
+      })
+      this.baseLayer.push(tdtMap.addTo(this.map))
+      if (this.satellite) {
+        this.baseLayer.push(this.satelliteLayer.addTo(this.map))
+      }
+      this.baseLayer.push(tdtLabel.addTo(this.map))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height: 100%;
+    width: 100%;
+    /*border: 1px solid #DCDCDC;*/
+    /*border-radius: 4px;*/
+  }
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
+  }
+</style>

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)
diff --git a/src/components/mapWindow/base/mixins/common.js b/src/components/mapWindow/base/mixins/common.js
new file mode 100644
index 0000000..2fd1a28
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/common.js
@@ -0,0 +1,82 @@
+const types = {
+  map: {
+    unload: 'clearMap'
+  },
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeLayer'
+  },
+  features: {
+    unload: 'removeFeatures'
+  },
+  listener: {
+    unload: 'removeListener'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const { unload, renderByParent, $parent } = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const { map, originInstance } = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      console.log('common mounted')
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const { ready } = this
+      console.log(map)
+      map ? ready() : $parent.$on('onload', ready)
+    }
+  }
+}
+
+export default type => new Mixin({ type })
diff --git a/src/components/mapWindow/leafletMap.vue b/src/components/mapWindow/leafletMap.vue
new file mode 100644
index 0000000..21dcc81
--- /dev/null
+++ b/src/components/mapWindow/leafletMap.vue
@@ -0,0 +1,153 @@
+<template>
+  <div id="map" ref="mapDiv" class="baseMap">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    satellite: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      map: null,
+      baseLayer: [],
+      satelliteLayer: null,
+      markers: [], // 选点
+      pois: [], // 兴趣点结果
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: true,
+      keywords: '', // 查询关键字
+      limit: 100, // 兴趣点查询的最大结果数
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
+  mounted () {
+    this.initMap()
+  },
+  watch: {
+    satellite (val, oldVal) {
+      if (val&&!oldVal) {
+        this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        })
+        this.satelliteLayer.addTo(this.map)
+      } else {
+        this.map.removeLayer(this.satelliteLayer)
+      }
+    }
+  },
+  methods: {
+    initMap () {
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.$emit('onload', map)
+      // 加载图层
+      this.addLayers()
+    },
+    addLayers () {
+      // 加载天地图底图和标注
+      const tdtMap = L.tileLayer(this.baseConfig.mapUrl, {
+        maxZoom: 18
+      })
+      const tdtLabel = L.tileLayer(this.baseConfig.labelUrl,
+        {maxZoom: 18})
+      this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+        maxZoom: 22
+      })
+      this.baseLayer.push(tdtMap.addTo(this.map))
+      if (this.satellite) {
+        this.baseLayer.push(this.satelliteLayer.addTo(this.map))
+      }
+      this.baseLayer.push(tdtLabel.addTo(this.map))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height: 100%;
+    width: 100%;
+    /*border: 1px solid #DCDCDC;*/
+    /*border-radius: 4px;*/
+  }
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/mapWindow/mapWindow.vue b/src/components/mapWindow/mapWindow.vue
new file mode 100644
index 0000000..9ced291
--- /dev/null
+++ b/src/components/mapWindow/mapWindow.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Description: 顶部菜单项
+ * @Author: 王晓颖
+ * @Date:2020-08-08
+ -->
+<template>
+  <div class="window_view">
+    <span class="view-text" :style="{'font-size':size+'rem'}"><slot/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapWindow',
+  props: {
+    size: {
+      type: String,
+      default: '0.09'
+    }
+  },
+  data () {
+    return {
+      selected: false
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .window_view{
+    padding: .08rem .14rem;
+    background-size: 100% 100%;
+    margin-right: .05rem;
+    text-align: center;
+    background: url("../../assets/images/button/button_yellow.png") no-repeat;
+    color: #fccd14;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .view-text{
+    font-weight: bolder;
+  }
+</style>

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)
diff --git a/src/components/mapWindow/base/mixins/common.js b/src/components/mapWindow/base/mixins/common.js
new file mode 100644
index 0000000..2fd1a28
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/common.js
@@ -0,0 +1,82 @@
+const types = {
+  map: {
+    unload: 'clearMap'
+  },
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeLayer'
+  },
+  features: {
+    unload: 'removeFeatures'
+  },
+  listener: {
+    unload: 'removeListener'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const { unload, renderByParent, $parent } = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const { map, originInstance } = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      console.log('common mounted')
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const { ready } = this
+      console.log(map)
+      map ? ready() : $parent.$on('onload', ready)
+    }
+  }
+}
+
+export default type => new Mixin({ type })
diff --git a/src/components/mapWindow/leafletMap.vue b/src/components/mapWindow/leafletMap.vue
new file mode 100644
index 0000000..21dcc81
--- /dev/null
+++ b/src/components/mapWindow/leafletMap.vue
@@ -0,0 +1,153 @@
+<template>
+  <div id="map" ref="mapDiv" class="baseMap">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    satellite: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      map: null,
+      baseLayer: [],
+      satelliteLayer: null,
+      markers: [], // 选点
+      pois: [], // 兴趣点结果
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: true,
+      keywords: '', // 查询关键字
+      limit: 100, // 兴趣点查询的最大结果数
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
+  mounted () {
+    this.initMap()
+  },
+  watch: {
+    satellite (val, oldVal) {
+      if (val&&!oldVal) {
+        this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        })
+        this.satelliteLayer.addTo(this.map)
+      } else {
+        this.map.removeLayer(this.satelliteLayer)
+      }
+    }
+  },
+  methods: {
+    initMap () {
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.$emit('onload', map)
+      // 加载图层
+      this.addLayers()
+    },
+    addLayers () {
+      // 加载天地图底图和标注
+      const tdtMap = L.tileLayer(this.baseConfig.mapUrl, {
+        maxZoom: 18
+      })
+      const tdtLabel = L.tileLayer(this.baseConfig.labelUrl,
+        {maxZoom: 18})
+      this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+        maxZoom: 22
+      })
+      this.baseLayer.push(tdtMap.addTo(this.map))
+      if (this.satellite) {
+        this.baseLayer.push(this.satelliteLayer.addTo(this.map))
+      }
+      this.baseLayer.push(tdtLabel.addTo(this.map))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height: 100%;
+    width: 100%;
+    /*border: 1px solid #DCDCDC;*/
+    /*border-radius: 4px;*/
+  }
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/mapWindow/mapWindow.vue b/src/components/mapWindow/mapWindow.vue
new file mode 100644
index 0000000..9ced291
--- /dev/null
+++ b/src/components/mapWindow/mapWindow.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Description: 顶部菜单项
+ * @Author: 王晓颖
+ * @Date:2020-08-08
+ -->
+<template>
+  <div class="window_view">
+    <span class="view-text" :style="{'font-size':size+'rem'}"><slot/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapWindow',
+  props: {
+    size: {
+      type: String,
+      default: '0.09'
+    }
+  },
+  data () {
+    return {
+      selected: false
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .window_view{
+    padding: .08rem .14rem;
+    background-size: 100% 100%;
+    margin-right: .05rem;
+    text-align: center;
+    background: url("../../assets/images/button/button_yellow.png") no-repeat;
+    color: #fccd14;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .view-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/router/modules/environment.js b/src/router/modules/environment.js
index 75094ea..4e80abc 100644
--- a/src/router/modules/environment.js
+++ b/src/router/modules/environment.js
@@ -5,7 +5,7 @@
   {
     path: '/',
     component: Layout,
-    redirect: 'dashboard',
+    redirect: '/overview',
     name: 'Dashboard',
     hidden: true,
     children: [{

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)
diff --git a/src/components/mapWindow/base/mixins/common.js b/src/components/mapWindow/base/mixins/common.js
new file mode 100644
index 0000000..2fd1a28
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/common.js
@@ -0,0 +1,82 @@
+const types = {
+  map: {
+    unload: 'clearMap'
+  },
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeLayer'
+  },
+  features: {
+    unload: 'removeFeatures'
+  },
+  listener: {
+    unload: 'removeListener'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const { unload, renderByParent, $parent } = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const { map, originInstance } = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      console.log('common mounted')
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const { ready } = this
+      console.log(map)
+      map ? ready() : $parent.$on('onload', ready)
+    }
+  }
+}
+
+export default type => new Mixin({ type })
diff --git a/src/components/mapWindow/leafletMap.vue b/src/components/mapWindow/leafletMap.vue
new file mode 100644
index 0000000..21dcc81
--- /dev/null
+++ b/src/components/mapWindow/leafletMap.vue
@@ -0,0 +1,153 @@
+<template>
+  <div id="map" ref="mapDiv" class="baseMap">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    satellite: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      map: null,
+      baseLayer: [],
+      satelliteLayer: null,
+      markers: [], // 选点
+      pois: [], // 兴趣点结果
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: true,
+      keywords: '', // 查询关键字
+      limit: 100, // 兴趣点查询的最大结果数
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
+  mounted () {
+    this.initMap()
+  },
+  watch: {
+    satellite (val, oldVal) {
+      if (val&&!oldVal) {
+        this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        })
+        this.satelliteLayer.addTo(this.map)
+      } else {
+        this.map.removeLayer(this.satelliteLayer)
+      }
+    }
+  },
+  methods: {
+    initMap () {
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.$emit('onload', map)
+      // 加载图层
+      this.addLayers()
+    },
+    addLayers () {
+      // 加载天地图底图和标注
+      const tdtMap = L.tileLayer(this.baseConfig.mapUrl, {
+        maxZoom: 18
+      })
+      const tdtLabel = L.tileLayer(this.baseConfig.labelUrl,
+        {maxZoom: 18})
+      this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+        maxZoom: 22
+      })
+      this.baseLayer.push(tdtMap.addTo(this.map))
+      if (this.satellite) {
+        this.baseLayer.push(this.satelliteLayer.addTo(this.map))
+      }
+      this.baseLayer.push(tdtLabel.addTo(this.map))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height: 100%;
+    width: 100%;
+    /*border: 1px solid #DCDCDC;*/
+    /*border-radius: 4px;*/
+  }
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/mapWindow/mapWindow.vue b/src/components/mapWindow/mapWindow.vue
new file mode 100644
index 0000000..9ced291
--- /dev/null
+++ b/src/components/mapWindow/mapWindow.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Description: 顶部菜单项
+ * @Author: 王晓颖
+ * @Date:2020-08-08
+ -->
+<template>
+  <div class="window_view">
+    <span class="view-text" :style="{'font-size':size+'rem'}"><slot/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapWindow',
+  props: {
+    size: {
+      type: String,
+      default: '0.09'
+    }
+  },
+  data () {
+    return {
+      selected: false
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .window_view{
+    padding: .08rem .14rem;
+    background-size: 100% 100%;
+    margin-right: .05rem;
+    text-align: center;
+    background: url("../../assets/images/button/button_yellow.png") no-repeat;
+    color: #fccd14;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .view-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/router/modules/environment.js b/src/router/modules/environment.js
index 75094ea..4e80abc 100644
--- a/src/router/modules/environment.js
+++ b/src/router/modules/environment.js
@@ -5,7 +5,7 @@
   {
     path: '/',
     component: Layout,
-    redirect: 'dashboard',
+    redirect: '/overview',
     name: 'Dashboard',
     hidden: true,
     children: [{
diff --git a/src/views/overview/component/deviceLayer.vue b/src/views/overview/component/deviceLayer.vue
new file mode 100644
index 0000000..1e41bcf
--- /dev/null
+++ b/src/views/overview/component/deviceLayer.vue
@@ -0,0 +1,207 @@
+<!--
+ * @Description: 环监设备图层
+ * @Author: 王晓颖
+ * @Date: 2021-08-09 15:27:40
+ -->
+<template>
+
+</template>
+
+<script>
+  import { getDeviceList } from '@/api/environment/device'
+  import Leaflet from 'leaflet'
+  import commonMixin from '@/components/mapWindow/base/mixins/common.js'
+  export default {
+    name: "deviceLayer",
+    mixins: [commonMixin('layer')],
+    props: {
+      show: {
+        type: Boolean,
+        default: true
+      }, // 是否显示
+      iconSize: {
+        type: Array,
+        default: () => {
+          return [30, 30]
+        }
+      }, // 图标大小
+      iconAnchor: {
+        type: Array,
+        default: () => {
+          return [-15, 15]
+        }
+      }, // 图标位移
+      popupAnchor: {
+        type: Array,
+        default: () => {
+          return [30, 0]
+        }
+      }, // 弹窗位移
+      refreshTime: {
+        type: Number,
+        default: 60
+      } // 定时刷新时间
+    },
+    data(){
+      return {
+        deviceOnlineList: [],
+        deviceOfflineList: [],
+        deviceOnlineLayer: null, // 在线设备图层
+        deviceOfflineLayer: null, // 离线设备图层
+        layerGroup: [], // 图层组
+        deviceOnlineIcon: require('@/assets/map/device-online.png'),
+        deviceOfflineIcon: require('@/assets/map/device-offline.png'),
+      }
+    },
+    methods:{
+      load () {
+        console.log('load caseLayer')
+        if (this.show) {
+          this.initLayer()
+        }
+      },
+      // 初始化图层
+      initLayer () {
+        const {map} = this
+        // 初始化图层组
+        /* eslint-disable new-cap */
+        this.layerGroup = []
+        this.deviceOnlineLayer = new Leaflet.layerGroup().addTo(map)
+        this.deviceOfflineLayer = new Leaflet.layerGroup().addTo(map)
+        this.layerGroup.push(this.deviceOnlineLayer)
+        this.layerGroup.push(this.deviceOfflineLayer)
+        console.log('initLayer')
+        this.loadData()
+      },
+      // 加载数据
+      loadData(){
+        getDeviceList(this.listQuery).then(response => {
+          this.list = response.data
+          this.deviceOnlineList = this.list.filter(item=>item.online=='1')
+          this.deviceOfflineList = this.list.filter(item=>item.online=='2')
+          this.addPointOnMap(this.deviceOnlineList,this.deviceOnlineLayer,this.deviceOnlineIcon)
+          this.addPointOnMap(this.deviceOfflineList,this.deviceOfflineLayer,this.deviceOfflineIcon)
+        })
+        // this.list = [
+        //     {id:"1", deviceNo:"2021030803100001", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.75962, lng:116.06021, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"2", deviceNo:"2021030803100002", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"3", deviceNo:"2021030803100003", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"4", deviceNo:"2021030803100004", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"5", deviceNo:"2021030803100005", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"6", deviceNo:"2021030803100006", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"}
+        // ]
+      },
+      // 将点加到地图上
+      addPointOnMap: function (list, layer, iconType) {
+        const {iconSize, iconAnchor, popupAnchor} = this
+        layer.clearLayers()
+        // 图标
+        const icon = Leaflet.icon({
+          iconUrl: iconType,
+          iconSize: iconSize,
+          iconAnchor: iconAnchor,
+          popupAnchor: popupAnchor
+        })
+        list.forEach(detail => {
+
+          // let popupStr = '<div class="popup-div">' +
+          //   '<div class="popup-title">站点详细信息</div>' +
+          //   '<div class="dashed-line"></div>' +
+          //   '<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
+          //   '<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
+          //   '<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
+          //   '<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
+          //   '<div class="popup-item"><label>在线状态</label>' +  (detail.online==='1'?'在线':'离线') + '</div>'
+          // popupStr += '</div>'
+          // const popup = Leaflet.popup().setContent(popupStr)
+
+          if (detail.lng > 0 && detail.lat > 0) {
+            // 添加marker
+            const marker = Leaflet.marker([detail.lat, detail.lng],
+              { icon: icon,
+                id:detail.id,
+                deviceNo: detail.deviceNo,
+                detail: detail,
+                zIndexOffset: 100000
+              }).addTo(layer)
+            marker.on('click', e => {
+              // 获取数据详情
+              if (e.target.dragging._marker._popup) {
+                e.target.dragging._marker.unbindPopup()
+              }
+              var id = e.target.options.id
+              setTimeout(()=>{
+                const data = {pm25: '23.40', pm10: '25.80', tsp: '0.00', noise: '3.40', windPower: '0.40', windDirection: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', pressure: '122.50', ts: '2021-05-07 11:15'}
+                let popupStr = '<div class="popup-div">' +
+                  '<div class="popup-title">站点详细信息</div>' +
+                  '<div class="dashed-line"></div>' +
+                  '<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
+                  '<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
+                  '<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
+                  '<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
+                  '<div class="popup-item"><label>在线状态</label>' +  (detail.online==='1'?'在线':'离线') + '</div>'+
+                  '<div class="popup-item"><label>更新时间</label>' +  data.ts + '</div>'+
+                  '<div class="data-div">'+
+                  '<div class="data-item"><span class="sp1">pm2.5</span><span class="sp2">' +  data.pm25 + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">pm10</span><span class="sp2">' +  data.pm10 + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">TSP</span><span class="sp2">' +  data.tsp + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">噪声</span><span class="sp2">' +  data.noise + '</span><span class="sp3">db</span></div>'+
+                  '<div class="data-item"><span class="sp1">风速</span><span class="sp2">' +  data.windSpeed + '</span><span class="sp3">m/s</span></div>'+
+                  '<div class="data-item"><span class="sp1">风力</span><span class="sp2">' +  data.windPower + '</span><span class="sp3">级</span></div>'+
+                  '<div class="data-item"><span class="sp1">风向</span><span class="sp2">' +  data.windDirection + '</span><span class="sp3">°</span></div>'+
+                  '<div class="data-item"><span class="sp1">温度</span><span class="sp2">' +  data.temperature + '</span><span class="sp3">℃</span></div>'+
+                  '<div class="data-item"><span class="sp1">湿度</span><span class="sp2">' +  data.humidity + '</span><span class="sp3">%RH</span></div>'+
+                  '<div class="data-item"><span class="sp1">气压</span><span class="sp2">' +  data.pressure + '</span><span class="sp3">kpa</span></div>'
+                popupStr += '</div></div>'
+                var popup = L.popup().setContent(popupStr)
+                e.target.dragging._marker.bindPopup(popup, { minWidth: 330 }).openPopup()
+              },1000)
+              // console.log(detail.carId)
+              // document.getElementById('btntrail_' + detail.carId).onclick = () => {
+              //   // this.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
+              //   this.trail(e.sourceTarget.options.slug.carId, carType)
+              // }
+            })
+          }
+        })
+      },
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+.data-div{
+  display:flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  .data-item{
+    width:30%;
+    margin:5px;
+    padding:5px;
+    border: 1px solid #e4e7ed;
+    background-color: #e4e7ed;
+    border-radius: 5px;
+    .sp1{
+      display: block;
+      color:#606266;
+      font-size: 12px;
+      text-align: left;
+      line-height: 1.1;
+    }
+    .sp2{
+      display: block;
+      font-size: 16px;
+      color: #67c23a;
+      font-weight: bolder;
+      text-align: center;
+      line-height: 1.3;
+    }
+    .sp3{
+      display: block;
+      font-size: 12px;
+      text-align: right;
+      line-height: 1.1;
+    }
+  }
+}
+</style>

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)
diff --git a/src/components/mapWindow/base/mixins/common.js b/src/components/mapWindow/base/mixins/common.js
new file mode 100644
index 0000000..2fd1a28
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/common.js
@@ -0,0 +1,82 @@
+const types = {
+  map: {
+    unload: 'clearMap'
+  },
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeLayer'
+  },
+  features: {
+    unload: 'removeFeatures'
+  },
+  listener: {
+    unload: 'removeListener'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const { unload, renderByParent, $parent } = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const { map, originInstance } = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      console.log('common mounted')
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const { ready } = this
+      console.log(map)
+      map ? ready() : $parent.$on('onload', ready)
+    }
+  }
+}
+
+export default type => new Mixin({ type })
diff --git a/src/components/mapWindow/leafletMap.vue b/src/components/mapWindow/leafletMap.vue
new file mode 100644
index 0000000..21dcc81
--- /dev/null
+++ b/src/components/mapWindow/leafletMap.vue
@@ -0,0 +1,153 @@
+<template>
+  <div id="map" ref="mapDiv" class="baseMap">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    satellite: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      map: null,
+      baseLayer: [],
+      satelliteLayer: null,
+      markers: [], // 选点
+      pois: [], // 兴趣点结果
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: true,
+      keywords: '', // 查询关键字
+      limit: 100, // 兴趣点查询的最大结果数
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
+  mounted () {
+    this.initMap()
+  },
+  watch: {
+    satellite (val, oldVal) {
+      if (val&&!oldVal) {
+        this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        })
+        this.satelliteLayer.addTo(this.map)
+      } else {
+        this.map.removeLayer(this.satelliteLayer)
+      }
+    }
+  },
+  methods: {
+    initMap () {
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.$emit('onload', map)
+      // 加载图层
+      this.addLayers()
+    },
+    addLayers () {
+      // 加载天地图底图和标注
+      const tdtMap = L.tileLayer(this.baseConfig.mapUrl, {
+        maxZoom: 18
+      })
+      const tdtLabel = L.tileLayer(this.baseConfig.labelUrl,
+        {maxZoom: 18})
+      this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+        maxZoom: 22
+      })
+      this.baseLayer.push(tdtMap.addTo(this.map))
+      if (this.satellite) {
+        this.baseLayer.push(this.satelliteLayer.addTo(this.map))
+      }
+      this.baseLayer.push(tdtLabel.addTo(this.map))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height: 100%;
+    width: 100%;
+    /*border: 1px solid #DCDCDC;*/
+    /*border-radius: 4px;*/
+  }
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/mapWindow/mapWindow.vue b/src/components/mapWindow/mapWindow.vue
new file mode 100644
index 0000000..9ced291
--- /dev/null
+++ b/src/components/mapWindow/mapWindow.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Description: 顶部菜单项
+ * @Author: 王晓颖
+ * @Date:2020-08-08
+ -->
+<template>
+  <div class="window_view">
+    <span class="view-text" :style="{'font-size':size+'rem'}"><slot/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapWindow',
+  props: {
+    size: {
+      type: String,
+      default: '0.09'
+    }
+  },
+  data () {
+    return {
+      selected: false
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .window_view{
+    padding: .08rem .14rem;
+    background-size: 100% 100%;
+    margin-right: .05rem;
+    text-align: center;
+    background: url("../../assets/images/button/button_yellow.png") no-repeat;
+    color: #fccd14;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .view-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/router/modules/environment.js b/src/router/modules/environment.js
index 75094ea..4e80abc 100644
--- a/src/router/modules/environment.js
+++ b/src/router/modules/environment.js
@@ -5,7 +5,7 @@
   {
     path: '/',
     component: Layout,
-    redirect: 'dashboard',
+    redirect: '/overview',
     name: 'Dashboard',
     hidden: true,
     children: [{
diff --git a/src/views/overview/component/deviceLayer.vue b/src/views/overview/component/deviceLayer.vue
new file mode 100644
index 0000000..1e41bcf
--- /dev/null
+++ b/src/views/overview/component/deviceLayer.vue
@@ -0,0 +1,207 @@
+<!--
+ * @Description: 环监设备图层
+ * @Author: 王晓颖
+ * @Date: 2021-08-09 15:27:40
+ -->
+<template>
+
+</template>
+
+<script>
+  import { getDeviceList } from '@/api/environment/device'
+  import Leaflet from 'leaflet'
+  import commonMixin from '@/components/mapWindow/base/mixins/common.js'
+  export default {
+    name: "deviceLayer",
+    mixins: [commonMixin('layer')],
+    props: {
+      show: {
+        type: Boolean,
+        default: true
+      }, // 是否显示
+      iconSize: {
+        type: Array,
+        default: () => {
+          return [30, 30]
+        }
+      }, // 图标大小
+      iconAnchor: {
+        type: Array,
+        default: () => {
+          return [-15, 15]
+        }
+      }, // 图标位移
+      popupAnchor: {
+        type: Array,
+        default: () => {
+          return [30, 0]
+        }
+      }, // 弹窗位移
+      refreshTime: {
+        type: Number,
+        default: 60
+      } // 定时刷新时间
+    },
+    data(){
+      return {
+        deviceOnlineList: [],
+        deviceOfflineList: [],
+        deviceOnlineLayer: null, // 在线设备图层
+        deviceOfflineLayer: null, // 离线设备图层
+        layerGroup: [], // 图层组
+        deviceOnlineIcon: require('@/assets/map/device-online.png'),
+        deviceOfflineIcon: require('@/assets/map/device-offline.png'),
+      }
+    },
+    methods:{
+      load () {
+        console.log('load caseLayer')
+        if (this.show) {
+          this.initLayer()
+        }
+      },
+      // 初始化图层
+      initLayer () {
+        const {map} = this
+        // 初始化图层组
+        /* eslint-disable new-cap */
+        this.layerGroup = []
+        this.deviceOnlineLayer = new Leaflet.layerGroup().addTo(map)
+        this.deviceOfflineLayer = new Leaflet.layerGroup().addTo(map)
+        this.layerGroup.push(this.deviceOnlineLayer)
+        this.layerGroup.push(this.deviceOfflineLayer)
+        console.log('initLayer')
+        this.loadData()
+      },
+      // 加载数据
+      loadData(){
+        getDeviceList(this.listQuery).then(response => {
+          this.list = response.data
+          this.deviceOnlineList = this.list.filter(item=>item.online=='1')
+          this.deviceOfflineList = this.list.filter(item=>item.online=='2')
+          this.addPointOnMap(this.deviceOnlineList,this.deviceOnlineLayer,this.deviceOnlineIcon)
+          this.addPointOnMap(this.deviceOfflineList,this.deviceOfflineLayer,this.deviceOfflineIcon)
+        })
+        // this.list = [
+        //     {id:"1", deviceNo:"2021030803100001", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.75962, lng:116.06021, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"2", deviceNo:"2021030803100002", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"3", deviceNo:"2021030803100003", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"4", deviceNo:"2021030803100004", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"5", deviceNo:"2021030803100005", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"6", deviceNo:"2021030803100006", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"}
+        // ]
+      },
+      // 将点加到地图上
+      addPointOnMap: function (list, layer, iconType) {
+        const {iconSize, iconAnchor, popupAnchor} = this
+        layer.clearLayers()
+        // 图标
+        const icon = Leaflet.icon({
+          iconUrl: iconType,
+          iconSize: iconSize,
+          iconAnchor: iconAnchor,
+          popupAnchor: popupAnchor
+        })
+        list.forEach(detail => {
+
+          // let popupStr = '<div class="popup-div">' +
+          //   '<div class="popup-title">站点详细信息</div>' +
+          //   '<div class="dashed-line"></div>' +
+          //   '<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
+          //   '<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
+          //   '<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
+          //   '<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
+          //   '<div class="popup-item"><label>在线状态</label>' +  (detail.online==='1'?'在线':'离线') + '</div>'
+          // popupStr += '</div>'
+          // const popup = Leaflet.popup().setContent(popupStr)
+
+          if (detail.lng > 0 && detail.lat > 0) {
+            // 添加marker
+            const marker = Leaflet.marker([detail.lat, detail.lng],
+              { icon: icon,
+                id:detail.id,
+                deviceNo: detail.deviceNo,
+                detail: detail,
+                zIndexOffset: 100000
+              }).addTo(layer)
+            marker.on('click', e => {
+              // 获取数据详情
+              if (e.target.dragging._marker._popup) {
+                e.target.dragging._marker.unbindPopup()
+              }
+              var id = e.target.options.id
+              setTimeout(()=>{
+                const data = {pm25: '23.40', pm10: '25.80', tsp: '0.00', noise: '3.40', windPower: '0.40', windDirection: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', pressure: '122.50', ts: '2021-05-07 11:15'}
+                let popupStr = '<div class="popup-div">' +
+                  '<div class="popup-title">站点详细信息</div>' +
+                  '<div class="dashed-line"></div>' +
+                  '<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
+                  '<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
+                  '<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
+                  '<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
+                  '<div class="popup-item"><label>在线状态</label>' +  (detail.online==='1'?'在线':'离线') + '</div>'+
+                  '<div class="popup-item"><label>更新时间</label>' +  data.ts + '</div>'+
+                  '<div class="data-div">'+
+                  '<div class="data-item"><span class="sp1">pm2.5</span><span class="sp2">' +  data.pm25 + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">pm10</span><span class="sp2">' +  data.pm10 + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">TSP</span><span class="sp2">' +  data.tsp + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">噪声</span><span class="sp2">' +  data.noise + '</span><span class="sp3">db</span></div>'+
+                  '<div class="data-item"><span class="sp1">风速</span><span class="sp2">' +  data.windSpeed + '</span><span class="sp3">m/s</span></div>'+
+                  '<div class="data-item"><span class="sp1">风力</span><span class="sp2">' +  data.windPower + '</span><span class="sp3">级</span></div>'+
+                  '<div class="data-item"><span class="sp1">风向</span><span class="sp2">' +  data.windDirection + '</span><span class="sp3">°</span></div>'+
+                  '<div class="data-item"><span class="sp1">温度</span><span class="sp2">' +  data.temperature + '</span><span class="sp3">℃</span></div>'+
+                  '<div class="data-item"><span class="sp1">湿度</span><span class="sp2">' +  data.humidity + '</span><span class="sp3">%RH</span></div>'+
+                  '<div class="data-item"><span class="sp1">气压</span><span class="sp2">' +  data.pressure + '</span><span class="sp3">kpa</span></div>'
+                popupStr += '</div></div>'
+                var popup = L.popup().setContent(popupStr)
+                e.target.dragging._marker.bindPopup(popup, { minWidth: 330 }).openPopup()
+              },1000)
+              // console.log(detail.carId)
+              // document.getElementById('btntrail_' + detail.carId).onclick = () => {
+              //   // this.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
+              //   this.trail(e.sourceTarget.options.slug.carId, carType)
+              // }
+            })
+          }
+        })
+      },
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+.data-div{
+  display:flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  .data-item{
+    width:30%;
+    margin:5px;
+    padding:5px;
+    border: 1px solid #e4e7ed;
+    background-color: #e4e7ed;
+    border-radius: 5px;
+    .sp1{
+      display: block;
+      color:#606266;
+      font-size: 12px;
+      text-align: left;
+      line-height: 1.1;
+    }
+    .sp2{
+      display: block;
+      font-size: 16px;
+      color: #67c23a;
+      font-weight: bolder;
+      text-align: center;
+      line-height: 1.3;
+    }
+    .sp3{
+      display: block;
+      font-size: 12px;
+      text-align: right;
+      line-height: 1.1;
+    }
+  }
+}
+</style>
diff --git a/src/views/overview/overview-old.vue b/src/views/overview/overview-old.vue
new file mode 100644
index 0000000..dac2209
--- /dev/null
+++ b/src/views/overview/overview-old.vue
@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <div id="map" class="leaflet_container" style="background-color: white">
+      <div style="margin-top: 20px;position: absolute;right:50px;z-index: 100000">
+        <el-checkbox-group v-model="selectParts" style=" width: 130px">
+          <el-checkbox key="底图" label="底图" border style="margin-left: 10px;width: 130px;background-color: white" @change="mapChange"/>
+          <el-checkbox key="网格" label="网格" border style="margin-left: 10px;width: 130px;background-color: white" @change="gridChange"/>
+          <el-checkbox v-for="parts in partsOptions" :label="parts" :key="parts" border style="width: 130px;background-color: white" @change="partsChange">{{ parts }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getServerList } from '@/api/server'
+var esri = require('esri-leaflet')
+const video = [23]
+const allParts = [23]
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      listLoading: false, // 加载动画
+      TianDiTu: {
+        Normal: {
+          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+        },
+        Satellite: {
+          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+        },
+        Terrain: {
+          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+        },
+        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+      },
+      map: null,
+      grid: null, // 网格
+      showtable: true,
+      partsOptions: ['视频监控', '环境监测'],
+      selectParts: ['底图', '网格', '视频监控', '环境监测'],
+      listQuery: {
+        offset: 1,
+        limit: 15
+      }, // 筛选条件
+      list: [],
+      maps: [],
+      parts: [],
+      baseUrl: '',
+      partsUrl: '',
+      mapUrl: '',
+      multipleSelection: [], // 多选选中项
+      iconlist: [],
+      baselayer: [],
+      caselist: [], // 路灯（map）
+      statisticNum: {
+        work: 0,
+        todayCase: 0,
+        allCase: 0,
+        merchant: 0,
+        parts: 0
+      },
+      status: {
+        register: 0,
+        dispatch: 0,
+        disposal: 0,
+        disposaling: 0
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    mapChange(val) {
+      if (!val) { // 隐藏底图
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.removeLayer(this.maps[i])
+        }
+      } else {
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.addLayer(this.maps[i])
+        }
+      }
+    },
+    gridChange(val) {
+      if (!val) { // 隐藏底图
+        this.map.removeLayer(this.grid)
+      } else {
+        this.map.addLayer(this.grid)
+      }
+    },
+    partsChange(val, item) {
+      // console.log(val, item.target.defaultValue)
+      // var selectItem
+      // switch (item.target.defaultValue) {
+      //   case '视频监控':
+      //     selectItem = video
+      //     break
+      //   default:
+      //     selectItem = []
+      //     break
+      // }
+      // if (!val) { // 隐藏底图
+      //   for (let i = 0; i < selectItem.length; i++) {
+      //     this.map.removeLayer(this.parts[selectItem[i] - 1])
+      //   }
+      // } else {
+      //   for (let i = 0; i < selectItem.length; i++) {
+      //     this.map.addLayer(this.parts[selectItem[i] - 1])
+      //   }
+      // }
+    },
+    tableclick() {
+      this.showtable = !this.showtable
+    },
+    removemarkers() {
+      for (var i = 0; i < this.iconlist.length; i++) {
+        this.map.removeLayer(this.iconlist[i])
+      }
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+    },
+    setZoom(points) {
+      if (points.length > 0) {
+        var maxLng = points[0][1]
+        var minLng = points[0][1]
+        var maxLat = points[0][0]
+        var minLat = points[0][0]
+        var res
+        for (var i = points.length - 1; i >= 0; i--) {
+          res = points[i]
+          if (res[1] > maxLng) maxLng = res[1]
+          if (res[1] < minLng) minLng = res[1]
+          if (res[0] > maxLat) maxLat = res[0]
+          if (res[0] < minLat) minLat = res[0]
+        }
+        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+      } else {
+        // 没有坐标，显示全中国
+        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
+      }
+    },
+    getZoom(maxLng, minLng, maxLat, minLat) {
+      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
+      var latlng = L.latLng(maxLat, maxLng)
+      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+        if (zoom[i] - distance > 0) {
+          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+        }
+      }
+      return 5
+    },
+    async init() {
+      const res = await getServerList(this.listQuery)
+      this.list = res.data.rows
+      for (var i = 0; i < this.list.length; i++) {
+        if (this.list[i].name === 'GIS地图') {
+          this.baseUrl = this.list[i].url
+        } else if (this.list[i].name === '部件分层URL') {
+          this.partsUrl = this.list[i].url
+        } else if (this.list[i].name === '二维地图URL') {
+          this.mapUrl = this.list[i].url
+        }
+      }
+      const map = L.map('map', {
+        minZoom: 2,
+        // maxZoom: 18,
+        center: [27.755, 116.08],
+        zoom: 18,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      // 底图
+      for (i = 0; i <= 20; i++) {
+        const item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        this.maps.push(esri.featureLayer(item).addTo(map))
+      }
+      // 网格
+      var item = { url: this.baseUrl + '/arcgis/rest/services/crdt/MapServer/13' }
+      this.grid = esri.featureLayer(item).addTo(map)
+
+      // 部件
+      console.log(this.baseUrl + this.partsUrl)
+      for (i = 0; i < allParts.length; i++) {
+        item = { url: this.baseUrl + this.partsUrl + '/' + allParts[i] }
+        var layer = esri.featureLayer(item).addTo(map)
+        console.log(item)
+        layer.on('click', function(e) {
+          console.log(e)
+          console.log(e.layer.feature.properties)
+          var str = '<div style="font-size: 14px;width:200px;">' +
+            '<div style="font-size: 14px;margin-bottom: 8px;">' +
+            '<div>' + e.layer.feature.properties.objectid + '</div></div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">大类：</col>' + e.layer.feature.properties.dl	 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">小类：</col>' + e.layer.feature.properties.objname	 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">设备状态：</col>' + e.layer.feature.properties.objstate 	 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">权属单位：</col>' + e.layer.feature.properties.deptname1 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">安装日期：</col>' + e.layer.feature.properties.ordate + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">数据来源：</col>' + e.layer.feature.properties.datasource + '</div>' +
+            '<button style="background-color: #409eff;border-color: #409eff;margin-left: 150px;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">预览</button>' +
+            '<div>'
+          var popup = L.popup().setContent(str)
+          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
+          // var id = e.layer.feature.properties.FID
+        })
+        this.parts.push(layer)
+      }
+      this.map.setZoom(15)
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:35px;
+  .leaflet_container{
+    width: 100%;
+    height: 83vh;
+  }
+  .top_title{
+    height: 40px;
+    font-size: 18px;
+    border: 1px solid #b5b5b5;
+    padding-top: 10px;
+  }
+  .title{
+    height: 40px;
+    width: 320px;
+    padding-top: 10px;
+    padding-left: 5px;
+    z-index: 100000;
+    background-color: rgba(255, 255, 255, 0.91);
+  }
+  .titletext{
+    text-align: center;
+    font-size: 15px;
+  }
+  .titlenumtext{
+    text-align: center;
+    font-size: 19px;
+  }
+  .list{
+    text-align:center;
+    width: 500px;
+    height: 40px;
+    z-index: 10000;
+    position: absolute;
+    right:20px;
+    top:20px;
+  }
+  .btn_bottom{
+    text-align:center;
+    width: 100%;
+    height:70px;
+    z-index: 1000;
+    position: fixed; bottom: 0; left: 0;right:0;
+  }
+  .table-name{
+    position:relative;
+    width: 100px;
+    top:20px;
+    margin:-10px auto; //外面的div高度的一半
+    z-index: 100001;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+  .title-header{
+    line-height:$tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+  i{
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  }
+  }
+</style>

diff --git a/src/assets/map/device-offline.png b/src/assets/map/device-offline.png
new file mode 100644
index 0000000..57cb637
--- /dev/null
+++ b/src/assets/map/device-offline.png
Binary files differ
diff --git a/src/assets/map/device-online.png b/src/assets/map/device-online.png
new file mode 100644
index 0000000..89b4cf8
--- /dev/null
+++ b/src/assets/map/device-online.png
Binary files differ
diff --git a/src/components/mapWindow/base/mixins/abstract.js b/src/components/mapWindow/base/mixins/abstract.js
new file mode 100644
index 0000000..9cf6d52
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/abstract.js
@@ -0,0 +1,13 @@
+class Mixin {
+  constructor({ component, props, events, extraProps, exceptProps }) {
+    this.render = function(h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, { [key]: this[key] }), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, { [key]: this.transmitEvent }), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)
diff --git a/src/components/mapWindow/base/mixins/common.js b/src/components/mapWindow/base/mixins/common.js
new file mode 100644
index 0000000..2fd1a28
--- /dev/null
+++ b/src/components/mapWindow/base/mixins/common.js
@@ -0,0 +1,82 @@
+const types = {
+  map: {
+    unload: 'clearMap'
+  },
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeLayer'
+  },
+  features: {
+    unload: 'removeFeatures'
+  },
+  listener: {
+    unload: 'removeListener'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const { unload, renderByParent, $parent } = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const { map, originInstance } = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      console.log('common mounted')
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const { ready } = this
+      console.log(map)
+      map ? ready() : $parent.$on('onload', ready)
+    }
+  }
+}
+
+export default type => new Mixin({ type })
diff --git a/src/components/mapWindow/leafletMap.vue b/src/components/mapWindow/leafletMap.vue
new file mode 100644
index 0000000..21dcc81
--- /dev/null
+++ b/src/components/mapWindow/leafletMap.vue
@@ -0,0 +1,153 @@
+<template>
+  <div id="map" ref="mapDiv" class="baseMap">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    satellite: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      map: null,
+      baseLayer: [],
+      satelliteLayer: null,
+      markers: [], // 选点
+      pois: [], // 兴趣点结果
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: true,
+      keywords: '', // 查询关键字
+      limit: 100, // 兴趣点查询的最大结果数
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
+  mounted () {
+    this.initMap()
+  },
+  watch: {
+    satellite (val, oldVal) {
+      if (val&&!oldVal) {
+        this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        })
+        this.satelliteLayer.addTo(this.map)
+      } else {
+        this.map.removeLayer(this.satelliteLayer)
+      }
+    }
+  },
+  methods: {
+    initMap () {
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      this.$emit('onload', map)
+      // 加载图层
+      this.addLayers()
+    },
+    addLayers () {
+      // 加载天地图底图和标注
+      const tdtMap = L.tileLayer(this.baseConfig.mapUrl, {
+        maxZoom: 18
+      })
+      const tdtLabel = L.tileLayer(this.baseConfig.labelUrl,
+        {maxZoom: 18})
+      this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+        maxZoom: 22
+      })
+      this.baseLayer.push(tdtMap.addTo(this.map))
+      if (this.satellite) {
+        this.baseLayer.push(this.satelliteLayer.addTo(this.map))
+      }
+      this.baseLayer.push(tdtLabel.addTo(this.map))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height: 100%;
+    width: 100%;
+    /*border: 1px solid #DCDCDC;*/
+    /*border-radius: 4px;*/
+  }
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/mapWindow/mapWindow.vue b/src/components/mapWindow/mapWindow.vue
new file mode 100644
index 0000000..9ced291
--- /dev/null
+++ b/src/components/mapWindow/mapWindow.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Description: 顶部菜单项
+ * @Author: 王晓颖
+ * @Date:2020-08-08
+ -->
+<template>
+  <div class="window_view">
+    <span class="view-text" :style="{'font-size':size+'rem'}"><slot/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapWindow',
+  props: {
+    size: {
+      type: String,
+      default: '0.09'
+    }
+  },
+  data () {
+    return {
+      selected: false
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .window_view{
+    padding: .08rem .14rem;
+    background-size: 100% 100%;
+    margin-right: .05rem;
+    text-align: center;
+    background: url("../../assets/images/button/button_yellow.png") no-repeat;
+    color: #fccd14;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .view-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/router/modules/environment.js b/src/router/modules/environment.js
index 75094ea..4e80abc 100644
--- a/src/router/modules/environment.js
+++ b/src/router/modules/environment.js
@@ -5,7 +5,7 @@
   {
     path: '/',
     component: Layout,
-    redirect: 'dashboard',
+    redirect: '/overview',
     name: 'Dashboard',
     hidden: true,
     children: [{
diff --git a/src/views/overview/component/deviceLayer.vue b/src/views/overview/component/deviceLayer.vue
new file mode 100644
index 0000000..1e41bcf
--- /dev/null
+++ b/src/views/overview/component/deviceLayer.vue
@@ -0,0 +1,207 @@
+<!--
+ * @Description: 环监设备图层
+ * @Author: 王晓颖
+ * @Date: 2021-08-09 15:27:40
+ -->
+<template>
+
+</template>
+
+<script>
+  import { getDeviceList } from '@/api/environment/device'
+  import Leaflet from 'leaflet'
+  import commonMixin from '@/components/mapWindow/base/mixins/common.js'
+  export default {
+    name: "deviceLayer",
+    mixins: [commonMixin('layer')],
+    props: {
+      show: {
+        type: Boolean,
+        default: true
+      }, // 是否显示
+      iconSize: {
+        type: Array,
+        default: () => {
+          return [30, 30]
+        }
+      }, // 图标大小
+      iconAnchor: {
+        type: Array,
+        default: () => {
+          return [-15, 15]
+        }
+      }, // 图标位移
+      popupAnchor: {
+        type: Array,
+        default: () => {
+          return [30, 0]
+        }
+      }, // 弹窗位移
+      refreshTime: {
+        type: Number,
+        default: 60
+      } // 定时刷新时间
+    },
+    data(){
+      return {
+        deviceOnlineList: [],
+        deviceOfflineList: [],
+        deviceOnlineLayer: null, // 在线设备图层
+        deviceOfflineLayer: null, // 离线设备图层
+        layerGroup: [], // 图层组
+        deviceOnlineIcon: require('@/assets/map/device-online.png'),
+        deviceOfflineIcon: require('@/assets/map/device-offline.png'),
+      }
+    },
+    methods:{
+      load () {
+        console.log('load caseLayer')
+        if (this.show) {
+          this.initLayer()
+        }
+      },
+      // 初始化图层
+      initLayer () {
+        const {map} = this
+        // 初始化图层组
+        /* eslint-disable new-cap */
+        this.layerGroup = []
+        this.deviceOnlineLayer = new Leaflet.layerGroup().addTo(map)
+        this.deviceOfflineLayer = new Leaflet.layerGroup().addTo(map)
+        this.layerGroup.push(this.deviceOnlineLayer)
+        this.layerGroup.push(this.deviceOfflineLayer)
+        console.log('initLayer')
+        this.loadData()
+      },
+      // 加载数据
+      loadData(){
+        getDeviceList(this.listQuery).then(response => {
+          this.list = response.data
+          this.deviceOnlineList = this.list.filter(item=>item.online=='1')
+          this.deviceOfflineList = this.list.filter(item=>item.online=='2')
+          this.addPointOnMap(this.deviceOnlineList,this.deviceOnlineLayer,this.deviceOnlineIcon)
+          this.addPointOnMap(this.deviceOfflineList,this.deviceOfflineLayer,this.deviceOfflineIcon)
+        })
+        // this.list = [
+        //     {id:"1", deviceNo:"2021030803100001", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.75962, lng:116.06021, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"2", deviceNo:"2021030803100002", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"3", deviceNo:"2021030803100003", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"4", deviceNo:"2021030803100004", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"5", deviceNo:"2021030803100005", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
+        //     {id:"6", deviceNo:"2021030803100006", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"}
+        // ]
+      },
+      // 将点加到地图上
+      addPointOnMap: function (list, layer, iconType) {
+        const {iconSize, iconAnchor, popupAnchor} = this
+        layer.clearLayers()
+        // 图标
+        const icon = Leaflet.icon({
+          iconUrl: iconType,
+          iconSize: iconSize,
+          iconAnchor: iconAnchor,
+          popupAnchor: popupAnchor
+        })
+        list.forEach(detail => {
+
+          // let popupStr = '<div class="popup-div">' +
+          //   '<div class="popup-title">站点详细信息</div>' +
+          //   '<div class="dashed-line"></div>' +
+          //   '<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
+          //   '<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
+          //   '<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
+          //   '<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
+          //   '<div class="popup-item"><label>在线状态</label>' +  (detail.online==='1'?'在线':'离线') + '</div>'
+          // popupStr += '</div>'
+          // const popup = Leaflet.popup().setContent(popupStr)
+
+          if (detail.lng > 0 && detail.lat > 0) {
+            // 添加marker
+            const marker = Leaflet.marker([detail.lat, detail.lng],
+              { icon: icon,
+                id:detail.id,
+                deviceNo: detail.deviceNo,
+                detail: detail,
+                zIndexOffset: 100000
+              }).addTo(layer)
+            marker.on('click', e => {
+              // 获取数据详情
+              if (e.target.dragging._marker._popup) {
+                e.target.dragging._marker.unbindPopup()
+              }
+              var id = e.target.options.id
+              setTimeout(()=>{
+                const data = {pm25: '23.40', pm10: '25.80', tsp: '0.00', noise: '3.40', windPower: '0.40', windDirection: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', pressure: '122.50', ts: '2021-05-07 11:15'}
+                let popupStr = '<div class="popup-div">' +
+                  '<div class="popup-title">站点详细信息</div>' +
+                  '<div class="dashed-line"></div>' +
+                  '<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
+                  '<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
+                  '<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
+                  '<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
+                  '<div class="popup-item"><label>在线状态</label>' +  (detail.online==='1'?'在线':'离线') + '</div>'+
+                  '<div class="popup-item"><label>更新时间</label>' +  data.ts + '</div>'+
+                  '<div class="data-div">'+
+                  '<div class="data-item"><span class="sp1">pm2.5</span><span class="sp2">' +  data.pm25 + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">pm10</span><span class="sp2">' +  data.pm10 + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">TSP</span><span class="sp2">' +  data.tsp + '</span><span class="sp3">ug/m³</span></div>'+
+                  '<div class="data-item"><span class="sp1">噪声</span><span class="sp2">' +  data.noise + '</span><span class="sp3">db</span></div>'+
+                  '<div class="data-item"><span class="sp1">风速</span><span class="sp2">' +  data.windSpeed + '</span><span class="sp3">m/s</span></div>'+
+                  '<div class="data-item"><span class="sp1">风力</span><span class="sp2">' +  data.windPower + '</span><span class="sp3">级</span></div>'+
+                  '<div class="data-item"><span class="sp1">风向</span><span class="sp2">' +  data.windDirection + '</span><span class="sp3">°</span></div>'+
+                  '<div class="data-item"><span class="sp1">温度</span><span class="sp2">' +  data.temperature + '</span><span class="sp3">℃</span></div>'+
+                  '<div class="data-item"><span class="sp1">湿度</span><span class="sp2">' +  data.humidity + '</span><span class="sp3">%RH</span></div>'+
+                  '<div class="data-item"><span class="sp1">气压</span><span class="sp2">' +  data.pressure + '</span><span class="sp3">kpa</span></div>'
+                popupStr += '</div></div>'
+                var popup = L.popup().setContent(popupStr)
+                e.target.dragging._marker.bindPopup(popup, { minWidth: 330 }).openPopup()
+              },1000)
+              // console.log(detail.carId)
+              // document.getElementById('btntrail_' + detail.carId).onclick = () => {
+              //   // this.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
+              //   this.trail(e.sourceTarget.options.slug.carId, carType)
+              // }
+            })
+          }
+        })
+      },
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+.data-div{
+  display:flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  .data-item{
+    width:30%;
+    margin:5px;
+    padding:5px;
+    border: 1px solid #e4e7ed;
+    background-color: #e4e7ed;
+    border-radius: 5px;
+    .sp1{
+      display: block;
+      color:#606266;
+      font-size: 12px;
+      text-align: left;
+      line-height: 1.1;
+    }
+    .sp2{
+      display: block;
+      font-size: 16px;
+      color: #67c23a;
+      font-weight: bolder;
+      text-align: center;
+      line-height: 1.3;
+    }
+    .sp3{
+      display: block;
+      font-size: 12px;
+      text-align: right;
+      line-height: 1.1;
+    }
+  }
+}
+</style>
diff --git a/src/views/overview/overview-old.vue b/src/views/overview/overview-old.vue
new file mode 100644
index 0000000..dac2209
--- /dev/null
+++ b/src/views/overview/overview-old.vue
@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <div id="map" class="leaflet_container" style="background-color: white">
+      <div style="margin-top: 20px;position: absolute;right:50px;z-index: 100000">
+        <el-checkbox-group v-model="selectParts" style=" width: 130px">
+          <el-checkbox key="底图" label="底图" border style="margin-left: 10px;width: 130px;background-color: white" @change="mapChange"/>
+          <el-checkbox key="网格" label="网格" border style="margin-left: 10px;width: 130px;background-color: white" @change="gridChange"/>
+          <el-checkbox v-for="parts in partsOptions" :label="parts" :key="parts" border style="width: 130px;background-color: white" @change="partsChange">{{ parts }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { getServerList } from '@/api/server'
+var esri = require('esri-leaflet')
+const video = [23]
+const allParts = [23]
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      listLoading: false, // 加载动画
+      TianDiTu: {
+        Normal: {
+          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+        },
+        Satellite: {
+          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+        },
+        Terrain: {
+          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+        },
+        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+      },
+      map: null,
+      grid: null, // 网格
+      showtable: true,
+      partsOptions: ['视频监控', '环境监测'],
+      selectParts: ['底图', '网格', '视频监控', '环境监测'],
+      listQuery: {
+        offset: 1,
+        limit: 15
+      }, // 筛选条件
+      list: [],
+      maps: [],
+      parts: [],
+      baseUrl: '',
+      partsUrl: '',
+      mapUrl: '',
+      multipleSelection: [], // 多选选中项
+      iconlist: [],
+      baselayer: [],
+      caselist: [], // 路灯（map）
+      statisticNum: {
+        work: 0,
+        todayCase: 0,
+        allCase: 0,
+        merchant: 0,
+        parts: 0
+      },
+      status: {
+        register: 0,
+        dispatch: 0,
+        disposal: 0,
+        disposaling: 0
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    mapChange(val) {
+      if (!val) { // 隐藏底图
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.removeLayer(this.maps[i])
+        }
+      } else {
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.addLayer(this.maps[i])
+        }
+      }
+    },
+    gridChange(val) {
+      if (!val) { // 隐藏底图
+        this.map.removeLayer(this.grid)
+      } else {
+        this.map.addLayer(this.grid)
+      }
+    },
+    partsChange(val, item) {
+      // console.log(val, item.target.defaultValue)
+      // var selectItem
+      // switch (item.target.defaultValue) {
+      //   case '视频监控':
+      //     selectItem = video
+      //     break
+      //   default:
+      //     selectItem = []
+      //     break
+      // }
+      // if (!val) { // 隐藏底图
+      //   for (let i = 0; i < selectItem.length; i++) {
+      //     this.map.removeLayer(this.parts[selectItem[i] - 1])
+      //   }
+      // } else {
+      //   for (let i = 0; i < selectItem.length; i++) {
+      //     this.map.addLayer(this.parts[selectItem[i] - 1])
+      //   }
+      // }
+    },
+    tableclick() {
+      this.showtable = !this.showtable
+    },
+    removemarkers() {
+      for (var i = 0; i < this.iconlist.length; i++) {
+        this.map.removeLayer(this.iconlist[i])
+      }
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+    },
+    setZoom(points) {
+      if (points.length > 0) {
+        var maxLng = points[0][1]
+        var minLng = points[0][1]
+        var maxLat = points[0][0]
+        var minLat = points[0][0]
+        var res
+        for (var i = points.length - 1; i >= 0; i--) {
+          res = points[i]
+          if (res[1] > maxLng) maxLng = res[1]
+          if (res[1] < minLng) minLng = res[1]
+          if (res[0] > maxLat) maxLat = res[0]
+          if (res[0] < minLat) minLat = res[0]
+        }
+        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+      } else {
+        // 没有坐标，显示全中国
+        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
+      }
+    },
+    getZoom(maxLng, minLng, maxLat, minLat) {
+      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
+      var latlng = L.latLng(maxLat, maxLng)
+      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+        if (zoom[i] - distance > 0) {
+          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+        }
+      }
+      return 5
+    },
+    async init() {
+      const res = await getServerList(this.listQuery)
+      this.list = res.data.rows
+      for (var i = 0; i < this.list.length; i++) {
+        if (this.list[i].name === 'GIS地图') {
+          this.baseUrl = this.list[i].url
+        } else if (this.list[i].name === '部件分层URL') {
+          this.partsUrl = this.list[i].url
+        } else if (this.list[i].name === '二维地图URL') {
+          this.mapUrl = this.list[i].url
+        }
+      }
+      const map = L.map('map', {
+        minZoom: 2,
+        // maxZoom: 18,
+        center: [27.755, 116.08],
+        zoom: 18,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+      // 底图
+      for (i = 0; i <= 20; i++) {
+        const item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        this.maps.push(esri.featureLayer(item).addTo(map))
+      }
+      // 网格
+      var item = { url: this.baseUrl + '/arcgis/rest/services/crdt/MapServer/13' }
+      this.grid = esri.featureLayer(item).addTo(map)
+
+      // 部件
+      console.log(this.baseUrl + this.partsUrl)
+      for (i = 0; i < allParts.length; i++) {
+        item = { url: this.baseUrl + this.partsUrl + '/' + allParts[i] }
+        var layer = esri.featureLayer(item).addTo(map)
+        console.log(item)
+        layer.on('click', function(e) {
+          console.log(e)
+          console.log(e.layer.feature.properties)
+          var str = '<div style="font-size: 14px;width:200px;">' +
+            '<div style="font-size: 14px;margin-bottom: 8px;">' +
+            '<div>' + e.layer.feature.properties.objectid + '</div></div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">大类：</col>' + e.layer.feature.properties.dl	 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">小类：</col>' + e.layer.feature.properties.objname	 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">设备状态：</col>' + e.layer.feature.properties.objstate 	 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">权属单位：</col>' + e.layer.feature.properties.deptname1 + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">安装日期：</col>' + e.layer.feature.properties.ordate + '</div>' +
+            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">数据来源：</col>' + e.layer.feature.properties.datasource + '</div>' +
+            '<button style="background-color: #409eff;border-color: #409eff;margin-left: 150px;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">预览</button>' +
+            '<div>'
+          var popup = L.popup().setContent(str)
+          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
+          // var id = e.layer.feature.properties.FID
+        })
+        this.parts.push(layer)
+      }
+      this.map.setZoom(15)
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:35px;
+  .leaflet_container{
+    width: 100%;
+    height: 83vh;
+  }
+  .top_title{
+    height: 40px;
+    font-size: 18px;
+    border: 1px solid #b5b5b5;
+    padding-top: 10px;
+  }
+  .title{
+    height: 40px;
+    width: 320px;
+    padding-top: 10px;
+    padding-left: 5px;
+    z-index: 100000;
+    background-color: rgba(255, 255, 255, 0.91);
+  }
+  .titletext{
+    text-align: center;
+    font-size: 15px;
+  }
+  .titlenumtext{
+    text-align: center;
+    font-size: 19px;
+  }
+  .list{
+    text-align:center;
+    width: 500px;
+    height: 40px;
+    z-index: 10000;
+    position: absolute;
+    right:20px;
+    top:20px;
+  }
+  .btn_bottom{
+    text-align:center;
+    width: 100%;
+    height:70px;
+    z-index: 1000;
+    position: fixed; bottom: 0; left: 0;right:0;
+  }
+  .table-name{
+    position:relative;
+    width: 100px;
+    top:20px;
+    margin:-10px auto; //外面的div高度的一半
+    z-index: 100001;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+  .title-header{
+    line-height:$tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+  i{
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  }
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index dac2209..4050e90 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -1,25 +1,21 @@
 <template>
-  <div>
-    <div id="map" class="leaflet_container" style="background-color: white">
-      <div style="margin-top: 20px;position: absolute;right:50px;z-index: 100000">
-        <el-checkbox-group v-model="selectParts" style=" width: 130px">
-          <el-checkbox key="底图" label="底图" border style="margin-left: 10px;width: 130px;background-color: white" @change="mapChange"/>
-          <el-checkbox key="网格" label="网格" border style="margin-left: 10px;width: 130px;background-color: white" @change="gridChange"/>
-          <el-checkbox v-for="parts in partsOptions" :label="parts" :key="parts" border style="width: 130px;background-color: white" @change="partsChange">{{ parts }}</el-checkbox>
-        </el-checkbox-group>
-      </div>
+  <app-container>
+    <div class="map-container">
+      <leaflet-map onload="mapReady" :satellite="false">
+        <device-layer :show="true"/>
+      </leaflet-map>
     </div>
-  </div>
+  </app-container>
 </template>
 <script>
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
+
 import { getServerList } from '@/api/server'
-var esri = require('esri-leaflet')
-const video = [23]
-const allParts = [23]
+import LeafletMap from "../../components/mapWindow/leafletMap";
+import DeviceLayer from "./component/deviceLayer";
+
 export default {
   name: 'Overview',
+  components: {DeviceLayer, LeafletMap},
   data() {
     return {
       listLoading: false, // 加载动画
@@ -73,227 +69,19 @@
     }
   },
   mounted() {
-    this.init()
+    // this.init()
   },
   methods: {
-    mapChange(val) {
-      if (!val) { // 隐藏底图
-        for (let i = 0; i < this.maps.length; i++) {
-          this.map.removeLayer(this.maps[i])
-        }
-      } else {
-        for (let i = 0; i < this.maps.length; i++) {
-          this.map.addLayer(this.maps[i])
-        }
-      }
+    // 地图加载完毕
+    mapReady (map) {
+      this.map = map
     },
-    gridChange(val) {
-      if (!val) { // 隐藏底图
-        this.map.removeLayer(this.grid)
-      } else {
-        this.map.addLayer(this.grid)
-      }
-    },
-    partsChange(val, item) {
-      // console.log(val, item.target.defaultValue)
-      // var selectItem
-      // switch (item.target.defaultValue) {
-      //   case '视频监控':
-      //     selectItem = video
-      //     break
-      //   default:
-      //     selectItem = []
-      //     break
-      // }
-      // if (!val) { // 隐藏底图
-      //   for (let i = 0; i < selectItem.length; i++) {
-      //     this.map.removeLayer(this.parts[selectItem[i] - 1])
-      //   }
-      // } else {
-      //   for (let i = 0; i < selectItem.length; i++) {
-      //     this.map.addLayer(this.parts[selectItem[i] - 1])
-      //   }
-      // }
-    },
-    tableclick() {
-      this.showtable = !this.showtable
-    },
-    removemarkers() {
-      for (var i = 0; i < this.iconlist.length; i++) {
-        this.map.removeLayer(this.iconlist[i])
-      }
-      var base = this.baselayer
-      this.map.eachLayer(function(layer) {
-        if (layer !== base[0] && layer !== base[1]) {
-          layer.remove()
-        }
-      })
-    },
-    setZoom(points) {
-      if (points.length > 0) {
-        var maxLng = points[0][1]
-        var minLng = points[0][1]
-        var maxLat = points[0][0]
-        var minLat = points[0][0]
-        var res
-        for (var i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
-        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
-      } else {
-        // 没有坐标，显示全中国
-        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
-      }
-    },
-    getZoom(maxLng, minLng, maxLat, minLat) {
-      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
-      var latlng = L.latLng(maxLat, maxLng)
-      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
-      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
-      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
-        if (zoom[i] - distance > 0) {
-          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
-        }
-      }
-      return 5
-    },
-    async init() {
-      const res = await getServerList(this.listQuery)
-      this.list = res.data.rows
-      for (var i = 0; i < this.list.length; i++) {
-        if (this.list[i].name === 'GIS地图') {
-          this.baseUrl = this.list[i].url
-        } else if (this.list[i].name === '部件分层URL') {
-          this.partsUrl = this.list[i].url
-        } else if (this.list[i].name === '二维地图URL') {
-          this.mapUrl = this.list[i].url
-        }
-      }
-      const map = L.map('map', {
-        minZoom: 2,
-        // maxZoom: 18,
-        center: [27.755, 116.08],
-        zoom: 18,
-        zoomControl: false,
-        attributionControl: false,
-        crs: L.CRS.EPSG3857
-      })
-      map.doubleClickZoom.disable()
-      this.map = map // data上需要挂载
-      window.map = map
-      // 底图
-      for (i = 0; i <= 20; i++) {
-        const item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
-        this.maps.push(esri.featureLayer(item).addTo(map))
-      }
-      // 网格
-      var item = { url: this.baseUrl + '/arcgis/rest/services/crdt/MapServer/13' }
-      this.grid = esri.featureLayer(item).addTo(map)
-
-      // 部件
-      console.log(this.baseUrl + this.partsUrl)
-      for (i = 0; i < allParts.length; i++) {
-        item = { url: this.baseUrl + this.partsUrl + '/' + allParts[i] }
-        var layer = esri.featureLayer(item).addTo(map)
-        console.log(item)
-        layer.on('click', function(e) {
-          console.log(e)
-          console.log(e.layer.feature.properties)
-          var str = '<div style="font-size: 14px;width:200px;">' +
-            '<div style="font-size: 14px;margin-bottom: 8px;">' +
-            '<div>' + e.layer.feature.properties.objectid + '</div></div>' +
-            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">大类：</col>' + e.layer.feature.properties.dl	 + '</div>' +
-            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">小类：</col>' + e.layer.feature.properties.objname	 + '</div>' +
-            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">设备状态：</col>' + e.layer.feature.properties.objstate 	 + '</div>' +
-            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">权属单位：</col>' + e.layer.feature.properties.deptname1 + '</div>' +
-            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">安装日期：</col>' + e.layer.feature.properties.ordate + '</div>' +
-            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">数据来源：</col>' + e.layer.feature.properties.datasource + '</div>' +
-            '<button style="background-color: #409eff;border-color: #409eff;margin-left: 150px;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">预览</button>' +
-            '<div>'
-          var popup = L.popup().setContent(str)
-          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
-          // var id = e.layer.feature.properties.FID
-        })
-        this.parts.push(layer)
-      }
-      this.map.setZoom(15)
-    },
-    // 多选触发方法
-    handleSelectionChange(val) {
-      this.multipleSelection = val
-    }
   }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:35px;
-  .leaflet_container{
+  .map-container{
     width: 100%;
-    height: 83vh;
-  }
-  .top_title{
-    height: 40px;
-    font-size: 18px;
-    border: 1px solid #b5b5b5;
-    padding-top: 10px;
-  }
-  .title{
-    height: 40px;
-    width: 320px;
-    padding-top: 10px;
-    padding-left: 5px;
-    z-index: 100000;
-    background-color: rgba(255, 255, 255, 0.91);
-  }
-  .titletext{
-    text-align: center;
-    font-size: 15px;
-  }
-  .titlenumtext{
-    text-align: center;
-    font-size: 19px;
-  }
-  .list{
-    text-align:center;
-    width: 500px;
-    height: 40px;
-    z-index: 10000;
-    position: absolute;
-    right:20px;
-    top:20px;
-  }
-  .btn_bottom{
-    text-align:center;
-    width: 100%;
-    height:70px;
-    z-index: 1000;
-    position: fixed; bottom: 0; left: 0;right:0;
-  }
-  .table-name{
-    position:relative;
-    width: 100px;
-    top:20px;
-    margin:-10px auto; //外面的div高度的一半
-    z-index: 100001;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-  .title-header{
-    line-height:$tableTitleHeight;
-    color: #606266;
-    font-size: 15px;
-  i{
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-  }
+    height: calc(100vh - 158px);
   }
 </style>