diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
index c4acb21..f6fd6af 100644
--- a/src/views/overview/compEdit.vue
+++ b/src/views/overview/compEdit.vue
@@ -7,16 +7,26 @@
   <app-container>
     <div id="map" class="leaflet_container"/>
     <!--查询显示组件-->
-    <search-list ref="searchList"/>
-    <div class="points-add-div">
-      <el-button icon="el-icon-plus" @click="openAddMode">
-        添加部件
-      </el-button>
-    </div>
+    <search-list
+      ref="searchList"
+      :total-data="searchList"
+      @search="search"
+      @change="changeSearchPage"
+      @item-click="clickSearchItem"/>
+    <!--工具箱-->
+    <tools-container>
+      <!-- 绘制工具-->
+      <draw-tool @click="drawBox"/>
+      <!--删除工具-->
+      <delete-tool :disabled="batchDeleteDisabled" @click="batchDelete"/>
+      <!--添加工具-->
+      <add-tool @click="openAddMode"/>
+      <!--图层选择工具-->
+      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    </tools-container>
     <!--图层选择组件-->
-    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
     <!--编辑部件弹窗-->
-    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+    <edit-parts-dialog ref="editPartsDialog" @add="onAddFeature" @update="onUpdateFeature" @abort="onAbort"/>
   </app-container>
 </template>
 <script>
@@ -27,33 +37,33 @@
 import SearchList from './components/searchList'
 import { mapGetters } from 'vuex'
 import EditPartsDialog from './components/editPartsDialog'
+import ToolsContainer from './components/toolsContainer'
+import DrawTool from './components/drawTool'
+import DeleteTool from './components/deleteTool'
+import AddTool from './components/addTool'
 var esri = require('esri-leaflet')
 export default {
   name: 'ComponentEdit',
-  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList },
   data() {
     return {
       loading: false, // 加载动画
       addMode: false, // 添加元素状态
       map: null, // 地图对象
       drawLayer: null, // 绘制图层（框选）
-      layers: [
-        { id: 0, name: '底图', type: 'map', domain: [] },
-        { id: 1, name: '网格', type: 'layer', domain: [] },
-        { id: 2, name: '商户', type: 'layer', domain: [] },
-        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
-        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
-        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
-        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
-        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
-        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
-        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
-      ],
+      layers: this.baseConfig.layers,
       selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
       maps: [], // 地图图层
       parts: [], // 部件图层
+      featureCollection: [], // 选中的图层和Feature
+      featureCollectionLength: 0, // 选中的feature个数
+      batchDeleteDisabled: true, // 批量删除是否不可点
       curretLayer: null, // 当前选中featureLayer
-      currentItem: null // 当前选中部件
+      currentItem: null, // 当前选中部件
+      searchList: [], // 全部查询结果
+      currentSearchMarkers: [], // 当前查询页面的markers
+      // searchLength: 0, // 全部查询结果长度
+      searchIconList: [] // 查询结果的Icon列表
     }
   },
   computed: {
@@ -65,6 +75,13 @@
       'partsEditUrl'
     ])
   },
+  watch: {
+    addMode(val) {
+      if (!val) { // 关闭新增模式是要关闭点击事件
+        this.map.off('click')
+      }
+    }
+  },
   // 销毁时移除监听
   destroyed() {
     window.removeEventListener('click', this.handleKeyup, true)
@@ -73,6 +90,7 @@
   // 加载完添加点击事件的监听
   mounted() {
     this.init()
+    this.initIcons()
     window.addEventListener('click', this.handleKeyup, true)
   },
   methods: {
@@ -88,28 +106,53 @@
         this.drawLayer.layer.remove()
       }
     },
-    // 绘制矩形
-    drawSquare() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
+    // 绘制选框
+    drawBox(type) {
+      this.drawDelete()
       this.$nextTick(() => {
-        this.map.pm.enableDraw('Rectangle', {
+        this.map.pm.enableDraw(type, {
           snappable: false
         })
+        // 绘制完成
+        this.map.on('pm:create', e => {
+          // 获取 选区的geojson
+          const geojson = e.layer.toGeoJSON()
+          // 执行查询，遍历所有部件图层
+          const results = [] // 存放查询结果
+          let partsCount = 0 // 部件数量
+          const partsLength = this.parts.length // 全部部件图层数量
+          for (let i = 0; i < partsLength; i++) {
+            const part = this.parts[i]
+            const query = esri.query({ url: part.options.url })
+            query.where('1=1')
+            query.within(geojson)
+            query.run((error, featureCollection, response) => {
+              if (error) {
+                console.log(error)
+                return
+              }
+              // 查询成功
+              if (featureCollection.features.length > 0) {
+                results.push({
+                  layer: part,
+                  url: part.options.url,
+                  features: featureCollection.features
+                })
+                partsCount += featureCollection.features.length
+              }
+              // 最后一个图层完毕， 查询结果放入featureCollection中
+              if (i === (partsLength - 1)) {
+                this.featureCollection = results
+                this.featureCollectionLength = partsCount
+                this.$message.info(`已选中部件: ${partsCount} 个`)
+                this.batchDeleteDisabled = false
+              }
+            })
+          }
+        })
       })
     },
-    // 绘制多边形
-    drawPolygon() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
-      this.$nextTick(() => {
-        this.map.pm.enableDraw('Polygon', {
-          snappable: false
-        })
-      })
-    },
+
     // 地图切换
     mapChange(val) {
       if (!val) { // 隐藏底图
@@ -148,18 +191,6 @@
         }
       }
     },
-    // 移除点
-    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()
-        }
-      })
-    },
     // 初始化地图
     init() {
       this.loading = false
@@ -176,24 +207,25 @@
       this.map = map // data挂载map
       window.map = map
       const that = this
+      // 打开绘制工具
       this.map.on('pm:create', e => {
-        if (that.drawLayer) {
-          that.drawLayer.layer.remove()
-        }
+        that.drawDelete()
         that.drawLayer = e
       })
+      // 打开弹窗添加的事件
       this.map.on('popupopen', e => {
-        // 给按钮添加点击事件
+        // 给弹窗的编辑、删除按钮添加点击事件
         document.getElementById('btnEdit').onclick = that.editInfo
         document.getElementById('btnDelete').onclick = that.delete
       })
       // 添加底图
       for (let i = 0; i <= 21; i++) {
-        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
-        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
         this.maps.push(esri.featureLayer(item).addTo(map))
       }
-      // 添加部件
+      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
+      // 添加部件,
+      // const partsLayer = this.baseConfig.partsLayer
       for (let i = 1; i <= 40; i++) {
         let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
         console.log(item)
@@ -235,55 +267,271 @@
       }
       // this.map.setZoom(this.baseConfig.zoom)
     },
