diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 8ded2cd..7807cac 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -47,8 +47,8 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .edit_btn{
-    float:right;
-    margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-  }
+  /*.edit_btn{*/
+    /*float:right;*/
+    /*margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2*/
+  /*}*/
 </style>

diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 8ded2cd..7807cac 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -47,8 +47,8 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .edit_btn{
-    float:right;
-    margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-  }
+  /*.edit_btn{*/
+    /*float:right;*/
+    /*margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2*/
+  /*}*/
 </style>
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index aad20c6..5077bef 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--序号列-->
@@ -225,6 +225,9 @@
     // 移除动画
     removeAnimateClass() {
       this.animateClass = ''
+    },
+    selectionChange(selection) {
+      this.$emit('selectionChange', selection)
     }
   }
 }

diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 8ded2cd..7807cac 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -47,8 +47,8 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .edit_btn{
-    float:right;
-    margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-  }
+  /*.edit_btn{*/
+    /*float:right;*/
+    /*margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2*/
+  /*}*/
 </style>
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index aad20c6..5077bef 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--序号列-->
@@ -225,6 +225,9 @@
     // 移除动画
     removeAnimateClass() {
       this.animateClass = ''
+    },
+    selectionChange(selection) {
+      this.$emit('selectionChange', selection)
     }
   }
 }
diff --git a/src/utils/baseConfig.js b/src/utils/baseConfig.js
index 1f4fa38..4677ce3 100644
--- a/src/utils/baseConfig.js
+++ b/src/utils/baseConfig.js
@@ -1,5 +1,5 @@
 const project = {
-  title: '后台管理系统前端基础框架'
+  title: '智慧照明系统'
 }
 export function getProject() {
   return project

diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 8ded2cd..7807cac 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -47,8 +47,8 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .edit_btn{
-    float:right;
-    margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-  }
+  /*.edit_btn{*/
+    /*float:right;*/
+    /*margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2*/
+  /*}*/
 </style>
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index aad20c6..5077bef 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--序号列-->
@@ -225,6 +225,9 @@
     // 移除动画
     removeAnimateClass() {
       this.animateClass = ''
+    },
+    selectionChange(selection) {
+      this.$emit('selectionChange', selection)
     }
   }
 }
