diff --git a/src/views/overview/components/layerChoose.vue b/src/views/overview/components/layerChoose.vue
new file mode 100644
index 0000000..486d65a
--- /dev/null
+++ b/src/views/overview/components/layerChoose.vue
@@ -0,0 +1,106 @@
+<!--
+ * @Description: 图层选择下拉
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 11:31:58
+ -->
+<template>
+  <div class="layer-choose-div">
+    <div class="right-card">
+      <el-button icon="el-icon-copy-document" style="width: 110px;" @click="cardShow=!cardShow">
+        图层 <i :class="{'el-icon-arrow-up':cardShow,'el-icon-arrow-down':!cardShow}" class="el-icon--right"/>
+      </el-button>
+    </div>
+    <el-collapse-transition>
+      <div v-show="cardShow" class="layers-card">
+        <el-tree
+          :data="layers"
+          :default-checked-keys="selectLayers"
+          :props="treeProps"
+          show-checkbox
+          node-key="id"
+          @check-change="checkChange"/>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LayerChoose',
+  props: {
+    layers: {
+      type: Array,
+      default: () => [
+        { 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] }
+      ]
+    },
+    selectLayers: {
+      type: Array,
+      default: () => {
+        return [0, 1, 2, 3, 4, 5, 6, 7, 8]
+      }
+    },
+    treeProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'children',
+          label: 'name'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      cardShow: true // 是否显示图层卡片
+    }
+  },
+  methods: {
+    checkChange(node, checked) {
+      this.$emit('choose', node, checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $width:200px;
+  .layer-choose-div{
+    width: $width;
+    position: absolute;
+    right:50px;
+    top:20px;
+    z-index:10000;
+    .right-card{
+      height: auto;
+      display: flex;
+      justify-content: flex-end;
+      align-items: end;
+      .el-button{
+        -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+        box-shadow: 0px 1px 3px #d9d9d9;
+      }
+    }
+    .layers-card{
+      width:100%;
+      background-color: #fff;
+      overflow: auto;
+      margin:10px 0px;
+      border: 1px solid #DCDFE6;
+      border-radius:3px;
+      padding:20px 8px 20px 5px;
+      -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+      box-shadow: 0px 1px 3px #d9d9d9;
+    }
+  }
+
+</style>

diff --git a/src/views/overview/components/layerChoose.vue b/src/views/overview/components/layerChoose.vue
new file mode 100644
index 0000000..486d65a
--- /dev/null
+++ b/src/views/overview/components/layerChoose.vue
@@ -0,0 +1,106 @@
+<!--
+ * @Description: 图层选择下拉
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 11:31:58
+ -->
+<template>
+  <div class="layer-choose-div">
+    <div class="right-card">
+      <el-button icon="el-icon-copy-document" style="width: 110px;" @click="cardShow=!cardShow">
+        图层 <i :class="{'el-icon-arrow-up':cardShow,'el-icon-arrow-down':!cardShow}" class="el-icon--right"/>
+      </el-button>
+    </div>
+    <el-collapse-transition>
+      <div v-show="cardShow" class="layers-card">
+        <el-tree
+          :data="layers"
+          :default-checked-keys="selectLayers"
+          :props="treeProps"
+          show-checkbox
+          node-key="id"
+          @check-change="checkChange"/>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LayerChoose',
+  props: {
+    layers: {
+      type: Array,
+      default: () => [
+        { 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] }
+      ]
+    },
+    selectLayers: {
+      type: Array,
+      default: () => {
+        return [0, 1, 2, 3, 4, 5, 6, 7, 8]
+      }
+    },
+    treeProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'children',
+          label: 'name'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      cardShow: true // 是否显示图层卡片
+    }
+  },
+  methods: {
+    checkChange(node, checked) {
+      this.$emit('choose', node, checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $width:200px;
+  .layer-choose-div{
+    width: $width;
+    position: absolute;
+    right:50px;
+    top:20px;
+    z-index:10000;
+    .right-card{
+      height: auto;
+      display: flex;
+      justify-content: flex-end;
+      align-items: end;
+      .el-button{
+        -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+        box-shadow: 0px 1px 3px #d9d9d9;
+      }
+    }
+    .layers-card{
+      width:100%;
+      background-color: #fff;
+      overflow: auto;
+      margin:10px 0px;
+      border: 1px solid #DCDFE6;
+      border-radius:3px;
+      padding:20px 8px 20px 5px;
+      -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+      box-shadow: 0px 1px 3px #d9d9d9;
+    }
+  }
+
+</style>
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
new file mode 100644
index 0000000..d1b804a
--- /dev/null
+++ b/src/views/overview/components/searchItem.vue
@@ -0,0 +1,90 @@
+<!--
+ * @Description: 查询结果列表项
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 09:48:26
+ -->
+<template>
+  <div class="list-item">
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  props: {
+    index: {
+      type: Number,
+      required: true
+    }, // 序号
+    data: {
+      type: Object,
+      required: true
+    } // 数据
+  },
+  methods: {
+    // 点击数据项
+    itemClick() {
+      this.$emit('click', this.data)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.list-item{
+  width:100%;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  margin: 10px 2px;
+  -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+  box-shadow: 0px 1px 3px #d9d9d9;
+  .list-item-left{
+    width:30px;
+    height: 100%;
+    position: relative;
+    .item-count{
+      position:absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+      z-index: 100001;
+      color:#fff;
+    }
+    .item-icon{
+      position:absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+  .list-item-right{
+    flex:1;
+    padding-left:10px;
+    .list-item-right-row{
+      width: 220px;
+      height:18px;
+      line-height: 15px;
+      display: flex;
+      justify-content: start;
+      .content{
+        flex: 1;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/views/overview/components/layerChoose.vue b/src/views/overview/components/layerChoose.vue
new file mode 100644
index 0000000..486d65a
--- /dev/null
+++ b/src/views/overview/components/layerChoose.vue
@@ -0,0 +1,106 @@
+<!--
+ * @Description: 图层选择下拉
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 11:31:58
+ -->
+<template>
+  <div class="layer-choose-div">
+    <div class="right-card">
+      <el-button icon="el-icon-copy-document" style="width: 110px;" @click="cardShow=!cardShow">
+        图层 <i :class="{'el-icon-arrow-up':cardShow,'el-icon-arrow-down':!cardShow}" class="el-icon--right"/>
+      </el-button>
+    </div>
+    <el-collapse-transition>
+      <div v-show="cardShow" class="layers-card">
+        <el-tree
+          :data="layers"
+          :default-checked-keys="selectLayers"
+          :props="treeProps"
+          show-checkbox
+          node-key="id"
+          @check-change="checkChange"/>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LayerChoose',
+  props: {
+    layers: {
+      type: Array,
+      default: () => [
+        { 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] }
+      ]
+    },
+    selectLayers: {
+      type: Array,
+      default: () => {
+        return [0, 1, 2, 3, 4, 5, 6, 7, 8]
+      }
+    },
+    treeProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'children',
+          label: 'name'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      cardShow: true // 是否显示图层卡片
+    }
+  },
+  methods: {
+    checkChange(node, checked) {
+      this.$emit('choose', node, checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $width:200px;
+  .layer-choose-div{
+    width: $width;
+    position: absolute;
+    right:50px;
+    top:20px;
+    z-index:10000;
+    .right-card{
+      height: auto;
+      display: flex;
+      justify-content: flex-end;
+      align-items: end;
+      .el-button{
+        -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+        box-shadow: 0px 1px 3px #d9d9d9;
+      }
+    }
+    .layers-card{
+      width:100%;
+      background-color: #fff;
+      overflow: auto;
+      margin:10px 0px;
+      border: 1px solid #DCDFE6;
+      border-radius:3px;
+      padding:20px 8px 20px 5px;
+      -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+      box-shadow: 0px 1px 3px #d9d9d9;
+    }
+  }
+
+</style>
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
new file mode 100644
index 0000000..d1b804a
--- /dev/null
+++ b/src/views/overview/components/searchItem.vue
@@ -0,0 +1,90 @@
+<!--
+ * @Description: 查询结果列表项
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 09:48:26
+ -->
+<template>
+  <div class="list-item">
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  props: {
+    index: {
+      type: Number,
+      required: true
+    }, // 序号
+    data: {
+      type: Object,
+      required: true
+    } // 数据
+  },
+  methods: {
+    // 点击数据项
+    itemClick() {
+      this.$emit('click', this.data)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.list-item{
+  width:100%;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  margin: 10px 2px;
+  -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+  box-shadow: 0px 1px 3px #d9d9d9;
+  .list-item-left{
+    width:30px;
+    height: 100%;
+    position: relative;
+    .item-count{
+      position:absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+      z-index: 100001;
+      color:#fff;
+    }
+    .item-icon{
+      position:absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+  .list-item-right{
+    flex:1;
+    padding-left:10px;
+    .list-item-right-row{
+      width: 220px;
+      height:18px;
+      line-height: 15px;
+      display: flex;
+      justify-content: start;
+      .content{
+        flex: 1;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/overview/components/searchList.vue b/src/views/overview/components/searchList.vue
new file mode 100644
index 0000000..62cb72b
--- /dev/null
+++ b/src/views/overview/components/searchList.vue
@@ -0,0 +1,135 @@
+<!--
+ * @Description: 查询结果列表显示
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 09:46:39
+ -->
+<template>
+  <div class="map-search-div">
+    <!--查询条件-->
+    <el-input v-model.trim="keyword" placeholder="请输入查询关键字" class="input-with-select" style="width: 300px;" clearable>
+      <el-button slot="append" icon="el-icon-search" type="primary" class="search-btn" @click="search"/>
+    </el-input>
+    <!--查询结果数显示-->
+
+    <div v-show="searchCountShow" class="search-total" @click="dataShow=!dataShow">
+      共找到 {{ totalData.length }} 条个查询结果
+    </div>
+    <!--查询列表-->
+    <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"/>
+        <el-pagination
+          v-show="totalData.length>pageSize"
+          :current-page="offset"
+          :page-size="pageSize"
+          :total="totalData.length.length"
+          align="center"
+          layout="prev, pager, next"
+          @current-change="handleCurrentChange"/>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+import SearchItem from './SearchItem'
+export default {
+  name: 'SearchList',
+  components: { SearchItem },
+  props: {
+
+  },
+  data() {
+    return {
+      keyword: '', // 关键字，查询条件
+      totalData: [
+        { '编码': '1111111', '小类名称': '垃圾桶大范围冯绍峰威锋网发范德萨范德萨发二维费' },
+        { '编码': '1111111', '小类名称': '垃圾桶' },
+        { '编码': '1111111', '小类名称': '垃圾桶' },
+        { '编码': '1111111', '小类名称': '垃圾桶' },
+        { '编码': '1111111', '小类名称': '垃圾桶' },
+        { '编码': '1111111', '小类名称': '垃圾桶' }
+      ], // 全部数据
+      data: [], // 要展示的查询结果
+      searchCountShow: false, // 是否显示统计数
+      dataShow: false, // 是否显示列表详情
+      offset: 1, // 查询结果列表当前页码
+      pageSize: 5 // 查询结果列表页容量
+    }
+  },
+  watch: {
+    keyword(newval, oldval) {
+      if (newval.length === 0) {
+        this.searchCountShow = false
+        this.dataShow = false
+      }
+    }
+  },
+  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
+    },
+    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)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../../styles/variables.scss';
+  $width:300px;
+.map-search-div{
+  width:$width;
+  position: absolute;
+  top: 20px;
+  left:30px;
+  z-index: 10000;
+  .input-with-select{
+    -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+    box-shadow: 0px 1px 3px #d9d9d9;
+  }
+  .search-btn{
+    border-radius: 0px 4px 4px 0px;
+    background-color: $themeColor;
+    border-color:$themeColor;
+    color: #fff;
+  }
+}
+.search-total{
+  width: 100%;
+  height: 35px;
+  background-color: white;
+  margin-top: 10px;
+  border: 1px solid #DCDFE6;
+  padding-left: 15px;color: #409eff;
+  padding-top: 8px;
+  font-size: 13px;
+  border-radius:3px;
+  cursor: pointer;
+  -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+  box-shadow: 0px 1px 3px #d9d9d9;
+}
+.table{
+  background-color: #fff;
+  width:100%;
+  overflow: auto;
+  margin:10px 0px;
+  border: 1px solid #DCDFE6;
+  border-radius:3px;
+  padding:5px;
+  padding-right: 8px;
+  -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
+  box-shadow: 0px 1px 3px #d9d9d9;
+}
+</style>