-    // 点击新增部件
-    openAddMode() {
-      this.addMode = true
-      var icon = L.icon({
-        iconUrl: require('../../assets/icons/icon-position.png'),
-        iconSize: [35, 35],
-        iconAnchor: [17.5, 35]
-      })
-      this.map.on('click', e => {
-        // convert to GeoJSON
-        const feat = L.marker(e.latlng, { icon: icon })
-        feat.addTo(this.map)
-        console.log(feat)
-        this.$refs.editPartsDialog.initDialog(feat, 'create')
-      })
-    },
-    // 点击编辑
-    editInfo(ev) {
-      // 打开弹窗
-      console.log(this.currentItem)
-      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
-    },
-    // 点击删除
-    delete(code) {
-      if (this.currentLayer) {
-        debugger
-        this.currentLayer.deleteFeature(this.currentItem)
-        this.$messsage.success('删除成功')
+    // 初始化图标
+    initIcons() {
+      // 加载所有图标，1到5
+      for (let i = 1; i < 6; i++) {
+        const icon = L.icon({
+          iconUrl: require(`../../assets/global_images/point${i}.png`),
+          iconSize: [25, 25],
+          iconAnchor: [12.5, 25]
+        })
+        this.searchIconList.push(icon)
       }
     },
-    onCreateFeature(feature) {
-
+    // 点击新增部件按钮: 添加按钮并打开弹窗
+    openAddMode() {
+      if (this.addMode) { // 如果已经处于添加模式，则关闭，并清空页面上的点
+        this.addMode = false
+        this.onAbort('create')
+      } else {
+        // 开始添加点
+        this.addMode = true
+        const icon = L.icon({
+          iconUrl: require('../../assets/icons/icon-position.png'),
+          iconSize: [35, 35],
+          iconAnchor: [17.5, 35]
+        })
+        this.map.on('click', e => {
+          // 转换为GeoJSON
+          const feat = L.marker(e.latlng, { icon: icon })
+          feat.addTo(this.map)
+          this.currentItem = feat
+          console.log(feat)
+          this.$refs.editPartsDialog.initDialog(feat, 'create')
+          // TODO: 测试新增代码
+          // const feat = L.marker(e.latlng).toGeoJSON()
+          // feat.properties['OBJECTID'] = 13234
+          // feat.properties['POINT_X'] = 408913.539
+          // feat.properties['POINT_Y'] = 3071272.381
+          // feat.properties['大类编码'] = 1
+          // feat.properties['大类名称'] = 'test'
+          // feat.properties['小类编码'] = 1
+          // feat.properties['小类名称'] = 'test'
+          // console.log(feat)
+          // const layerUrl = `${this.baseUrl}${this.partsEditUrl}/35/`
+          // this.searchLayerByUrl(layerUrl)
+          // this.currentLayer.addFeature(feat, (err, response) => {
+          //   console.log(err, response)
+          //   debugger
+          // })
+        })
+      }
     },
-    // 放弃操作，dialogStatus弹窗类型
+    // 点击编辑： 打开编辑弹窗
+    editInfo(ev) {
+      // TODO: 临时测试，原样上传更新
+      this.currentLayer.updateFeature(this.currentItem, (err, response) => {
+        if (err) {
+        } else {
+          this.$message.success('编辑成功')
+        }
+      })
+      // 打开弹窗
+      // console.log(this.currentItem)
+      // this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击单个元素的删除，ok
+    delete(code) {
+      // 先确认操作，然后执行删除工作
+      if (this.currentLayer && this.currentItem) {
+        this.$confirm('确定删除该部件吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定
+          this.currentLayer.deleteFeature(this.currentItem.id, (err, response) => {
+            if (err) {
+              this.$message.error('删除失败')
+            } else {
+              this.$message.success('删除成功')
+              this.currentItem = null
+            }
+          })
+        })
+      }
+    },
+    // 框选区域批量删除,ok
+    batchDelete() {
+      if (this.featureCollectionLength > 0) {
+        this.$confirm(`确定要删除所框选的${this.featureCollectionLength}个部件吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定则遍历图层，删除features
+          for (const layer of this.featureCollection) {
+            const ids = layer.features.map(item => item.id)
+            if (layer.layer && layer.features) {
+              layer.layer.deleteFeatures(ids, (err, response) => {
+                if (err) {
+                  this.$message.error('批量删除部件失败')
+                } else {
+                  this.$message.success('批量删除部件成功')
+                  this.drawDelete()
+                  this.featureCollection = []
+                  this.featureCollectionLength = 0
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          // 放弃则清空选框和查询结果
+          this.drawDelete()
+          this.featureCollection = []
+          this.featureCollectionLength = 0
+        })
+      }
+    },
+    // 添加到feature图层
+    onAddFeature(feature) {
+      const feat = L.marker(feature.latlng).toGeoJSON()
+      // 读取属性
+      feat.properties['大类编码'] = feature.classCode
+      feat.properties['大类'] = feature.class
+      feat.properties['小类编码'] = feature.subClassCode
+      feat.properties['小类'] = feature.subClass
+      feat.properties['权属单位'] = feature.dept
+      feat.properties['地址'] = feature.address
+      console.log(feat)
+      // 图层地址拼接
+      const layerUrl = `${this.baseUrl}${this.partsEditUrl}/${feature.layer}/`
+      // 遍历找到当前图层
+      this.searchLayerByUrl(layerUrl)
+      // 添加部件
+      this.currentLayer.addFeature(feat, (err, response) => {
+        console.log(err, response)
+        debugger
+        if (err) {
+          console.log('添加失败')
+        } else {
+          // 关闭添加模式, 并关闭弹窗
+          this.addMode = true
+          this.$refs.editPartsDialog.closeDialog()
+        }
+      })
+    },
+    // 新增部件的，放弃操作，dialogStatus弹窗类型
     onAbort(dialogStatus) {
       if (dialogStatus === 'create') {
         // 清除地图上的锚点
-        this.map.removeLayer(this.currentItem)
+        if (this.currentItem) {
+          this.map.removeLayer(this.currentItem)
+        }
       }
     },
     // 编辑保存操作
     onUpdateFeature(feature) {
       if (this.currentLayer) {
-        debugger
-        this.currentLayer.updateFeature(feature, () => {
-          this.$messsage.success('编辑成功')
+        console.log('=========')
+        console.log(feature)
+        console.log('=========')
+        this.currentLayer.updateFeature(feature, (err, response) => {
+          if (err) {
+            this.$message.error('部件信息更新失败')
+          } else {
+            this.$message.success('部件信息更新成功')
+          }
         })
       }
     },
+    // 地图查询功能
+    search(keyword) {
+      console.log('search')
+      // this.cansearch = false
+      var that = this
+      const results = [] // 存放查询结果列表
+      // 遍历所有图层进行查询
+      const partsLength = this.parts.length // 全部部件图层数量
+      for (let i = 0; i < partsLength; i++) {
+        const part = this.parts[i]
+        var str = ['编码', '小类名称', '大类名称']
+        var query = esri.query({ url: part.options.url })
+        let queryString = '1=1' // 默认查询语句
+        if (keyword) {
+          // 拼接查询语句
+          queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ')
+          console.log(queryString)
+        } else {
+          this.$message.warning('请输入查询关键字')
+          return
+        }
+        query.where(queryString)
+        // query.within(this.bounds)
+        // 执行查询
+        query.run((error, featureCollection, response) => {
+          if (error) {
+            console.log(error)
+            return
+          }
+          const featuresLength = featureCollection.features.length
+          if (featuresLength > 0) {
+            // 遍历所有查询结果，放入results
+            for (const feature of featureCollection.features) {
+              results.push({
+                layer: part,
+                feature: feature
+              })
+            }
+          }
+          // 如果是最后一个图层
+          if (i === (partsLength - 1)) {
+            that.searchList = results
+            // that.drawIcon()
+          }
+        })
+      }
+    },
+    // 查询结果页面变化，重绘icon
+    changeSearchPage(data) {
+      console.log('changeSearchPage')
+      // 清除原来绘制的点
+      if (this.currentSearchMarkers.length > 0) {
+        for (const marker of this.currentSearchMarkers) {
+          this.map.removeLayer(marker)
+        }
+      }
+      // 赋予新的查询结果
+      const currentMarkesLength = data.length
+      for (let i = 0; i < currentMarkesLength; i++) {
+        const feature = data[i].feature
+        var icon = this.searchIconList[i]
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map)
+        this.currentSearchMarkers.push(item)
+      }
+      // 中心置为第一个点的中心
+      if (this.currentSearchMarkers[0]) {
+        this.clickSearchItem(data[0])
+      }
+    },
+    // 点击查询列表项，将位置放在中间
+    clickSearchItem(item) {
+      console.log('clickItem')
+      if (item) {
+        const feature = item.feature
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        let zoom = this.map.getZoom()
+        if (zoom < 19) {
+          zoom = 19
+        }
+        this.map.flyTo(latlng, zoom)
+      }
+    },
+    // 绘制查询结果
+    drawIcon() {
+      var that = this
+      for (var i = 0; i < that.markerlist.length; i++) {
+        that.map.removeLayer(that.markerlist[i])
+      }
+
+      that.markerlist = []
+      for (let num = 0; num < that.showlist.length; num++) {
+
+      }
+      this.cansearch = true
+    },
     // 根据url找到layer
     searchLayerByUrl(url) {
       const layer = this.parts.filter(item => item.options.url === url)[0]
@@ -299,37 +547,10 @@
   .leaflet_container{
     width: 100%;
     height: 85vh;
+    min-height: 596px;
+    /*max-height: 90vh;*/
     background-color: white;
   }
-  .draw-icon{
-    background-color: white;
-    width: 100px;height: 40px;
-    border: 1px solid #DCDFE6;
-    border-radius:4px;
-  }
-  .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;
-  }
-  .points-add-div{
-    position: absolute;
-    right:250px;
-    top:20px;
-    background-color: white;
-    border-radius: 3px;
-  }
 </style>
 <style rel="stylesheet/scss" lang="scss">
   .pop-window{

diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
index c4acb21..f6fd6af 100644
--- a/src/views/overview/compEdit.vue
+++ b/src/views/overview/compEdit.vue
@@ -7,16 +7,26 @@
   <app-container>
     <div id="map" class="leaflet_container"/>
     <!--查询显示组件-->
-    <search-list ref="searchList"/>
-    <div class="points-add-div">
-      <el-button icon="el-icon-plus" @click="openAddMode">
-        添加部件
-      </el-button>
-    </div>
+    <search-list
+      ref="searchList"
+      :total-data="searchList"
+      @search="search"
+      @change="changeSearchPage"
+      @item-click="clickSearchItem"/>
+    <!--工具箱-->
+    <tools-container>
+      <!-- 绘制工具-->
+      <draw-tool @click="drawBox"/>
+      <!--删除工具-->
+      <delete-tool :disabled="batchDeleteDisabled" @click="batchDelete"/>
+      <!--添加工具-->
+      <add-tool @click="openAddMode"/>
+      <!--图层选择工具-->
+      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    </tools-container>
     <!--图层选择组件-->
-    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
     <!--编辑部件弹窗-->
-    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+    <edit-parts-dialog ref="editPartsDialog" @add="onAddFeature" @update="onUpdateFeature" @abort="onAbort"/>
   </app-container>
 </template>
 <script>
@@ -27,33 +37,33 @@
 import SearchList from './components/searchList'
 import { mapGetters } from 'vuex'
 import EditPartsDialog from './components/editPartsDialog'
+import ToolsContainer from './components/toolsContainer'
+import DrawTool from './components/drawTool'
+import DeleteTool from './components/deleteTool'
+import AddTool from './components/addTool'
 var esri = require('esri-leaflet')
 export default {
   name: 'ComponentEdit',
-  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList },
   data() {
     return {
       loading: false, // 加载动画
       addMode: false, // 添加元素状态
       map: null, // 地图对象
       drawLayer: null, // 绘制图层（框选）
-      layers: [
-        { id: 0, name: '底图', type: 'map', domain: [] },
-        { id: 1, name: '网格', type: 'layer', domain: [] },
-        { id: 2, name: '商户', type: 'layer', domain: [] },
-        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
-        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
-        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
-        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
-        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
-        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
-        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
-      ],
+      layers: this.baseConfig.layers,
       selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
       maps: [], // 地图图层
       parts: [], // 部件图层
+      featureCollection: [], // 选中的图层和Feature
+      featureCollectionLength: 0, // 选中的feature个数
+      batchDeleteDisabled: true, // 批量删除是否不可点
       curretLayer: null, // 当前选中featureLayer
-      currentItem: null // 当前选中部件
+      currentItem: null, // 当前选中部件
+      searchList: [], // 全部查询结果
+      currentSearchMarkers: [], // 当前查询页面的markers
+      // searchLength: 0, // 全部查询结果长度
+      searchIconList: [] // 查询结果的Icon列表
     }
   },
   computed: {
@@ -65,6 +75,13 @@
       'partsEditUrl'
     ])
   },
+  watch: {
+    addMode(val) {
+      if (!val) { // 关闭新增模式是要关闭点击事件
+        this.map.off('click')
+      }
+    }
+  },
   // 销毁时移除监听
   destroyed() {
     window.removeEventListener('click', this.handleKeyup, true)
@@ -73,6 +90,7 @@
   // 加载完添加点击事件的监听
   mounted() {
     this.init()
+    this.initIcons()
     window.addEventListener('click', this.handleKeyup, true)
   },
   methods: {
@@ -88,28 +106,53 @@
         this.drawLayer.layer.remove()
       }
     },
-    // 绘制矩形
-    drawSquare() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
+    // 绘制选框
+    drawBox(type) {
+      this.drawDelete()
       this.$nextTick(() => {
-        this.map.pm.enableDraw('Rectangle', {
+        this.map.pm.enableDraw(type, {
           snappable: false
         })
+        // 绘制完成
+        this.map.on('pm:create', e => {
+          // 获取 选区的geojson
+          const geojson = e.layer.toGeoJSON()
+          // 执行查询，遍历所有部件图层
+          const results = [] // 存放查询结果
+          let partsCount = 0 // 部件数量
+          const partsLength = this.parts.length // 全部部件图层数量
+          for (let i = 0; i < partsLength; i++) {
+            const part = this.parts[i]
+            const query = esri.query({ url: part.options.url })
+            query.where('1=1')
+            query.within(geojson)
+            query.run((error, featureCollection, response) => {
+              if (error) {
+                console.log(error)
+                return
+              }
+              // 查询成功
+              if (featureCollection.features.length > 0) {
+                results.push({
+                  layer: part,
+                  url: part.options.url,
+                  features: featureCollection.features
+                })
+                partsCount += featureCollection.features.length
+              }
+              // 最后一个图层完毕， 查询结果放入featureCollection中
+              if (i === (partsLength - 1)) {
+                this.featureCollection = results
+                this.featureCollectionLength = partsCount
+                this.$message.info(`已选中部件: ${partsCount} 个`)
+                this.batchDeleteDisabled = false
+              }
+            })
+          }
+        })
       })
     },
-    // 绘制多边形
-    drawPolygon() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
-      this.$nextTick(() => {
-        this.map.pm.enableDraw('Polygon', {
-          snappable: false
-        })
-      })
-    },
+
     // 地图切换
     mapChange(val) {
       if (!val) { // 隐藏底图
@@ -148,18 +191,6 @@
         }
       }
     },
-    // 移除点
-    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()
-        }
-      })
-    },
     // 初始化地图
     init() {
       this.loading = false
@@ -176,24 +207,25 @@
       this.map = map // data挂载map
       window.map = map
       const that = this
+      // 打开绘制工具
       this.map.on('pm:create', e => {
-        if (that.drawLayer) {
-          that.drawLayer.layer.remove()
-        }
+        that.drawDelete()
         that.drawLayer = e
       })
+      // 打开弹窗添加的事件
       this.map.on('popupopen', e => {
-        // 给按钮添加点击事件
+        // 给弹窗的编辑、删除按钮添加点击事件
         document.getElementById('btnEdit').onclick = that.editInfo
         document.getElementById('btnDelete').onclick = that.delete
       })
       // 添加底图
       for (let i = 0; i <= 21; i++) {
-        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
-        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
         this.maps.push(esri.featureLayer(item).addTo(map))
       }
-      // 添加部件
+      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
+      // 添加部件,
+      // const partsLayer = this.baseConfig.partsLayer
       for (let i = 1; i <= 40; i++) {
         let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
         console.log(item)
@@ -235,55 +267,271 @@
       }
       // this.map.setZoom(this.baseConfig.zoom)
     },
-    // 点击新增部件
-    openAddMode() {
-      this.addMode = true
-      var icon = L.icon({
-        iconUrl: require('../../assets/icons/icon-position.png'),
-        iconSize: [35, 35],
-        iconAnchor: [17.5, 35]
-      })
-      this.map.on('click', e => {
-        // convert to GeoJSON
-        const feat = L.marker(e.latlng, { icon: icon })
-        feat.addTo(this.map)
-        console.log(feat)
-        this.$refs.editPartsDialog.initDialog(feat, 'create')
-      })
-    },
-    // 点击编辑
-    editInfo(ev) {
-      // 打开弹窗
-      console.log(this.currentItem)
-      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
-    },
-    // 点击删除
-    delete(code) {
-      if (this.currentLayer) {
-        debugger
-        this.currentLayer.deleteFeature(this.currentItem)
-        this.$messsage.success('删除成功')
+    // 初始化图标
+    initIcons() {
+      // 加载所有图标，1到5
+      for (let i = 1; i < 6; i++) {
+        const icon = L.icon({
+          iconUrl: require(`../../assets/global_images/point${i}.png`),
+          iconSize: [25, 25],
+          iconAnchor: [12.5, 25]
+        })
+        this.searchIconList.push(icon)
       }
     },
-    onCreateFeature(feature) {
-
+    // 点击新增部件按钮: 添加按钮并打开弹窗
+    openAddMode() {
+      if (this.addMode) { // 如果已经处于添加模式，则关闭，并清空页面上的点
+        this.addMode = false
+        this.onAbort('create')
+      } else {
+        // 开始添加点
+        this.addMode = true
+        const icon = L.icon({
+          iconUrl: require('../../assets/icons/icon-position.png'),
+          iconSize: [35, 35],
+          iconAnchor: [17.5, 35]
+        })
+        this.map.on('click', e => {
+          // 转换为GeoJSON
+          const feat = L.marker(e.latlng, { icon: icon })
+          feat.addTo(this.map)
+          this.currentItem = feat
+          console.log(feat)
+          this.$refs.editPartsDialog.initDialog(feat, 'create')
+          // TODO: 测试新增代码
+          // const feat = L.marker(e.latlng).toGeoJSON()
+          // feat.properties['OBJECTID'] = 13234
+          // feat.properties['POINT_X'] = 408913.539
+          // feat.properties['POINT_Y'] = 3071272.381
+          // feat.properties['大类编码'] = 1
+          // feat.properties['大类名称'] = 'test'
+          // feat.properties['小类编码'] = 1
+          // feat.properties['小类名称'] = 'test'
+          // console.log(feat)
+          // const layerUrl = `${this.baseUrl}${this.partsEditUrl}/35/`
+          // this.searchLayerByUrl(layerUrl)
+          // this.currentLayer.addFeature(feat, (err, response) => {
+          //   console.log(err, response)
+          //   debugger
+          // })
+        })
+      }
     },
-    // 放弃操作，dialogStatus弹窗类型
+    // 点击编辑： 打开编辑弹窗
+    editInfo(ev) {
+      // TODO: 临时测试，原样上传更新
+      this.currentLayer.updateFeature(this.currentItem, (err, response) => {
+        if (err) {
+        } else {
+          this.$message.success('编辑成功')
+        }
+      })
+      // 打开弹窗
+      // console.log(this.currentItem)
+      // this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击单个元素的删除，ok
+    delete(code) {
+      // 先确认操作，然后执行删除工作
+      if (this.currentLayer && this.currentItem) {
+        this.$confirm('确定删除该部件吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定
+          this.currentLayer.deleteFeature(this.currentItem.id, (err, response) => {
+            if (err) {
+              this.$message.error('删除失败')
+            } else {
+              this.$message.success('删除成功')
+              this.currentItem = null
+            }
+          })
+        })
+      }
+    },
+    // 框选区域批量删除,ok
+    batchDelete() {
+      if (this.featureCollectionLength > 0) {
+        this.$confirm(`确定要删除所框选的${this.featureCollectionLength}个部件吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定则遍历图层，删除features
+          for (const layer of this.featureCollection) {
+            const ids = layer.features.map(item => item.id)
+            if (layer.layer && layer.features) {
+              layer.layer.deleteFeatures(ids, (err, response) => {
+                if (err) {
+                  this.$message.error('批量删除部件失败')
+                } else {
+                  this.$message.success('批量删除部件成功')
+                  this.drawDelete()
+                  this.featureCollection = []
+                  this.featureCollectionLength = 0
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          // 放弃则清空选框和查询结果
+          this.drawDelete()
+          this.featureCollection = []
+          this.featureCollectionLength = 0
+        })
+      }
+    },
+    // 添加到feature图层
+    onAddFeature(feature) {
+      const feat = L.marker(feature.latlng).toGeoJSON()
+      // 读取属性
+      feat.properties['大类编码'] = feature.classCode
+      feat.properties['大类'] = feature.class
+      feat.properties['小类编码'] = feature.subClassCode
+      feat.properties['小类'] = feature.subClass
+      feat.properties['权属单位'] = feature.dept
+      feat.properties['地址'] = feature.address
+      console.log(feat)
+      // 图层地址拼接
+      const layerUrl = `${this.baseUrl}${this.partsEditUrl}/${feature.layer}/`
+      // 遍历找到当前图层
+      this.searchLayerByUrl(layerUrl)
+      // 添加部件
+      this.currentLayer.addFeature(feat, (err, response) => {
+        console.log(err, response)
+        debugger
+        if (err) {
+          console.log('添加失败')
+        } else {
+          // 关闭添加模式, 并关闭弹窗
+          this.addMode = true
+          this.$refs.editPartsDialog.closeDialog()
+        }
+      })
+    },
+    // 新增部件的，放弃操作，dialogStatus弹窗类型
     onAbort(dialogStatus) {
       if (dialogStatus === 'create') {
         // 清除地图上的锚点
-        this.map.removeLayer(this.currentItem)
+        if (this.currentItem) {
+          this.map.removeLayer(this.currentItem)
+        }
       }
     },
     // 编辑保存操作
     onUpdateFeature(feature) {
       if (this.currentLayer) {
-        debugger
-        this.currentLayer.updateFeature(feature, () => {
-          this.$messsage.success('编辑成功')
+        console.log('=========')
+        console.log(feature)
+        console.log('=========')
+        this.currentLayer.updateFeature(feature, (err, response) => {
+          if (err) {
+            this.$message.error('部件信息更新失败')
+          } else {
+            this.$message.success('部件信息更新成功')
+          }
         })
       }
     },
+    // 地图查询功能
+    search(keyword) {
+      console.log('search')
+      // this.cansearch = false
+      var that = this
+      const results = [] // 存放查询结果列表
+      // 遍历所有图层进行查询
+      const partsLength = this.parts.length // 全部部件图层数量
+      for (let i = 0; i < partsLength; i++) {
+        const part = this.parts[i]
+        var str = ['编码', '小类名称', '大类名称']
+        var query = esri.query({ url: part.options.url })
+        let queryString = '1=1' // 默认查询语句
+        if (keyword) {
+          // 拼接查询语句
+          queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ')
+          console.log(queryString)
+        } else {
+          this.$message.warning('请输入查询关键字')
+          return
+        }
+        query.where(queryString)
+        // query.within(this.bounds)
+        // 执行查询
+        query.run((error, featureCollection, response) => {
+          if (error) {
+            console.log(error)
+            return
+          }
+          const featuresLength = featureCollection.features.length
+          if (featuresLength > 0) {
+            // 遍历所有查询结果，放入results
+            for (const feature of featureCollection.features) {
+              results.push({
+                layer: part,
+                feature: feature
+              })
+            }
+          }
+          // 如果是最后一个图层
+          if (i === (partsLength - 1)) {
+            that.searchList = results
+            // that.drawIcon()
+          }
+        })
+      }
+    },
+    // 查询结果页面变化，重绘icon
+    changeSearchPage(data) {
+      console.log('changeSearchPage')
+      // 清除原来绘制的点
+      if (this.currentSearchMarkers.length > 0) {
+        for (const marker of this.currentSearchMarkers) {
+          this.map.removeLayer(marker)
+        }
+      }
+      // 赋予新的查询结果
+      const currentMarkesLength = data.length
+      for (let i = 0; i < currentMarkesLength; i++) {
+        const feature = data[i].feature
+        var icon = this.searchIconList[i]
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map)
+        this.currentSearchMarkers.push(item)
+      }
+      // 中心置为第一个点的中心
+      if (this.currentSearchMarkers[0]) {
+        this.clickSearchItem(data[0])
+      }
+    },
+    // 点击查询列表项，将位置放在中间
+    clickSearchItem(item) {
+      console.log('clickItem')
+      if (item) {
+        const feature = item.feature
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        let zoom = this.map.getZoom()
+        if (zoom < 19) {
+          zoom = 19
+        }
+        this.map.flyTo(latlng, zoom)
+      }
+    },
+    // 绘制查询结果
+    drawIcon() {
+      var that = this
+      for (var i = 0; i < that.markerlist.length; i++) {
+        that.map.removeLayer(that.markerlist[i])
+      }
+
+      that.markerlist = []
+      for (let num = 0; num < that.showlist.length; num++) {
+
+      }
+      this.cansearch = true
+    },
     // 根据url找到layer
     searchLayerByUrl(url) {
       const layer = this.parts.filter(item => item.options.url === url)[0]
@@ -299,37 +547,10 @@
   .leaflet_container{
     width: 100%;
     height: 85vh;
+    min-height: 596px;
+    /*max-height: 90vh;*/
     background-color: white;
   }
-  .draw-icon{
-    background-color: white;
-    width: 100px;height: 40px;
-    border: 1px solid #DCDFE6;
-    border-radius:4px;
-  }
-  .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;
-  }
-  .points-add-div{
-    position: absolute;
-    right:250px;
-    top:20px;
-    background-color: white;
-    border-radius: 3px;
-  }
 </style>
 <style rel="stylesheet/scss" lang="scss">
   .pop-window{
diff --git a/src/views/overview/components/editPartsDialog.vue b/src/views/overview/components/editPartsDialog.vue
index 1e2ebe8..4a463d0 100644
--- a/src/views/overview/components/editPartsDialog.vue
+++ b/src/views/overview/components/editPartsDialog.vue
@@ -4,22 +4,36 @@
  * @Date:
  -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" width="400px" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="400px" append-to-body>
     <el-form ref="dataForm" :rules="rules" :model="dataForm" size="small" label-position="right" label-width="80px">
       <!--<el-row :gutter="20">-->
       <!--<el-col :span="12">-->
       <el-form-item label="大类" prop="class">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.class" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" v-model="dataForm.class" placeholder="请选择" @change="bigClassChange">
+          <el-option
+            v-for="item in classList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="小类" prop="subClass">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" :disabled="subClassList.length==0" v-model="dataForm.subClass" placeholder="请选择" @change="subClassChange">
+          <el-option
+            v-for="item in subClassList"
+            :key="'sub'+item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="部件编码" prop="code">
-        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-input v-model.trim="dataForm.code" :disabled="dialogStatus=='update'" type="text" placeholder="必填"/>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
@@ -47,30 +61,40 @@
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: 'update', // 对话框类型：create,update
-      feature: null,
+      dialogStatus: 'create', // 对话框类型：create,update
+      feature: null, // 传入的feature
       textMap: {
         update: '编辑部件',
         create: '新增部件'
       }, // 标题
       dataForm: {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null,
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }, // 数据表单
       rules: {
         class: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
         subClass: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
-      }
+        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+        // dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        // address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+      },
+      totalClassList: [], // 大类小类综合列表
+      classList: [], // 大类列表
+      subClassList: [] // 小类列表
     }
   },
+  mounted() {
+    this.fetchClass()
+  },
   methods: {
     // 初始化对话框
     initDialog(feature, dialogStatus = 'create') {
@@ -88,37 +112,102 @@
           dept: properties['权属单位'] ? properties['权属单位'] : '', // 权属单位
           address: properties['详细地址'] ? properties['详细地址'] : '' // 详细地址
         }
+        debugger
       } else if (dialogStatus === 'create') {
+        // 获取点的坐标
+        this.dataForm.latlng = feature.getLatLng()
+        this.dataForm.x = feature.getLatLng().lat
+        this.dataForm.y = feature.getLatLng().lng
       }
     },
     // 保存
     save() {
       if (this.dialogStatus === 'update') {
-        this.feature.properties['权属单位'] = this.dataForm.dept
-        this.feature.properties['详细地址'] = this.dataForm.address
+        this.update()
+      } else if (this.dialogStatus === 'create') {
+        this.add()
       }
+    },
+    // 编辑完成
+    update() {
+      // this.feature.properties['权属单位'] = this.dataForm.dept
+      // this.feature.properties['详细地址'] = this.dataForm.address
       this.dialogFormVisible = false
       this.$emit('update', this.feature)
     },
+    // 新增
+    add() {
+      console.log(this.dataForm)
+      this.$emit('add', this.dataForm)
+    },
+    bigClassChange(val) {
+      // 更新大类code
+      const currentClass = this.classList.filter(item => item.name === val)[0]
+      this.dataForm.classCode = currentClass.code
+      this.dataForm.subClass = ''
+      this.dataForm.subClassCode = ''
+      this.fetchSubClass() // 获取子类列表
+    },
+    subClassChange(val) {
+      // 更新小类code
+      const currentClass = this.subClassList.filter(item => item.name === val)[0]
+      this.dataForm.subClassCode = currentClass.code
+      this.dataForm.layer = currentClass.layer
+    },
+    // 获取大类
+    fetchClass() {
+      this.totalClassList = this.baseConfig.partsLayer
+      // 大类列表
+      this.classList = this.totalClassList.map(item => {
+        return {
+          name: item.name,
+          code: item.code
+        }
+      })
+    },
+    // 获取小类
+    fetchSubClass() {
+      for (const item of this.totalClassList) {
+        if (item.code === this.dataForm.classCode) {
+          this.subClassList = item.children
+        }
+      }
+    },
     resetForm() {
       this.dataForm = {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null, // 经纬度
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }
     },
     cancel() {
+      this.$confirm('确定放弃编辑该部件吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 确定
+        this.dialogFormVisible = false
+        this.$emit('abort', this.dialogStatus)
+      })
+    },
+    closeDialog(){
       this.dialogFormVisible = false
-      this.$emit('abort', this.dialogStatus)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+.el-select{
+  width: 100%;
+}
 </style>

diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
index c4acb21..f6fd6af 100644
--- a/src/views/overview/compEdit.vue
+++ b/src/views/overview/compEdit.vue
@@ -7,16 +7,26 @@
   <app-container>
     <div id="map" class="leaflet_container"/>
     <!--查询显示组件-->
-    <search-list ref="searchList"/>
-    <div class="points-add-div">
-      <el-button icon="el-icon-plus" @click="openAddMode">
-        添加部件
-      </el-button>
-    </div>
+    <search-list
+      ref="searchList"
+      :total-data="searchList"
+      @search="search"
+      @change="changeSearchPage"
+      @item-click="clickSearchItem"/>
+    <!--工具箱-->
+    <tools-container>
+      <!-- 绘制工具-->
+      <draw-tool @click="drawBox"/>
+      <!--删除工具-->
+      <delete-tool :disabled="batchDeleteDisabled" @click="batchDelete"/>
+      <!--添加工具-->
+      <add-tool @click="openAddMode"/>
+      <!--图层选择工具-->
+      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    </tools-container>
     <!--图层选择组件-->
-    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
     <!--编辑部件弹窗-->
-    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+    <edit-parts-dialog ref="editPartsDialog" @add="onAddFeature" @update="onUpdateFeature" @abort="onAbort"/>
   </app-container>
 </template>
 <script>
@@ -27,33 +37,33 @@
 import SearchList from './components/searchList'
 import { mapGetters } from 'vuex'
 import EditPartsDialog from './components/editPartsDialog'
+import ToolsContainer from './components/toolsContainer'
+import DrawTool from './components/drawTool'
+import DeleteTool from './components/deleteTool'
+import AddTool from './components/addTool'
 var esri = require('esri-leaflet')
 export default {
   name: 'ComponentEdit',
-  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList },
   data() {
     return {
       loading: false, // 加载动画
       addMode: false, // 添加元素状态
       map: null, // 地图对象
       drawLayer: null, // 绘制图层（框选）
-      layers: [
-        { id: 0, name: '底图', type: 'map', domain: [] },
-        { id: 1, name: '网格', type: 'layer', domain: [] },
-        { id: 2, name: '商户', type: 'layer', domain: [] },
-        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
-        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
-        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
-        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
-        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
-        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
-        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
-      ],
+      layers: this.baseConfig.layers,
       selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
       maps: [], // 地图图层
       parts: [], // 部件图层
+      featureCollection: [], // 选中的图层和Feature
+      featureCollectionLength: 0, // 选中的feature个数
+      batchDeleteDisabled: true, // 批量删除是否不可点
       curretLayer: null, // 当前选中featureLayer
-      currentItem: null // 当前选中部件
+      currentItem: null, // 当前选中部件
+      searchList: [], // 全部查询结果
+      currentSearchMarkers: [], // 当前查询页面的markers
+      // searchLength: 0, // 全部查询结果长度
+      searchIconList: [] // 查询结果的Icon列表
     }
   },
   computed: {
@@ -65,6 +75,13 @@
       'partsEditUrl'
     ])
   },
+  watch: {
+    addMode(val) {
+      if (!val) { // 关闭新增模式是要关闭点击事件
+        this.map.off('click')
+      }
+    }
+  },
   // 销毁时移除监听
   destroyed() {
     window.removeEventListener('click', this.handleKeyup, true)
@@ -73,6 +90,7 @@
   // 加载完添加点击事件的监听
   mounted() {
     this.init()
+    this.initIcons()
     window.addEventListener('click', this.handleKeyup, true)
   },
   methods: {
@@ -88,28 +106,53 @@
         this.drawLayer.layer.remove()
       }
     },
-    // 绘制矩形
-    drawSquare() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
+    // 绘制选框
+    drawBox(type) {
+      this.drawDelete()
       this.$nextTick(() => {
-        this.map.pm.enableDraw('Rectangle', {
+        this.map.pm.enableDraw(type, {
           snappable: false
         })
+        // 绘制完成
+        this.map.on('pm:create', e => {
+          // 获取 选区的geojson
+          const geojson = e.layer.toGeoJSON()
+          // 执行查询，遍历所有部件图层
+          const results = [] // 存放查询结果
+          let partsCount = 0 // 部件数量
+          const partsLength = this.parts.length // 全部部件图层数量
+          for (let i = 0; i < partsLength; i++) {
+            const part = this.parts[i]
+            const query = esri.query({ url: part.options.url })
+            query.where('1=1')
+            query.within(geojson)
+            query.run((error, featureCollection, response) => {
+              if (error) {
+                console.log(error)
+                return
+              }
+              // 查询成功
+              if (featureCollection.features.length > 0) {
+                results.push({
+                  layer: part,
+                  url: part.options.url,
+                  features: featureCollection.features
+                })
+                partsCount += featureCollection.features.length
+              }
+              // 最后一个图层完毕， 查询结果放入featureCollection中
+              if (i === (partsLength - 1)) {
+                this.featureCollection = results
+                this.featureCollectionLength = partsCount
+                this.$message.info(`已选中部件: ${partsCount} 个`)
+                this.batchDeleteDisabled = false
+              }
+            })
+          }
+        })
       })
     },
-    // 绘制多边形
-    drawPolygon() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
-      this.$nextTick(() => {
-        this.map.pm.enableDraw('Polygon', {
-          snappable: false
-        })
-      })
-    },
+
     // 地图切换
     mapChange(val) {
       if (!val) { // 隐藏底图
@@ -148,18 +191,6 @@
         }
       }
     },
-    // 移除点
-    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()
-        }
-      })
-    },
     // 初始化地图
     init() {
       this.loading = false
@@ -176,24 +207,25 @@
       this.map = map // data挂载map
       window.map = map
       const that = this
+      // 打开绘制工具
       this.map.on('pm:create', e => {
-        if (that.drawLayer) {
-          that.drawLayer.layer.remove()
-        }
+        that.drawDelete()
         that.drawLayer = e
       })
+      // 打开弹窗添加的事件
       this.map.on('popupopen', e => {
-        // 给按钮添加点击事件
+        // 给弹窗的编辑、删除按钮添加点击事件
         document.getElementById('btnEdit').onclick = that.editInfo
         document.getElementById('btnDelete').onclick = that.delete
       })
       // 添加底图
       for (let i = 0; i <= 21; i++) {
-        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
-        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
         this.maps.push(esri.featureLayer(item).addTo(map))
       }
-      // 添加部件
+      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
+      // 添加部件,
+      // const partsLayer = this.baseConfig.partsLayer
       for (let i = 1; i <= 40; i++) {
         let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
         console.log(item)
@@ -235,55 +267,271 @@
       }
       // this.map.setZoom(this.baseConfig.zoom)
     },