diff --git a/src/utils/baseConfig.js b/src/utils/baseConfig.js
index 1f4fa38..4677ce3 100644
--- a/src/utils/baseConfig.js
+++ b/src/utils/baseConfig.js
@@ -1,5 +1,5 @@
 const project = {
-  title: '后台管理系统前端基础框架'
+  title: '智慧照明系统'
 }
 export function getProject() {
   return project
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 7f23bd3..5eea753 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,99 +1,57 @@
 <!--设备列表-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
-                  <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
-                  <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-
-            <el-col :span="6" class="search-right">
-              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="4"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="14" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="add">新增</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
-          <el-upload
-            :limit="1"
-            :show-file-list="false"
-            :http-request="uploadFile"
-            :file-list="fileList"
-            class="edit_btn"
-            style=" display: inline;"
-            action="string"
-            accept=".xls,.xlsx">
-            <el-button size="small">批量导入</el-button>
-          </el-upload>
-          <download-template filename="controllerImport.xlsx" class="edit_btn" btnname="模板下载"/>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
+          <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
+          <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :list-loading="listLoading" :data="list" :query="listQuery" :total="total" :columns="columns" class="table" border @change="changePage" @selectionChange="handleSelectionChange">
+      <template slot="btns">
+        <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
+        <el-button class="edit_btn" size="small" @click="add">新增</el-button>
+        <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+        <el-upload
+          :limit="1"
+          :show-file-list="false"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          class="edit_btn"
+          style=" display: inline;"
+          action="string"
+          accept=".xls,.xlsx">
+          <el-button size="small">批量导入</el-button>
+        </el-upload>
+        <download-template filename="controllerImport.xlsx" class="edit_btn" size="small" btnname="模板下载"/>
+      </template>
+      <template slot="preColumns">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/controller/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
-        <!--内容列-->
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+      </template>
+      <template slot="columns">
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/controller/edit')" type="text" @click="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+      </template>
+    </normal-table>
     <edit-controller ref="editController" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -103,9 +61,13 @@
 import { getControllerType } from '@/api/allDict'
 import { batchImportController } from '@/api/fileImport'
 import DownloadTemplate from '@/components/DownloadTemplate/index'
+import NormalTable from '../../components/NomalTable/index'
+import AppContainer from '../../components/layout/AppContainer'
+import SearchArea from '../../components/SearchArea/SearchArea'
+import SearchItem from '../../components/SearchArea/SearchItem'
 export default {
   name: 'BusController',
-  components: { EditController, DeptSelect, DownloadTemplate },
+  components: { SearchItem, SearchArea, AppContainer, NormalTable, EditController, DeptSelect, DownloadTemplate },
   data() {
     return {
       fileList: [], // 批量导入
@@ -320,42 +282,21 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container{
-    margin-bottom:20px
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .upload-btn{
-    display: inline;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
+
 </style>

diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 8ded2cd..7807cac 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -47,8 +47,8 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .edit_btn{
-    float:right;
-    margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-  }
+  /*.edit_btn{*/
+    /*float:right;*/
+    /*margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2*/
+  /*}*/
 </style>
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index aad20c6..5077bef 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--序号列-->
@@ -225,6 +225,9 @@
     // 移除动画
     removeAnimateClass() {
       this.animateClass = ''
+    },
+    selectionChange(selection) {
+      this.$emit('selectionChange', selection)
     }
   }
 }
diff --git a/src/utils/baseConfig.js b/src/utils/baseConfig.js
index 1f4fa38..4677ce3 100644
--- a/src/utils/baseConfig.js
+++ b/src/utils/baseConfig.js
@@ -1,5 +1,5 @@
 const project = {
-  title: '后台管理系统前端基础框架'
+  title: '智慧照明系统'
 }
 export function getProject() {
   return project
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 7f23bd3..5eea753 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,99 +1,57 @@
 <!--设备列表-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
-                  <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
-                  <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-
-            <el-col :span="6" class="search-right">
-              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="4"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="14" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="add">新增</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
-          <el-upload
-            :limit="1"
-            :show-file-list="false"
-            :http-request="uploadFile"
-            :file-list="fileList"
-            class="edit_btn"
-            style=" display: inline;"
-            action="string"
-            accept=".xls,.xlsx">
-            <el-button size="small">批量导入</el-button>
-          </el-upload>
-          <download-template filename="controllerImport.xlsx" class="edit_btn" btnname="模板下载"/>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
+          <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
+          <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :list-loading="listLoading" :data="list" :query="listQuery" :total="total" :columns="columns" class="table" border @change="changePage" @selectionChange="handleSelectionChange">
+      <template slot="btns">
+        <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
+        <el-button class="edit_btn" size="small" @click="add">新增</el-button>
+        <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+        <el-upload
+          :limit="1"
+          :show-file-list="false"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          class="edit_btn"
+          style=" display: inline;"
+          action="string"
+          accept=".xls,.xlsx">
+          <el-button size="small">批量导入</el-button>
+        </el-upload>
+        <download-template filename="controllerImport.xlsx" class="edit_btn" size="small" btnname="模板下载"/>
+      </template>
+      <template slot="preColumns">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/controller/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
-        <!--内容列-->
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+      </template>
+      <template slot="columns">
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/controller/edit')" type="text" @click="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+      </template>
+    </normal-table>
     <edit-controller ref="editController" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -103,9 +61,13 @@
 import { getControllerType } from '@/api/allDict'
 import { batchImportController } from '@/api/fileImport'
 import DownloadTemplate from '@/components/DownloadTemplate/index'
+import NormalTable from '../../components/NomalTable/index'
+import AppContainer from '../../components/layout/AppContainer'
+import SearchArea from '../../components/SearchArea/SearchArea'
+import SearchItem from '../../components/SearchArea/SearchItem'
 export default {
   name: 'BusController',
-  components: { EditController, DeptSelect, DownloadTemplate },
+  components: { SearchItem, SearchArea, AppContainer, NormalTable, EditController, DeptSelect, DownloadTemplate },
   data() {
     return {
       fileList: [], // 批量导入
@@ -320,42 +282,21 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container{
-    margin-bottom:20px
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .upload-btn{
-    display: inline;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
+
 </style>
diff --git a/src/views/overview/lampTabPane.vue b/src/views/overview/lampTabPane.vue
new file mode 100644
index 0000000..a29618c
--- /dev/null
+++ b/src/views/overview/lampTabPane.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="tab-block">
+    <el-radio-group v-model="type" @change="changeType">
+      <el-radio :label="'lamp'">按路灯</el-radio>
+      <el-radio :label="'lampbox'">按灯箱</el-radio>
+      <el-radio :label="'circuit'">按回路</el-radio>
+    </el-radio-group>
+    <!-- 按路灯搜索 -->
+    <div class="search-row">
+      <el-row v-if="type === 'lamp'" :gutter="10">
+        <el-col :span="6">
+          <el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
+            <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.lampStreet" size="small" placeholder="道路" filterable clearable>
+            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.lampArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 按灯箱搜索 -->
+      <el-row v-if="type === 'lampbox'" :gutter="10">
+        <el-col :span="8">
+          <el-input v-model.trim="lampQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
+        </el-col>
+        <el-col :span="8">
+          <el-select v-model="lampQuery.lampboxStreet" size="small" placeholder="道路" filterable clearable>
+            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+          </el-select>
+        </el-col>
+        <el-col :span="8">
+          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 按回路搜索 -->
+      <el-row v-if="type === 'circuit'" :gutter="10">
+        <el-col :span="10" :offset="2">
+          <el-input v-model.trim="lampQuery.circuitCode" size="small" placeholder="灯箱编号" clearable />
+        </el-col>
+        <el-col :span="10">
+          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 搜索 & 开关灯 -->
+      <el-row class="button-row">
+        <el-button class="search-button" size="small" type="primary" @click="searchLamp">搜索</el-button>
+        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','1')">开灯</el-button>
+        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','0')">关灯</el-button>
+      </el-row>
+    </div>
+    <!-- 搜索结果列表 -->
+    <el-table
+      v-loading="listLoading"
+      v-show="showList"
+      :row-style="{height: '33px'}"
+      :cell-style="{padding: '0px'}"
+      :data="lampList"
+      class="infinite-list"
+      border
+      infinite-scroll-disabled="disabled"
+      max-height="300px"
+      style="margin-top: 20px;"
+      @row-click="rowClick"
+      @selection-change="handleSelectionChange">
+      <el-table-column :selectable="selectable" align="center" type="selection" width="55"/>
+      <el-table-column align="center" type="index" label="序号" width="50"/>
+      <el-table-column align="center" prop="lampCode" label="路灯编号"/>
+      <el-table-column align="center" prop="lampName" label="路灯名称"/>
+      <el-table-column align="center" prop="statusName" label="路灯状态" width="80"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getAllStreet } from '@/api/street'
+
+export default {
+  name: 'LampTabPane',
+  props: {
+    lampQuery: {
+      type: Object,
+      default: function() {
+        return {
+          lampCode: '',
+          status: '',
+          lampStreet: '',
+          lampArea: '',
+          lampboxCode: '',
+          lampboxStreet: '',
+          lampboxArea: '',
+          circuitCode: ''
+        }
+      }
+    }, // 查询条件
+    lampList: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 路灯列表
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // 列表加载
+    showList: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      type: 'lamp',
+      statusList: [
+        { value: '1', name: '开灯' },
+        { value: '2', name: '灭灯' },
+        { value: '3', name: '报警' },
+        { value: '4', name: '离线' }
+      ],
+      streetList: [],
+      areaList: []
+    }
+  },
+  created() {
+    this.initStreetList()
+    this.initAreaList()
+  },
+  methods: {
+    searchLamp() {
+      console.log('inQuery', this.lampQuery)
+      this.$emit('searchLamp')
+      // this.showList = true
+    },
+    controlLamp(lampIds, controlType) {
+      this.$emit('controlLamp', { lampIds: lampIds, controlType: controlType })
+    },
+    initStreetList() {
+      getAllStreet().then(res => {
+        this.streetList = res.data
+      })
+    },
+    initAreaList() {
+      // todo
+      getAllStreet().then(res => {
+        this.areaList = res.data
+      })
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 状态为"离线"，不能勾选
+    selectable(row, index) {
+      return row.status !== '4'
+    },
+    rowClick(row) {
+      this.$emit('rowClick', row)
+    },
+    changeType() {
+      this.$emit('changeType')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-radio-group{
+  margin: 10px;
+  margin-bottom: 0px;
+}
+.search-row{
+  margin: 10px;
+}
+.button-row{
+  /*margin: 10px;*/
+  margin-top: 10px;
+  margin-bottom: -15px;
+}
+.search-button{
+  margin: 10px;
+}
+  .infinite-list{
+    margin-top: 10px;
+  }
+</style>

diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 8ded2cd..7807cac 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -47,8 +47,8 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .edit_btn{
-    float:right;
-    margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-  }
+  /*.edit_btn{*/
+    /*float:right;*/
+    /*margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2*/
+  /*}*/
 </style>
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index aad20c6..5077bef 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--序号列-->
@@ -225,6 +225,9 @@
     // 移除动画
     removeAnimateClass() {
       this.animateClass = ''
+    },
+    selectionChange(selection) {
+      this.$emit('selectionChange', selection)
     }
   }
 }
diff --git a/src/utils/baseConfig.js b/src/utils/baseConfig.js
index 1f4fa38..4677ce3 100644
--- a/src/utils/baseConfig.js
+++ b/src/utils/baseConfig.js
@@ -1,5 +1,5 @@
 const project = {
-  title: '后台管理系统前端基础框架'
+  title: '智慧照明系统'
 }
 export function getProject() {
   return project
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 7f23bd3..5eea753 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,99 +1,57 @@
 <!--设备列表-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
-                  <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
-                  <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-
-            <el-col :span="6" class="search-right">
-              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="4"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="14" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="add">新增</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
-          <el-upload
-            :limit="1"
-            :show-file-list="false"
-            :http-request="uploadFile"
-            :file-list="fileList"
-            class="edit_btn"
-            style=" display: inline;"
-            action="string"
-            accept=".xls,.xlsx">
-            <el-button size="small">批量导入</el-button>
-          </el-upload>
-          <download-template filename="controllerImport.xlsx" class="edit_btn" btnname="模板下载"/>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
+          <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
+          <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :list-loading="listLoading" :data="list" :query="listQuery" :total="total" :columns="columns" class="table" border @change="changePage" @selectionChange="handleSelectionChange">
+      <template slot="btns">
+        <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
+        <el-button class="edit_btn" size="small" @click="add">新增</el-button>
+        <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+        <el-upload
+          :limit="1"
+          :show-file-list="false"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          class="edit_btn"
+          style=" display: inline;"
+          action="string"
+          accept=".xls,.xlsx">
+          <el-button size="small">批量导入</el-button>
+        </el-upload>
+        <download-template filename="controllerImport.xlsx" class="edit_btn" size="small" btnname="模板下载"/>
+      </template>
+      <template slot="preColumns">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/controller/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
-        <!--内容列-->
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+      </template>
+      <template slot="columns">
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/controller/edit')" type="text" @click="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+      </template>
+    </normal-table>
     <edit-controller ref="editController" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -103,9 +61,13 @@
 import { getControllerType } from '@/api/allDict'
 import { batchImportController } from '@/api/fileImport'
 import DownloadTemplate from '@/components/DownloadTemplate/index'
+import NormalTable from '../../components/NomalTable/index'
+import AppContainer from '../../components/layout/AppContainer'
+import SearchArea from '../../components/SearchArea/SearchArea'
+import SearchItem from '../../components/SearchArea/SearchItem'
 export default {
   name: 'BusController',
-  components: { EditController, DeptSelect, DownloadTemplate },
+  components: { SearchItem, SearchArea, AppContainer, NormalTable, EditController, DeptSelect, DownloadTemplate },
   data() {
     return {
       fileList: [], // 批量导入
@@ -320,42 +282,21 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container{
-    margin-bottom:20px
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .upload-btn{
-    display: inline;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
+
 </style>
diff --git a/src/views/overview/lampTabPane.vue b/src/views/overview/lampTabPane.vue
new file mode 100644
index 0000000..a29618c
--- /dev/null
+++ b/src/views/overview/lampTabPane.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="tab-block">
+    <el-radio-group v-model="type" @change="changeType">
+      <el-radio :label="'lamp'">按路灯</el-radio>
+      <el-radio :label="'lampbox'">按灯箱</el-radio>
+      <el-radio :label="'circuit'">按回路</el-radio>
+    </el-radio-group>
+    <!-- 按路灯搜索 -->
+    <div class="search-row">
+      <el-row v-if="type === 'lamp'" :gutter="10">
+        <el-col :span="6">
+          <el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
+            <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.lampStreet" size="small" placeholder="道路" filterable clearable>
+            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.lampArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 按灯箱搜索 -->
+      <el-row v-if="type === 'lampbox'" :gutter="10">
+        <el-col :span="8">
+          <el-input v-model.trim="lampQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
+        </el-col>
+        <el-col :span="8">
+          <el-select v-model="lampQuery.lampboxStreet" size="small" placeholder="道路" filterable clearable>
+            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+          </el-select>
+        </el-col>
+        <el-col :span="8">
+          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 按回路搜索 -->
+      <el-row v-if="type === 'circuit'" :gutter="10">
+        <el-col :span="10" :offset="2">
+          <el-input v-model.trim="lampQuery.circuitCode" size="small" placeholder="灯箱编号" clearable />
+        </el-col>
+        <el-col :span="10">
+          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 搜索 & 开关灯 -->
+      <el-row class="button-row">
+        <el-button class="search-button" size="small" type="primary" @click="searchLamp">搜索</el-button>
+        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','1')">开灯</el-button>
+        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','0')">关灯</el-button>
+      </el-row>
+    </div>
+    <!-- 搜索结果列表 -->
+    <el-table
+      v-loading="listLoading"
+      v-show="showList"
+      :row-style="{height: '33px'}"
+      :cell-style="{padding: '0px'}"
+      :data="lampList"
+      class="infinite-list"
+      border
+      infinite-scroll-disabled="disabled"
+      max-height="300px"
+      style="margin-top: 20px;"
+      @row-click="rowClick"
+      @selection-change="handleSelectionChange">
+      <el-table-column :selectable="selectable" align="center" type="selection" width="55"/>
+      <el-table-column align="center" type="index" label="序号" width="50"/>
+      <el-table-column align="center" prop="lampCode" label="路灯编号"/>
+      <el-table-column align="center" prop="lampName" label="路灯名称"/>
+      <el-table-column align="center" prop="statusName" label="路灯状态" width="80"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getAllStreet } from '@/api/street'
+
+export default {
+  name: 'LampTabPane',
+  props: {
+    lampQuery: {
+      type: Object,
+      default: function() {
+        return {
+          lampCode: '',
+          status: '',
+          lampStreet: '',
+          lampArea: '',
+          lampboxCode: '',
+          lampboxStreet: '',
+          lampboxArea: '',
+          circuitCode: ''
+        }
+      }
+    }, // 查询条件
+    lampList: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 路灯列表
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // 列表加载
+    showList: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      type: 'lamp',
+      statusList: [
+        { value: '1', name: '开灯' },
+        { value: '2', name: '灭灯' },
+        { value: '3', name: '报警' },
+        { value: '4', name: '离线' }
+      ],
+      streetList: [],
+      areaList: []
+    }
+  },
+  created() {
+    this.initStreetList()
+    this.initAreaList()
+  },
+  methods: {
+    searchLamp() {
+      console.log('inQuery', this.lampQuery)
+      this.$emit('searchLamp')
+      // this.showList = true
+    },
+    controlLamp(lampIds, controlType) {
+      this.$emit('controlLamp', { lampIds: lampIds, controlType: controlType })
+    },
+    initStreetList() {
+      getAllStreet().then(res => {
+        this.streetList = res.data
+      })
+    },
+    initAreaList() {
+      // todo
+      getAllStreet().then(res => {
+        this.areaList = res.data
+      })
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 状态为"离线"，不能勾选
+    selectable(row, index) {
+      return row.status !== '4'
+    },
+    rowClick(row) {
+      this.$emit('rowClick', row)
+    },
+    changeType() {
+      this.$emit('changeType')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-radio-group{
+  margin: 10px;
+  margin-bottom: 0px;
+}
+.search-row{
+  margin: 10px;
+}
+.button-row{
+  /*margin: 10px;*/
+  margin-top: 10px;
+  margin-bottom: -15px;
+}
+.search-button{
+  margin: 10px;
+}
+  .infinite-list{
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff50ba1..9565f6b 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -70,102 +70,15 @@
       <div v-show="showtable">
         <el-tabs v-model="tab" type="border-card" @tab-click="tabClick">
           <el-tab-pane label="路灯列表" name="lamp">
-            <div class="tab-block">
-              <el-row v-if="tab === 'lamp'" class="table-title" style="margin-top: -10px">
-                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
-                  <el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
-                </el-col>
-                <el-col :span="7" style="margin-top:3px;">
-                  <el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
-                    <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
-                  </el-select>
-                </el-col>
-                <el-col :span="3" style="margin-top:6px;">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
-                </el-col>
-                <el-col :span="6" class="edit_btns" style="margin-top:6px;text-align: right;margin-left: 8px">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','1')">开灯</el-button>
-                  <el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','0')">关灯</el-button>
-                </el-col>
-              </el-row>
-              <el-table
-                v-loading="listLoading"
-                :row-style="{height: '33px'}"
-                :cell-style="{padding: '0px'}"
-                :data="list"
-                class="infinite-list"
-                border
-                infinite-scroll-disabled="disabled"
-                height="300px"
-                style="margin-top: -10px;"
-                @row-click="rowClick"
-                @selection-change="handleSelectionChange">
-                <el-table-column align="center" type="selection" width="55"/>
-                <el-table-column align="center" type="index" label="序号" width="50"/>
-                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span :class="column.class">{{ scope.row[column.value] }}</span>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="回路列表" name="circuit">
-            <div class="tab-block">
-              <el-row v-if="tab === 'circuit'" class="table-title" style="margin-top: -10px">
-                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
-                  <el-input v-model.trim="circuitQuery.circuitCode" size="small" placeholder="回路编号" clearable />
-                </el-col>
-                <el-col :span="3" style="margin-top:6px;">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
-                </el-col>
-              </el-row>
-              <el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
-                <el-table-column align="center" type="index" label="序号" width="50"/>
-                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span :class="column.class">{{ scope.row[column.value] }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="80" align="center">
-                  <template slot-scope="scope">
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="灯箱列表" name="lampbox">
-            <div class="tab-block">
-              <el-row v-if="tab === 'lampbox'" class="table-title" style="margin-top: -10px">
-                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
-                  <el-input v-model.trim="lampboxQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
-                </el-col>
-                <el-col :span="7" style="margin-top:3px;">
-                  <el-select v-model="lampboxQuery.streetId" size="small" placeholder="道路" filterable clearable>
-                    <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                  </el-select>
-                </el-col>
-                <el-col :span="3" style="margin-top:6px;">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
-                </el-col>
-              </el-row>
-              <el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
-                <el-table-column align="center" type="index" label="序号" width="50"/>
-                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span :class="column.class">{{ scope.row[column.value] }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="80" align="center">
-                  <template slot-scope="scope">
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
+            <lamp-tab-pane
+              :lamp-list="lamplist"
+              :lamp-query="lampQuery"
+              :list-loading="listLoading"
+              :show-list="showList"
+              @searchLamp="search"
+              @controlLamp="control(lampIds,'','',controlLamp)"
+              @rowClick="rowClick"
+              @changeType="resetLampQuery"/>
           </el-tab-pane>
           <el-tab-pane label="报警列表" name="alarm">
             <div class="tab-block">
@@ -202,10 +115,12 @@
 <script>
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import { getAllStreet } from '@/api/street'
+// import { getAllStreet } from '@/api/street'
 import { getLampStatus, getLampList, getlampDetail, getCircuitList, getLampBoxList, getLampBoxDetail, getAlarmList, getAlarmDetail, lampControl } from '@/api/overview'
+import LampTabPane from './lampTabPane'
 export default {
   name: 'Overview',
+  components: { LampTabPane },
   data() {
     return {
       bottombtn: 'lamp',
@@ -290,8 +205,12 @@
       lampQuery: {
         lampCode: '',
         status: '',
-        circuitId: '',
-        lampBoxId: ''
+        lampStreet: '',
+        lampArea: '',
+        lampboxCode: '',
+        lampboxStreet: '',
+        lampboxArea: '',
+        circuitCode: ''
       },
       circuitQuery: {
         circuitCode: ''
@@ -303,7 +222,8 @@
       alarmQuery: {
         deviceType: '',
         alarmType: ''
-      }
+      },
+      showList: false
     }
   },
   mounted() {
@@ -311,15 +231,17 @@
     this.initData()
   },
   methods: {
+    // 隐藏或显示左侧列表
     tableclick() {
       this.showtable = !this.showtable
     },
+    // 点击列表中的行，调整地图视角
     rowClick(row) {
       if (this.tab === 'lamp') {
         for (var i = 0; i < this.iconlist.length; i++) {
           if (this.iconlist[i].options.id === row.lampId) {
             console.log(this.iconlist[i])
-            this.map.setView(this.iconlist[i]._latlng, 17)
+            this.map.setView(this.iconlist[i]._latlng, 19)
             // this.map.setView({ lat: cenLat, lng: cenLng }, 18)
           }
         }
@@ -338,11 +260,11 @@
       }
     },
     async search() {
+      console.log('outQuery', this.lampQuery)
       this.listLoading = true
       if (this.tab === 'lamp') {
-        const detail = await getLampList(this.lampQuery)
-        this.lamplist = detail.data
-        this.list = this.lamplist
+        await this.getlamp()
+        this.showList = true
       } else if (this.tab === 'circuit') {
         const detail = await getCircuitList(this.circuitQuery)
         this.ciulistlist = detail.data
@@ -358,10 +280,24 @@
       }
       this.listLoading = false
     },
+    resetLampQuery() {
+      this.lampQuery = {
+        lampCode: '',
+        status: '',
+        lampStreet: '',
+        lampArea: '',
+        lampboxCode: '',
+        lampboxStreet: '',
+        lampboxArea: '',
+        circuitCode: ''
+      }
+    },
     async tabClick(tab, event) {
       this.listLoading = true
       if (tab.name === 'lamp') {
         this.bottombtn = 'lamp'
+        this.resetLampQuery()
+        this.showList = false
         this.getlamp('', '', '')
         this.lampQuery.status = ''
         this.lampQuery.circuitId = ''
@@ -471,20 +407,20 @@
     async initData() {
       const resDetail = await getLampStatus()
       this.status = resDetail.data
-      const lampDetail = await getLampList(this.lampQuery)
-      this.lamplist = lampDetail.data
-      this.list = this.lamplist
-      const circuitDetail = await getCircuitList()
-      this.circuitlist = circuitDetail.data
+      // const lampDetail = await getLampList(this.lampQuery)
+      // this.lamplist = lampDetail.data
+      // this.list = this.lamplist
+      // const circuitDetail = await getCircuitList()
+      // this.circuitlist = circuitDetail.data
       const lampboxDetail = await getLampBoxList()
       this.lampboxlist = lampboxDetail.data
       const alarmDetail = await getAlarmList()
       this.alarmlist = alarmDetail.data
-      this.getlamp('', '', '')
+      this.getlamp()
 
       // 获取道路列表
-      const streetList = await getAllStreet(null)
-      this.streetList = streetList.data
+      // const streetList = await getAllStreet(null)
+      // this.streetList = streetList.data
     },
     removemarkers() {
       for (var i = 0; i < this.iconlist.length; i++) {
@@ -529,9 +465,10 @@
     },
     async getlamp(status, circuitId, lampBoxId) {
       this.removemarkers()
-      this.lampQuery.status = status
-      this.lampQuery.circuitId = circuitId
-      this.lampQuery.lampBoxId = lampBoxId
+      // this.lampQuery.status = status
+      // this.lampQuery.circuitId = circuitId
+      // this.lampQuery.lampBoxId = lampBoxId
+      console.log('getLamp', this.lampQuery)
       const resDetail = await getLampList(this.lampQuery)
       this.lamplist = resDetail.data
       if (this.lamplist.length === 0) {
@@ -572,32 +509,42 @@
           }
           getlampDetail(e.target.options.id).then(response => {
             var data = response.data
-            var str = '<div style="font-size: 14px;padding: 6px"> ' +
-                '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">路灯详情信息</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯编号：</label>' + data.lampCode	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯类型：</label>' + data.lampTypeName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯状态：</label>' + data.statusName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯分组：</label>' + data.groupName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯功率(W)：</label>' + data.power	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器编号：</label>' + data.controllerCode	 + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器类型：</label>' + data.controllerTypeName		 + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器分组：</label>' + data.controllerGroupName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆编号：</label>' + data.lamppostCode + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆名称：</label>' + data.lamppostName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆类型：</label>' + data.lamppostTypeName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆分组：</label>' + data.postGroupName + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路编号：</label>' + data.circuitCode + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路名称：</label>' + data.circuitName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路分组：</label>' + data.circuitGroupName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位/高度(m)：</label>' + data.latitude + ';' + data.longitude + ' / ' + data.height + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.height + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新电压(V)/电流值(A)：</label>' + data.latestVol + ' / ' + data.latestElec + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新功率(W)：</label>' + data.latestPower + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>' + data.latestTime + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
-                '</div>'
+            var str = `<div style="font-size: 14px;padding: 6px">`
+            // 标题：设备类型（路灯/灯箱）+设备编号+设备状态
+            str += `<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">` + '路灯' + data.lampCode
+            if (data.statusName) {
+              str += `——` + data.statusName
+            }
+            str += `</div>`
+            if (data.groupName) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯分组：</label>` + data.groupName	 + `</div>`
+            }
+            if (data.controllerCode) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器编号：</label>` + data.controllerCode	 + `</div>`
+            }
+            if (data.lamppostCode) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆编号：</label>` + data.lamppostCode	 + `</div>`
+            }
+            if (data.height) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度(m)：</label>` + data.height	 + `</div>`
+            }
+            if (data.latestVol) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">电压(V)：</label>` + data.latestVol	 + `</div>`
+            }
+            if (data.latestElec) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">电流(A)：</label>` + data.latestElec	 + `</div>`
+            }
+            if (data.latestPower) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">功率(W)：</label>` + data.latestPower	 + `</div>`
+            }
+            if (data.latestTime) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>` + data.latestTime	 + `</div>`
+            }
+            if (data.streetName || data.address) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>` + data.streetName + data.address	 + `</div>`
+            }
+            // todo 开关灯按钮
+            str += `</div>`
             var popup = L.popup().setContent(str)
             e.target.dragging._marker.bindPopup(popup).openPopup()
             e.target.dragging._marker.openPopup()
@@ -631,25 +578,35 @@
           id: this.lampboxlist[i].id
         }).addTo(this.map)
         item.on('click', function(e) {
+          console.log(e.target.options)
           if (e.target.dragging._marker._popup) {
             e.target.dragging._marker.unbindPopup()
           }
           getLampBoxDetail(e.target.options.id).then(response => {
             var data = response.data
             console.log(response.data)
-            var str = '<div style="font-size: 14px;padding: 6px"> ' +
-              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">灯箱详情信息</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱编号：</label>' + data.lampboxCode	 + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱名称：</label>' + data.lampboxName	 + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName	 + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位：</label>' + data.latitude + ';' + data.longitude + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电流(A)：</label>' + data.elecA + ' / ' + data.elecB + ' / ' + data.elecC + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电压(V)：</label>' + data.volA + ' / ' + data.volB + ' / ' + data.volC + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相功率(W)：</label>' + data.powerA + ' / ' + data.powerB + ' / ' + data.powerC + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">上传时间：</label>' + data.upTime + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
-              '</div>'
+            var str = `<div style="font-size: 14px;padding: 6px">`
+            // 标题：设备类型（路灯/灯箱）+设备编号
+            str += `<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">` + '灯箱' + data.lampboxCode + `</div>`
+            if (data.lampboxName) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱名称：</label>` + data.lampboxName	 + `</div>`
+            }
+            if (data.elecA || data.elecB || data.elecC) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电流(A)：</label>` + data.elecA + `/` + data.elecB + `/` + data.elecC + `</div>`
+            }
+            if (data.volA || data.volB || data.volC) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电压(V)：</label>` + data.volA + `/` + data.volB + `/` + data.volC + `</div>`
+            }
+            if (data.powerA || data.powerB || data.powerC) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相功率(W)：</label>` + data.powerA + `/` + data.powerB + `/` + data.powerC + `</div>`
+            }
+            if (data.latestTime) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">上传时间：</label>` + data.latestTime	 + `</div>`
+            }
+            if (data.streetName || data.address) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>` + data.streetName + data.address	 + `</div>`
+            }
+            str += `</div>`
             var popup = L.popup().setContent(str)
             e.target.dragging._marker.bindPopup(popup).openPopup()
             e.target.dragging._marker.openPopup()
@@ -746,6 +703,7 @@
       }
       return 5
     },
+    // 初始化地图
     init() {
       const map = L.map('map', {
         minZoom: 2,

diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 8ded2cd..7807cac 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -47,8 +47,8 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .edit_btn{
-    float:right;
-    margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-  }
+  /*.edit_btn{*/
+    /*float:right;*/
+    /*margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2*/
+  /*}*/
 </style>
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index aad20c6..5077bef 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--序号列-->
@@ -225,6 +225,9 @@
     // 移除动画
     removeAnimateClass() {
       this.animateClass = ''
+    },
+    selectionChange(selection) {
+      this.$emit('selectionChange', selection)
     }
   }
 }
diff --git a/src/utils/baseConfig.js b/src/utils/baseConfig.js
index 1f4fa38..4677ce3 100644
--- a/src/utils/baseConfig.js
+++ b/src/utils/baseConfig.js
@@ -1,5 +1,5 @@
 const project = {
-  title: '后台管理系统前端基础框架'
+  title: '智慧照明系统'
 }
 export function getProject() {
   return project
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 7f23bd3..5eea753 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,99 +1,57 @@
 <!--设备列表-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
-                  <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
-                  <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-
-            <el-col :span="6" class="search-right">
-              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="4"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="14" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="add">新增</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
-          <el-upload
-            :limit="1"
-            :show-file-list="false"
-            :http-request="uploadFile"
-            :file-list="fileList"
-            class="edit_btn"
-            style=" display: inline;"
-            action="string"
-            accept=".xls,.xlsx">
-            <el-button size="small">批量导入</el-button>
-          </el-upload>
-          <download-template filename="controllerImport.xlsx" class="edit_btn" btnname="模板下载"/>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" placeholder="控制器类型" clearable>
+          <el-option v-for="item in controllerTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="true" :need-top="true" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" placeholder="选择设备状态" clearable>
+          <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :list-loading="listLoading" :data="list" :query="listQuery" :total="total" :columns="columns" class="table" border @change="changePage" @selectionChange="handleSelectionChange">
+      <template slot="btns">
+        <el-button v-if="hasPerm('/controller/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
+        <el-button class="edit_btn" size="small" @click="add">新增</el-button>
+        <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+        <el-upload
+          :limit="1"
+          :show-file-list="false"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          class="edit_btn"
+          style=" display: inline;"
+          action="string"
+          accept=".xls,.xlsx">
+          <el-button size="small">批量导入</el-button>
+        </el-upload>
+        <download-template filename="controllerImport.xlsx" class="edit_btn" size="small" btnname="模板下载"/>
+      </template>
+      <template slot="preColumns">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/controller/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
-        <!--内容列-->
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+      </template>
+      <template slot="columns">
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/controller/edit')" type="text" @click="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+      </template>
+    </normal-table>
     <edit-controller ref="editController" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -103,9 +61,13 @@
 import { getControllerType } from '@/api/allDict'
 import { batchImportController } from '@/api/fileImport'
 import DownloadTemplate from '@/components/DownloadTemplate/index'
+import NormalTable from '../../components/NomalTable/index'
+import AppContainer from '../../components/layout/AppContainer'
+import SearchArea from '../../components/SearchArea/SearchArea'
+import SearchItem from '../../components/SearchArea/SearchItem'
 export default {
   name: 'BusController',
-  components: { EditController, DeptSelect, DownloadTemplate },
+  components: { SearchItem, SearchArea, AppContainer, NormalTable, EditController, DeptSelect, DownloadTemplate },
   data() {
     return {
       fileList: [], // 批量导入
@@ -320,42 +282,21 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container{
-    margin-bottom:20px
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .upload-btn{
-    display: inline;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
+
 </style>
diff --git a/src/views/overview/lampTabPane.vue b/src/views/overview/lampTabPane.vue
new file mode 100644
index 0000000..a29618c
--- /dev/null
+++ b/src/views/overview/lampTabPane.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="tab-block">
+    <el-radio-group v-model="type" @change="changeType">
+      <el-radio :label="'lamp'">按路灯</el-radio>
+      <el-radio :label="'lampbox'">按灯箱</el-radio>
+      <el-radio :label="'circuit'">按回路</el-radio>
+    </el-radio-group>
+    <!-- 按路灯搜索 -->
+    <div class="search-row">
+      <el-row v-if="type === 'lamp'" :gutter="10">
+        <el-col :span="6">
+          <el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
+            <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.lampStreet" size="small" placeholder="道路" filterable clearable>
+            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="lampQuery.lampArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 按灯箱搜索 -->
+      <el-row v-if="type === 'lampbox'" :gutter="10">
+        <el-col :span="8">
+          <el-input v-model.trim="lampQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
+        </el-col>
+        <el-col :span="8">
+          <el-select v-model="lampQuery.lampboxStreet" size="small" placeholder="道路" filterable clearable>
+            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+          </el-select>
+        </el-col>
+        <el-col :span="8">
+          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 按回路搜索 -->
+      <el-row v-if="type === 'circuit'" :gutter="10">
+        <el-col :span="10" :offset="2">
+          <el-input v-model.trim="lampQuery.circuitCode" size="small" placeholder="灯箱编号" clearable />
+        </el-col>
+        <el-col :span="10">
+          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
+            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <!-- 搜索 & 开关灯 -->
+      <el-row class="button-row">
+        <el-button class="search-button" size="small" type="primary" @click="searchLamp">搜索</el-button>
+        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','1')">开灯</el-button>
+        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','0')">关灯</el-button>
+      </el-row>
+    </div>
+    <!-- 搜索结果列表 -->
+    <el-table
+      v-loading="listLoading"
+      v-show="showList"
+      :row-style="{height: '33px'}"
+      :cell-style="{padding: '0px'}"
+      :data="lampList"
+      class="infinite-list"
+      border
+      infinite-scroll-disabled="disabled"
+      max-height="300px"
+      style="margin-top: 20px;"
+      @row-click="rowClick"
+      @selection-change="handleSelectionChange">
+      <el-table-column :selectable="selectable" align="center" type="selection" width="55"/>
+      <el-table-column align="center" type="index" label="序号" width="50"/>
+      <el-table-column align="center" prop="lampCode" label="路灯编号"/>
+      <el-table-column align="center" prop="lampName" label="路灯名称"/>
+      <el-table-column align="center" prop="statusName" label="路灯状态" width="80"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getAllStreet } from '@/api/street'
+
+export default {
+  name: 'LampTabPane',
+  props: {
+    lampQuery: {
+      type: Object,
+      default: function() {
+        return {
+          lampCode: '',
+          status: '',
+          lampStreet: '',
+          lampArea: '',
+          lampboxCode: '',
+          lampboxStreet: '',
+          lampboxArea: '',
+          circuitCode: ''
+        }
+      }
+    }, // 查询条件
+    lampList: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 路灯列表
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // 列表加载
+    showList: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      type: 'lamp',
+      statusList: [
+        { value: '1', name: '开灯' },
+        { value: '2', name: '灭灯' },
+        { value: '3', name: '报警' },
+        { value: '4', name: '离线' }
+      ],
+      streetList: [],
+      areaList: []
+    }
+  },
+  created() {
+    this.initStreetList()
+    this.initAreaList()
+  },
+  methods: {
+    searchLamp() {
+      console.log('inQuery', this.lampQuery)
+      this.$emit('searchLamp')
+      // this.showList = true
+    },
+    controlLamp(lampIds, controlType) {
+      this.$emit('controlLamp', { lampIds: lampIds, controlType: controlType })
+    },
+    initStreetList() {
+      getAllStreet().then(res => {
+        this.streetList = res.data
+      })
+    },
+    initAreaList() {
+      // todo
+      getAllStreet().then(res => {
+        this.areaList = res.data
+      })
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 状态为"离线"，不能勾选
+    selectable(row, index) {
+      return row.status !== '4'
+    },
+    rowClick(row) {
+      this.$emit('rowClick', row)
+    },
+    changeType() {
+      this.$emit('changeType')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-radio-group{
+  margin: 10px;
+  margin-bottom: 0px;
+}
+.search-row{
+  margin: 10px;
+}
+.button-row{
+  /*margin: 10px;*/
+  margin-top: 10px;
+  margin-bottom: -15px;
+}
+.search-button{
+  margin: 10px;
+}
+  .infinite-list{
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index ff50ba1..9565f6b 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -70,102 +70,15 @@
       <div v-show="showtable">
         <el-tabs v-model="tab" type="border-card" @tab-click="tabClick">
           <el-tab-pane label="路灯列表" name="lamp">
-            <div class="tab-block">
-              <el-row v-if="tab === 'lamp'" class="table-title" style="margin-top: -10px">
-                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
-                  <el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
-                </el-col>
-                <el-col :span="7" style="margin-top:3px;">
-                  <el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
-                    <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
-                  </el-select>
-                </el-col>
-                <el-col :span="3" style="margin-top:6px;">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
-                </el-col>
-                <el-col :span="6" class="edit_btns" style="margin-top:6px;text-align: right;margin-left: 8px">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','1')">开灯</el-button>
-                  <el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','0')">关灯</el-button>
-                </el-col>
-              </el-row>
-              <el-table
-                v-loading="listLoading"
-                :row-style="{height: '33px'}"
-                :cell-style="{padding: '0px'}"
-                :data="list"
-                class="infinite-list"
-                border
-                infinite-scroll-disabled="disabled"
-                height="300px"
-                style="margin-top: -10px;"
-                @row-click="rowClick"
-                @selection-change="handleSelectionChange">
-                <el-table-column align="center" type="selection" width="55"/>
-                <el-table-column align="center" type="index" label="序号" width="50"/>
-                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span :class="column.class">{{ scope.row[column.value] }}</span>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="回路列表" name="circuit">
-            <div class="tab-block">
-              <el-row v-if="tab === 'circuit'" class="table-title" style="margin-top: -10px">
-                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
-                  <el-input v-model.trim="circuitQuery.circuitCode" size="small" placeholder="回路编号" clearable />
-                </el-col>
-                <el-col :span="3" style="margin-top:6px;">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
-                </el-col>
-              </el-row>
-              <el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
-                <el-table-column align="center" type="index" label="序号" width="50"/>
-                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span :class="column.class">{{ scope.row[column.value] }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="80" align="center">
-                  <template slot-scope="scope">
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="灯箱列表" name="lampbox">
-            <div class="tab-block">
-              <el-row v-if="tab === 'lampbox'" class="table-title" style="margin-top: -10px">
-                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
-                  <el-input v-model.trim="lampboxQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
-                </el-col>
-                <el-col :span="7" style="margin-top:3px;">
-                  <el-select v-model="lampboxQuery.streetId" size="small" placeholder="道路" filterable clearable>
-                    <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                  </el-select>
-                </el-col>
-                <el-col :span="3" style="margin-top:6px;">
-                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
-                </el-col>
-              </el-row>
-              <el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
-                <el-table-column align="center" type="index" label="序号" width="50"/>
-                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span :class="column.class">{{ scope.row[column.value] }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="80" align="center">
-                  <template slot-scope="scope">
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
-                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
+            <lamp-tab-pane
+              :lamp-list="lamplist"
+              :lamp-query="lampQuery"
+              :list-loading="listLoading"
+              :show-list="showList"
+              @searchLamp="search"
+              @controlLamp="control(lampIds,'','',controlLamp)"
+              @rowClick="rowClick"
+              @changeType="resetLampQuery"/>
           </el-tab-pane>
           <el-tab-pane label="报警列表" name="alarm">
             <div class="tab-block">
@@ -202,10 +115,12 @@
 <script>
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import { getAllStreet } from '@/api/street'
+// import { getAllStreet } from '@/api/street'
 import { getLampStatus, getLampList, getlampDetail, getCircuitList, getLampBoxList, getLampBoxDetail, getAlarmList, getAlarmDetail, lampControl } from '@/api/overview'
+import LampTabPane from './lampTabPane'
 export default {
   name: 'Overview',
+  components: { LampTabPane },
   data() {
     return {
       bottombtn: 'lamp',
@@ -290,8 +205,12 @@
       lampQuery: {
         lampCode: '',
         status: '',
-        circuitId: '',
-        lampBoxId: ''
+        lampStreet: '',
+        lampArea: '',
+        lampboxCode: '',
+        lampboxStreet: '',
+        lampboxArea: '',
+        circuitCode: ''
       },
       circuitQuery: {
         circuitCode: ''
@@ -303,7 +222,8 @@
       alarmQuery: {
         deviceType: '',
         alarmType: ''
-      }
+      },
+      showList: false
     }
   },
   mounted() {
@@ -311,15 +231,17 @@
     this.initData()
   },
   methods: {
+    // 隐藏或显示左侧列表
     tableclick() {
       this.showtable = !this.showtable
     },
+    // 点击列表中的行，调整地图视角
     rowClick(row) {
       if (this.tab === 'lamp') {
         for (var i = 0; i < this.iconlist.length; i++) {
           if (this.iconlist[i].options.id === row.lampId) {
             console.log(this.iconlist[i])
-            this.map.setView(this.iconlist[i]._latlng, 17)
+            this.map.setView(this.iconlist[i]._latlng, 19)
             // this.map.setView({ lat: cenLat, lng: cenLng }, 18)
           }
         }
@@ -338,11 +260,11 @@
       }
     },
     async search() {
+      console.log('outQuery', this.lampQuery)
       this.listLoading = true
       if (this.tab === 'lamp') {
-        const detail = await getLampList(this.lampQuery)
-        this.lamplist = detail.data
-        this.list = this.lamplist
+        await this.getlamp()
+        this.showList = true
       } else if (this.tab === 'circuit') {
         const detail = await getCircuitList(this.circuitQuery)
         this.ciulistlist = detail.data
@@ -358,10 +280,24 @@
       }
       this.listLoading = false
     },
+    resetLampQuery() {
+      this.lampQuery = {
+        lampCode: '',
+        status: '',
+        lampStreet: '',
+        lampArea: '',
+        lampboxCode: '',
+        lampboxStreet: '',
+        lampboxArea: '',
+        circuitCode: ''
+      }
+    },
     async tabClick(tab, event) {
       this.listLoading = true
       if (tab.name === 'lamp') {
         this.bottombtn = 'lamp'
+        this.resetLampQuery()
+        this.showList = false
         this.getlamp('', '', '')
         this.lampQuery.status = ''
         this.lampQuery.circuitId = ''
@@ -471,20 +407,20 @@
     async initData() {
       const resDetail = await getLampStatus()
       this.status = resDetail.data
-      const lampDetail = await getLampList(this.lampQuery)
-      this.lamplist = lampDetail.data
-      this.list = this.lamplist
-      const circuitDetail = await getCircuitList()
-      this.circuitlist = circuitDetail.data
+      // const lampDetail = await getLampList(this.lampQuery)
+      // this.lamplist = lampDetail.data
+      // this.list = this.lamplist
+      // const circuitDetail = await getCircuitList()
+      // this.circuitlist = circuitDetail.data
       const lampboxDetail = await getLampBoxList()
       this.lampboxlist = lampboxDetail.data
       const alarmDetail = await getAlarmList()
       this.alarmlist = alarmDetail.data
-      this.getlamp('', '', '')
+      this.getlamp()
 
       // 获取道路列表
-      const streetList = await getAllStreet(null)
-      this.streetList = streetList.data
+      // const streetList = await getAllStreet(null)
+      // this.streetList = streetList.data
     },
     removemarkers() {
       for (var i = 0; i < this.iconlist.length; i++) {
@@ -529,9 +465,10 @@
     },
     async getlamp(status, circuitId, lampBoxId) {
       this.removemarkers()
-      this.lampQuery.status = status
-      this.lampQuery.circuitId = circuitId
-      this.lampQuery.lampBoxId = lampBoxId
+      // this.lampQuery.status = status
+      // this.lampQuery.circuitId = circuitId
+      // this.lampQuery.lampBoxId = lampBoxId
+      console.log('getLamp', this.lampQuery)
       const resDetail = await getLampList(this.lampQuery)
       this.lamplist = resDetail.data
       if (this.lamplist.length === 0) {
@@ -572,32 +509,42 @@
           }
           getlampDetail(e.target.options.id).then(response => {
             var data = response.data
-            var str = '<div style="font-size: 14px;padding: 6px"> ' +
-                '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">路灯详情信息</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯编号：</label>' + data.lampCode	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯类型：</label>' + data.lampTypeName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯状态：</label>' + data.statusName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯分组：</label>' + data.groupName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯功率(W)：</label>' + data.power	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器编号：</label>' + data.controllerCode	 + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器类型：</label>' + data.controllerTypeName		 + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器分组：</label>' + data.controllerGroupName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆编号：</label>' + data.lamppostCode + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆名称：</label>' + data.lamppostName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆类型：</label>' + data.lamppostTypeName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆分组：</label>' + data.postGroupName + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路编号：</label>' + data.circuitCode + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路名称：</label>' + data.circuitName + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路分组：</label>' + data.circuitGroupName	 + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位/高度(m)：</label>' + data.latitude + ';' + data.longitude + ' / ' + data.height + '</div>' +
-                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.height + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新电压(V)/电流值(A)：</label>' + data.latestVol + ' / ' + data.latestElec + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新功率(W)：</label>' + data.latestPower + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>' + data.latestTime + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
-                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
-                '</div>'
+            var str = `<div style="font-size: 14px;padding: 6px">`
+            // 标题：设备类型（路灯/灯箱）+设备编号+设备状态
+            str += `<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">` + '路灯' + data.lampCode
+            if (data.statusName) {
+              str += `——` + data.statusName
+            }
+            str += `</div>`
+            if (data.groupName) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯分组：</label>` + data.groupName	 + `</div>`
+            }
+            if (data.controllerCode) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器编号：</label>` + data.controllerCode	 + `</div>`
+            }
+            if (data.lamppostCode) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆编号：</label>` + data.lamppostCode	 + `</div>`
+            }
+            if (data.height) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度(m)：</label>` + data.height	 + `</div>`
+            }
+            if (data.latestVol) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">电压(V)：</label>` + data.latestVol	 + `</div>`
+            }
+            if (data.latestElec) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">电流(A)：</label>` + data.latestElec	 + `</div>`
+            }
+            if (data.latestPower) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">功率(W)：</label>` + data.latestPower	 + `</div>`
+            }
+            if (data.latestTime) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>` + data.latestTime	 + `</div>`
+            }
+            if (data.streetName || data.address) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>` + data.streetName + data.address	 + `</div>`
+            }
+            // todo 开关灯按钮
+            str += `</div>`
             var popup = L.popup().setContent(str)
             e.target.dragging._marker.bindPopup(popup).openPopup()
             e.target.dragging._marker.openPopup()
@@ -631,25 +578,35 @@
           id: this.lampboxlist[i].id
         }).addTo(this.map)
         item.on('click', function(e) {
+          console.log(e.target.options)
           if (e.target.dragging._marker._popup) {
             e.target.dragging._marker.unbindPopup()
           }
           getLampBoxDetail(e.target.options.id).then(response => {
             var data = response.data
             console.log(response.data)
-            var str = '<div style="font-size: 14px;padding: 6px"> ' +
-              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">灯箱详情信息</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱编号：</label>' + data.lampboxCode	 + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱名称：</label>' + data.lampboxName	 + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName	 + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位：</label>' + data.latitude + ';' + data.longitude + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电流(A)：</label>' + data.elecA + ' / ' + data.elecB + ' / ' + data.elecC + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电压(V)：</label>' + data.volA + ' / ' + data.volB + ' / ' + data.volC + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相功率(W)：</label>' + data.powerA + ' / ' + data.powerB + ' / ' + data.powerC + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">上传时间：</label>' + data.upTime + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
-              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
-              '</div>'
+            var str = `<div style="font-size: 14px;padding: 6px">`
+            // 标题：设备类型（路灯/灯箱）+设备编号
+            str += `<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">` + '灯箱' + data.lampboxCode + `</div>`
+            if (data.lampboxName) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱名称：</label>` + data.lampboxName	 + `</div>`
+            }
+            if (data.elecA || data.elecB || data.elecC) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电流(A)：</label>` + data.elecA + `/` + data.elecB + `/` + data.elecC + `</div>`
+            }
+            if (data.volA || data.volB || data.volC) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电压(V)：</label>` + data.volA + `/` + data.volB + `/` + data.volC + `</div>`
+            }
+            if (data.powerA || data.powerB || data.powerC) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相功率(W)：</label>` + data.powerA + `/` + data.powerB + `/` + data.powerC + `</div>`
+            }
+            if (data.latestTime) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">上传时间：</label>` + data.latestTime	 + `</div>`
+            }
+            if (data.streetName || data.address) {
+              str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>` + data.streetName + data.address	 + `</div>`
+            }
+            str += `</div>`
             var popup = L.popup().setContent(str)
             e.target.dragging._marker.bindPopup(popup).openPopup()
             e.target.dragging._marker.openPopup()
@@ -746,6 +703,7 @@
       }
       return 5
     },
+    // 初始化地图
     init() {
       const map = L.map('map', {
         minZoom: 2,
diff --git a/static/project.config.json b/static/project.config.json
index 79931b8..0afe517 100644
--- a/static/project.config.json
+++ b/static/project.config.json
@@ -1,5 +1,5 @@
 {
-  "title": "基础资源系统",
+  "title": "智慧照明系统",
   "baseUrl": "http://127.0.0.1:11308/",
   "lampBasePath": "",
   "mainPage": "http://111.198.10.15:11404/dcms/",