diff --git a/src/views/overview/components/addTool.vue b/src/views/overview/components/addTool.vue
new file mode 100644
index 0000000..e228305
--- /dev/null
+++ b/src/views/overview/components/addTool.vue
@@ -0,0 +1,59 @@
+<!--
+ * @Description: 添加部件选框
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div :style="{'margin': margin}" class="draw-card">
+    <el-button :title="title" class="icon-btn" icon="el-icon-plus" @click="addPoint"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddTool',
+  props: {
+    title: {
+      type: String,
+      default: '添加部件'
+    },
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    }, // 多边形框选工具是否开启
+    margin: {
+      type: String,
+      default: '0px 8px'
+    } // 边距
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击添加
+    addPoint() {
+      this.$notify({
+        title: '开始' + this.title,
+        message: '请在地图上选点'
+      })
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 0px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px
+  }
+}
+
+</style>

diff --git a/src/views/overview/components/addTool.vue b/src/views/overview/components/addTool.vue
new file mode 100644
index 0000000..e228305
--- /dev/null
+++ b/src/views/overview/components/addTool.vue
@@ -0,0 +1,59 @@
+<!--
+ * @Description: 添加部件选框
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div :style="{'margin': margin}" class="draw-card">
+    <el-button :title="title" class="icon-btn" icon="el-icon-plus" @click="addPoint"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddTool',
+  props: {
+    title: {
+      type: String,
+      default: '添加部件'
+    },
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    }, // 多边形框选工具是否开启
+    margin: {
+      type: String,
+      default: '0px 8px'
+    } // 边距
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击添加
+    addPoint() {
+      this.$notify({
+        title: '开始' + this.title,
+        message: '请在地图上选点'
+      })
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 0px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px
+  }
+}
+
+</style>
diff --git a/src/views/overview/components/deleteTool.vue b/src/views/overview/components/deleteTool.vue
new file mode 100644
index 0000000..edbed69
--- /dev/null
+++ b/src/views/overview/components/deleteTool.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description: 删除工具
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div :style="{'margin': margin}" class="draw-card">
+    <el-button :disabled="disabled" class="icon-btn" title="批量删除" @click="onDelete('delete')">
+      <img src="@/assets/global_images/delete.png">
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeleteTool',
+  props: {
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    }, // 多边形框选工具是否开启
+    margin: {
+      type: String,
+      default: '0px 8px'
+    }, // 边距
+    disabled: {
+      type: Boolean,
+      default: true
+    } // 是否不允许操作
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击框选
+    onDelete(type) {
+      this.$emit('click', type)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 3px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px;
+    img{
+      height: 18px;
+      width: 18px;
+    }
+  }
+}
+
+</style>

diff --git a/src/views/overview/components/addTool.vue b/src/views/overview/components/addTool.vue
new file mode 100644
index 0000000..e228305
--- /dev/null
+++ b/src/views/overview/components/addTool.vue
@@ -0,0 +1,59 @@
+<!--
+ * @Description: 添加部件选框
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div :style="{'margin': margin}" class="draw-card">
+    <el-button :title="title" class="icon-btn" icon="el-icon-plus" @click="addPoint"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddTool',
+  props: {
+    title: {
+      type: String,
+      default: '添加部件'
+    },
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    }, // 多边形框选工具是否开启
+    margin: {
+      type: String,
+      default: '0px 8px'
+    } // 边距
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击添加
+    addPoint() {
+      this.$notify({
+        title: '开始' + this.title,
+        message: '请在地图上选点'
+      })
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 0px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px
+  }
+}
+
+</style>
diff --git a/src/views/overview/components/deleteTool.vue b/src/views/overview/components/deleteTool.vue
new file mode 100644
index 0000000..edbed69
--- /dev/null
+++ b/src/views/overview/components/deleteTool.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description: 删除工具
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div :style="{'margin': margin}" class="draw-card">
+    <el-button :disabled="disabled" class="icon-btn" title="批量删除" @click="onDelete('delete')">
+      <img src="@/assets/global_images/delete.png">
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeleteTool',
+  props: {
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    }, // 多边形框选工具是否开启
+    margin: {
+      type: String,
+      default: '0px 8px'
+    }, // 边距
+    disabled: {
+      type: Boolean,
+      default: true
+    } // 是否不允许操作
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击框选
+    onDelete(type) {
+      this.$emit('click', type)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 3px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px;
+    img{
+      height: 18px;
+      width: 18px;
+    }
+  }
+}
+
+</style>
diff --git a/src/views/overview/components/drawTool.vue b/src/views/overview/components/drawTool.vue
new file mode 100644
index 0000000..a82cfa9
--- /dev/null
+++ b/src/views/overview/components/drawTool.vue
@@ -0,0 +1,56 @@
+<!--
+ * @Description: 图形框选工具
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div class="draw-card">
+    <el-button title="绘制矩形选框" class="icon-btn" @click="draw('Rectangle')">
+      <img src="@/assets/global_images/square.png" style="height: 18px;width: 18px;">
+    </el-button>
+    <el-button title="绘制多边形选框" class="icon-btn" @click="draw('Polygon')">
+      <img src="@/assets/global_images/polygon.png" style="height: 18px;width: 18px;">
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DrawTool',
+  props: {
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    } // 多边形框选工具是否开启
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击框选
+    draw(type) {
+      this.$notify({
+        title: '框选工具开启',
+        message: '您可以开始框选区域'
+      })
+      this.$emit('click', type)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 0px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px
+  }
+}
+
+</style>