-    // 点击新增部件
-    openAddMode() {
-      this.addMode = true
-      var icon = L.icon({
-        iconUrl: require('../../assets/icons/icon-position.png'),
-        iconSize: [35, 35],
-        iconAnchor: [17.5, 35]
-      })
-      this.map.on('click', e => {
-        // convert to GeoJSON
-        const feat = L.marker(e.latlng, { icon: icon })
-        feat.addTo(this.map)
-        console.log(feat)
-        this.$refs.editPartsDialog.initDialog(feat, 'create')
-      })
-    },
-    // 点击编辑
-    editInfo(ev) {
-      // 打开弹窗
-      console.log(this.currentItem)
-      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
-    },
-    // 点击删除
-    delete(code) {
-      if (this.currentLayer) {
-        debugger
-        this.currentLayer.deleteFeature(this.currentItem)
-        this.$messsage.success('删除成功')
+    // 初始化图标
+    initIcons() {
+      // 加载所有图标，1到5
+      for (let i = 1; i < 6; i++) {
+        const icon = L.icon({
+          iconUrl: require(`../../assets/global_images/point${i}.png`),
+          iconSize: [25, 25],
+          iconAnchor: [12.5, 25]
+        })
+        this.searchIconList.push(icon)
       }
     },
-    onCreateFeature(feature) {
-
+    // 点击新增部件按钮: 添加按钮并打开弹窗
+    openAddMode() {
+      if (this.addMode) { // 如果已经处于添加模式，则关闭，并清空页面上的点
+        this.addMode = false
+        this.onAbort('create')
+      } else {
+        // 开始添加点
+        this.addMode = true
+        const icon = L.icon({
+          iconUrl: require('../../assets/icons/icon-position.png'),
+          iconSize: [35, 35],
+          iconAnchor: [17.5, 35]
+        })
+        this.map.on('click', e => {
+          // 转换为GeoJSON
+          const feat = L.marker(e.latlng, { icon: icon })
+          feat.addTo(this.map)
+          this.currentItem = feat
+          console.log(feat)
+          this.$refs.editPartsDialog.initDialog(feat, 'create')
+          // TODO: 测试新增代码
+          // const feat = L.marker(e.latlng).toGeoJSON()
+          // feat.properties['OBJECTID'] = 13234
+          // feat.properties['POINT_X'] = 408913.539
+          // feat.properties['POINT_Y'] = 3071272.381
+          // feat.properties['大类编码'] = 1
+          // feat.properties['大类名称'] = 'test'
+          // feat.properties['小类编码'] = 1
+          // feat.properties['小类名称'] = 'test'
+          // console.log(feat)
+          // const layerUrl = `${this.baseUrl}${this.partsEditUrl}/35/`
+          // this.searchLayerByUrl(layerUrl)
+          // this.currentLayer.addFeature(feat, (err, response) => {
+          //   console.log(err, response)
+          //   debugger
+          // })
+        })
+      }
     },
-    // 放弃操作，dialogStatus弹窗类型
+    // 点击编辑： 打开编辑弹窗
+    editInfo(ev) {
+      // TODO: 临时测试，原样上传更新
+      this.currentLayer.updateFeature(this.currentItem, (err, response) => {
+        if (err) {
+        } else {
+          this.$message.success('编辑成功')
+        }
+      })
+      // 打开弹窗
+      // console.log(this.currentItem)
+      // this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击单个元素的删除，ok
+    delete(code) {
+      // 先确认操作，然后执行删除工作
+      if (this.currentLayer && this.currentItem) {
+        this.$confirm('确定删除该部件吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定
+          this.currentLayer.deleteFeature(this.currentItem.id, (err, response) => {
+            if (err) {
+              this.$message.error('删除失败')
+            } else {
+              this.$message.success('删除成功')
+              this.currentItem = null
+            }
+          })
+        })
+      }
+    },
+    // 框选区域批量删除,ok
+    batchDelete() {
+      if (this.featureCollectionLength > 0) {
+        this.$confirm(`确定要删除所框选的${this.featureCollectionLength}个部件吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定则遍历图层，删除features
+          for (const layer of this.featureCollection) {
+            const ids = layer.features.map(item => item.id)
+            if (layer.layer && layer.features) {
+              layer.layer.deleteFeatures(ids, (err, response) => {
+                if (err) {
+                  this.$message.error('批量删除部件失败')
+                } else {
+                  this.$message.success('批量删除部件成功')
+                  this.drawDelete()
+                  this.featureCollection = []
+                  this.featureCollectionLength = 0
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          // 放弃则清空选框和查询结果
+          this.drawDelete()
+          this.featureCollection = []
+          this.featureCollectionLength = 0
+        })
+      }
+    },
+    // 添加到feature图层
+    onAddFeature(feature) {
+      const feat = L.marker(feature.latlng).toGeoJSON()
+      // 读取属性
+      feat.properties['大类编码'] = feature.classCode
+      feat.properties['大类'] = feature.class
+      feat.properties['小类编码'] = feature.subClassCode
+      feat.properties['小类'] = feature.subClass
+      feat.properties['权属单位'] = feature.dept
+      feat.properties['地址'] = feature.address
+      console.log(feat)
+      // 图层地址拼接
+      const layerUrl = `${this.baseUrl}${this.partsEditUrl}/${feature.layer}/`
+      // 遍历找到当前图层
+      this.searchLayerByUrl(layerUrl)
+      // 添加部件
+      this.currentLayer.addFeature(feat, (err, response) => {
+        console.log(err, response)
+        debugger
+        if (err) {
+          console.log('添加失败')
+        } else {
+          // 关闭添加模式, 并关闭弹窗
+          this.addMode = true
+          this.$refs.editPartsDialog.closeDialog()
+        }
+      })
+    },
+    // 新增部件的，放弃操作，dialogStatus弹窗类型
     onAbort(dialogStatus) {
       if (dialogStatus === 'create') {
         // 清除地图上的锚点
-        this.map.removeLayer(this.currentItem)
+        if (this.currentItem) {
+          this.map.removeLayer(this.currentItem)
+        }
       }
     },
     // 编辑保存操作
     onUpdateFeature(feature) {
       if (this.currentLayer) {
-        debugger
-        this.currentLayer.updateFeature(feature, () => {
-          this.$messsage.success('编辑成功')
+        console.log('=========')
+        console.log(feature)
+        console.log('=========')
+        this.currentLayer.updateFeature(feature, (err, response) => {
+          if (err) {
+            this.$message.error('部件信息更新失败')
+          } else {
+            this.$message.success('部件信息更新成功')
+          }
         })
       }
     },
+    // 地图查询功能
+    search(keyword) {
+      console.log('search')
+      // this.cansearch = false
+      var that = this
+      const results = [] // 存放查询结果列表
+      // 遍历所有图层进行查询
+      const partsLength = this.parts.length // 全部部件图层数量
+      for (let i = 0; i < partsLength; i++) {
+        const part = this.parts[i]
+        var str = ['编码', '小类名称', '大类名称']
+        var query = esri.query({ url: part.options.url })
+        let queryString = '1=1' // 默认查询语句
+        if (keyword) {
+          // 拼接查询语句
+          queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ')
+          console.log(queryString)
+        } else {
+          this.$message.warning('请输入查询关键字')
+          return
+        }
+        query.where(queryString)
+        // query.within(this.bounds)
+        // 执行查询
+        query.run((error, featureCollection, response) => {
+          if (error) {
+            console.log(error)
+            return
+          }
+          const featuresLength = featureCollection.features.length
+          if (featuresLength > 0) {
+            // 遍历所有查询结果，放入results
+            for (const feature of featureCollection.features) {
+              results.push({
+                layer: part,
+                feature: feature
+              })
+            }
+          }
+          // 如果是最后一个图层
+          if (i === (partsLength - 1)) {
+            that.searchList = results
+            // that.drawIcon()
+          }
+        })
+      }
+    },
+    // 查询结果页面变化，重绘icon
+    changeSearchPage(data) {
+      console.log('changeSearchPage')
+      // 清除原来绘制的点
+      if (this.currentSearchMarkers.length > 0) {
+        for (const marker of this.currentSearchMarkers) {
+          this.map.removeLayer(marker)
+        }
+      }
+      // 赋予新的查询结果
+      const currentMarkesLength = data.length
+      for (let i = 0; i < currentMarkesLength; i++) {
+        const feature = data[i].feature
+        var icon = this.searchIconList[i]
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map)
+        this.currentSearchMarkers.push(item)
+      }
+      // 中心置为第一个点的中心
+      if (this.currentSearchMarkers[0]) {
+        this.clickSearchItem(data[0])
+      }
+    },
+    // 点击查询列表项，将位置放在中间
+    clickSearchItem(item) {
+      console.log('clickItem')
+      if (item) {
+        const feature = item.feature
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        let zoom = this.map.getZoom()
+        if (zoom < 19) {
+          zoom = 19
+        }
+        this.map.flyTo(latlng, zoom)
+      }
+    },
+    // 绘制查询结果
+    drawIcon() {
+      var that = this
+      for (var i = 0; i < that.markerlist.length; i++) {
+        that.map.removeLayer(that.markerlist[i])
+      }
+
+      that.markerlist = []
+      for (let num = 0; num < that.showlist.length; num++) {
+
+      }
+      this.cansearch = true
+    },
     // 根据url找到layer
     searchLayerByUrl(url) {
       const layer = this.parts.filter(item => item.options.url === url)[0]
@@ -299,37 +547,10 @@
   .leaflet_container{
     width: 100%;
     height: 85vh;
+    min-height: 596px;
+    /*max-height: 90vh;*/
     background-color: white;
   }
-  .draw-icon{
-    background-color: white;
-    width: 100px;height: 40px;
-    border: 1px solid #DCDFE6;
-    border-radius:4px;
-  }
-  .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;
-  }
-  .points-add-div{
-    position: absolute;
-    right:250px;
-    top:20px;
-    background-color: white;
-    border-radius: 3px;
-  }
 </style>
 <style rel="stylesheet/scss" lang="scss">
   .pop-window{
diff --git a/src/views/overview/components/editPartsDialog.vue b/src/views/overview/components/editPartsDialog.vue
index 1e2ebe8..4a463d0 100644
--- a/src/views/overview/components/editPartsDialog.vue
+++ b/src/views/overview/components/editPartsDialog.vue
@@ -4,22 +4,36 @@
  * @Date:
  -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" width="400px" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="400px" append-to-body>
     <el-form ref="dataForm" :rules="rules" :model="dataForm" size="small" label-position="right" label-width="80px">
       <!--<el-row :gutter="20">-->
       <!--<el-col :span="12">-->
       <el-form-item label="大类" prop="class">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.class" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" v-model="dataForm.class" placeholder="请选择" @change="bigClassChange">
+          <el-option
+            v-for="item in classList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="小类" prop="subClass">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" :disabled="subClassList.length==0" v-model="dataForm.subClass" placeholder="请选择" @change="subClassChange">
+          <el-option
+            v-for="item in subClassList"
+            :key="'sub'+item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="部件编码" prop="code">
-        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-input v-model.trim="dataForm.code" :disabled="dialogStatus=='update'" type="text" placeholder="必填"/>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
@@ -47,30 +61,40 @@
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: 'update', // 对话框类型：create,update
-      feature: null,
+      dialogStatus: 'create', // 对话框类型：create,update
+      feature: null, // 传入的feature
       textMap: {
         update: '编辑部件',
         create: '新增部件'
       }, // 标题
       dataForm: {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null,
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }, // 数据表单
       rules: {
         class: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
         subClass: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
-      }
+        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+        // dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        // address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+      },
+      totalClassList: [], // 大类小类综合列表
+      classList: [], // 大类列表
+      subClassList: [] // 小类列表
     }
   },
+  mounted() {
+    this.fetchClass()
+  },
   methods: {
     // 初始化对话框
     initDialog(feature, dialogStatus = 'create') {
@@ -88,37 +112,102 @@
           dept: properties['权属单位'] ? properties['权属单位'] : '', // 权属单位
           address: properties['详细地址'] ? properties['详细地址'] : '' // 详细地址
         }
+        debugger
       } else if (dialogStatus === 'create') {
+        // 获取点的坐标
+        this.dataForm.latlng = feature.getLatLng()
+        this.dataForm.x = feature.getLatLng().lat
+        this.dataForm.y = feature.getLatLng().lng
       }
     },
     // 保存
     save() {
       if (this.dialogStatus === 'update') {
-        this.feature.properties['权属单位'] = this.dataForm.dept
-        this.feature.properties['详细地址'] = this.dataForm.address
+        this.update()
+      } else if (this.dialogStatus === 'create') {
+        this.add()
       }
+    },
+    // 编辑完成
+    update() {
+      // this.feature.properties['权属单位'] = this.dataForm.dept
+      // this.feature.properties['详细地址'] = this.dataForm.address
       this.dialogFormVisible = false
       this.$emit('update', this.feature)
     },
+    // 新增
+    add() {
+      console.log(this.dataForm)
+      this.$emit('add', this.dataForm)
+    },
+    bigClassChange(val) {
+      // 更新大类code
+      const currentClass = this.classList.filter(item => item.name === val)[0]
+      this.dataForm.classCode = currentClass.code
+      this.dataForm.subClass = ''
+      this.dataForm.subClassCode = ''
+      this.fetchSubClass() // 获取子类列表
+    },
+    subClassChange(val) {
+      // 更新小类code
+      const currentClass = this.subClassList.filter(item => item.name === val)[0]
+      this.dataForm.subClassCode = currentClass.code
+      this.dataForm.layer = currentClass.layer
+    },
+    // 获取大类
+    fetchClass() {
+      this.totalClassList = this.baseConfig.partsLayer
+      // 大类列表
+      this.classList = this.totalClassList.map(item => {
+        return {
+          name: item.name,
+          code: item.code
+        }
+      })
+    },
+    // 获取小类
+    fetchSubClass() {
+      for (const item of this.totalClassList) {
+        if (item.code === this.dataForm.classCode) {
+          this.subClassList = item.children
+        }
+      }
+    },
     resetForm() {
       this.dataForm = {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null, // 经纬度
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }
     },
     cancel() {
+      this.$confirm('确定放弃编辑该部件吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 确定
+        this.dialogFormVisible = false
+        this.$emit('abort', this.dialogStatus)
+      })
+    },
+    closeDialog(){
       this.dialogFormVisible = false
-      this.$emit('abort', this.dialogStatus)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+.el-select{
+  width: 100%;
+}
 </style>
diff --git a/src/views/overview/components/layerChoose.vue b/src/views/overview/components/layerChoose.vue
index 486d65a..c42ae5a 100644
--- a/src/views/overview/components/layerChoose.vue
+++ b/src/views/overview/components/layerChoose.vue
@@ -76,10 +76,10 @@
   $width:200px;
   .layer-choose-div{
     width: $width;
-    position: absolute;
-    right:50px;
-    top:20px;
-    z-index:10000;
+    /*position: absolute;*/
+    /*right:50px;*/
+    /*top:20px;*/
+    /*z-index:10000;*/
     .right-card{
       height: auto;
       display: flex;

diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
index c4acb21..f6fd6af 100644
--- a/src/views/overview/compEdit.vue
+++ b/src/views/overview/compEdit.vue
@@ -7,16 +7,26 @@
   <app-container>
     <div id="map" class="leaflet_container"/>
     <!--查询显示组件-->
-    <search-list ref="searchList"/>
-    <div class="points-add-div">
-      <el-button icon="el-icon-plus" @click="openAddMode">
-        添加部件
-      </el-button>
-    </div>
+    <search-list
+      ref="searchList"
+      :total-data="searchList"
+      @search="search"
+      @change="changeSearchPage"
+      @item-click="clickSearchItem"/>
+    <!--工具箱-->
+    <tools-container>
+      <!-- 绘制工具-->
+      <draw-tool @click="drawBox"/>
+      <!--删除工具-->
+      <delete-tool :disabled="batchDeleteDisabled" @click="batchDelete"/>
+      <!--添加工具-->
+      <add-tool @click="openAddMode"/>
+      <!--图层选择工具-->
+      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    </tools-container>
     <!--图层选择组件-->
-    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
     <!--编辑部件弹窗-->
-    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+    <edit-parts-dialog ref="editPartsDialog" @add="onAddFeature" @update="onUpdateFeature" @abort="onAbort"/>
   </app-container>
 </template>
 <script>
@@ -27,33 +37,33 @@
 import SearchList from './components/searchList'
 import { mapGetters } from 'vuex'
 import EditPartsDialog from './components/editPartsDialog'
+import ToolsContainer from './components/toolsContainer'
+import DrawTool from './components/drawTool'
+import DeleteTool from './components/deleteTool'
+import AddTool from './components/addTool'
 var esri = require('esri-leaflet')
 export default {
   name: 'ComponentEdit',
-  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList },
   data() {
     return {
       loading: false, // 加载动画
       addMode: false, // 添加元素状态
       map: null, // 地图对象
       drawLayer: null, // 绘制图层（框选）
-      layers: [
-        { id: 0, name: '底图', type: 'map', domain: [] },
-        { id: 1, name: '网格', type: 'layer', domain: [] },
-        { id: 2, name: '商户', type: 'layer', domain: [] },
-        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
-        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
-        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
-        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
-        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
-        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
-        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
-      ],
+      layers: this.baseConfig.layers,
       selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
       maps: [], // 地图图层
       parts: [], // 部件图层
+      featureCollection: [], // 选中的图层和Feature
+      featureCollectionLength: 0, // 选中的feature个数
+      batchDeleteDisabled: true, // 批量删除是否不可点
       curretLayer: null, // 当前选中featureLayer
-      currentItem: null // 当前选中部件
+      currentItem: null, // 当前选中部件
+      searchList: [], // 全部查询结果
+      currentSearchMarkers: [], // 当前查询页面的markers
+      // searchLength: 0, // 全部查询结果长度
+      searchIconList: [] // 查询结果的Icon列表
     }
   },
   computed: {
@@ -65,6 +75,13 @@
       'partsEditUrl'
     ])
   },
+  watch: {
+    addMode(val) {
+      if (!val) { // 关闭新增模式是要关闭点击事件
+        this.map.off('click')
+      }
+    }
+  },
   // 销毁时移除监听
   destroyed() {
     window.removeEventListener('click', this.handleKeyup, true)
@@ -73,6 +90,7 @@
   // 加载完添加点击事件的监听
   mounted() {
     this.init()
+    this.initIcons()
     window.addEventListener('click', this.handleKeyup, true)
   },
   methods: {
@@ -88,28 +106,53 @@
         this.drawLayer.layer.remove()
       }
     },
-    // 绘制矩形
-    drawSquare() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
+    // 绘制选框
+    drawBox(type) {
+      this.drawDelete()
       this.$nextTick(() => {
-        this.map.pm.enableDraw('Rectangle', {
+        this.map.pm.enableDraw(type, {
           snappable: false
         })
+        // 绘制完成
+        this.map.on('pm:create', e => {
+          // 获取 选区的geojson
+          const geojson = e.layer.toGeoJSON()
+          // 执行查询，遍历所有部件图层
+          const results = [] // 存放查询结果
+          let partsCount = 0 // 部件数量
+          const partsLength = this.parts.length // 全部部件图层数量
+          for (let i = 0; i < partsLength; i++) {
+            const part = this.parts[i]
+            const query = esri.query({ url: part.options.url })
+            query.where('1=1')
+            query.within(geojson)
+            query.run((error, featureCollection, response) => {
+              if (error) {
+                console.log(error)
+                return
+              }
+              // 查询成功
+              if (featureCollection.features.length > 0) {
+                results.push({
+                  layer: part,
+                  url: part.options.url,
+                  features: featureCollection.features
+                })
+                partsCount += featureCollection.features.length
+              }
+              // 最后一个图层完毕， 查询结果放入featureCollection中
+              if (i === (partsLength - 1)) {
+                this.featureCollection = results
+                this.featureCollectionLength = partsCount
+                this.$message.info(`已选中部件: ${partsCount} 个`)
+                this.batchDeleteDisabled = false
+              }
+            })
+          }
+        })
       })
     },
-    // 绘制多边形
-    drawPolygon() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
-      this.$nextTick(() => {
-        this.map.pm.enableDraw('Polygon', {
-          snappable: false
-        })
-      })
-    },
+
     // 地图切换
     mapChange(val) {
       if (!val) { // 隐藏底图
@@ -148,18 +191,6 @@
         }
       }
     },
-    // 移除点
-    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()
-        }
-      })
-    },
     // 初始化地图
     init() {
       this.loading = false
@@ -176,24 +207,25 @@
       this.map = map // data挂载map
       window.map = map
       const that = this
+      // 打开绘制工具
       this.map.on('pm:create', e => {
-        if (that.drawLayer) {
-          that.drawLayer.layer.remove()
-        }
+        that.drawDelete()
         that.drawLayer = e
       })
+      // 打开弹窗添加的事件
       this.map.on('popupopen', e => {
-        // 给按钮添加点击事件
+        // 给弹窗的编辑、删除按钮添加点击事件
         document.getElementById('btnEdit').onclick = that.editInfo
         document.getElementById('btnDelete').onclick = that.delete
       })
       // 添加底图
       for (let i = 0; i <= 21; i++) {
-        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
-        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
         this.maps.push(esri.featureLayer(item).addTo(map))
       }
-      // 添加部件
+      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
+      // 添加部件,
+      // const partsLayer = this.baseConfig.partsLayer
       for (let i = 1; i <= 40; i++) {
         let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
         console.log(item)
@@ -235,55 +267,271 @@
       }
       // this.map.setZoom(this.baseConfig.zoom)
     },
-    // 点击新增部件
-    openAddMode() {
-      this.addMode = true
-      var icon = L.icon({
-        iconUrl: require('../../assets/icons/icon-position.png'),
-        iconSize: [35, 35],
-        iconAnchor: [17.5, 35]
-      })
-      this.map.on('click', e => {
-        // convert to GeoJSON
-        const feat = L.marker(e.latlng, { icon: icon })
-        feat.addTo(this.map)
-        console.log(feat)
-        this.$refs.editPartsDialog.initDialog(feat, 'create')
-      })
-    },
-    // 点击编辑
-    editInfo(ev) {
-      // 打开弹窗
-      console.log(this.currentItem)
-      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
-    },
-    // 点击删除
-    delete(code) {
-      if (this.currentLayer) {
-        debugger
-        this.currentLayer.deleteFeature(this.currentItem)
-        this.$messsage.success('删除成功')
+    // 初始化图标
+    initIcons() {
+      // 加载所有图标，1到5
+      for (let i = 1; i < 6; i++) {
+        const icon = L.icon({
+          iconUrl: require(`../../assets/global_images/point${i}.png`),
+          iconSize: [25, 25],
+          iconAnchor: [12.5, 25]
+        })
+        this.searchIconList.push(icon)
       }
     },
-    onCreateFeature(feature) {
-
+    // 点击新增部件按钮: 添加按钮并打开弹窗
+    openAddMode() {
+      if (this.addMode) { // 如果已经处于添加模式，则关闭，并清空页面上的点
+        this.addMode = false
+        this.onAbort('create')
+      } else {
+        // 开始添加点
+        this.addMode = true
+        const icon = L.icon({
+          iconUrl: require('../../assets/icons/icon-position.png'),
+          iconSize: [35, 35],
+          iconAnchor: [17.5, 35]
+        })
+        this.map.on('click', e => {
+          // 转换为GeoJSON
+          const feat = L.marker(e.latlng, { icon: icon })
+          feat.addTo(this.map)
+          this.currentItem = feat
+          console.log(feat)
+          this.$refs.editPartsDialog.initDialog(feat, 'create')
+          // TODO: 测试新增代码
+          // const feat = L.marker(e.latlng).toGeoJSON()
+          // feat.properties['OBJECTID'] = 13234
+          // feat.properties['POINT_X'] = 408913.539
+          // feat.properties['POINT_Y'] = 3071272.381
+          // feat.properties['大类编码'] = 1
+          // feat.properties['大类名称'] = 'test'
+          // feat.properties['小类编码'] = 1
+          // feat.properties['小类名称'] = 'test'
+          // console.log(feat)
+          // const layerUrl = `${this.baseUrl}${this.partsEditUrl}/35/`
+          // this.searchLayerByUrl(layerUrl)
+          // this.currentLayer.addFeature(feat, (err, response) => {
+          //   console.log(err, response)
+          //   debugger
+          // })
+        })
+      }
     },
-    // 放弃操作，dialogStatus弹窗类型
+    // 点击编辑： 打开编辑弹窗
+    editInfo(ev) {
+      // TODO: 临时测试，原样上传更新
+      this.currentLayer.updateFeature(this.currentItem, (err, response) => {
+        if (err) {
+        } else {
+          this.$message.success('编辑成功')
+        }
+      })
+      // 打开弹窗
+      // console.log(this.currentItem)
+      // this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击单个元素的删除，ok
+    delete(code) {
+      // 先确认操作，然后执行删除工作
+      if (this.currentLayer && this.currentItem) {
+        this.$confirm('确定删除该部件吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定
+          this.currentLayer.deleteFeature(this.currentItem.id, (err, response) => {
+            if (err) {
+              this.$message.error('删除失败')
+            } else {
+              this.$message.success('删除成功')
+              this.currentItem = null
+            }
+          })
+        })
+      }
+    },
+    // 框选区域批量删除,ok
+    batchDelete() {
+      if (this.featureCollectionLength > 0) {
+        this.$confirm(`确定要删除所框选的${this.featureCollectionLength}个部件吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定则遍历图层，删除features
+          for (const layer of this.featureCollection) {
+            const ids = layer.features.map(item => item.id)
+            if (layer.layer && layer.features) {
+              layer.layer.deleteFeatures(ids, (err, response) => {
+                if (err) {
+                  this.$message.error('批量删除部件失败')
+                } else {
+                  this.$message.success('批量删除部件成功')
+                  this.drawDelete()
+                  this.featureCollection = []
+                  this.featureCollectionLength = 0
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          // 放弃则清空选框和查询结果
+          this.drawDelete()
+          this.featureCollection = []
+          this.featureCollectionLength = 0
+        })
+      }
+    },
+    // 添加到feature图层
+    onAddFeature(feature) {
+      const feat = L.marker(feature.latlng).toGeoJSON()
+      // 读取属性
+      feat.properties['大类编码'] = feature.classCode
+      feat.properties['大类'] = feature.class
+      feat.properties['小类编码'] = feature.subClassCode
+      feat.properties['小类'] = feature.subClass
+      feat.properties['权属单位'] = feature.dept
+      feat.properties['地址'] = feature.address
+      console.log(feat)
+      // 图层地址拼接
+      const layerUrl = `${this.baseUrl}${this.partsEditUrl}/${feature.layer}/`
+      // 遍历找到当前图层
+      this.searchLayerByUrl(layerUrl)
+      // 添加部件
+      this.currentLayer.addFeature(feat, (err, response) => {
+        console.log(err, response)
+        debugger
+        if (err) {
+          console.log('添加失败')
+        } else {
+          // 关闭添加模式, 并关闭弹窗
+          this.addMode = true
+          this.$refs.editPartsDialog.closeDialog()
+        }
+      })
+    },
+    // 新增部件的，放弃操作，dialogStatus弹窗类型
     onAbort(dialogStatus) {
       if (dialogStatus === 'create') {
         // 清除地图上的锚点
-        this.map.removeLayer(this.currentItem)
+        if (this.currentItem) {
+          this.map.removeLayer(this.currentItem)
+        }
       }
     },
     // 编辑保存操作
     onUpdateFeature(feature) {
       if (this.currentLayer) {
-        debugger
-        this.currentLayer.updateFeature(feature, () => {
-          this.$messsage.success('编辑成功')
+        console.log('=========')
+        console.log(feature)
+        console.log('=========')
+        this.currentLayer.updateFeature(feature, (err, response) => {
+          if (err) {
+            this.$message.error('部件信息更新失败')
+          } else {
+            this.$message.success('部件信息更新成功')
+          }
         })
       }
     },
+    // 地图查询功能
+    search(keyword) {
+      console.log('search')
+      // this.cansearch = false
+      var that = this
+      const results = [] // 存放查询结果列表
+      // 遍历所有图层进行查询
+      const partsLength = this.parts.length // 全部部件图层数量
+      for (let i = 0; i < partsLength; i++) {
+        const part = this.parts[i]
+        var str = ['编码', '小类名称', '大类名称']
+        var query = esri.query({ url: part.options.url })
+        let queryString = '1=1' // 默认查询语句
+        if (keyword) {
+          // 拼接查询语句
+          queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ')
+          console.log(queryString)
+        } else {
+          this.$message.warning('请输入查询关键字')
+          return
+        }
+        query.where(queryString)
+        // query.within(this.bounds)
+        // 执行查询
+        query.run((error, featureCollection, response) => {
+          if (error) {
+            console.log(error)
+            return
+          }
+          const featuresLength = featureCollection.features.length
+          if (featuresLength > 0) {
+            // 遍历所有查询结果，放入results
+            for (const feature of featureCollection.features) {
+              results.push({
+                layer: part,
+                feature: feature
+              })
+            }
+          }
+          // 如果是最后一个图层
+          if (i === (partsLength - 1)) {
+            that.searchList = results
+            // that.drawIcon()
+          }
+        })
+      }
+    },
+    // 查询结果页面变化，重绘icon
+    changeSearchPage(data) {
+      console.log('changeSearchPage')
+      // 清除原来绘制的点
+      if (this.currentSearchMarkers.length > 0) {
+        for (const marker of this.currentSearchMarkers) {
+          this.map.removeLayer(marker)
+        }
+      }
+      // 赋予新的查询结果
+      const currentMarkesLength = data.length
+      for (let i = 0; i < currentMarkesLength; i++) {
+        const feature = data[i].feature
+        var icon = this.searchIconList[i]
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map)
+        this.currentSearchMarkers.push(item)
+      }
+      // 中心置为第一个点的中心
+      if (this.currentSearchMarkers[0]) {
+        this.clickSearchItem(data[0])
+      }
+    },
+    // 点击查询列表项，将位置放在中间
+    clickSearchItem(item) {
+      console.log('clickItem')
+      if (item) {
+        const feature = item.feature
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        let zoom = this.map.getZoom()
+        if (zoom < 19) {
+          zoom = 19
+        }
+        this.map.flyTo(latlng, zoom)
+      }
+    },
+    // 绘制查询结果
+    drawIcon() {
+      var that = this
+      for (var i = 0; i < that.markerlist.length; i++) {
+        that.map.removeLayer(that.markerlist[i])
+      }
+
+      that.markerlist = []
+      for (let num = 0; num < that.showlist.length; num++) {
+
+      }
+      this.cansearch = true
+    },
     // 根据url找到layer
     searchLayerByUrl(url) {
       const layer = this.parts.filter(item => item.options.url === url)[0]
@@ -299,37 +547,10 @@
   .leaflet_container{
     width: 100%;
     height: 85vh;
+    min-height: 596px;
+    /*max-height: 90vh;*/
     background-color: white;
   }
-  .draw-icon{
-    background-color: white;
-    width: 100px;height: 40px;
-    border: 1px solid #DCDFE6;
-    border-radius:4px;
-  }
-  .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;
-  }
-  .points-add-div{
-    position: absolute;
-    right:250px;
-    top:20px;
-    background-color: white;
-    border-radius: 3px;
-  }
 </style>
 <style rel="stylesheet/scss" lang="scss">
   .pop-window{
diff --git a/src/views/overview/components/editPartsDialog.vue b/src/views/overview/components/editPartsDialog.vue
index 1e2ebe8..4a463d0 100644
--- a/src/views/overview/components/editPartsDialog.vue
+++ b/src/views/overview/components/editPartsDialog.vue
@@ -4,22 +4,36 @@
  * @Date:
  -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" width="400px" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="400px" append-to-body>
     <el-form ref="dataForm" :rules="rules" :model="dataForm" size="small" label-position="right" label-width="80px">
       <!--<el-row :gutter="20">-->
       <!--<el-col :span="12">-->
       <el-form-item label="大类" prop="class">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.class" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" v-model="dataForm.class" placeholder="请选择" @change="bigClassChange">
+          <el-option
+            v-for="item in classList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="小类" prop="subClass">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" :disabled="subClassList.length==0" v-model="dataForm.subClass" placeholder="请选择" @change="subClassChange">
+          <el-option
+            v-for="item in subClassList"
+            :key="'sub'+item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="部件编码" prop="code">
-        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-input v-model.trim="dataForm.code" :disabled="dialogStatus=='update'" type="text" placeholder="必填"/>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
@@ -47,30 +61,40 @@
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: 'update', // 对话框类型：create,update
-      feature: null,
+      dialogStatus: 'create', // 对话框类型：create,update
+      feature: null, // 传入的feature
       textMap: {
         update: '编辑部件',
         create: '新增部件'
       }, // 标题
       dataForm: {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null,
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }, // 数据表单
       rules: {
         class: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
         subClass: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
-      }
+        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+        // dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        // address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+      },
+      totalClassList: [], // 大类小类综合列表
+      classList: [], // 大类列表
+      subClassList: [] // 小类列表
     }
   },
+  mounted() {
+    this.fetchClass()
+  },
   methods: {
     // 初始化对话框
     initDialog(feature, dialogStatus = 'create') {
@@ -88,37 +112,102 @@
           dept: properties['权属单位'] ? properties['权属单位'] : '', // 权属单位
           address: properties['详细地址'] ? properties['详细地址'] : '' // 详细地址
         }
+        debugger
       } else if (dialogStatus === 'create') {
+        // 获取点的坐标
+        this.dataForm.latlng = feature.getLatLng()
+        this.dataForm.x = feature.getLatLng().lat
+        this.dataForm.y = feature.getLatLng().lng
       }
     },
     // 保存
     save() {
       if (this.dialogStatus === 'update') {
-        this.feature.properties['权属单位'] = this.dataForm.dept
-        this.feature.properties['详细地址'] = this.dataForm.address
+        this.update()
+      } else if (this.dialogStatus === 'create') {
+        this.add()
       }
+    },
+    // 编辑完成
+    update() {
+      // this.feature.properties['权属单位'] = this.dataForm.dept
+      // this.feature.properties['详细地址'] = this.dataForm.address
       this.dialogFormVisible = false
       this.$emit('update', this.feature)
     },
+    // 新增
+    add() {
+      console.log(this.dataForm)
+      this.$emit('add', this.dataForm)
+    },
+    bigClassChange(val) {
+      // 更新大类code
+      const currentClass = this.classList.filter(item => item.name === val)[0]
+      this.dataForm.classCode = currentClass.code
+      this.dataForm.subClass = ''
+      this.dataForm.subClassCode = ''
+      this.fetchSubClass() // 获取子类列表
+    },
+    subClassChange(val) {
+      // 更新小类code
+      const currentClass = this.subClassList.filter(item => item.name === val)[0]
+      this.dataForm.subClassCode = currentClass.code
+      this.dataForm.layer = currentClass.layer
+    },
+    // 获取大类
+    fetchClass() {
+      this.totalClassList = this.baseConfig.partsLayer
+      // 大类列表
+      this.classList = this.totalClassList.map(item => {
+        return {
+          name: item.name,
+          code: item.code
+        }
+      })
+    },
+    // 获取小类
+    fetchSubClass() {
+      for (const item of this.totalClassList) {
+        if (item.code === this.dataForm.classCode) {
+          this.subClassList = item.children
+        }
+      }
+    },
     resetForm() {
       this.dataForm = {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null, // 经纬度
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }
     },
     cancel() {
+      this.$confirm('确定放弃编辑该部件吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 确定
+        this.dialogFormVisible = false
+        this.$emit('abort', this.dialogStatus)
+      })
+    },
+    closeDialog(){
       this.dialogFormVisible = false
-      this.$emit('abort', this.dialogStatus)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+.el-select{
+  width: 100%;
+}
 </style>
diff --git a/src/views/overview/components/layerChoose.vue b/src/views/overview/components/layerChoose.vue
index 486d65a..c42ae5a 100644
--- a/src/views/overview/components/layerChoose.vue
+++ b/src/views/overview/components/layerChoose.vue
@@ -76,10 +76,10 @@
   $width:200px;
   .layer-choose-div{
     width: $width;
-    position: absolute;
-    right:50px;
-    top:20px;
-    z-index:10000;
+    /*position: absolute;*/
+    /*right:50px;*/
+    /*top:20px;*/
+    /*z-index:10000;*/
     .right-card{
       height: auto;
       display: flex;
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
index d1b804a..bee0c97 100644
--- a/src/views/overview/components/searchItem.vue
+++ b/src/views/overview/components/searchItem.vue
@@ -4,15 +4,15 @@
  * @Date: 2021-03-08 09:48:26
  -->
 <template>
-  <div class="list-item">
+  <div class="list-item" @click="itemClick">
     <div class="list-item-left">
       <div class="item-count"> {{ index + 1 }}</div>
       <img src="@/assets/global_images/point.png" class="item-icon">
     </div>
     <div class="list-item-right">
-      <div class="list-item-right-row"><div>名称：</div><div :title="data.小类名称" class="content">{{ data.小类名称 }}</div></div>
-      <div class="list-item-right-row"><div>编码：</div><div :title="data.编码" class="content">{{ data.编码 }}</div></div>
-      <div class="list-item-right-row"><div>地址：</div><div :title="data.编码" class="content">{{ data.编码 }}</div></div>
+      <div class="list-item-right-row"><div>名称：</div><div :title="data.feature.properties.小类名称" class="content">{{ data.feature.properties.小类名称 }}</div></div>
+      <div class="list-item-right-row"><div>编码：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
+      <div class="list-item-right-row"><div>地址：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
     </div>
   </div>
 </template>
@@ -30,9 +30,14 @@
       required: true
     } // 数据
   },
+  // mounted() {
+  //   debugger
+  //   console.log(this.data.feature)
+  // },
   methods: {
     // 点击数据项
     itemClick() {
+      console.log('点击item')
       this.$emit('click', this.data)
     }
   }
@@ -87,4 +92,8 @@
     }
   }
 }
+  .list-item:hover{
+    cursor: pointer;
+    background-color: #f0f0f0;
+  }
 </style>

diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
index c4acb21..f6fd6af 100644
--- a/src/views/overview/compEdit.vue
+++ b/src/views/overview/compEdit.vue
@@ -7,16 +7,26 @@
   <app-container>
     <div id="map" class="leaflet_container"/>
     <!--查询显示组件-->
-    <search-list ref="searchList"/>
-    <div class="points-add-div">
-      <el-button icon="el-icon-plus" @click="openAddMode">
-        添加部件
-      </el-button>
-    </div>
+    <search-list
+      ref="searchList"
+      :total-data="searchList"
+      @search="search"
+      @change="changeSearchPage"
+      @item-click="clickSearchItem"/>
+    <!--工具箱-->
+    <tools-container>
+      <!-- 绘制工具-->
+      <draw-tool @click="drawBox"/>
+      <!--删除工具-->
+      <delete-tool :disabled="batchDeleteDisabled" @click="batchDelete"/>
+      <!--添加工具-->
+      <add-tool @click="openAddMode"/>
+      <!--图层选择工具-->
+      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    </tools-container>
     <!--图层选择组件-->
-    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
     <!--编辑部件弹窗-->
-    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+    <edit-parts-dialog ref="editPartsDialog" @add="onAddFeature" @update="onUpdateFeature" @abort="onAbort"/>
   </app-container>
 </template>
 <script>
@@ -27,33 +37,33 @@
 import SearchList from './components/searchList'
 import { mapGetters } from 'vuex'
 import EditPartsDialog from './components/editPartsDialog'
+import ToolsContainer from './components/toolsContainer'
+import DrawTool from './components/drawTool'
+import DeleteTool from './components/deleteTool'
+import AddTool from './components/addTool'
 var esri = require('esri-leaflet')
 export default {
   name: 'ComponentEdit',
-  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList },
   data() {
     return {
       loading: false, // 加载动画
       addMode: false, // 添加元素状态
       map: null, // 地图对象
       drawLayer: null, // 绘制图层（框选）
-      layers: [
-        { id: 0, name: '底图', type: 'map', domain: [] },
-        { id: 1, name: '网格', type: 'layer', domain: [] },
-        { id: 2, name: '商户', type: 'layer', domain: [] },
-        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
-        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
-        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
-        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
-        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
-        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
-        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
-      ],
+      layers: this.baseConfig.layers,
       selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
       maps: [], // 地图图层
       parts: [], // 部件图层
+      featureCollection: [], // 选中的图层和Feature
+      featureCollectionLength: 0, // 选中的feature个数
+      batchDeleteDisabled: true, // 批量删除是否不可点
       curretLayer: null, // 当前选中featureLayer
-      currentItem: null // 当前选中部件
+      currentItem: null, // 当前选中部件
+      searchList: [], // 全部查询结果
+      currentSearchMarkers: [], // 当前查询页面的markers
+      // searchLength: 0, // 全部查询结果长度
+      searchIconList: [] // 查询结果的Icon列表
     }
   },
   computed: {
@@ -65,6 +75,13 @@
       'partsEditUrl'
     ])
   },
+  watch: {
+    addMode(val) {
+      if (!val) { // 关闭新增模式是要关闭点击事件
+        this.map.off('click')
+      }
+    }
+  },
   // 销毁时移除监听
   destroyed() {
     window.removeEventListener('click', this.handleKeyup, true)
@@ -73,6 +90,7 @@
   // 加载完添加点击事件的监听
   mounted() {
     this.init()
+    this.initIcons()
     window.addEventListener('click', this.handleKeyup, true)
   },
   methods: {
@@ -88,28 +106,53 @@
         this.drawLayer.layer.remove()
       }
     },
-    // 绘制矩形
-    drawSquare() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
+    // 绘制选框
+    drawBox(type) {
+      this.drawDelete()
       this.$nextTick(() => {
-        this.map.pm.enableDraw('Rectangle', {
+        this.map.pm.enableDraw(type, {
           snappable: false
         })
+        // 绘制完成
+        this.map.on('pm:create', e => {
+          // 获取 选区的geojson
+          const geojson = e.layer.toGeoJSON()
+          // 执行查询，遍历所有部件图层
+          const results = [] // 存放查询结果
+          let partsCount = 0 // 部件数量
+          const partsLength = this.parts.length // 全部部件图层数量
+          for (let i = 0; i < partsLength; i++) {
+            const part = this.parts[i]
+            const query = esri.query({ url: part.options.url })
+            query.where('1=1')
+            query.within(geojson)
+            query.run((error, featureCollection, response) => {
+              if (error) {
+                console.log(error)
+                return
+              }
+              // 查询成功
+              if (featureCollection.features.length > 0) {
+                results.push({
+                  layer: part,
+                  url: part.options.url,
+                  features: featureCollection.features
+                })
+                partsCount += featureCollection.features.length
+              }
+              // 最后一个图层完毕， 查询结果放入featureCollection中
+              if (i === (partsLength - 1)) {
+                this.featureCollection = results
+                this.featureCollectionLength = partsCount
+                this.$message.info(`已选中部件: ${partsCount} 个`)
+                this.batchDeleteDisabled = false
+              }
+            })
+          }
+        })
       })
     },
-    // 绘制多边形
-    drawPolygon() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
-      this.$nextTick(() => {
-        this.map.pm.enableDraw('Polygon', {
-          snappable: false
-        })
-      })
-    },
+
     // 地图切换
     mapChange(val) {
       if (!val) { // 隐藏底图
@@ -148,18 +191,6 @@
         }
       }
     },
-    // 移除点
-    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()
-        }
-      })
-    },
     // 初始化地图
     init() {
       this.loading = false
@@ -176,24 +207,25 @@
       this.map = map // data挂载map
       window.map = map
       const that = this
+      // 打开绘制工具
       this.map.on('pm:create', e => {
-        if (that.drawLayer) {
-          that.drawLayer.layer.remove()
-        }
+        that.drawDelete()
         that.drawLayer = e
       })
+      // 打开弹窗添加的事件
       this.map.on('popupopen', e => {
-        // 给按钮添加点击事件
+        // 给弹窗的编辑、删除按钮添加点击事件
         document.getElementById('btnEdit').onclick = that.editInfo
         document.getElementById('btnDelete').onclick = that.delete
       })
       // 添加底图
       for (let i = 0; i <= 21; i++) {
-        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
-        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
         this.maps.push(esri.featureLayer(item).addTo(map))
       }
-      // 添加部件
+      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
+      // 添加部件,
+      // const partsLayer = this.baseConfig.partsLayer
       for (let i = 1; i <= 40; i++) {
         let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
         console.log(item)
@@ -235,55 +267,271 @@
       }
       // this.map.setZoom(this.baseConfig.zoom)
     },
-    // 点击新增部件
-    openAddMode() {
-      this.addMode = true
-      var icon = L.icon({
-        iconUrl: require('../../assets/icons/icon-position.png'),
-        iconSize: [35, 35],
-        iconAnchor: [17.5, 35]
-      })
-      this.map.on('click', e => {
-        // convert to GeoJSON
-        const feat = L.marker(e.latlng, { icon: icon })
-        feat.addTo(this.map)
-        console.log(feat)
-        this.$refs.editPartsDialog.initDialog(feat, 'create')
-      })
-    },
-    // 点击编辑
-    editInfo(ev) {
-      // 打开弹窗
-      console.log(this.currentItem)
-      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
-    },
-    // 点击删除
-    delete(code) {
-      if (this.currentLayer) {
-        debugger
-        this.currentLayer.deleteFeature(this.currentItem)
-        this.$messsage.success('删除成功')
+    // 初始化图标
+    initIcons() {
+      // 加载所有图标，1到5
+      for (let i = 1; i < 6; i++) {
+        const icon = L.icon({
+          iconUrl: require(`../../assets/global_images/point${i}.png`),
+          iconSize: [25, 25],
+          iconAnchor: [12.5, 25]
+        })
+        this.searchIconList.push(icon)
       }
     },
-    onCreateFeature(feature) {
-
+    // 点击新增部件按钮: 添加按钮并打开弹窗
+    openAddMode() {
+      if (this.addMode) { // 如果已经处于添加模式，则关闭，并清空页面上的点
+        this.addMode = false
+        this.onAbort('create')
+      } else {
+        // 开始添加点
+        this.addMode = true
+        const icon = L.icon({
+          iconUrl: require('../../assets/icons/icon-position.png'),
+          iconSize: [35, 35],
+          iconAnchor: [17.5, 35]
+        })
+        this.map.on('click', e => {
+          // 转换为GeoJSON
+          const feat = L.marker(e.latlng, { icon: icon })
+          feat.addTo(this.map)
+          this.currentItem = feat
+          console.log(feat)
+          this.$refs.editPartsDialog.initDialog(feat, 'create')
+          // TODO: 测试新增代码
+          // const feat = L.marker(e.latlng).toGeoJSON()
+          // feat.properties['OBJECTID'] = 13234
+          // feat.properties['POINT_X'] = 408913.539
+          // feat.properties['POINT_Y'] = 3071272.381
+          // feat.properties['大类编码'] = 1
+          // feat.properties['大类名称'] = 'test'
+          // feat.properties['小类编码'] = 1
+          // feat.properties['小类名称'] = 'test'
+          // console.log(feat)
+          // const layerUrl = `${this.baseUrl}${this.partsEditUrl}/35/`
+          // this.searchLayerByUrl(layerUrl)
+          // this.currentLayer.addFeature(feat, (err, response) => {
+          //   console.log(err, response)
+          //   debugger
+          // })
+        })
+      }
     },
-    // 放弃操作，dialogStatus弹窗类型
+    // 点击编辑： 打开编辑弹窗
+    editInfo(ev) {
+      // TODO: 临时测试，原样上传更新
+      this.currentLayer.updateFeature(this.currentItem, (err, response) => {
+        if (err) {
+        } else {
+          this.$message.success('编辑成功')
+        }
+      })
+      // 打开弹窗
+      // console.log(this.currentItem)
+      // this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击单个元素的删除，ok
+    delete(code) {
+      // 先确认操作，然后执行删除工作
+      if (this.currentLayer && this.currentItem) {
+        this.$confirm('确定删除该部件吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定
+          this.currentLayer.deleteFeature(this.currentItem.id, (err, response) => {
+            if (err) {
+              this.$message.error('删除失败')
+            } else {
+              this.$message.success('删除成功')
+              this.currentItem = null
+            }
+          })
+        })
+      }
+    },
+    // 框选区域批量删除,ok
+    batchDelete() {
+      if (this.featureCollectionLength > 0) {
+        this.$confirm(`确定要删除所框选的${this.featureCollectionLength}个部件吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定则遍历图层，删除features
+          for (const layer of this.featureCollection) {
+            const ids = layer.features.map(item => item.id)
+            if (layer.layer && layer.features) {
+              layer.layer.deleteFeatures(ids, (err, response) => {
+                if (err) {
+                  this.$message.error('批量删除部件失败')
+                } else {
+                  this.$message.success('批量删除部件成功')
+                  this.drawDelete()
+                  this.featureCollection = []
+                  this.featureCollectionLength = 0
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          // 放弃则清空选框和查询结果
+          this.drawDelete()
+          this.featureCollection = []
+          this.featureCollectionLength = 0
+        })
+      }
+    },
+    // 添加到feature图层
+    onAddFeature(feature) {
+      const feat = L.marker(feature.latlng).toGeoJSON()
+      // 读取属性
+      feat.properties['大类编码'] = feature.classCode
+      feat.properties['大类'] = feature.class
+      feat.properties['小类编码'] = feature.subClassCode
+      feat.properties['小类'] = feature.subClass
+      feat.properties['权属单位'] = feature.dept
+      feat.properties['地址'] = feature.address
+      console.log(feat)
+      // 图层地址拼接
+      const layerUrl = `${this.baseUrl}${this.partsEditUrl}/${feature.layer}/`
+      // 遍历找到当前图层
+      this.searchLayerByUrl(layerUrl)
+      // 添加部件
+      this.currentLayer.addFeature(feat, (err, response) => {
+        console.log(err, response)
+        debugger
+        if (err) {
+          console.log('添加失败')
+        } else {
+          // 关闭添加模式, 并关闭弹窗
+          this.addMode = true
+          this.$refs.editPartsDialog.closeDialog()
+        }
+      })
+    },
+    // 新增部件的，放弃操作，dialogStatus弹窗类型
     onAbort(dialogStatus) {
       if (dialogStatus === 'create') {
         // 清除地图上的锚点
-        this.map.removeLayer(this.currentItem)
+        if (this.currentItem) {
+          this.map.removeLayer(this.currentItem)
+        }
       }
     },
     // 编辑保存操作
     onUpdateFeature(feature) {
       if (this.currentLayer) {
-        debugger
-        this.currentLayer.updateFeature(feature, () => {
-          this.$messsage.success('编辑成功')
+        console.log('=========')
+        console.log(feature)
+        console.log('=========')
+        this.currentLayer.updateFeature(feature, (err, response) => {
+          if (err) {
+            this.$message.error('部件信息更新失败')
+          } else {
+            this.$message.success('部件信息更新成功')
+          }
         })
       }
     },
+    // 地图查询功能
+    search(keyword) {
+      console.log('search')
+      // this.cansearch = false
+      var that = this
+      const results = [] // 存放查询结果列表
+      // 遍历所有图层进行查询
+      const partsLength = this.parts.length // 全部部件图层数量
+      for (let i = 0; i < partsLength; i++) {
+        const part = this.parts[i]
+        var str = ['编码', '小类名称', '大类名称']
+        var query = esri.query({ url: part.options.url })
+        let queryString = '1=1' // 默认查询语句
+        if (keyword) {
+          // 拼接查询语句
+          queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ')
+          console.log(queryString)
+        } else {
+          this.$message.warning('请输入查询关键字')
+          return
+        }
+        query.where(queryString)
+        // query.within(this.bounds)
+        // 执行查询
+        query.run((error, featureCollection, response) => {
+          if (error) {
+            console.log(error)
+            return
+          }
+          const featuresLength = featureCollection.features.length
+          if (featuresLength > 0) {
+            // 遍历所有查询结果，放入results
+            for (const feature of featureCollection.features) {
+              results.push({
+                layer: part,
+                feature: feature
+              })
+            }
+          }
+          // 如果是最后一个图层
+          if (i === (partsLength - 1)) {
+            that.searchList = results
+            // that.drawIcon()
+          }
+        })
+      }
+    },
+    // 查询结果页面变化，重绘icon
+    changeSearchPage(data) {
+      console.log('changeSearchPage')
+      // 清除原来绘制的点
+      if (this.currentSearchMarkers.length > 0) {
+        for (const marker of this.currentSearchMarkers) {
+          this.map.removeLayer(marker)
+        }
+      }
+      // 赋予新的查询结果
+      const currentMarkesLength = data.length
+      for (let i = 0; i < currentMarkesLength; i++) {
+        const feature = data[i].feature
+        var icon = this.searchIconList[i]
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map)
+        this.currentSearchMarkers.push(item)
+      }
+      // 中心置为第一个点的中心
+      if (this.currentSearchMarkers[0]) {
+        this.clickSearchItem(data[0])
+      }
+    },
+    // 点击查询列表项，将位置放在中间
+    clickSearchItem(item) {
+      console.log('clickItem')
+      if (item) {
+        const feature = item.feature
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        let zoom = this.map.getZoom()
+        if (zoom < 19) {
+          zoom = 19
+        }
+        this.map.flyTo(latlng, zoom)
+      }
+    },
+    // 绘制查询结果
+    drawIcon() {
+      var that = this
+      for (var i = 0; i < that.markerlist.length; i++) {
+        that.map.removeLayer(that.markerlist[i])
+      }
+
+      that.markerlist = []
+      for (let num = 0; num < that.showlist.length; num++) {
+
+      }
+      this.cansearch = true
+    },
     // 根据url找到layer
     searchLayerByUrl(url) {
       const layer = this.parts.filter(item => item.options.url === url)[0]
@@ -299,37 +547,10 @@
   .leaflet_container{
     width: 100%;
     height: 85vh;
+    min-height: 596px;
+    /*max-height: 90vh;*/
     background-color: white;
   }
-  .draw-icon{
-    background-color: white;
-    width: 100px;height: 40px;
-    border: 1px solid #DCDFE6;
-    border-radius:4px;
-  }
-  .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;
-  }
-  .points-add-div{
-    position: absolute;
-    right:250px;
-    top:20px;
-    background-color: white;
-    border-radius: 3px;
-  }
 </style>
 <style rel="stylesheet/scss" lang="scss">
   .pop-window{
diff --git a/src/views/overview/components/editPartsDialog.vue b/src/views/overview/components/editPartsDialog.vue
index 1e2ebe8..4a463d0 100644
--- a/src/views/overview/components/editPartsDialog.vue
+++ b/src/views/overview/components/editPartsDialog.vue
@@ -4,22 +4,36 @@
  * @Date:
  -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" width="400px" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="400px" append-to-body>
     <el-form ref="dataForm" :rules="rules" :model="dataForm" size="small" label-position="right" label-width="80px">
       <!--<el-row :gutter="20">-->
       <!--<el-col :span="12">-->
       <el-form-item label="大类" prop="class">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.class" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" v-model="dataForm.class" placeholder="请选择" @change="bigClassChange">
+          <el-option
+            v-for="item in classList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="小类" prop="subClass">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" :disabled="subClassList.length==0" v-model="dataForm.subClass" placeholder="请选择" @change="subClassChange">
+          <el-option
+            v-for="item in subClassList"
+            :key="'sub'+item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="部件编码" prop="code">
-        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-input v-model.trim="dataForm.code" :disabled="dialogStatus=='update'" type="text" placeholder="必填"/>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
@@ -47,30 +61,40 @@
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: 'update', // 对话框类型：create,update
-      feature: null,
+      dialogStatus: 'create', // 对话框类型：create,update
+      feature: null, // 传入的feature
       textMap: {
         update: '编辑部件',
         create: '新增部件'
       }, // 标题
       dataForm: {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null,
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }, // 数据表单
       rules: {
         class: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
         subClass: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
-      }
+        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+        // dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        // address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+      },
+      totalClassList: [], // 大类小类综合列表
+      classList: [], // 大类列表
+      subClassList: [] // 小类列表
     }
   },
+  mounted() {
+    this.fetchClass()
+  },
   methods: {
     // 初始化对话框
     initDialog(feature, dialogStatus = 'create') {
@@ -88,37 +112,102 @@
           dept: properties['权属单位'] ? properties['权属单位'] : '', // 权属单位
           address: properties['详细地址'] ? properties['详细地址'] : '' // 详细地址
         }
+        debugger
       } else if (dialogStatus === 'create') {
+        // 获取点的坐标
+        this.dataForm.latlng = feature.getLatLng()
+        this.dataForm.x = feature.getLatLng().lat
+        this.dataForm.y = feature.getLatLng().lng
       }
     },
     // 保存
     save() {
       if (this.dialogStatus === 'update') {
-        this.feature.properties['权属单位'] = this.dataForm.dept
-        this.feature.properties['详细地址'] = this.dataForm.address
+        this.update()
+      } else if (this.dialogStatus === 'create') {
+        this.add()
       }
+    },
+    // 编辑完成
+    update() {
+      // this.feature.properties['权属单位'] = this.dataForm.dept
+      // this.feature.properties['详细地址'] = this.dataForm.address
       this.dialogFormVisible = false
       this.$emit('update', this.feature)
     },
+    // 新增
+    add() {
+      console.log(this.dataForm)
+      this.$emit('add', this.dataForm)
+    },
+    bigClassChange(val) {
+      // 更新大类code
+      const currentClass = this.classList.filter(item => item.name === val)[0]
+      this.dataForm.classCode = currentClass.code
+      this.dataForm.subClass = ''
+      this.dataForm.subClassCode = ''
+      this.fetchSubClass() // 获取子类列表
+    },
+    subClassChange(val) {
+      // 更新小类code
+      const currentClass = this.subClassList.filter(item => item.name === val)[0]
+      this.dataForm.subClassCode = currentClass.code
+      this.dataForm.layer = currentClass.layer
+    },
+    // 获取大类
+    fetchClass() {
+      this.totalClassList = this.baseConfig.partsLayer
+      // 大类列表
+      this.classList = this.totalClassList.map(item => {
+        return {
+          name: item.name,
+          code: item.code
+        }
+      })
+    },
+    // 获取小类
+    fetchSubClass() {
+      for (const item of this.totalClassList) {
+        if (item.code === this.dataForm.classCode) {
+          this.subClassList = item.children
+        }
+      }
+    },
     resetForm() {
       this.dataForm = {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null, // 经纬度
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }
     },
     cancel() {
+      this.$confirm('确定放弃编辑该部件吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 确定
+        this.dialogFormVisible = false
+        this.$emit('abort', this.dialogStatus)
+      })
+    },
+    closeDialog(){
       this.dialogFormVisible = false
-      this.$emit('abort', this.dialogStatus)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+.el-select{
+  width: 100%;
+}
 </style>
diff --git a/src/views/overview/components/layerChoose.vue b/src/views/overview/components/layerChoose.vue
index 486d65a..c42ae5a 100644
--- a/src/views/overview/components/layerChoose.vue
+++ b/src/views/overview/components/layerChoose.vue
@@ -76,10 +76,10 @@
   $width:200px;
   .layer-choose-div{
     width: $width;
-    position: absolute;
-    right:50px;
-    top:20px;
-    z-index:10000;
+    /*position: absolute;*/
+    /*right:50px;*/
+    /*top:20px;*/
+    /*z-index:10000;*/
     .right-card{
       height: auto;
       display: flex;
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
index d1b804a..bee0c97 100644
--- a/src/views/overview/components/searchItem.vue
+++ b/src/views/overview/components/searchItem.vue
@@ -4,15 +4,15 @@
  * @Date: 2021-03-08 09:48:26
  -->
 <template>
-  <div class="list-item">
+  <div class="list-item" @click="itemClick">
     <div class="list-item-left">
       <div class="item-count"> {{ index + 1 }}</div>
       <img src="@/assets/global_images/point.png" class="item-icon">
     </div>
     <div class="list-item-right">
-      <div class="list-item-right-row"><div>名称：</div><div :title="data.小类名称" class="content">{{ data.小类名称 }}</div></div>
-      <div class="list-item-right-row"><div>编码：</div><div :title="data.编码" class="content">{{ data.编码 }}</div></div>
-      <div class="list-item-right-row"><div>地址：</div><div :title="data.编码" class="content">{{ data.编码 }}</div></div>
+      <div class="list-item-right-row"><div>名称：</div><div :title="data.feature.properties.小类名称" class="content">{{ data.feature.properties.小类名称 }}</div></div>
+      <div class="list-item-right-row"><div>编码：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
+      <div class="list-item-right-row"><div>地址：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
     </div>
   </div>
 </template>
@@ -30,9 +30,14 @@
       required: true
     } // 数据
   },
+  // mounted() {
+  //   debugger
+  //   console.log(this.data.feature)
+  // },
   methods: {
     // 点击数据项
     itemClick() {
+      console.log('点击item')
       this.$emit('click', this.data)
     }
   }
@@ -87,4 +92,8 @@
     }
   }
 }
+  .list-item:hover{
+    cursor: pointer;
+    background-color: #f0f0f0;
+  }
 </style>
diff --git a/src/views/overview/components/searchList.vue b/src/views/overview/components/searchList.vue
index 62cb72b..39bfa16 100644
--- a/src/views/overview/components/searchList.vue
+++ b/src/views/overview/components/searchList.vue
@@ -17,12 +17,12 @@
     <!--查询列表-->
     <el-collapse-transition>
       <div v-show="dataShow&&data.length>0" class="table">
-        <search-item v-for="(item,index) of data" :key="item.编码" :data="item" :index="index"/>
+        <search-item v-for="(item,index) of data" :key="item.编码" :data="item" :index="index" @click="itemClick(item)"/>
         <el-pagination
           v-show="totalData.length>pageSize"
           :current-page="offset"
           :page-size="pageSize"
-          :total="totalData.length.length"
+          :total="totalData.length"
           align="center"
           layout="prev, pager, next"
           @current-change="handleCurrentChange"/>
@@ -37,19 +37,24 @@
   name: 'SearchList',
   components: { SearchItem },
   props: {
-
+    totalData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    } // 查询结果
   },
   data() {
     return {
       keyword: '', // 关键字，查询条件
-      totalData: [
-        { '编码': '1111111', '小类名称': '垃圾桶大范围冯绍峰威锋网发范德萨范德萨发二维费' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' }
-      ], // 全部数据
+      // totalData: [
+      //   { '编码': '1111111', '小类名称': '垃圾桶大范围冯绍峰威锋网发范德萨范德萨发二维费' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' }
+      // ], // 全部数据
       data: [], // 要展示的查询结果
       searchCountShow: false, // 是否显示统计数
       dataShow: false, // 是否显示列表详情
@@ -57,7 +62,20 @@
       pageSize: 5 // 查询结果列表页容量
     }
   },
+  computed: {
+    // data() { // 全部数据的页码数
+    //   const startIndex = (this.offset - 1) * this.pageSize
+    //   const data = this.totalData.slice(startIndex, startIndex + this.pageSize)
+    //   return data
+    // }
+  },
   watch: {
+    // 查询结果有变时，触发
+    totalData(newval, oldval) {
+      const startIndex = (this.offset - 1) * this.pageSize
+      this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
+      this.$emit('change', this.data)
+    },
     keyword(newval, oldval) {
       if (newval.length === 0) {
         this.searchCountShow = false
@@ -68,19 +86,23 @@
   methods: {
     search() {
       this.offset = 1
-      const startIndex = (this.offset - 1) * this.pageSize
-      this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
       this.searchCountShow = true
       this.dataShow = true
+      this.$emit('search', this.keyword)
     },
     hideSearch() {
       // this.searchCountShow = false
       this.dataShow = false
     },
+    // 页码发生变化时触发
     handleCurrentChange(val) {
       this.offset = val
       const startIndex = (this.offset - 1) * this.pageSize
       this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
+      this.$emit('change', this.data)
+    },
+    itemClick(item) {
+      this.$emit('item-click', item)
     }
   }
 }

diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
index c4acb21..f6fd6af 100644
--- a/src/views/overview/compEdit.vue
+++ b/src/views/overview/compEdit.vue
@@ -7,16 +7,26 @@
   <app-container>
     <div id="map" class="leaflet_container"/>
     <!--查询显示组件-->
-    <search-list ref="searchList"/>
-    <div class="points-add-div">
-      <el-button icon="el-icon-plus" @click="openAddMode">
-        添加部件
-      </el-button>
-    </div>
+    <search-list
+      ref="searchList"
+      :total-data="searchList"
+      @search="search"
+      @change="changeSearchPage"
+      @item-click="clickSearchItem"/>
+    <!--工具箱-->
+    <tools-container>
+      <!-- 绘制工具-->
+      <draw-tool @click="drawBox"/>
+      <!--删除工具-->
+      <delete-tool :disabled="batchDeleteDisabled" @click="batchDelete"/>
+      <!--添加工具-->
+      <add-tool @click="openAddMode"/>
+      <!--图层选择工具-->
+      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    </tools-container>
     <!--图层选择组件-->
-    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
     <!--编辑部件弹窗-->
-    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+    <edit-parts-dialog ref="editPartsDialog" @add="onAddFeature" @update="onUpdateFeature" @abort="onAbort"/>
   </app-container>
 </template>
 <script>
@@ -27,33 +37,33 @@
 import SearchList from './components/searchList'
 import { mapGetters } from 'vuex'
 import EditPartsDialog from './components/editPartsDialog'
+import ToolsContainer from './components/toolsContainer'
+import DrawTool from './components/drawTool'
+import DeleteTool from './components/deleteTool'
+import AddTool from './components/addTool'
 var esri = require('esri-leaflet')
 export default {
   name: 'ComponentEdit',
-  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList },
   data() {
     return {
       loading: false, // 加载动画
       addMode: false, // 添加元素状态
       map: null, // 地图对象
       drawLayer: null, // 绘制图层（框选）
-      layers: [
-        { id: 0, name: '底图', type: 'map', domain: [] },
-        { id: 1, name: '网格', type: 'layer', domain: [] },
-        { id: 2, name: '商户', type: 'layer', domain: [] },
-        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
-        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
-        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
-        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
-        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
-        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
-        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
-      ],
+      layers: this.baseConfig.layers,
       selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
       maps: [], // 地图图层
       parts: [], // 部件图层
+      featureCollection: [], // 选中的图层和Feature
+      featureCollectionLength: 0, // 选中的feature个数
+      batchDeleteDisabled: true, // 批量删除是否不可点
       curretLayer: null, // 当前选中featureLayer
-      currentItem: null // 当前选中部件
+      currentItem: null, // 当前选中部件
+      searchList: [], // 全部查询结果
+      currentSearchMarkers: [], // 当前查询页面的markers
+      // searchLength: 0, // 全部查询结果长度
+      searchIconList: [] // 查询结果的Icon列表
     }
   },
   computed: {
@@ -65,6 +75,13 @@
       'partsEditUrl'
     ])
   },
+  watch: {
+    addMode(val) {
+      if (!val) { // 关闭新增模式是要关闭点击事件
+        this.map.off('click')
+      }
+    }
+  },
   // 销毁时移除监听
   destroyed() {
     window.removeEventListener('click', this.handleKeyup, true)
@@ -73,6 +90,7 @@
   // 加载完添加点击事件的监听
   mounted() {
     this.init()
+    this.initIcons()
     window.addEventListener('click', this.handleKeyup, true)
   },
   methods: {
@@ -88,28 +106,53 @@
         this.drawLayer.layer.remove()
       }
     },
-    // 绘制矩形
-    drawSquare() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
+    // 绘制选框
+    drawBox(type) {
+      this.drawDelete()
       this.$nextTick(() => {
-        this.map.pm.enableDraw('Rectangle', {
+        this.map.pm.enableDraw(type, {
           snappable: false
         })
+        // 绘制完成
+        this.map.on('pm:create', e => {
+          // 获取 选区的geojson
+          const geojson = e.layer.toGeoJSON()
+          // 执行查询，遍历所有部件图层
+          const results = [] // 存放查询结果
+          let partsCount = 0 // 部件数量
+          const partsLength = this.parts.length // 全部部件图层数量
+          for (let i = 0; i < partsLength; i++) {
+            const part = this.parts[i]
+            const query = esri.query({ url: part.options.url })
+            query.where('1=1')
+            query.within(geojson)
+            query.run((error, featureCollection, response) => {
+              if (error) {
+                console.log(error)
+                return
+              }
+              // 查询成功
+              if (featureCollection.features.length > 0) {
+                results.push({
+                  layer: part,
+                  url: part.options.url,
+                  features: featureCollection.features
+                })
+                partsCount += featureCollection.features.length
+              }
+              // 最后一个图层完毕， 查询结果放入featureCollection中
+              if (i === (partsLength - 1)) {
+                this.featureCollection = results
+                this.featureCollectionLength = partsCount
+                this.$message.info(`已选中部件: ${partsCount} 个`)
+                this.batchDeleteDisabled = false
+              }
+            })
+          }
+        })
       })
     },
-    // 绘制多边形
-    drawPolygon() {
-      if (this.drawLayer) {
-        this.drawLayer.layer.remove()
-      }
-      this.$nextTick(() => {
-        this.map.pm.enableDraw('Polygon', {
-          snappable: false
-        })
-      })
-    },
+
     // 地图切换
     mapChange(val) {
       if (!val) { // 隐藏底图
@@ -148,18 +191,6 @@
         }
       }
     },
-    // 移除点
-    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()
-        }
-      })
-    },
     // 初始化地图
     init() {
       this.loading = false
@@ -176,24 +207,25 @@
       this.map = map // data挂载map
       window.map = map
       const that = this
+      // 打开绘制工具
       this.map.on('pm:create', e => {
-        if (that.drawLayer) {
-          that.drawLayer.layer.remove()
-        }
+        that.drawDelete()
         that.drawLayer = e
       })
+      // 打开弹窗添加的事件
       this.map.on('popupopen', e => {
-        // 给按钮添加点击事件
+        // 给弹窗的编辑、删除按钮添加点击事件
         document.getElementById('btnEdit').onclick = that.editInfo
         document.getElementById('btnDelete').onclick = that.delete
       })
       // 添加底图
       for (let i = 0; i <= 21; i++) {
-        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
-        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
         this.maps.push(esri.featureLayer(item).addTo(map))
       }
-      // 添加部件
+      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
+      // 添加部件,
+      // const partsLayer = this.baseConfig.partsLayer
       for (let i = 1; i <= 40; i++) {
         let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
         console.log(item)
@@ -235,55 +267,271 @@
       }
       // this.map.setZoom(this.baseConfig.zoom)
     },
-    // 点击新增部件
-    openAddMode() {
-      this.addMode = true
-      var icon = L.icon({
-        iconUrl: require('../../assets/icons/icon-position.png'),
-        iconSize: [35, 35],
-        iconAnchor: [17.5, 35]
-      })
-      this.map.on('click', e => {
-        // convert to GeoJSON
-        const feat = L.marker(e.latlng, { icon: icon })
-        feat.addTo(this.map)
-        console.log(feat)
-        this.$refs.editPartsDialog.initDialog(feat, 'create')
-      })
-    },
-    // 点击编辑
-    editInfo(ev) {
-      // 打开弹窗
-      console.log(this.currentItem)
-      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
-    },
-    // 点击删除
-    delete(code) {
-      if (this.currentLayer) {
-        debugger
-        this.currentLayer.deleteFeature(this.currentItem)
-        this.$messsage.success('删除成功')
+    // 初始化图标
+    initIcons() {
+      // 加载所有图标，1到5
+      for (let i = 1; i < 6; i++) {
+        const icon = L.icon({
+          iconUrl: require(`../../assets/global_images/point${i}.png`),
+          iconSize: [25, 25],
+          iconAnchor: [12.5, 25]
+        })
+        this.searchIconList.push(icon)
       }
     },
-    onCreateFeature(feature) {
-
+    // 点击新增部件按钮: 添加按钮并打开弹窗
+    openAddMode() {
+      if (this.addMode) { // 如果已经处于添加模式，则关闭，并清空页面上的点
+        this.addMode = false
+        this.onAbort('create')
+      } else {
+        // 开始添加点
+        this.addMode = true
+        const icon = L.icon({
+          iconUrl: require('../../assets/icons/icon-position.png'),
+          iconSize: [35, 35],
+          iconAnchor: [17.5, 35]
+        })
+        this.map.on('click', e => {
+          // 转换为GeoJSON
+          const feat = L.marker(e.latlng, { icon: icon })
+          feat.addTo(this.map)
+          this.currentItem = feat
+          console.log(feat)
+          this.$refs.editPartsDialog.initDialog(feat, 'create')
+          // TODO: 测试新增代码
+          // const feat = L.marker(e.latlng).toGeoJSON()
+          // feat.properties['OBJECTID'] = 13234
+          // feat.properties['POINT_X'] = 408913.539
+          // feat.properties['POINT_Y'] = 3071272.381
+          // feat.properties['大类编码'] = 1
+          // feat.properties['大类名称'] = 'test'
+          // feat.properties['小类编码'] = 1
+          // feat.properties['小类名称'] = 'test'
+          // console.log(feat)
+          // const layerUrl = `${this.baseUrl}${this.partsEditUrl}/35/`
+          // this.searchLayerByUrl(layerUrl)
+          // this.currentLayer.addFeature(feat, (err, response) => {
+          //   console.log(err, response)
+          //   debugger
+          // })
+        })
+      }
     },
-    // 放弃操作，dialogStatus弹窗类型
+    // 点击编辑： 打开编辑弹窗
+    editInfo(ev) {
+      // TODO: 临时测试，原样上传更新
+      this.currentLayer.updateFeature(this.currentItem, (err, response) => {
+        if (err) {
+        } else {
+          this.$message.success('编辑成功')
+        }
+      })
+      // 打开弹窗
+      // console.log(this.currentItem)
+      // this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击单个元素的删除，ok
+    delete(code) {
+      // 先确认操作，然后执行删除工作
+      if (this.currentLayer && this.currentItem) {
+        this.$confirm('确定删除该部件吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定
+          this.currentLayer.deleteFeature(this.currentItem.id, (err, response) => {
+            if (err) {
+              this.$message.error('删除失败')
+            } else {
+              this.$message.success('删除成功')
+              this.currentItem = null
+            }
+          })
+        })
+      }
+    },
+    // 框选区域批量删除,ok
+    batchDelete() {
+      if (this.featureCollectionLength > 0) {
+        this.$confirm(`确定要删除所框选的${this.featureCollectionLength}个部件吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定则遍历图层，删除features
+          for (const layer of this.featureCollection) {
+            const ids = layer.features.map(item => item.id)
+            if (layer.layer && layer.features) {
+              layer.layer.deleteFeatures(ids, (err, response) => {
+                if (err) {
+                  this.$message.error('批量删除部件失败')
+                } else {
+                  this.$message.success('批量删除部件成功')
+                  this.drawDelete()
+                  this.featureCollection = []
+                  this.featureCollectionLength = 0
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          // 放弃则清空选框和查询结果
+          this.drawDelete()
+          this.featureCollection = []
+          this.featureCollectionLength = 0
+        })
+      }
+    },
+    // 添加到feature图层
+    onAddFeature(feature) {
+      const feat = L.marker(feature.latlng).toGeoJSON()
+      // 读取属性
+      feat.properties['大类编码'] = feature.classCode
+      feat.properties['大类'] = feature.class
+      feat.properties['小类编码'] = feature.subClassCode
+      feat.properties['小类'] = feature.subClass
+      feat.properties['权属单位'] = feature.dept
+      feat.properties['地址'] = feature.address
+      console.log(feat)
+      // 图层地址拼接
+      const layerUrl = `${this.baseUrl}${this.partsEditUrl}/${feature.layer}/`
+      // 遍历找到当前图层
+      this.searchLayerByUrl(layerUrl)
+      // 添加部件
+      this.currentLayer.addFeature(feat, (err, response) => {
+        console.log(err, response)
+        debugger
+        if (err) {
+          console.log('添加失败')
+        } else {
+          // 关闭添加模式, 并关闭弹窗
+          this.addMode = true
+          this.$refs.editPartsDialog.closeDialog()
+        }
+      })
+    },
+    // 新增部件的，放弃操作，dialogStatus弹窗类型
     onAbort(dialogStatus) {
       if (dialogStatus === 'create') {
         // 清除地图上的锚点
-        this.map.removeLayer(this.currentItem)
+        if (this.currentItem) {
+          this.map.removeLayer(this.currentItem)
+        }
       }
     },
     // 编辑保存操作
     onUpdateFeature(feature) {
       if (this.currentLayer) {
-        debugger
-        this.currentLayer.updateFeature(feature, () => {
-          this.$messsage.success('编辑成功')
+        console.log('=========')
+        console.log(feature)
+        console.log('=========')
+        this.currentLayer.updateFeature(feature, (err, response) => {
+          if (err) {
+            this.$message.error('部件信息更新失败')
+          } else {
+            this.$message.success('部件信息更新成功')
+          }
         })
       }
     },
+    // 地图查询功能
+    search(keyword) {
+      console.log('search')
+      // this.cansearch = false
+      var that = this
+      const results = [] // 存放查询结果列表
+      // 遍历所有图层进行查询
+      const partsLength = this.parts.length // 全部部件图层数量
+      for (let i = 0; i < partsLength; i++) {
+        const part = this.parts[i]
+        var str = ['编码', '小类名称', '大类名称']
+        var query = esri.query({ url: part.options.url })
+        let queryString = '1=1' // 默认查询语句
+        if (keyword) {
+          // 拼接查询语句
+          queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ')
+          console.log(queryString)
+        } else {
+          this.$message.warning('请输入查询关键字')
+          return
+        }
+        query.where(queryString)
+        // query.within(this.bounds)
+        // 执行查询
+        query.run((error, featureCollection, response) => {
+          if (error) {
+            console.log(error)
+            return
+          }
+          const featuresLength = featureCollection.features.length
+          if (featuresLength > 0) {
+            // 遍历所有查询结果，放入results
+            for (const feature of featureCollection.features) {
+              results.push({
+                layer: part,
+                feature: feature
+              })
+            }
+          }
+          // 如果是最后一个图层
+          if (i === (partsLength - 1)) {
+            that.searchList = results
+            // that.drawIcon()
+          }
+        })
+      }
+    },
+    // 查询结果页面变化，重绘icon
+    changeSearchPage(data) {
+      console.log('changeSearchPage')
+      // 清除原来绘制的点
+      if (this.currentSearchMarkers.length > 0) {
+        for (const marker of this.currentSearchMarkers) {
+          this.map.removeLayer(marker)
+        }
+      }
+      // 赋予新的查询结果
+      const currentMarkesLength = data.length
+      for (let i = 0; i < currentMarkesLength; i++) {
+        const feature = data[i].feature
+        var icon = this.searchIconList[i]
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map)
+        this.currentSearchMarkers.push(item)
+      }
+      // 中心置为第一个点的中心
+      if (this.currentSearchMarkers[0]) {
+        this.clickSearchItem(data[0])
+      }
+    },
+    // 点击查询列表项，将位置放在中间
+    clickSearchItem(item) {
+      console.log('clickItem')
+      if (item) {
+        const feature = item.feature
+        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
+        let zoom = this.map.getZoom()
+        if (zoom < 19) {
+          zoom = 19
+        }
+        this.map.flyTo(latlng, zoom)
+      }
+    },
+    // 绘制查询结果
+    drawIcon() {
+      var that = this
+      for (var i = 0; i < that.markerlist.length; i++) {
+        that.map.removeLayer(that.markerlist[i])
+      }
+
+      that.markerlist = []
+      for (let num = 0; num < that.showlist.length; num++) {
+
+      }
+      this.cansearch = true
+    },
     // 根据url找到layer
     searchLayerByUrl(url) {
       const layer = this.parts.filter(item => item.options.url === url)[0]
@@ -299,37 +547,10 @@
   .leaflet_container{
     width: 100%;
     height: 85vh;
+    min-height: 596px;
+    /*max-height: 90vh;*/
     background-color: white;
   }
-  .draw-icon{
-    background-color: white;
-    width: 100px;height: 40px;
-    border: 1px solid #DCDFE6;
-    border-radius:4px;
-  }
-  .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;
-  }
-  .points-add-div{
-    position: absolute;
-    right:250px;
-    top:20px;
-    background-color: white;
-    border-radius: 3px;
-  }
 </style>
 <style rel="stylesheet/scss" lang="scss">
   .pop-window{
diff --git a/src/views/overview/components/editPartsDialog.vue b/src/views/overview/components/editPartsDialog.vue
index 1e2ebe8..4a463d0 100644
--- a/src/views/overview/components/editPartsDialog.vue
+++ b/src/views/overview/components/editPartsDialog.vue
@@ -4,22 +4,36 @@
  * @Date:
  -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" width="400px" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="400px" append-to-body>
     <el-form ref="dataForm" :rules="rules" :model="dataForm" size="small" label-position="right" label-width="80px">
       <!--<el-row :gutter="20">-->
       <!--<el-col :span="12">-->
       <el-form-item label="大类" prop="class">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.class" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" v-model="dataForm.class" placeholder="请选择" @change="bigClassChange">
+          <el-option
+            v-for="item in classList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="小类" prop="subClass">
         <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-select v-show="dialogStatus=='create'" :disabled="subClassList.length==0" v-model="dataForm.subClass" placeholder="请选择" @change="subClassChange">
+          <el-option
+            v-for="item in subClassList"
+            :key="'sub'+item.code"
+            :label="item.name"
+            :value="item.name"/>
+        </el-select>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
       <el-form-item label="部件编码" prop="code">
-        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+        <el-input v-model.trim="dataForm.code" :disabled="dialogStatus=='update'" type="text" placeholder="必填"/>
       </el-form-item>
       <!--</el-col>-->
       <!--<el-col :span="12">-->
@@ -47,30 +61,40 @@
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: 'update', // 对话框类型：create,update
-      feature: null,
+      dialogStatus: 'create', // 对话框类型：create,update
+      feature: null, // 传入的feature
       textMap: {
         update: '编辑部件',
         create: '新增部件'
       }, // 标题
       dataForm: {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null,
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }, // 数据表单
       rules: {
         class: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
         subClass: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
-        address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
-      }
+        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+        // dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        // address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+      },
+      totalClassList: [], // 大类小类综合列表
+      classList: [], // 大类列表
+      subClassList: [] // 小类列表
     }
   },
+  mounted() {
+    this.fetchClass()
+  },
   methods: {
     // 初始化对话框
     initDialog(feature, dialogStatus = 'create') {
@@ -88,37 +112,102 @@
           dept: properties['权属单位'] ? properties['权属单位'] : '', // 权属单位
           address: properties['详细地址'] ? properties['详细地址'] : '' // 详细地址
         }
+        debugger
       } else if (dialogStatus === 'create') {
+        // 获取点的坐标
+        this.dataForm.latlng = feature.getLatLng()
+        this.dataForm.x = feature.getLatLng().lat
+        this.dataForm.y = feature.getLatLng().lng
       }
     },
     // 保存
     save() {
       if (this.dialogStatus === 'update') {
-        this.feature.properties['权属单位'] = this.dataForm.dept
-        this.feature.properties['详细地址'] = this.dataForm.address
+        this.update()
+      } else if (this.dialogStatus === 'create') {
+        this.add()
       }
+    },
+    // 编辑完成
+    update() {
+      // this.feature.properties['权属单位'] = this.dataForm.dept
+      // this.feature.properties['详细地址'] = this.dataForm.address
       this.dialogFormVisible = false
       this.$emit('update', this.feature)
     },
+    // 新增
+    add() {
+      console.log(this.dataForm)
+      this.$emit('add', this.dataForm)
+    },
+    bigClassChange(val) {
+      // 更新大类code
+      const currentClass = this.classList.filter(item => item.name === val)[0]
+      this.dataForm.classCode = currentClass.code
+      this.dataForm.subClass = ''
+      this.dataForm.subClassCode = ''
+      this.fetchSubClass() // 获取子类列表
+    },
+    subClassChange(val) {
+      // 更新小类code
+      const currentClass = this.subClassList.filter(item => item.name === val)[0]
+      this.dataForm.subClassCode = currentClass.code
+      this.dataForm.layer = currentClass.layer
+    },
+    // 获取大类
+    fetchClass() {
+      this.totalClassList = this.baseConfig.partsLayer
+      // 大类列表
+      this.classList = this.totalClassList.map(item => {
+        return {
+          name: item.name,
+          code: item.code
+        }
+      })
+    },
+    // 获取小类
+    fetchSubClass() {
+      for (const item of this.totalClassList) {
+        if (item.code === this.dataForm.classCode) {
+          this.subClassList = item.children
+        }
+      }
+    },
     resetForm() {
       this.dataForm = {
         class: '', // 大类
+        classCode: '', // 大类编码
         subClass: '', // 小类
+        subClassCode: '', // 小类编码
         code: '', // 部件编码
         dept: '', // 权属单位
         address: '', // 详细地址
-        x: '',
-        y: ''
+        latlng: null, // 经纬度
+        x: '', // x坐标
+        y: '', // y坐标
+        layer: 0 // 对应图层层级
       }
     },
     cancel() {
+      this.$confirm('确定放弃编辑该部件吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 确定
+        this.dialogFormVisible = false
+        this.$emit('abort', this.dialogStatus)
+      })
+    },
+    closeDialog(){
       this.dialogFormVisible = false
-      this.$emit('abort', this.dialogStatus)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+.el-select{
+  width: 100%;
+}
 </style>
diff --git a/src/views/overview/components/layerChoose.vue b/src/views/overview/components/layerChoose.vue
index 486d65a..c42ae5a 100644
--- a/src/views/overview/components/layerChoose.vue
+++ b/src/views/overview/components/layerChoose.vue
@@ -76,10 +76,10 @@
   $width:200px;
   .layer-choose-div{
     width: $width;
-    position: absolute;
-    right:50px;
-    top:20px;
-    z-index:10000;
+    /*position: absolute;*/
+    /*right:50px;*/
+    /*top:20px;*/
+    /*z-index:10000;*/
     .right-card{
       height: auto;
       display: flex;
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
index d1b804a..bee0c97 100644
--- a/src/views/overview/components/searchItem.vue
+++ b/src/views/overview/components/searchItem.vue
@@ -4,15 +4,15 @@
  * @Date: 2021-03-08 09:48:26
  -->
 <template>
-  <div class="list-item">
+  <div class="list-item" @click="itemClick">
     <div class="list-item-left">
       <div class="item-count"> {{ index + 1 }}</div>
       <img src="@/assets/global_images/point.png" class="item-icon">
     </div>
     <div class="list-item-right">
-      <div class="list-item-right-row"><div>名称：</div><div :title="data.小类名称" class="content">{{ data.小类名称 }}</div></div>
-      <div class="list-item-right-row"><div>编码：</div><div :title="data.编码" class="content">{{ data.编码 }}</div></div>
-      <div class="list-item-right-row"><div>地址：</div><div :title="data.编码" class="content">{{ data.编码 }}</div></div>
+      <div class="list-item-right-row"><div>名称：</div><div :title="data.feature.properties.小类名称" class="content">{{ data.feature.properties.小类名称 }}</div></div>
+      <div class="list-item-right-row"><div>编码：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
+      <div class="list-item-right-row"><div>地址：</div><div :title="data.feature.properties.编码" class="content">{{ data.feature.properties.编码 }}</div></div>
     </div>
   </div>
 </template>
@@ -30,9 +30,14 @@
       required: true
     } // 数据
   },
+  // mounted() {
+  //   debugger
+  //   console.log(this.data.feature)
+  // },
   methods: {
     // 点击数据项
     itemClick() {
+      console.log('点击item')
       this.$emit('click', this.data)
     }
   }
@@ -87,4 +92,8 @@
     }
   }
 }
+  .list-item:hover{
+    cursor: pointer;
+    background-color: #f0f0f0;
+  }
 </style>
diff --git a/src/views/overview/components/searchList.vue b/src/views/overview/components/searchList.vue
index 62cb72b..39bfa16 100644
--- a/src/views/overview/components/searchList.vue
+++ b/src/views/overview/components/searchList.vue
@@ -17,12 +17,12 @@
     <!--查询列表-->
     <el-collapse-transition>
       <div v-show="dataShow&&data.length>0" class="table">
-        <search-item v-for="(item,index) of data" :key="item.编码" :data="item" :index="index"/>
+        <search-item v-for="(item,index) of data" :key="item.编码" :data="item" :index="index" @click="itemClick(item)"/>
         <el-pagination
           v-show="totalData.length>pageSize"
           :current-page="offset"
           :page-size="pageSize"
-          :total="totalData.length.length"
+          :total="totalData.length"
           align="center"
           layout="prev, pager, next"
           @current-change="handleCurrentChange"/>
@@ -37,19 +37,24 @@
   name: 'SearchList',
   components: { SearchItem },
   props: {
-
+    totalData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    } // 查询结果
   },
   data() {
     return {
       keyword: '', // 关键字，查询条件
-      totalData: [
-        { '编码': '1111111', '小类名称': '垃圾桶大范围冯绍峰威锋网发范德萨范德萨发二维费' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' },
-        { '编码': '1111111', '小类名称': '垃圾桶' }
-      ], // 全部数据
+      // totalData: [
+      //   { '编码': '1111111', '小类名称': '垃圾桶大范围冯绍峰威锋网发范德萨范德萨发二维费' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' },
+      //   { '编码': '1111111', '小类名称': '垃圾桶' }
+      // ], // 全部数据
       data: [], // 要展示的查询结果
       searchCountShow: false, // 是否显示统计数
       dataShow: false, // 是否显示列表详情
@@ -57,7 +62,20 @@
       pageSize: 5 // 查询结果列表页容量
     }
   },
+  computed: {
+    // data() { // 全部数据的页码数
+    //   const startIndex = (this.offset - 1) * this.pageSize
+    //   const data = this.totalData.slice(startIndex, startIndex + this.pageSize)
+    //   return data
+    // }
+  },
   watch: {
+    // 查询结果有变时，触发
+    totalData(newval, oldval) {
+      const startIndex = (this.offset - 1) * this.pageSize
+      this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
+      this.$emit('change', this.data)
+    },
     keyword(newval, oldval) {
       if (newval.length === 0) {
         this.searchCountShow = false
@@ -68,19 +86,23 @@
   methods: {
     search() {
       this.offset = 1
-      const startIndex = (this.offset - 1) * this.pageSize
-      this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
       this.searchCountShow = true
       this.dataShow = true
+      this.$emit('search', this.keyword)
     },
     hideSearch() {
       // this.searchCountShow = false
       this.dataShow = false
     },
+    // 页码发生变化时触发
     handleCurrentChange(val) {
       this.offset = val
       const startIndex = (this.offset - 1) * this.pageSize
       this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
+      this.$emit('change', this.data)
+    },
+    itemClick(item) {
+      this.$emit('item-click', item)
     }
   }
 }
diff --git a/static/project.config.json b/static/project.config.json
index a2cede2..3b6c15d 100644
--- a/static/project.config.json
+++ b/static/project.config.json
@@ -7,5 +7,75 @@
   "mapUrl":"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",
   "labelUrl":"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",
   "center":[27.755, 116.08],
-  "zoom":15
+  "zoom":15,
+  "partsLayer":[
+    {
+      "code":"01",
+      "name":"公共设施",
+      "children":[
+        {"code": "01","name": "上水井盖","layer": 20},
+        {"code": "02","name": "污水井盖","layer": 24},
+        {"code": "03","name": "雨水井盖","layer": 20},
+        {"code": "04","name": "雨水篦子","layer": 20},
+        {"code": "05","name": "电力井盖","layer": 16},
+        {"code": "06","name": "路灯井盖","layer": 30},
+        {"code": "07","name": "通信井盖","layer": 19},
+        {"code": "08","name": "电视井盖","layer": 20},
+        {"code": "09","name": "网络井盖","layer": 20},
+        {"code": "10","name": "热力井盖","layer": 20},
+        {"code": "11","name": "燃气井盖","layer": 34},
+        {"code": "11","name": "公安井盖","layer": 6}
+      ]
+    },
+    {
+      "code": "02",
+      "name": "交通设施",
+      "children": [
+        {"code": "01","name": "停车场","layer": 23},
+        {"code": "10","name": "交通标志牌","layer": 13},
+        {"code": "16","name": "交通岗亭","layer": 15},
+        {"code": "17","name": "交通护栏","layer": 37},
+        {"code": "14","name": "交通信号灯","layer": 26},
+        {"code": "04","name": "公交站亭","layer": 39},
+        {"code": "12","name": "路名牌","layer": 12}
+      ]
+    },
+    {
+      "code": "03",
+      "name": "市容环境设施",
+      "children": [
+        {"code": "01","name": "公共厕所","layer": 41},
+        {"code": "05","name": "垃圾箱","layer": 28}
+      ]
+    },
+    {
+      "code": "04",
+      "name": "园林绿化设施",
+      "children": [
+        {"code": "06","name": "雕塑","layer": 40},
+        {"code": "10","name": "喷泉","layer": 33},
+        {"code": "05","name": "花架花钵","layer": 10},
+        {"code": "09","name": "绿地附属设施","layer": 32}
+      ]
+    },
+    {
+      "code": "05",
+      "name": "其他部件",
+      "children": [
+        {"code": "01","name": "人防工事","layer": 35}
+      ]
+    }
+  ],
+  "layers": [
+    { "id": 0, "name": "底图", "type": "map", "domain":  [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21] },
+    { "id": 1, "name": "网格", "type": "layer", "domain":  [] },
+    { "id": 2, "name": "商户", "type": "layer", "domain":  [] },
+    { "id": 3, "name": "视频监控点", "type": "layer", "domain":  [35] },
+    { "id": 4, "name": "路灯杆和灯箱", "type": "layer", "domain":  [1, 3, 4, 22, 25, 34] },
+    { "id": 5, "name": "雨水井盖", "type": "layer", "domain":  [14] },
+    { "id": 6, "name": "污水井盖", "type": "layer", "domain":  [37] },
+    { "id": 7, "name": "公共厕所", "type": "layer", "domain":  [12, 13] },
+    { "id": 8, "name": "垃圾箱", "type": "layer", "domain":  [24] },
+    { "id": 9, "name": "其他部件", "type": "layer", "domain":  [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
+  ]
 }