diff --git a/src/views/overview/components/addTool.vue b/src/views/overview/components/addTool.vue
new file mode 100644
index 0000000..e228305
--- /dev/null
+++ b/src/views/overview/components/addTool.vue
@@ -0,0 +1,59 @@
+<!--
+ * @Description: 添加部件选框
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div :style="{'margin': margin}" class="draw-card">
+    <el-button :title="title" class="icon-btn" icon="el-icon-plus" @click="addPoint"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddTool',
+  props: {
+    title: {
+      type: String,
+      default: '添加部件'
+    },
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    }, // 多边形框选工具是否开启
+    margin: {
+      type: String,
+      default: '0px 8px'
+    } // 边距
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击添加
+    addPoint() {
+      this.$notify({
+        title: '开始' + this.title,
+        message: '请在地图上选点'
+      })
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 0px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px
+  }
+}
+
+</style>
diff --git a/src/views/overview/components/deleteTool.vue b/src/views/overview/components/deleteTool.vue
new file mode 100644
index 0000000..edbed69
--- /dev/null
+++ b/src/views/overview/components/deleteTool.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description: 删除工具
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div :style="{'margin': margin}" class="draw-card">
+    <el-button :disabled="disabled" class="icon-btn" title="批量删除" @click="onDelete('delete')">
+      <img src="@/assets/global_images/delete.png">
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeleteTool',
+  props: {
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    }, // 多边形框选工具是否开启
+    margin: {
+      type: String,
+      default: '0px 8px'
+    }, // 边距
+    disabled: {
+      type: Boolean,
+      default: true
+    } // 是否不允许操作
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击框选
+    onDelete(type) {
+      this.$emit('click', type)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 3px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px;
+    img{
+      height: 18px;
+      width: 18px;
+    }
+  }
+}
+
+</style>
diff --git a/src/views/overview/components/drawTool.vue b/src/views/overview/components/drawTool.vue
new file mode 100644
index 0000000..a82cfa9
--- /dev/null
+++ b/src/views/overview/components/drawTool.vue
@@ -0,0 +1,56 @@
+<!--
+ * @Description: 图形框选工具
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:50:44
+ -->
+<template>
+  <div class="draw-card">
+    <el-button title="绘制矩形选框" class="icon-btn" @click="draw('Rectangle')">
+      <img src="@/assets/global_images/square.png" style="height: 18px;width: 18px;">
+    </el-button>
+    <el-button title="绘制多边形选框" class="icon-btn" @click="draw('Polygon')">
+      <img src="@/assets/global_images/polygon.png" style="height: 18px;width: 18px;">
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DrawTool',
+  props: {
+    squareShow: {
+      type: Boolean,
+      default: true
+    }, // 矩形框选工具是否开启
+    polygonShow: {
+      type: Boolean,
+      default: true
+    } // 多边形框选工具是否开启
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 点击框选
+    draw(type) {
+      this.$notify({
+        title: '框选工具开启',
+        message: '您可以开始框选区域'
+      })
+      this.$emit('click', type)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.draw-card{
+  margin: 0px 0px;
+  .icon-btn{
+    height: 40px;
+    width: 40px;
+    padding: 0px
+  }
+}
+
+</style>
diff --git a/src/views/overview/components/toolsContainer.vue b/src/views/overview/components/toolsContainer.vue
new file mode 100644
index 0000000..f1e4478
--- /dev/null
+++ b/src/views/overview/components/toolsContainer.vue
@@ -0,0 +1,28 @@
+<!--
+ * @Description: 工具容器
+ * @Author: 王晓颖
+ * @Date: 2021-03-10 09:30:20
+ -->
+<template>
+  <div class="tools-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToolsContainer'
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.tools-container{
+  width:auto;
+  position: absolute;
+  right:50px;
+  top:20px;
+  z-index:10000;
+  display: flex;
+  justify-content: end;
+}
+</style>